问题：为什么 AI 生成的前端页面「一眼 AI」

用 AI 写一个 Dashboard 页面，回车按下后，生成的结果大概率是这样的：蓝紫渐变铺满背景，白色卡片浮在上面，左上角一个 emoji 火箭，标题字号比正文大三倍，底部一排按钮——主按钮亮蓝色，副按钮半透明毛玻璃。

每次都像从同一个模板里吐出来的。不用看代码，一眼就知道是 AI 写的。

问题不在 AI 的能力上。

把约束写进配置文件，让 AI 在动手之前就知道什么不能做，出来的东西就完全不同了。

五大反模式与解法

下面是五个踩得最多的坑，每个都有对比效果、解决思路和对应的 prompt 片段。

一、配色层：蓝紫渐变是第一重灾区

AI 对「科技感」的第一联想就是蓝紫渐变。linear-gradient(to right, #6366f1, #8b5cf6) 这类写法几乎成了肌肉记忆——不管是登录页还是设置面板，背景大概率是这个色。

另一个配色问题是颜色太多太散。一个组件里同时出现五六种颜色，主色、辅色、强调色、状态色全部摊开，看起来像组件库的演示页，不像真正在用的产品。

解法：给 AI 一套固定的颜色变量，明确主色和中性色的边界，再加禁止清单。

Color Rules:
- Primary: use CSS variable --color-primary only
- Background: white (#ffffff) or light gray (#f8f9fa) only, no gradients
- Text: #111827 for primary text, #6b7280 for secondary
- Accent: one accent color only, use sparingly
- Forbidden: blue-purple gradients, neon colors, rainbow palettes
- No more than 3 brand colors in any single view

这条规则的核心不是限制 AI 的发挥，而是把「配色」从每次随机生成变成从预设系统里取值。一旦颜色锁定在变量上，整个页面的一致性会直接提升一个档次。

二、装饰层：emoji 和毛玻璃

Emoji 是毁掉仪表盘质感最快的方式。没有图标库的时候，AI 会直接拿 🔥💡✅🚀 充数——产品界面和聊天消息的气质完全不同，emoji 一上来就把整体感拉低了。

毛玻璃是另一个重灾区。backdrop-filter: blur(10px) 加半透明背景，AI 特别喜欢用这个来表达「高级感」。但毛玻璃要成立，需要很特定的底色和层次关系。随手加上去，大多数时候出来的不是通透，而是脏。

解法：指定图标库，把 emoji 和毛玻璃踢出默认选项。

Decoration Rules:
- Icons: use Lucide, Heroicons, or Phosphor — pick one set and stick to it
- Icon size: 16px inline with text, 20px standalone
- No emoji as functional icons in any UI element
- No glassmorphism (backdrop-filter: blur) unless explicitly requested
- No decorative gradients on containers or backgrounds
- Shadows: functional only, not decorative

图标库的选择不太重要，重要的是统一。Lucide、Heroicons、Phosphor 都行，选一个之后全部用它，不要混着来。

三、结构层：卡片堆砌和阴影滥用

让 AI 设计一个界面，大概率得到一堆卡片。每张卡片都有 box-shadow，有时还有 border-radius: 16px，再叠一层 border: 1px solid rgba(255,255,255,0.1)。

单看一张卡片没问题。但整个页面都是这个结构，就会有一种廉价感——不是设计出来的布局，而是用同一个模子堆叠出来的。阴影尤其明显，当每个元素都在「浮」的时候，层次感反而消失了。

解法：砍掉多余的阴影层。卡片用 border 或 shadow 二选一，不要两者叠加。

Structure Rules:
- Cards: use either border (1px solid #e5e7eb) OR light shadow, not both
- Shadow scale: only 2 levels allowed
  - Level 1: box-shadow: 0 1px 3px rgba(0,0,0,0.08)
  - Level 2: box-shadow: 0 4px 12px rgba(0,0,0,0.1)
- Border radius: 6px or 8px only, no 16px+ rounded corners
- No shadow on every element — use it to indicate elevation hierarchy
- Page layout should use whitespace and alignment, not just card grids

一个页面最多两层阴影深度。大部分元素不需要阴影，只有确实需要表达「浮起来」的地方才用。

苏米注：这个原则和 CSS 中的「层叠上下文」概念一脉相承——层次越多，管理越复杂。克制使用阴影，反而能让关键信息更突出。

四、字体层：层级乱、单位混

字体层的问题不是某个字号写错了，而是根本没有阶梯。一处写 font-size: 1.5rem，另一处写 font-size: 24px，第三处又是 font-size: large——三种单位、三种取值逻辑，散在不同组件里，累积下来整个页面的文字层级就乱了。

解法：给一个固定阶梯，锁死单位。

Typography Rules:
- Font scale (px): 12 / 14 / 16 / 20 / 24 / 32
- Define as CSS variables: --text-xs, --text-sm, --text-base, --text-lg, --text-xl, --text-2xl
- Body text: font-weight 400
- Headings: font-weight 600
- Line height: 1.5 for body, 1.25 for headings
- Unit: use rem or px consistently — do not mix units
- No arbitrary font sizes outside the defined scale

字号阶梯不需要多复杂，六个值就够覆盖绝大多数场景。关键是让 AI 只从这六个值里选，而不是每次自己算一个。

五、工程层：内联样式和魔法值

AI 生成的代码里，内联样式几乎是必然出现的。style={{ paddingTop: '13px', marginLeft: '7px' }} 这种写法，每次都是不同的随机数字，完全无法复用和维护。

颜色也一样。#1a73e8 出现在这里，#4285f4 出现在那里，两个都是蓝色，但没有任何关联，也没有语义变量名。改一个地方要全局搜索替换，漏一个就是视觉 bug。

解法：所有设计值走变量，禁止内联样式和魔法值。

Engineering Rules:
- All colors must use CSS variables (--color-*)
- All spacing must use design tokens (--space-*)
- All font sizes must use typography scale variables (--text-*)
- No inline styles for layout, color, or typography
- No magic numbers: every value must map to a defined token
- Spacing grid: 4px base — allowed values are 4/8/12/16/24/32/48/64
- No arbitrary values like 13px, 7px, 23px
- Component styles must be consistent across the entire page

这条规则的效果不只是规范。一旦强制要求 AI 用变量，生成的组件之间自然就有了一致性——它们在引用同一套设计系统，而不是各自硬编码。

完整设计规则 Prompt

五个维度的约束汇总在这里，直接复制进 CLAUDE.md、.cursorrules 或 system prompt 就能用。

# Frontend Design System Rules

## Color System
- Define CSS variables: --color-primary, --color-secondary, --color-neutral-*, --color-success, --color-warning, --color-error
- Backgrounds: white (#ffffff) or light gray (#f8f9fa, #f3f4f6) only
- No gradients on backgrounds or buttons
- No blue-purple gradients (linear-gradient with purple/violet/indigo) anywhere
- No neon colors, no rainbow palettes
- No more than 3 brand colors in any single view
- Text colors: #111827 (primary), #6b7280 (secondary), #9ca3af (tertiary)

## Typography
- Font scale: 12px / 14px / 16px / 20px / 24px / 32px
- CSS variables: --text-xs, --text-sm, --text-base, --text-lg, --text-xl, --text-2xl
- Body: font-weight 400, line-height 1.5
- Headings: font-weight 600, line-height 1.25
- Do not mix px, rem, em — pick one unit system
- No arbitrary font sizes outside the defined scale

## Spacing
- 4px base grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px
- CSS variables: --space-1 through --space-16
- No magic numbers (13px, 7px, 23px, etc.)
- Consistent padding within component families

## Components
Cards:
- Use either border (1px solid #e5e7eb) OR shadow, not both
- Shadow level 1: 0 1px 3px rgba(0,0,0,0.08)
- Shadow level 2: 0 4px 12px rgba(0,0,0,0.1)
- Border radius: 6px or 8px, no 16px+

Buttons:
- Primary: solid fill, no gradient
- Secondary: outline or ghost
- Hover: darken by 10%, not color switch
- No rounded-full on rectangular buttons

Inputs:
- Border: 1px solid #d1d5db
- Border radius: 6px
- Focus: border-color change + outline, no glow

## Icons
- Use one icon set consistently: Lucide / Heroicons / Phosphor
- Size: 16px inline, 20px standalone
- No emoji as functional icons

## Forbidden Patterns
- No blue-purple gradients
- No glassmorphism unless explicitly requested
- No emoji icons
- No excessive shadows on every element
- No inline styles for color, spacing, or typography
- No magic numbers — every value must reference a design token
- No more than 2 shadow depth levels per page

模型选择建议

上面这些规则在 Claude 和 GPT 上都能用。但专门聊前端生成，Gemini 会更合适——CSS 布局、组件结构、比例感和留白，同一套 prompt 喂进去，它出来的页面后续调整次数会少很多。不是说其他模型不能用，而是专业领域确实有差异。

加了规则之后能做到什么程度

光讲规则不直观。下面是一个用完整 prompt 加 Gemini 生成的页面，没有手动调整样式，直接一次生成的结果。

不是说它完美，但它不再是「一眼 AI」了。配色从变量里取，间距在网格上，阴影只有需要层次的地方才出现，字号严格走阶梯。这些加起来，就是从「AI 风」到「产品风」的差距。

苏米注：规则本身不复杂，复杂的是意识到需要它。大多数时候不是 AI 写不好前端，而是没人告诉它什么不能做。把这些设计约束当成「负面提示词」来理解，和 AI 绘画里写「ugly, blurry, deformed」是一个道理。