最近用 AI 写了不少前端页面，有个感受越来越强烈：它写结构、接逻辑、处理响应式都没问题，但出来的东西——你懂那种感觉——一眼就知道是 AI 出的。
也不是说丑。就是那种很标准的、很正确的、毫无个性的「AI 风」：蓝紫渐变背景，白色圆角卡片，毛玻璃按钮，再撒几个 emoji 当图标。你说它错吧，也不算错。你说它好吧，那也不至于。
最烦的是，每次改完这个项目，下个项目又是同一套。因为 AI 的审美默认值是固定的，你不干预，它就永远往那个方向走。
后来我琢磨出两条路：一条是在 prompt 里把约束写死，告诉它什么不能做；另一条更偷懒——直接把别人的设计语言打包丢给它，连描述都省了。两条路我都在用，下面聊聊。
整理一份规则清单，放进 CLAUDE.md 里。核心逻辑就一句话：在 AI 动手之前就把审美红线画好，别等生成出来再骂它。
踩坑踩多了，最该拦住的就这五件事——
AI 一看到「科技感」三个字，条件反射就是 linear-gradient(to right, #6366f1, #8b5cf6)。不管你是做财务系统还是博客，它都给你整上这个渐变。然后一个页面里塞五六种颜色，主色辅色强调色状态色全部摊开，活像组件库演示页。
把颜色锁在变量上之后，整个页面的一致性直接上了一个台阶。不是因为变量有多神奇，而是 AI 每次取色都从同一套系统里拿，不会再东一个西一个。
没有图标库的时候，AI 拿 🔥💡✅🚀 充数。产品界面不是聊天消息，emoji 一上来就把质感拉低了。
毛玻璃（backdrop-filter: blur(10px)）也是同理。AI 觉得加了毛玻璃就有「高级感」，但毛玻璃成立的前提是底色和层次都对。随手加上去，出来的不是通透，是脏。
我的规则很简单：指定一套图标库（Fontawesome / Bootstrap / Lucide / Heroicons 随便哪个），然后直接禁掉 emoji 图标和毛玻璃，除非我显式要求。
AI 特别爱给每张卡片加 box-shadow，再配上 border-radius: 16px 和半透明描边。单看一张没问题，满屏都是这结构就廉价了。当所有元素都在「浮」的时候，层次感反而消失。
我现在：一个页面最多两层阴影，大部分元素不需要阴影。卡片用 border 或 shadow 二选一，不叠加。圆角统一 6px 或 8px，不要 16px+。
AI 写字体有个毛病：一处 1.5rem，一处 24px，再来一处 large。三种单位、三种取值逻辑散在不同组件里，文字层级全乱。
我锁死了六档：12 / 14 / 16 / 20 / 24 / 32，全部定义为 CSS 变量。单位统一，不许混着来。字号只能从这六档里选，不准自己算一个。
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。
这个项目把 Notion、Spotify、Vercel、Figma 这几十家公司的视觉语言——颜色色值、字体族、间距规则、圆角参数、按钮样式、排版节奏——全提炼成一个 markdown 文件。
拿 Spotify 的举例，里面大致长这样：
| 类别 | 写什么 |
|---|---|
| 颜色 | 主色 #1DB954，背景 #121212，精确到每个角色 |
| 字体 | 字体族、标题多大、正文多大、行高、字重变化 |
| 间距 | 元素之间留多少空间，4px / 8px 的倍数网格 |
| 组件 | 按钮圆角、卡片阴影、描边粗细、hover 怎么变 |
| 排版 | 内容区最大宽度、对齐方式、分区间距 |
一个品牌的视觉 DNA，差不多就是这五样东西。AI 拿到这份文件，就像一个干活飞快的前端拿到了设计稿——不用猜，照着来。
有人做过实验：同一句 prompt，分别挂上 Claude、Spotify、Vercel、Figma 四份不同的 DESIGN.md，生成同一个虚构产品的官网首页。
文案一字不改，页面结构一模一样，出来的四张页面气质截然不同。你一眼就能认出哪个是 Spotify 那种暗黑+绿调，哪个是 Vercel 那种冷白+黑字。
变的内容是零，变的感受是全部。这就是设计系统的力量。
1
找一份 DESIGN.md。去 GitHub 搜 awesome-design-md，挑一个你喜欢的品牌风格，把文件内容复制出来。
2
和 prompt 一起喂给 AI。把「我要做什么页面」的描述 + DESIGN.md 内容一起丢进去，加一句「严格遵循 DESIGN.md 的设计规范」。
3
微调收尾。第一次生成通常能到 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
说实话，规则本身不难写，难的是意识到需要写。我之前一直觉得「AI 写的前端就这样吧」，每次生成完手动调半天，然后下个项目又重蹈覆辙。
后来想通了：AI 不笨，它只是没人告诉它审美边界在哪。把约束提前写好，它每次生成都从更高的起点出发。再懒一点，直接塞一份 DESIGN.md，连边界都帮你定义好了。
参考项目：awesome-design-md
那年 • 今日
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。