让AI写前端不难，难的是让它别那么AI里AI气

最近用 AI 写了不少前端页面，有个感受越来越强烈：它写结构、接逻辑、处理响应式都没问题，但出来的东西——你懂那种感觉——一眼就知道是 AI 出的。

也不是说丑。就是那种很标准的、很正确的、毫无个性的「AI 风」：蓝紫渐变背景，白色圆角卡片，毛玻璃按钮，再撒几个 emoji 当图标。你说它错吧，也不算错。你说它好吧，那也不至于。

最烦的是，每次改完这个项目，下个项目又是同一套。因为 AI 的审美默认值是固定的，你不干预，它就永远往那个方向走。

后来我琢磨出两条路：一条是在 prompt 里把约束写死，告诉它什么不能做；另一条更偷懒——直接把别人的设计语言打包丢给它，连描述都省了。两条路我都在用，下面聊聊。

先搞定「什么不能做」

整理一份规则清单，放进 CLAUDE.md 里。核心逻辑就一句话：在 AI 动手之前就把审美红线画好，别等生成出来再骂它。

踩坑踩多了，最该拦住的就这五件事——

1. 蓝紫渐变，给我停

AI 一看到「科技感」三个字，条件反射就是 linear-gradient(to right, #6366f1, #8b5cf6)。不管你是做财务系统还是博客，它都给你整上这个渐变。然后一个页面里塞五六种颜色，主色辅色强调色状态色全部摊开，活像组件库演示页。

❌ 别这样

蓝紫渐变铺满背景
霓虹色、彩虹色点缀
一个视图里超过 3 种品牌色

✅ 这样来

所有颜色走 CSS 变量
背景只用白色或浅灰
主色一个、辅色一个，强调色克制使用

把颜色锁在变量上之后，整个页面的一致性直接上了一个台阶。不是因为变量有多神奇，而是 AI 每次取色都从同一套系统里拿，不会再东一个西一个。

2. emoji 和毛玻璃，再见

没有图标库的时候，AI 拿 🔥💡✅🚀 充数。产品界面不是聊天消息，emoji 一上来就把质感拉低了。

毛玻璃（backdrop-filter: blur(10px)）也是同理。AI 觉得加了毛玻璃就有「高级感」，但毛玻璃成立的前提是底色和层次都对。随手加上去，出来的不是通透，是脏。

我的规则很简单：指定一套图标库（Lucide / Heroicons / Phosphor 随便哪个），然后直接禁掉 emoji 图标和毛玻璃，除非我显式要求。

3. 别什么元素都浮着

AI 特别爱给每张卡片加 box-shadow，再配上 border-radius: 16px 和半透明描边。单看一张没问题，满屏都是这结构就廉价了。当所有元素都在「浮」的时候，层次感反而消失。

我现在的规矩：一个页面最多两层阴影，大部分元素不需要阴影。卡片用 border 或 shadow 二选一，不叠加。圆角统一 6px 或 8px，不要 16px+。

4. 字号阶梯，固定六档

AI 写字体有个毛病：一处 1.5rem，一处 24px，再来一处 large。三种单位、三种取值逻辑散在不同组件里，文字层级全乱。

我锁死了六档：12 / 14 / 16 / 20 / 24 / 32，全部定义为 CSS 变量。单位统一，不许混着来。字号只能从这六档里选，不准自己算一个。

5. 内联样式和魔法值

style="padding-top: 13px; margin-left: 7px"——这种魔法数字每次都不一样，没法复用也没法维护。颜色也是，#1a73e8 和 #4285f4 都是蓝色，但彼此没关联也没语义。改一处得全局搜，漏一个就是 bug。

所有设计值走变量，间距走 4px 网格（4/8/12/16/24/32/48/64），禁止出现 13px、7px、23px 这种奇怪数字。

核心思路

上面五条总结成一句话：不是限制 AI 的发挥，而是让它从一套预设系统里取值，而不是每次随机。 一旦颜色、字号、间距都锁定在变量上，组件之间自然就有一致性了。

再搞定「我想要什么样的」

前面说的是「防负分」——把最拉垮的默认值挡掉。但如果你的需求是「我想让页面看起来像 Notion」或者「我想要 Vercel 那种冷淡感」，光靠禁止清单不够，你还得告诉它你想要什么。

问题来了——你描述得出来吗？

我知道自己不喜欢 Bootstrap 默认蓝，但你要我用文字描述出「Vercel 那种调调」具体是什么，我确实说不清楚。能感知到区别，但写不出来。

后来发现一个开源项目叫 awesome-design-md，它的思路我特别认可：你不用描述好看是什么，直接把别人的「好看」打包成文件丢给 AI。

DESIGN.md 是什么

这个项目把 Notion、Spotify、Vercel、Figma 这几十家公司的视觉语言——颜色色值、字体族、间距规则、圆角参数、按钮样式、排版节奏——全提炼成一个 markdown 文件。

拿 Spotify 的举例，里面大致长这样：

类别	写什么
颜色	主色 `#1DB954`，背景 `#121212`，精确到每个角色
字体	字体族、标题多大、正文多大、行高、字重变化
间距	元素之间留多少空间，4px / 8px 的倍数网格
组件	按钮圆角、卡片阴影、描边粗细、hover 怎么变
排版	内容区最大宽度、对齐方式、分区间距

一个品牌的视觉 DNA，差不多就是这五样东西。AI 拿到这份文件，就像一个干活飞快的前端拿到了设计稿——不用猜，照着来。

用起来的效果

有人做过实验：同一句 prompt，分别挂上 Claude、Spotify、Vercel、Figma 四份不同的 DESIGN.md，生成同一个虚构产品的官网首页。

文案一字不改，页面结构一模一样，出来的四张页面气质截然不同。你一眼就能认出哪个是 Spotify 那种暗黑+绿调，哪个是 Vercel 那种冷白+黑字。

变的内容是零，变的感受是全部。这就是设计系统的力量。

怎么上手

找一份 DESIGN.md。去 GitHub 搜 awesome-design-md，挑一个你喜欢的品牌风格，把文件内容复制出来。

和 prompt 一起喂给 AI。把「我要做什么页面」的描述 + DESIGN.md 内容一起丢进去，加一句「严格遵循 DESIGN.md 的设计规范」。

微调收尾。第一次生成通常能到 80 分，剩下 20 分让 AI 迭代或者自己改 CSS。比从零开始快太多。

有意思的是，因为 DESIGN.md 是纯文本，你可以把不同品牌的规则混搭——比如用 Figma 的颜色系统 + Vercel 的排版节奏，创造出一种谁都不像但又很舒服的风格。这事儿截个图扔给 Google Stitch 是做不到的。

现在的完整规则

两套方法结合之后，我目前在 CLAUDE.md 里放的就是下面这份完整版。前面是通用的设计约束，后面根据项目需要再挂一份 DESIGN.md。直接抄走改改就能用：

css

# 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 anywhere - No neon colors, no rainbow palettes - No more than 3 brand colors in any single view - Text: #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 - Pick one unit system (px or rem), do not mix - 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: border 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: solid fill, no gradient; hover darkens 10% - Inputs: 1px solid #d1d5db, radius 6px, no glow on focus ## Icons - Use one icon set consistently: Lucide / Heroicons / Phosphor - Size: 16px inline, 20px standalone - No emoji as functional icons

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