如何让 AI 生成的前端代码摆脱廉价感

代码能运行，布局能渲染，数据也能加载。但总有什么地方不对劲——内边距参差不齐，颜色感觉别扭，而且没有任何动画。你只需两秒就能看出这是 AI 写的。

这并不是因为 AI 工具能力不足。Claude、Cursor、v0 和 Copilot 生成可用 UI 代码的能力相当出色。问题在于，它们生成的是通用型 UI——训练数据的平均值，被磨平、取平均之后，个性荡然无存。

下面是一份缩小这种差距的实用指南，其中列出的工具与方法今天就能使用。

“廉价”究竟意味着什么#

着手修正之前，先给这些症状起个名字。AI 生成的前端代码通常会稳定地在六个方面出问题：

1. 间距不一致。 AI 不知道你的间距体系究竟是 4px、8px 还是 12px。每个组件的内外边距都是各自独立猜出来的：一张卡片内边距 16px，下一张却是 20px；各区块之间的距离也忽远忽近。

2. 缺少色彩系统。 AI 的默认输出往往是浅灰背景、蓝色主按钮和白色卡片，因为这些是其训练数据中最常见的模式。它不知道你的品牌色、强调色板，也不知道深色模式应当如何映射。

3. 忘记各种状态。 :hover、:focus、:active、:disabled——AI 生成默认状态后便停手了。用户得不到任何反馈，不知道按钮是否被点击、输入框是否获得焦点，或者提交操作是否正在加载。

4. 毫无动效。 整个页面瞬间渲染完毕，没有过渡、没有反馈、没有入场动画。这种“静态弹出”的效果，是最容易识别的 AI 指纹。

5. 字体排版扁平。 AI 往往到处使用相同的字号和字重，标题层级混在一起，行高、字距和最大宽度则经常完全缺失。

6. 没有品牌个性。 AI 生成的是家具，而不是家。它没有定制化设计语言，没有独特的交互细节，文案也没有自己的声音。

核心洞见： AI 生成的 UI 并不显得丑，而是显得平。廉价感来自缺少经过深思熟虑的选择，而不是做出了糟糕的选择。

第一步：向 AI 提供设计系统规范#

这是效果最显著的一项改动。在项目根目录放置一份 DESIGN.md，明确告诉 AI 你的设计约束。

下面是一份最简可用示例：

# 设计系统

## 间距
- 基础单位：4px
- 卡片内边距：24px
- 组件间距：16px
- 区块间距：32px

## 颜色
- 主色：#1a3a5c
- 强调色：#635bff
- 中性色：#333333（正文）、#666666（弱化文字）、#f5f5f5（背景）
- 成功：#27ae60 / 警告：#f39c12

## 字体排版
- 字体：系统字体栈
- 标题：1.75rem/700，副标题：1.25rem/600，正文：1rem/400
- 行高：1.6
- 最大阅读宽度：680px

## 圆角 / 阴影 / 过渡
- 按钮：6px，卡片：8px，模态框：12px
- 卡片阴影：0 2px 8px rgba(0,0,0,0.08)
- 默认过渡：200ms ease-in-out

为什么有效： 一旦你告诉 AI 间距必须落在 4px 网格上，它就不会再生成 padding: 15px 和 margin: 18px。改进立刻可见。

资源：

• DESIGN.md 规范——面向 AI 可读设计系统文件的开放标准
• design-md-library——14 份以上可直接使用的设计系统文件，涵盖 SaaS、金融科技、医疗、电商和创意机构网站

第二步：用项目配置文件约束代码风格#

大多数 AI 编程工具都会遵循 CLAUDE.md、AGENTS.md 或 .cursorrules 等项目级配置文件。用它们把你的质量规则正式固定下来：

# 前端代码生成规则

## 通用规则
- 每个交互元素都必须定义悬停、焦点、激活和禁用状态
- 颜色必须引用设计令牌，不得硬编码十六进制值
- 所有间距必须遵循 4px 基础网格
- 每个交互元素都必须带有过渡或动画

## 组件要求
- 按钮：4 种变体（主要 / 次要 / 轮廓 / 幽灵），每种均有 4 种状态
- 卡片：统一使用 8px 圆角、24px 内边距和轻微阴影
- 模态框：背景遮罩 + 缩放入场动画 + 点击外部关闭
- 表单：标签置于顶部，红色错误消息 + 图标，输入框聚焦光晕

## 禁止事项
- 禁止内联样式（动态值除外）
- 禁止没有过渡的显示/隐藏切换
- 禁止硬编码颜色值

AI 会在每轮生成前读取这些文件。实际上，你是在给模型套上一件设计束身衣——而且确实有效。

第三步：写出更好的提示词#

同一个请求，换一种表述，产出质量可能天差地别：

❌ 糟糕的提示词：

“给我做一个登录页面。”

✅ 优秀的提示词：

“制作一个受 Stripe 设计启发的登录页面：白色背景、深灰色正文、主色 #635bff、按钮圆角 6px、居中的卡片布局，并包含悬停和聚焦状态以及表单验证反馈。”

输出的差别显而易见。

可复用的提示词模板：

生成一个[组件类型]。

设计约束：
- 风格参考：[Stripe / Linear / Vercel / 特定品牌]
- 颜色：[主色、强调色、背景色]
- 间距：[基础单位]
- 字体：[字体名称]
- 状态覆盖：悬停、聚焦、激活、禁用、加载
- 动效：过渡时长 [X]ms，使用 [ease-out] 缓动
- 响应式：[断点说明]
- 禁止：[内联样式 / 特定库]

捷径： 直接点出一个真实品牌，比用 100 个词描述它更有效。AI 已经知道 Stripe、Linear 和 Vercel 长什么样。引用品牌，相当于把它完整的设计词汇载入上下文。

第四步：微交互——区分专业与业余的那 20%#

AI 默认生成静态 UI。加入微交互，是让页面从“还行”迈向“专业”最有效率的方法。

值得实现的低成本微交互：

关键规则： 时长（200～300ms）和缓动方式（ease-out）要保持一致。动画参数不统一会制造混乱感，甚至比完全没有动画更糟。

第五步：严守字体排版与间距纪律#

好设计做减法多于做加法。下面这些规则能立刻整理好任何 AI 生成的页面：

1. 最大阅读宽度： 正文内容宽度控制在 680px 以内（每行约 65～75 个字符）
2. 行高： 正文至少为 1.6，标题为 1.2～1.3
3. 避免纯黑： 用 #1a1a1a 或 #333 代替 #000
4. 灰度层级： 正文 #333、弱化文字 #666、占位符 #999、禁用状态 #ccc
5. 留白法则： 删去 20% 的内容，剩余 80% 看起来会好上 50%

推荐的 Tailwind 配置：

// tailwind.config.js — 4px 间距网格
spacing: {
  '0.5': '2px', '1': '4px', '1.5': '6px', '2': '8px',
  '3': '12px', '4': '16px', '5': '20px', '6': '24px',
  '8': '32px', '10': '40px', '12': '48px',
}

第六步：自动检查与后处理#

用简单脚本抓出常见的廉价感模式：

# 检查硬编码颜色
grep -rn 'color: #[0-9a-f]\{6\}' src/ --include="*.tsx" | grep -v 'colors.ts'

# 检查没有过渡的悬停/聚焦状态
grep -rn ':hover\|:focus' src/ --include="*.css" | grep -v 'transition'

# 检查不符合 4px 基础网格的间距值
grep -rn 'padding\|margin' src/ --include="*.css" | grep -oP '[0-9]+px' | sort -u

或者使用现成的约束工具：

• ui-stack（开源）——一项 Claude Code 设计系统技能，可自动强制执行 8px 网格、语义化颜色、状态覆盖和微交互
• 编写自定义 ESLint 规则，标记未定义的 CSS 变量引用

前后对比#

❌ 不加约束的 AI 输出：

<button style="background: #0066ff; color: white; padding: 10px 20px;
  border: none; border-radius: 4px; cursor: pointer;">提交</button>

问题：颜色硬编码、内边距不落在网格上、没有任何状态与过渡，还使用了内联样式。

✅ 受设计约束的 AI 输出：

<button className="btn-primary">提交</button>

.btn-primary {
  background: var(--color-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all 200ms ease-out;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

工具链总结#

推荐工作流：

1. 项目设置——从 design-md-library 选择模板，或自己编写 DESIGN.md
2. 编码之前——将 CLAUDE.md / AGENTS.md 和设计令牌放入项目根目录
3. 编码期间——在提示词中写明“遵循项目配置中的设计系统”，并点出一个参考品牌
4. 编码之后——运行 lint 脚本，找出硬编码颜色和偏离网格的间距
5. 迭代——依据 DESIGN.md 审查每个新组件的一致性

最后的思考#

“廉价的 AI 味”不是能力问题，而是约束问题。除非你明确说明，否则 AI 模型并不知道你的设计标准。给它一份设计规范（DESIGN.md）、一份代码风格指南（CLAUDE.md），再建立迭代反馈循环，输出质量就会大幅跃升。

用一句话概括这个原则：

不要指望 AI 猜出你的设计标准。把标准定义出来，它就会遵循。

随着 DESIGN.md 等格式成为标准，AI 编程工具开始原生支持设计系统，这个问题会逐渐消退。但在今天，只有那些明确界定 AI 设计边界的开发者，才能做出不像 AI 生成的作品。

参考资料：

1. DESIGN.md 规范与资源库——design-md-web.pages.dev
2. ui-stack——GitHub：rashoodkhan/ui-stack
3. DesignArena——designarena.ai（众包 AI UI 基准）
4. shadcn/ui——ui.shadcn.com
5. Tailwind CSS——tailwindcss.com
6. Claude Code——docs.anthropic.com（CLAUDE.md 机制）