用DESIGN.md约束AI生成UI：从提示词工程到设计系统，消除机器味

1. 为什么AI生成的界面总让人一眼认出“机器味”1.1 从三个真实场景说起那种说不清的别扭感先描述几个你大概率遇到过的画面。第一个场景你让AI帮你生成一个后台管理面板。它很快吐出来一版——紫色渐变按钮、圆角卡片、大标题居中、下面一排图标配文字。功能没问题但你就是觉得“这玩意儿像模板站”。你说不上哪里丑但就是不想用。第二个场景你让AI改一个登录页。它把原来的设计推倒重来加了一堆阴影、发光、渐变边框还贴心地给你配了“科技感”的深色背景。结果整个页面像2015年的Dribbble概念稿好看但没法落地。第三个场景你让AI写一个移动端列表页。它给你的间距是8px、12px、16px、24px混着来字号有14、15、16、17四种颜色用了五种不同的灰。单看每个元素都还行拼在一起就“散”了。这三个场景的共同点是什么AI在做UI时是在“堆元素”而不是在“做决策”。它知道按钮长什么样、卡片长什么样、输入框长什么样但它不知道在这个页面里哪个元素该是主角、哪个该退到背景里、间距应该遵循什么节奏、颜色应该控制在几个以内。它没有“取舍”只有“添加”。这就是“AI味”的根源。不是AI画得丑是AI画得太“满”、太“平均”、太“没有主次”。1.2 “AI味”的五个典型症状你中了几个我把常见的“AI味”表现归纳成五类你可以对照看看症状一渐变滥用。紫色到蓝色的渐变几乎成了AI生成UI的默认皮肤。按钮渐变、标题渐变、背景渐变、边框也渐变。问题是渐变本身不是问题问题是AI不知道什么时候不该用渐变。一个企业级后台的表格行需要渐变吗不需要。但AI会给你加上。症状二圆角失控。卡片圆角16px、按钮圆角12px、输入框圆角8px、头像圆角50%。每个圆角单独看都合理但放在一起就没有统一的圆角语言。好的设计系统里圆角是有层级的——比如容器用大圆角、控件用中圆角、标签用小圆角形成节奏。AI往往是随机分配。症状三阴影堆叠。AI特别喜欢给元素加阴影而且往往是多层阴影叠加。卡片有阴影、按钮有阴影、下拉菜单有阴影、连文字都要加个投影。结果整个页面“浮”起来了没有层次感只有混乱感。症状四间距无节奏。这是最隐蔽也最致命的问题。AI生成的间距往往是“看起来差不多就行”——这里16px那里20px下面24px。人眼对间距的敏感度远超想象不统一的间距会让页面显得“脏”。症状五颜色数量失控。一个页面里出现七八种颜色主色、辅助色、强调色、警告色、成功色、信息色全上再加上各种透明度变体。颜色一多视觉焦点就散了用户不知道该看哪里。这五个症状背后其实是同一个问题AI缺少一套明确的“品味约束”。1.3 为什么“提示词工程”救不了UI的AI味很多人第一反应是那我提示词写详细点不就行了我试过。我写过这样的提示词“请使用极简风格主色调用深蓝色间距使用8的倍数圆角统一为12px不要使用渐变阴影只用在悬浮状态。”结果呢AI确实照做了——但它做出来的东西依然有AI味。为什么因为提示词是“点状约束”而设计是“系统约束”。你告诉它圆角12px它就把所有圆角都设成12px包括那些本该用更大圆角或更小圆角的地方。你告诉它不要渐变它就把所有渐变都去掉包括那个本该用渐变来引导视线的关键按钮。提示词能约束“做什么”但约束不了“什么时候不做”。而设计的品味恰恰体现在“知道什么时候该克制”。更深层的问题是提示词是线性的设计是网状的。你没法用一段文字描述清楚“这个页面的视觉层级应该是怎样的”“信息密度应该控制在什么范围”“留白应该占多大比例”。这些是系统性的决策不是几个参数能搞定的。所以我们需要换一个思路不是告诉AI“怎么做”而是给AI一套“判断标准”。这就是Google最近在推的“品味优先”思路的核心——用一份结构化的设计规范文件比如DESIGN.md把设计决策的“判断逻辑”写清楚让AI在生成UI时有据可依而不是凭感觉堆砌。2. DESIGN.md 到底解决了什么问题把“品味”变成可执行的约束2.1 从“描述风格”到“定义规则”的转变传统做法是告诉AI“我要什么风格”。比如“我要苹果风格”“我要Material Design”“我要极简风”。但“风格”是一个模糊的概念。什么叫苹果风格是毛玻璃效果是大标题是圆角卡片还是那种“说不清但一看就知道”的感觉AI理解不了“感觉”。它只能理解具体的规则。DESIGN.md的思路是把“风格”拆解成可执行的规则。不是告诉AI“我要极简”而是告诉AI“在这个页面里最多使用两种字体、三种颜色、四种间距值”。这就像教一个新人做设计。你不会跟他说“你要有品味”你会跟他说“标题和正文的字号比不要超过2:1”“主色和背景色的对比度要在4.5:1以上”“卡片之间的间距要大于卡片内部的间距”。DESIGN.md就是把这些“老设计师的直觉”写成文档让AI可以读取和执行。2.2 一份DESIGN.md里应该有什么六个核心模块根据我的实践一份能真正约束AI的DESIGN.md至少应该包含以下六个模块模块一颜色系统。不是简单列几个色值而是定义每个颜色的“角色”和使用场景。比如主色Primary只用于主要操作按钮和关键链接表面色Surface用于卡片、弹窗、面板的背景背景色Background用于页面底色文字色Text分为主要文字、次要文字、禁用文字三级边框色Border用于分割线和输入框边框关键是限制数量。一个页面里颜色角色不超过6个每个角色只有一个色值可以有透明度变体但要有明确规则。模块二间距系统。定义一套间距刻度比如4、8、12、16、24、32、48、64。然后规定组件内部间距使用4或8组件之间间距使用12或16区块之间间距使用24或32页面边距使用16或24关键是规定“什么时候用哪个值”而不是只给一堆数字。模块三字体系统。定义字号、字重、行高的组合。比如页面标题24px / 600 / 1.3区块标题18px / 600 / 1.4正文14px / 400 / 1.6辅助文字12px / 400 / 1.5关键是限制字号数量。一个页面里字号不超过4种。模块四圆角系统。定义圆角的层级关系。比如小圆角4px用于标签、徽章中圆角8px用于按钮、输入框大圆角12px用于卡片、弹窗全圆角999px用于头像、胶囊按钮关键是建立圆角与组件大小的对应关系。模块五阴影系统。定义阴影的层级。比如层级0无阴影用于平铺内容层级1轻微阴影用于卡片默认状态层级2中等阴影用于卡片悬浮状态层级3明显阴影用于弹窗、下拉菜单关键是规定“什么时候用哪一级”而不是给一堆阴影参数。模块六布局规则。定义页面结构的基本约束。比如内容最大宽度1200px栅格系统12列间距24px响应式断点768px、1024px、1440px页面边距移动端16px桌面端24px这六个模块组合起来就形成了一套“设计宪法”。AI在生成UI时不是凭感觉发挥而是在这套宪法框架内做选择。2.3 为什么是Markdown而不是JSON或YAML你可能会问为什么不直接用JSON或YAML来定义这些规则机器读取不是更方便吗我的实践体会是Markdown的优势在于“人机共读”。JSON和YAML是纯机器格式人写起来容易出错读起来也不直观。而Markdown是人和机器都能理解的格式。你可以用自然语言解释每条规则背后的意图同时用结构化的方式呈现具体参数。比如你可以这样写## 颜色系统 ### 主色 - 色值#2563EB - 用途仅用于主要操作按钮、关键链接、选中状态 - 禁止不要用于背景色、不要用于大面积填充 ### 表面色 - 色值#FFFFFF - 用途卡片、弹窗、面板的背景 - 禁止不要用于页面底色这种写法AI能读懂因为它能理解自然语言人也能读懂因为结构清晰。而且当设计规范需要调整时改Markdown比改JSON直观得多。更重要的是Markdown允许你写“为什么”。比如你可以写“主色只用于主要操作按钮因为一个页面里如果有多个主要操作用户就不知道哪个才是真正的重点。”这种解释AI能理解人也能理解而且能帮助AI在遇到边界情况时做出更合理的判断。2.4 一个反直觉的发现约束越多AI反而越有创造力这是我在实践中最大的意外收获。一开始我以为给AI越多约束它生成的东西就越死板。但实际恰恰相反当你把“不该做什么”定义清楚后AI在“该做什么”的范围内反而能做出更精准的选择。举个例子。之前我让AI生成一个数据表格页面它给我加了渐变表头、彩色标签、悬浮阴影、斑马纹、边框线整个表格像圣诞树。后来我写了一份DESIGN.md明确规定“表格不使用渐变、不使用斑马纹、标签颜色不超过两种、边框只使用底部1px分割线”。结果AI生成的表格干净利落信息密度反而更高了。为什么因为约束消除了不确定性。当AI知道“不能用渐变”时它就不会在渐变上浪费“决策预算”而是把精力放在真正重要的地方——比如列宽分配、对齐方式、空状态处理。这就像写代码时的代码规范。看起来规范限制了你的自由但实际上它让你不用在“用Tab还是空格”“用单引号还是双引号”这种小事上纠结可以把精力放在真正的逻辑上。3. 把DESIGN.md接入Claude Code的完整实操链路3.1 环境准备你需要什么在开始之前先确认你手头有什么。必备项一个可以运行Claude Code的环境本地终端或远程开发机都行一个前端项目React、Vue、原生HTML都行本文以React为例一份写好的DESIGN.md文件可选项Figma账号如果你想从设计稿提取规范一个现成的组件库比如Element UI、Ant Design用来参考关于Claude Code的安装网上教程很多核心就是确保你的Node.js版本在18以上然后通过npm全局安装。安装完成后在项目根目录运行claude命令就能启动。这里有一个容易被忽略的细节Claude Code默认读取项目根目录的CLAUDE.md文件作为上下文。所以你需要把DESIGN.md的内容整合到CLAUDE.md里或者在CLAUDE.md里引用DESIGN.md。我的做法是在CLAUDE.md里写一行DESIGN.md这样Claude Code会自动把DESIGN.md的内容加载到上下文里。这个引用语法是Claude Code特有的很实用。3.2 写一份AI能读懂的DESIGN.md从模板到落地直接给一份我实际在用的DESIGN.md模板你可以根据自己的项目调整# 设计规范 ## 颜色 ### 主色 - 色值#2563EB - 用途主要按钮、关键链接、选中状态 - 禁止背景填充、大面积使用 ### 成功色 - 色值#16A34A - 用途成功提示、完成状态 - 禁止与主色同时出现在同一视觉层级 ### 警告色 - 色值#EA580C - 用途警告提示、需要注意的状态 - 禁止用于普通信息展示 ### 错误色 - 色值#DC2626 - 用途错误提示、危险操作 - 禁止用于非错误场景 ### 文字色 - 主要文字#111827 - 次要文字#6B7280 - 禁用文字#D1D5DB ### 背景色 - 页面背景#F9FAFB - 卡片背景#FFFFFF - 悬浮背景#F3F4F6 ### 边框色 - 默认边框#E5E7EB - 强调边框#D1D5DB ## 间距 使用8的倍数作为间距刻度4, 8, 12, 16, 24, 32, 48, 64 - 组件内部4 或 8 - 组件之间12 或 16 - 区块之间24 或 32 - 页面边距16移动端/ 24桌面端 ## 字体 - 页面标题24px / 600 / 1.3 - 区块标题18px / 600 / 1.4 - 正文14px / 400 / 1.6 - 辅助文字12px / 400 / 1.5 字体族系统默认字体栈 ## 圆角 - 小圆角4px标签、徽章 - 中圆角8px按钮、输入框 - 大圆角12px卡片、弹窗 - 全圆角999px头像、胶囊按钮 ## 阴影 - 层级0无阴影平铺内容 - 层级10 1px 2px rgba(0,0,0,0.05)卡片默认 - 层级20 4px 6px rgba(0,0,0,0.07)卡片悬浮 - 层级30 10px 15px rgba(0,0,0,0.1)弹窗、下拉 ## 布局 - 内容最大宽度1200px - 栅格12列间距24px - 断点768px / 1024px / 1440px ## 禁止事项 - 不使用渐变除非是品牌明确要求的场景 - 不使用斑马纹表格 - 不在同一页面使用超过3种字号 - 不在同一页面使用超过2种阴影层级 - 不使用纯黑色#000000作为文字色 - 不使用纯白色#FFFFFF作为页面背景这份规范的关键在于**“禁止事项”部分**。这是约束AI“不做傻事”的核心。你可以根据自己项目的实际情况增删。3.3 在Claude Code里调用DESIGN.md的三种方式方式一直接引用。在CLAUDE.md里写DESIGN.mdClaude Code会自动加载。这是最简单的方式适合规范文件不大的情况。方式二按需加载。如果你不想让DESIGN.md一直占用上下文窗口可以在对话中手动引用。比如“请参考DESIGN.md中的颜色系统帮我生成一个登录页。”Claude Code会去读取DESIGN.md的相关部分。方式三拆分成多个文件。如果规范很大可以拆成colors.md、spacing.md、typography.md等然后在CLAUDE.md里分别引用。这样AI在生成不同部分时可以只加载相关的规范。我个人的习惯是方式一加方式二的组合CLAUDE.md里引用DESIGN.md作为默认上下文但在具体任务中会明确说“重点参考颜色系统和间距系统”。3.4 实测对比有规范和没规范的输出差异我拿同一个需求做了对比测试。需求是“生成一个用户列表页面包含搜索框、表格、分页。”没有DESIGN.md时AI的输出搜索框用了蓝色渐变边框表格表头用了深色背景加白色文字表格行有斑马纹分页按钮用了圆角胶囊样式颜色是紫色整个页面用了三种不同的阴影间距忽大忽小没有规律有DESIGN.md时AI的输出搜索框用了标准边框聚焦时显示主色边框表头用了浅灰背景加次要文字色表格行没有斑马纹只有底部1px分割线分页按钮用了中圆角主色用于当前页阴影只用在卡片容器上层级统一间距严格遵循8的倍数差异非常明显。有规范时AI的输出直接可用没有规范时需要大量手动调整。更重要的是有规范时AI的“决策速度”更快。因为它不需要在“用渐变还是不用”“用圆角还是直角”这些问题上纠结直接按照规范执行就行。这反映在生成速度上有规范时反而更快。4. 从“能用”到“好用”DESIGN.md的进阶调优与踩坑记录4.1 规范太细会死板太粗会失控找到那个平衡点这是我踩过的第一个坑。一开始我把规范写得非常细细到每个组件的每个状态都定义了具体参数。结果AI生成的东西确实“规范”但完全没有灵活性。比如我定义了“按钮圆角8px”AI就把所有按钮都设成8px包括那个本该用全圆角的胶囊按钮。后来我调整了策略规范只定义“边界”不定义“具体值”。比如我不写“按钮圆角8px”而是写“按钮圆角使用中圆角8px胶囊按钮使用全圆角999px”。这样AI就知道在不同场景下该用哪个值。再比如我不写“卡片间距16px”而是写“卡片之间间距使用16或24根据卡片内容密度决定”。这样AI就有了一定的判断空间。核心原则是规范定义“什么不能做”和“什么场景用什么值”但不定义“每个具体元素用什么值”。给AI留出在框架内做选择的空间。4.2 当AI“忘记”规范时怎么办三个补救技巧即使有了DESIGN.mdAI有时也会“忘记”规范尤其是在长对话中。这是正常的因为上下文窗口有限AI的注意力会衰减。我的补救技巧有三个技巧一在提示词里重申关键约束。比如“请生成一个表格页面注意遵循DESIGN.md中的颜色系统和间距系统特别是不要使用渐变和斑马纹。”这样能把AI的注意力拉回到关键约束上。技巧二分步生成而不是一次性生成。不要一次性让AI生成整个页面而是分步来先生成布局框架再生成表格组件再生成分页组件。每一步都重申规范。这样AI在每个步骤都能保持对规范的关注。技巧三生成后自查。让AI自己检查生成结果是否符合规范。比如“请检查你刚才生成的代码是否使用了渐变是否使用了超过3种字号间距是否都是8的倍数”AI的自查能力其实不错很多时候它能自己发现并修正问题。4.3 规范文件的版本管理别让DESIGN.md变成一潭死水DESIGN.md不是写完就完了。随着项目迭代规范也需要更新。我的做法是把DESIGN.md纳入Git版本管理和代码一起提交。每次设计规范有调整就提交一次写清楚改了什么、为什么改。这样做的好处是可以追溯规范的演变历史可以回滚到之前的版本团队成员可以看到规范的变化另外我建议在DESIGN.md的开头加一个“变更记录”部分记录每次修改的内容和原因。这样AI在读取规范时也能看到规范的变化历史有助于它理解规范的意图。4.4 一个真实项目的完整复盘从AI味到设计感最后分享一个我最近做的项目复盘。项目是一个后台管理系统有十几个页面。一开始我让AI直接生成结果每个页面风格都不一样——有的页面圆角大有的页面圆角小有的页面用蓝色主色有的页面用紫色有的页面间距紧凑有的页面间距松散。整个系统像拼凑出来的。后来我花了两个小时写了一份DESIGN.md然后让AI重新生成所有页面。这次的结果好很多但仍有问题AI在某些页面“忘记”了规范比如在弹窗里用了渐变在表格里用了斑马纹。我又花了半个小时做调优在CLAUDE.md里加了更明确的禁止事项在提示词里重申了关键约束让AI自查了一遍。最终的结果是所有页面风格统一间距一致颜色控制在规范范围内阴影层级清晰。整个过程下来我的体会是第一DESIGN.md不是银弹但它是目前最有效的“AI设计约束工具”。它不能保证AI生成完美的UI但能保证AI不生成“AI味”的UI。第二规范的质量比数量重要。一份20行的精准规范比一份200行的模糊规范更有效。第三调优是必须的。不要指望一次生成就完美预留出调优的时间。第四规范要随着项目迭代。项目在变规范也要变。把规范当成代码一样管理才能持续发挥作用。如果你也在用AI做UI我强烈建议你试试DESIGN.md这个思路。它不会让你立刻变成设计大师但它能让AI生成的东西从“一眼AI”变成“看起来像人做的”。这中间的差距就是品味。