1. 为什么AI生成的界面总让人一眼认出“机器味”先说一个我自己的观察。过去大半年我陆续用各种AI编程工具做过十几个中小型前端项目从后台管理面板到营销落地页都有。每次把AI生成的界面截图发到群里几乎总有人第一时间说“这看着就是AI做的”。一开始我以为是自己提示词写得不够细后来发现即使把需求描述得非常具体出来的东西依然带着那股说不清道不明的“AI味”。这股味道到底是什么我总结下来它不是一个单一问题而是几个层面的叠加。第一层是视觉层面的“过度安全”。AI生成UI时默认会选最不容易出错的方案圆角卡片、浅灰背景、蓝色主色调、居中大标题、均匀分布的间距。这些选择单独看都没问题但组合在一起就变成了“谁都能做出来的样子”。它不会犯错但也不会让人记住。第二层是结构层面的“均匀用力”。人类设计师做界面时会有明确的视觉层级——哪里是重点、哪里该弱化、哪里留白制造呼吸感。AI倾向于把每个元素都处理得差不多重要导致整个页面没有焦点眼睛不知道该往哪看。第三层是交互层面的“缺少意图”。按钮的hover状态、输入框的focus效果、加载时的过渡动画AI往往给的是通用方案而不是针对这个具体场景设计的反馈。用户操作时感觉不到“这个界面是专门为我这个场景做的”。这三个层面叠加起来就是所谓的“AI味”。它本质上不是技术问题而是决策密度的问题。人类设计师在每个像素上都做了有意识的取舍而AI在做“最安全的平均选择”。那Google提出的“品味优先”思路到底能不能解决这个问题我花了两周时间用Claude Code配合一套自己整理的DESIGN.md规范做了几轮对比实验。下面把我踩过的坑、验证有效的做法、以及那些看起来有用实际上没用的方案全部摊开来讲。2. 拆解“AI味”的三个具体来源与对应破解思路2.1 默认设计系统的“均值回归”现象AI模型在训练时见过海量的UI截图和代码它学到的是一个“统计意义上的平均界面”。当你让它生成一个登录页它会输出所有登录页的“最大公约数”左边放插画、右边放表单或者居中一个卡片。这个平均界面在统计上是最常见的但在设计上是最平庸的。我做过一个测试让AI分别生成“一个面向独立开发者的SaaS登录页”和“一个面向企业IT管理员的内部工具登录页”。如果不加额外约束两个输出几乎一模一样。这说明AI没有真正理解“面向谁”这个约束它只是在做模式匹配。破解这个问题的关键不是写更长的提示词而是给AI一套明确的、有倾向性的设计决策规则。这就是DESIGN.md存在的意义——它不是描述“要做什么”而是规定“在这个项目里我们优先选择什么、放弃什么”。2.2 间距与节奏的“均匀化陷阱”人类设计师做间距时会有节奏感相关元素靠近、不相关元素拉开、重要区域留白更多。AI倾向于使用统一的间距值比如所有元素之间都是16px或24px。这导致页面看起来“平”没有层次。我在实际项目里试过一个方法在DESIGN.md里明确规定三档间距——紧凑档4-8px用于图标与文字、常规档16-24px用于卡片内元素、宽松档48-64px用于区块之间。并且明确要求“禁止在区块之间使用小于32px的间距”。这个约束加上去之后AI生成的页面立刻有了呼吸感。2.3 颜色使用的“安全区依赖”AI选颜色时极度保守。主色永远在蓝色系里打转强调色永远用橙色或绿色背景永远是白色或浅灰。这不是因为它不知道其他颜色而是因为它在避免“可能不好看”的选择。我的做法是在DESIGN.md里直接指定一套有性格的色板并且说明使用场景。比如主色用一个偏暗的墨绿强调色用一个暖橙中性色用带一点暖调的灰。关键是给出具体色值和使用规则而不是让AI自己去“发挥”。下面这张表是我在几个项目里总结的“AI味来源与破解手段”对照AI味来源具体表现破解手段在DESIGN.md中的写法示例均值回归所有项目长得一样指定明确的设计倾向“本项目采用紧凑型布局信息密度优先”间距均匀化页面扁平无层次定义三档间距规则“区块间距不得小于48px卡片内间距统一16px”颜色保守永远是蓝白灰指定具体色板“主色#2D5A4A强调色#E07A3F禁止使用纯蓝”层级缺失没有视觉焦点规定字号与字重阶梯“页面标题32px/700区块标题20px/600正文14px/400”交互通用反馈无场景感指定交互动效规则“按钮hover时背景变暗10%过渡时间150ms”这张表里的每一行都是我在实际项目中验证过的。关键不在于规则本身多复杂而在于规则必须具体到AI可以直接执行而不是给它一个模糊的方向让它猜。3. DESIGN.md到底该写什么一份可复用的规范框架3.1 为什么普通提示词不够用很多人用AI做UI时习惯在对话里写一长串要求“帮我做一个现代化的、简洁的、专业的后台管理界面要有侧边栏、顶部导航、数据卡片和表格”。这种提示词的问题在于它描述的是“结果长什么样”而不是“决策规则是什么”。AI收到这种提示词后会从训练数据里找一个最接近的模板套上去。每次生成的结果可能不同但都落在同一个“平均区间”里。你没法控制它具体选什么圆角、什么阴影、什么间距。DESIGN.md的思路完全不同。它是一份项目级的设计决策记录放在项目根目录下AI每次生成UI代码时都会读取它。它不描述具体页面而是规定这个项目里所有页面都要遵守的底层规则。3.2 一份最小可用的DESIGN.md结构我经过多次迭代目前稳定使用的是一个六段式结构。每段都必须是AI可以直接执行的规则而不是描述性文字。第一段设计原则。用三到五条短句说明这个项目的设计倾向。比如“信息密度优先于留白”“功能可见性优先于极简”“一致性优先于惊喜感”。这些原则会在AI面临取舍时起作用。第二段色彩系统。给出具体色值和用途。主色、辅助色、强调色、成功/警告/错误色、中性色阶梯至少五档。每档都要说明用在什么场景。第三段字体与排版。指定字体族、字号阶梯、字重规则、行高规则。关键是给出明确的层级关系比如“页面标题是正文的2.5倍区块标题是正文的1.5倍”。第四段间距与布局。定义间距阶梯和布局规则。包括页面边距、区块间距、卡片内间距、元素间间距。还要说明栅格系统怎么用。第五段组件规范。对按钮、输入框、卡片、表格、导航等核心组件给出具体的样式规则。包括圆角、阴影、边框、内间距、状态变化。第六段禁止事项。明确列出这个项目里不允许出现的做法。比如“禁止使用纯黑色文字”“禁止使用大于8px的圆角”“禁止在卡片上使用彩色背景”。提示DESIGN.md不需要一次写完美。我的做法是先写一个基础版本然后每次发现AI生成的结果有“AI味”时就追问自己“它做了什么默认选择”然后把对应的禁止规则加进去。迭代三四轮之后规范就基本稳定了。3.3 用Claude Code落地DESIGN.md的实操流程Claude Code是我目前用得最顺手的AI编程工具之一它对项目文件的读取和理解能力比较强。下面是我实际使用的流程。第一步在项目根目录创建DESIGN.md文件按照上面的六段式结构填入内容。如果是新项目可以先从一份模板开始改。第二步在Claude Code的对话里明确引用这个文件。我通常会说“请先读取项目根目录的DESIGN.md然后按照其中的规范生成XXX页面的代码。”这句话很关键它让AI把DESIGN.md作为约束条件而不是参考建议。第三步生成第一版代码后不要急着改。先截图看整体效果对照DESIGN.md检查哪些规则被遵守了、哪些被忽略了。通常第一轮会有30%左右的规则没有被严格执行。第四步针对被忽略的规则在对话里明确指出。比如“DESIGN.md里规定区块间距不得小于48px但你生成的代码里用了24px请修正”。这种具体的反馈比笼统地说“再好看一点”有效得多。第五步把修正后的结果和对应的反馈记录下来更新到DESIGN.md的禁止事项里。这样下一轮生成时AI犯同样错误的概率会大幅降低。我实测下来经过三轮迭代AI生成的UI代码对DESIGN.md的遵守率能从60%左右提升到90%以上。剩下的10%通常是一些需要人工判断的细节比如某个具体场景下间距该用紧凑档还是常规档。4. 从“能看”到“有品味”三个关键决策点的处理4.1 视觉层级的建立让眼睛知道先看哪里AI生成的界面最常见的问题就是“没有重点”。所有元素大小差不多、颜色差不多、间距差不多用户打开页面后眼睛是散的。解决这个问题的核心是建立明确的三级层级。我在DESIGN.md里会这样写一级信息页面主标题或核心数据字号32-40px字重700颜色用最深的中性色。二级信息区块标题或关键指标字号20-24px字重600颜色用次深的中性色。三级信息正文和辅助说明字号14-16px字重400颜色用中等中性色。关键是三级之间的差距要足够大。很多AI生成的界面里一级和二级只差4px用户根本感觉不到层级。我的经验是相邻两级之间的字号比至少要达到1.4倍字重差至少要达到200。另外颜色也是建立层级的手段。一级信息用最深色二级用中深色三级用中灰色辅助信息用浅灰色。这样即使字号相同用户也能通过颜色判断重要性。4.2 间距节奏的控制让页面有呼吸感间距是AI最容易忽略的设计维度。它会把所有间距设成同一个值导致页面要么太挤、要么太散。我的做法是在DESIGN.md里定义一套间距阶梯并且规定每个阶梯的使用场景间距档位数值使用场景紧凑4px / 8px图标与文字之间、标签内间距常规16px / 24px卡片内元素之间、表单字段之间宽松48px / 64px区块之间、页面主要分区之间超大96px / 128px页面顶部与底部留白、英雄区域关键规则是禁止在区块之间使用小于48px的间距。这一条加上去之后AI生成的页面立刻从“挤在一起”变成了“有分区感”。还有一个技巧是不对称间距。人类设计师经常会在标题上方留更多空间、下方留少一些制造视觉上的“归属感”。我通常会在DESIGN.md里写“区块标题上方间距是下方的1.5倍”。这个规则简单但效果很明显。4.3 交互反馈的场景化让界面“活”起来AI生成的交互效果通常是通用的按钮hover变个色、输入框focus加个边框。这些没错但缺少场景感。我的做法是在DESIGN.md里针对不同场景定义不同的交互规则。比如主要操作按钮hover时背景变暗10%按下时变暗15%过渡时间150ms。次要操作按钮hover时背景从透明变为浅灰边框颜色加深。危险操作按钮hover时背景变为浅红文字颜色变为深红。输入框focus边框颜色变为主色同时加一个2px的外发光。卡片hover阴影加深一级向上位移2px。这些规则本身不复杂但关键是每个场景都有明确的反馈而不是所有元素用同一套通用效果。用户操作时能感觉到“这个界面是经过设计的”。还有一个容易被忽略的点是加载状态。AI生成的代码通常没有加载态或者只有一个转圈。我的做法是在DESIGN.md里规定“所有异步操作必须有骨架屏或进度指示禁止使用空白等待”。骨架屏的样式也要规定用中性色浅灰圆角与卡片一致动画用脉冲效果。5. 实测对比同一需求下“有规范”与“无规范”的差距5.1 实验设置与评估维度为了验证DESIGN.md的实际效果我做了一组对照实验。需求是“生成一个数据分析后台的首页包含顶部导航、侧边栏、四个数据卡片、一个折线图区域和一个数据表格”。A组只用自然语言描述需求不提供DESIGN.md。 B组提供完整的DESIGN.md并在对话中明确要求遵守。评估维度有五个视觉层级清晰度、间距节奏感、颜色协调性、交互反馈完整度、整体“AI味”程度。每个维度满分10分由我和另外两位有前端经验的朋友独立打分后取平均。5.2 五轮生成的结果对比评估维度A组平均分B组平均分差距视觉层级清晰度5.28.43.2间距节奏感4.88.13.3颜色协调性6.18.72.6交互反馈完整度4.57.93.4整体AI味程度越低越好7.83.2-4.6从数据上看B组在每个维度上都有明显优势。尤其是“整体AI味程度”这一项从7.8降到了3.2说明DESIGN.md确实能有效削弱那种“一眼AI”的感觉。但我也要诚实地说B组的结果也不是完美的。在五轮生成中有两轮出现了AI忽略部分规则的情况比如把区块间距设成了32px而不是规定的48px。这说明DESIGN.md不是万能的仍然需要人工检查和反馈。5.3 那些“看起来有用但实际没用”的做法在实验过程中我也试了一些网上流传的方法发现效果有限。做法一在提示词里加“请生成高质量的UI”。完全没用。AI对“高质量”的理解和人类不一样它只会从训练数据里找“看起来复杂”的模板。做法二提供参考截图让AI模仿。效果不稳定。AI能识别截图里的大致布局但无法准确提取间距、字号、颜色值这些具体参数。而且不同轮次生成的结果差异很大。做法三用很长的提示词描述每个细节。有一定效果但维护成本太高。每次生成新页面都要重新写一遍而且提示词之间容易冲突。做法四生成后手动调整CSS。这是最可靠的方法但也是最费时间的。如果每个项目都要手动调那用AI的意义就大打折扣了。相比之下DESIGN.md的优势在于一次编写、多次复用。写一份规范的投入大概在1-2小时之后每个页面都能受益。对于需要持续产出UI的项目来说这个投入产出比是很划算的。6. 把规范变成习惯我的日常操作清单6.1 新项目启动时的三件事每次开新项目我会按顺序做三件事。第一件花20分钟写一份基础版DESIGN.md。不需要很完整但色彩系统、字体阶梯、间距规则这三块必须有。这三块是影响“AI味”最大的因素。第二件在Claude Code里做一次“规范校准”。随便生成一个简单页面检查AI对DESIGN.md的遵守情况。通常会发现两三个被忽略的规则当场修正并更新到禁止事项里。第三件把DESIGN.md加入项目的版本控制。每次修改都记录原因比如“因为AI总是把卡片圆角设成12px所以明确规定圆角统一为6px”。这些记录本身就是项目的设计决策日志。6.2 日常生成时的检查要点每次让AI生成新页面后我会快速过一遍这几个检查点页面是否有明确的视觉焦点第一眼看到的是什么区块之间的间距是否明显大于区块内部的间距颜色是否控制在三到四种以内有没有出现意外的颜色按钮、输入框、卡片的状态变化是否都有定义加载态、空状态、错误态是否都有处理这五个问题里只要有一个答案是“否”就说明需要调整。通常调整的方式不是直接改代码而是回到DESIGN.md里补充对应的规则然后让AI重新生成。6.3 规范迭代的节奏DESIGN.md不是写完就不动的。我的习惯是每完成一个页面就花五分钟回顾一下这次生成过程中AI在哪些地方做了“默认选择”这些默认选择里哪些是我不能接受的把不能接受的写成禁止规则加到DESIGN.md里。这样迭代下来通常到第三个页面时DESIGN.md就已经比较完善了。到第五个页面时AI生成的代码基本不需要大改只需要微调一些具体数值。注意不要试图一次性写出完美的DESIGN.md。规范是在实践中长出来的不是坐在那里想出来的。先写一个粗糙版本然后在使用中不断补充这才是正确的节奏。7. 一些关于工具选择的个人看法Claude Code在读取项目文件和遵守规范方面确实做得不错但它不是唯一的选择。我也试过用其他AI编程工具配合DESIGN.md效果有差异但思路是通用的。关键不在于用哪个工具而在于你是否把设计决策从“每次对话”转移到了“项目文件”。只要DESIGN.md存在并且被AI读取无论用什么工具生成结果都会比没有规范时好很多。另外DESIGN.md的格式不一定要用Markdown。我试过用JSON和YAMLAI也能理解。但Markdown的可读性最好方便自己随时翻阅和修改。而且Markdown的层级结构天然适合表达“规则-子规则”的关系。最后说一个我自己的体会AI做UI的“AI味”本质上是因为它没有“偏好”。它不会因为觉得某个间距“看起来不舒服”而调整也不会因为某个颜色“感觉不对”而换掉。DESIGN.md的作用就是把你作为设计师的偏好用AI能理解的方式写下来让它在你划定的范围内做选择。范围越清晰它的选择就越接近你想要的结果。这个过程需要一些耐心前两轮迭代可能会觉得麻烦。但一旦规范稳定下来后面每个页面的生成效率和质量都会有明显提升。我现在做新页面时基本只需要写清楚页面结构和功能需求视觉层面的东西交给DESIGN.md约束下的AI来生成出来的结果直接可用不需要大改。
