1. 为什么“AI 味”成了前端 UI 的头号公敌1.1 什么是“AI 味”它到底丑在哪里先说说我自己的经历。去年我帮一个朋友看他用 AI 生成的一个后台管理页面打开的一瞬间我就笑了——不是说它不能用而是那种扑面而来的“AI 味”实在太典型了紫色到蓝色的渐变按钮、圆角 12px 的卡片、居中大标题配一行灰色副标题、三个图标并排的功能区、底部再来一句“立即体验”。这套组合拳你只要用过几次 AI 生成 UI闭着眼睛都能背出来。所谓“AI 味”本质上是模型在缺乏具体设计约束时退回到训练数据里最高频、最安全的那套视觉方案。它不丑但它是“平均值”——就像让一百个人画一张脸然后取平均出来的结果一定是一张没有记忆点的脸。具体表现我总结成这么几类配色趋同紫蓝渐变、靛蓝主色、大面积浅灰背景几乎成了默认皮肤。间距随意8px、12px、16px、24px 混着用没有一套统一的间距刻度。层级扁平标题、正文、辅助文字之间只靠字号区分字重和颜色对比度不够扫一眼抓不到重点。组件同质按钮、卡片、输入框长得都差不多缺少品牌识别度。文案空洞占位文字永远是“Lorem ipsum”或者“这里是描述文字”。新手最容易踩的坑就是把“AI 能生成 UI”等同于“AI 能生成好 UI”。这两者之间隔着一整套设计系统。你要做的不是让 AI 替你设计而是给 AI 一套规则让它按规则产出。1.2 从“能看”到“能打”中间差的是什么我见过太多新手项目第一版 demo 出来挺唬人一旦要加第二个页面、第三个页面整个视觉就崩了。为什么因为没有设计系统兜底。第一个页面是 AI 即兴发挥的第二个页面又是另一次即兴发挥两次发挥之间没有共享的“语言”拼在一起自然像两个不同的人做的。设计系统解决的正是这个问题。它把颜色、字体、间距、圆角、阴影、动效这些原子级的决策提前定死变成一套可复用的变量和组件。之后无论是你自己写还是让 AI 帮你写都从这套变量里取值产出的东西自然是一致的。打个比方设计系统就像做菜的“底料”。你先把底料炒好后面炒什么菜都从这锅底料里舀一勺味道就不会跑偏。没有底料每次现炒现调十道菜十个味。所以这篇手册的核心思路很明确先建系统再谈生成。下面我会从零开始带你走一遍从“识别 AI 味”到“搭出一套能约束 AI 的设计系统”的完整流程。适合谁看前端新手、独立开发者、想用 AI 提效但被“AI 味”劝退的产品同学都合适。不需要你有多少设计基础跟着做就行。2. 动手之前把设计系统的地基打牢2.1 设计令牌把“感觉”变成“数字”设计系统最底层的东西叫设计令牌Design Token。说白了就是把所有视觉决策从“感觉”翻译成“数字”存成变量。这一步是整件事的地基地基没打好后面全是空中楼阁。我建议新手从这五类令牌入手一个都别少令牌类别作用常见取值示例颜色 Color主色、辅助色、语义色、中性色primary-500、danger-600、gray-100字体 Typography字号、字重、行高、字间距text-sm、font-semibold、leading-tight间距 Spacing元素内外边距的统一刻度space-1 到 space-12圆角 Radius卡片、按钮、输入框的圆角radius-sm、radius-md、radius-lg阴影 Shadow层级关系的视觉表达shadow-sm、shadow-md、shadow-lg关键点在于刻度化。比如间距不要随手写 13px、17px而是定一套 4 的倍数刻度4、8、12、16、24、32、48、64。所有间距都从这套刻度里取。颜色也一样主色不要只定一个而是定一整条色阶50 到 900这样浅色背景、深色文字、悬停态、禁用态都有对应的值可用。我踩过的坑是一开始图省事只定了主色和几个中性色结果做到悬停态和禁用态的时候发现没颜色可用只能临时调透明度调出来的效果脏兮兮的。后来老老实实把色阶补全问题一下就没了。2.2 用 CSS 变量还是 Tailwind 配置令牌定好了得有个地方存。新手常见的两条路CSS 自定义属性CSS Variables和Tailwind 的配置文件。我的建议是——两个都用各司其职。CSS 变量适合存那些需要在运行时动态切换的值比如主题色、暗色模式。它的好处是浏览器原生支持改一个变量全站生效不需要重新构建。:root { --color-primary-500: #4f46e5; --color-primary-600: #4338ca; --color-gray-100: #f3f4f6; --space-4: 1rem; --space-6: 1.5rem; --radius-md: 0.5rem; --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); }Tailwind 的配置则适合把令牌映射成工具类让你写样式的时候直接bg-primary-500、p-4、rounded-md不用记具体数值。它的好处是约束强——你配置里没定义的刻度工具类里就没有想乱写都写不出来。// tailwind.config.js module.exports { theme: { extend: { colors: { primary: { 500: var(--color-primary-500), 600: var(--color-primary-600), }, }, spacing: { 4: var(--space-4), 6: var(--space-6), }, borderRadius: { md: var(--radius-md), }, }, }, };这么一套下来你的项目里就有了一个“唯一真相源”。改主题色改一个 CSS 变量全站跟着变。想加个新间距先在令牌里加再在配置里映射最后才能用。这个流程看着麻烦但它逼着你保持克制而克制正是摆脱“AI 味”的关键。2.3 组件库选型别从零造轮子新手最容易犯的第二个错是觉得“用组件库显得不专业”非要自己从零写按钮、写输入框。我劝你打消这个念头。组件库帮你解决的是可访问性、键盘导航、边界状态这些又枯燥又容易出错的问题这些恰恰是 AI 生成代码最容易忽略的地方。选型上我给几个方向你按项目需求挑追求开箱即用、样式统一选那种自带设计语言、组件齐全的库适合快速搭后台、搭工具类产品。追求高度可定制、无样式约束选那种只提供行为逻辑、不提供样式的“无头组件库”样式完全由你的设计令牌控制适合对品牌一致性要求高的项目。追求轻量、只想要几个基础组件选那种按需引入、体积小的库适合落地页、营销页。我的实操经验是组件库负责“行为”设计令牌负责“外观”。把组件库的默认样式尽量剥离用你的令牌重新皮肤化。这样既拿到了组件库的可靠性又保住了自己的视觉识别度。具体做法通常是覆盖组件库的主题变量或者用它的classNames之类的 API 注入你的工具类。注意不要同时引入两套组件库。我见过有人既想要 A 库的表格又想要 B 库的弹窗结果两套样式互相打架打包体积还翻倍。选定一套缺什么自己基于令牌补比混用省心得多。3. 核心实操手把手搭一套能约束 AI 的 UI 骨架3.1 第一步定色板告别紫蓝渐变色板是整个视觉的第一印象也是“AI 味”最重灾区。我的做法是主色只选一个然后围绕它生成完整色阶。具体怎么选主色别选那种烂大街的紫蓝。你可以从品牌 logo 里取色可以从一张你喜欢的照片里取色甚至可以从一个你欣赏的产品里借鉴思路注意是借鉴思路不是照抄。选好一个基准色后用工具生成 50 到 900 的色阶。手算也行大致规律是50 最浅接近白500 是基准色900 最深接近黑中间按明度均匀过渡。除了主色你还需要一套中性色灰阶和几个语义色成功绿、警告黄、危险红、信息蓝。中性色负责承载大部分界面语义色负责传递状态。这里有个经验中性色不要用纯灰RGB稍微带一点主色的色相整个界面会显得更协调、更“高级”。比如主色是靛蓝中性色就往蓝灰方向偏一点点。:root { /* 主色阶 */ --color-primary-50: #eef2ff; --color-primary-100: #e0e7ff; --color-primary-500: #4f46e5; --color-primary-600: #4338ca; --color-primary-700: #3730a3; /* 中性色阶略带蓝调 */ --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-500: #64748b; --color-gray-900: #0f172a; /* 语义色 */ --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; }定完之后给自己立个规矩界面里出现的每一个颜色都必须来自这套令牌。想用个新颜色先加进令牌再说。这条规矩能挡掉 90% 的“AI 味”。3.2 第二步定排版让文字有呼吸感排版是新手最容易忽略、但提升最明显的部分。AI 生成的页面往往字号层级混乱、行高局促、字重单一读起来累。你要做的是定一套排版刻度。我的建议是定 6 到 8 个字号从最小到最大覆盖所有场景用途字号行高字重辅助说明12px1.5400正文小14px1.6400正文16px1.6400小标题18px1.5600标题24px1.4600大标题32px1.3700展示标题48px1.2700几个关键经验正文行高不要低于 1.5否则密不透风标题行高要比正文紧1.2 到 1.4 之间比较合适字重不要只用 400 和 700中间加个 500、600层级会更细腻。另外正文每行控制在 60 到 75 个字符宽度最舒服太宽了眼睛要来回扫太窄了频繁换行。字体选择上中文项目我一般用系统字体栈打底保证加载速度和渲染一致性需要品牌感的地方再引入一款特色字体做标题。别一上来就引入三四种字体加载慢不说风格还容易打架。3.3 第三步定间距与圆角统一视觉节奏间距和圆角是“节奏感”的来源。AI 生成的页面之所以看着乱很大原因是间距没有节奏——这里 10px 那里 15px眼睛找不到规律。我的做法是定一套4 的倍数刻度4、8、12、16、24、32、48、64、96。然后给它们分配语义4 / 8图标与文字之间、标签内部12 / 16按钮内边距、输入框内边距、卡片内边距小24 / 32卡片内边距大、区块之间的间距48 / 64 / 96页面级的大区块分隔圆角同理定三到四档就够小圆角4px用于标签、徽章中圆角8px用于按钮、输入框大圆角12-16px用于卡片、弹窗全圆角用于头像、胶囊按钮。同一个元素类型圆角必须一致这是纪律。:root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; }实操心得定完刻度后在项目里全局搜索一遍把所有“非刻度值”的间距和圆角揪出来替换掉。这一步做完页面立刻会“整”很多那种说不清道不明的杂乱感会消失大半。3.4 第四步把令牌喂给 AI让它按规矩出牌前面三步做完你手里就有了一套完整的令牌。现在到了最关键的一步怎么让 AI 按这套令牌生成代码。核心方法是在提示词里显式声明约束。不要只说“帮我生成一个登录页”而要说清楚用哪些颜色变量、哪些间距刻度、哪些圆角档位、字体层级怎么排。我一般会准备一段“系统提示词模板”每次生成前贴进去你是一个前端开发助手。请严格使用以下设计令牌不要引入任何未定义的数值 颜色主色用 var(--color-primary-500)悬停用 var(--color-primary-600) 背景用 var(--color-gray-50)正文文字用 var(--color-gray-900) 辅助文字用 var(--color-gray-500)。 间距所有内边距和外边距只能从 var(--space-1) 到 var(--space-8) 中取值。 圆角按钮和输入框用 var(--radius-md)卡片用 var(--radius-lg)。 字体正文 16px/1.6小标题 18px/1.5 字重 600标题 24px/1.4 字重 600。 请生成一个登录表单包含邮箱、密码输入框和提交按钮。这么一段约束下去AI 产出的代码会规矩得多。当然它偶尔还是会“手滑”写个padding: 13px之类的所以生成后你要过一遍代码审查把漏网的硬编码值替换成令牌。这个审查动作做几次之后你会发现 AI 越来越“听话”因为你的提示词越来越精确。我个人的习惯是维护一个prompt-template.md把常用的约束段落存好生成不同页面时按需组合。这比每次现写提示词效率高得多也保证了不同页面之间的约束一致。4. 从组件到页面把系统真正用起来4.1 先做原子组件再做组合有了令牌下一步是做组件。这里有个顺序问题先做原子组件再做分子、组织、模板。别一上来就做整个页面那样你会在细节里迷失。原子组件就是按钮、输入框、标签、徽章、头像这些最小单元。每个原子组件都要把所有状态定义清楚默认、悬停、聚焦、激活、禁用、加载。新手最容易漏的就是聚焦态和禁用态结果用户一按 Tab 键就露馅。以按钮为例我一般会定义这几个变体主按钮实心主色、次按钮描边、幽灵按钮无边框、危险按钮红色。每个变体再乘以尺寸小、中、大和状态。听起来多但用令牌驱动之后代码量其实很小.btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: 16px; font-weight: 500; transition: background-color 0.15s ease; } .btn-primary { background: var(--color-primary-500); color: white; } .btn-primary:hover { background: var(--color-primary-600); } .btn-primary:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .btn-primary:disabled { background: var(--color-gray-100); color: var(--color-gray-500); cursor: not-allowed; }注意:focus-visible这个伪类它只在键盘导航时显示聚焦环鼠标点击时不显示兼顾了可访问性和美观。这个细节 AI 基本不会主动帮你加得你自己补。4.2 用“页面模板”锁死布局骨架原子组件做完接下来是页面模板。模板的作用是锁死布局骨架让所有页面共享同一套结构逻辑。常见的模板有带侧边栏的后台布局、带顶部导航的营销页布局、居中的表单页布局、列表加详情的分栏布局。我建议新手先做三套模板就够覆盖大部分场景后台布局、营销布局、表单布局。每套模板定义好导航区、内容区、页脚区的位置和间距之后所有具体页面都往模板里填内容。这么做的好处是当你让 AI 生成一个新页面时可以直接说“用后台布局模板内容区放一个数据表格”AI 就不会从零开始瞎编布局而是往你定好的骨架里填。产出的页面天然和已有页面风格一致。4.3 暗色模式一次令牌两套皮肤暗色模式是检验设计系统是否合格的试金石。如果你的令牌体系做得好暗色模式几乎不需要改组件代码只需要换一套令牌值。:root { --color-bg: #ffffff; --color-text: #0f172a; --color-surface: #f8fafc; } [data-themedark] { --color-bg: #0f172a; --color-text: #f1f5f9; --color-surface: #1e293b; }组件里全部用var(--color-bg)、var(--color-text)这类语义变量切换主题时只改变量值组件自动跟着变。这里的关键是用语义变量而不是具体色值——组件里写var(--color-text)而不是var(--color-gray-900)这样暗色模式下文字颜色才能正确反转。我踩过的坑是一开始组件里直接用了gray-900这种具体色阶做暗色模式时发现要一个个改改到崩溃。后来全部换成语义变量暗色模式半天就搞定了。这个教训值得你提前避开。5. 常见问题与排查技巧实录5.1 新手高频问题速查表问题现象可能原因解决思路页面看着“AI 味”重用了默认紫蓝渐变、间距不统一换主色、统一间距刻度、加字重层级组件状态不全只做了默认态补齐悬停、聚焦、禁用、加载态暗色模式文字看不清组件里用了具体色阶而非语义变量改用语义变量检查对比度AI 生成代码有硬编码值提示词约束不够细补充令牌约束生成后审查替换多页面风格不一致没有共享模板和令牌抽出模板所有页面从模板派生打包体积过大引入了多套组件库只留一套按需引入5.2 三个我踩过的坑你别再踩第一个坑令牌定得太细自己都记不住。我一开始定了 20 多个间距值结果写代码时根本想不起来该用哪个最后还是随手写。后来砍到 8 个反而用得很顺。令牌不是越多越好够用就行。第二个坑组件库样式覆盖不彻底。我试过用工具类去覆盖组件库的默认样式结果优先级打架加了一堆!important。正确做法是找到组件库的主题变量或 CSS 变量入口从源头改而不是在表面打补丁。第三个坑忽略对比度。浅灰文字配白背景看着“高级”实际对比度不达标弱视用户根本看不清。我现在的习惯是每次定完颜色用对比度检查工具过一遍正文对比度至少 4.5:1大字号至少 3:1。这个标准是硬性的别为了好看牺牲可读性。5.3 让 AI 真正帮上忙的提示词技巧最后分享几个我实测有效的提示词技巧。第一给例子比给描述管用。与其说“生成一个简洁的卡片”不如贴一段你已有的卡片代码说“按这个风格生成一个用户信息卡片”。AI 模仿能力很强给个样板它就能对齐。第二分步生成而不是一次到位。先让它生成结构你审查调整再让它填充样式你审查调整最后让它补状态和交互。一次生成一大坨改起来反而费劲。第三明确说“不要做什么”。比如“不要使用渐变”“不要使用超过三种字号”“不要引入新的颜色”。负面约束往往比正面约束更有效因为 AI 的默认倾向就是加东西你得帮它做减法。这套流程我用了大半年从最初被“AI 味”折磨到现在基本能做到 AI 生成、我微调就能上线。核心体会就一句话AI 是执行者设计系统是规则你是定规则的人。规则定得越清楚AI 执行得越靠谱。别指望 AI 替你做设计决策那是你的活。把令牌、组件、模板这三层搭好剩下的重复劳动交给 AI效率能翻好几倍。