写这篇东西之前我先说个背景。过去大半年我一直在用各类AI编程工具做前端页面踩过的坑非常具体需求描述得越模糊AI产出的界面就越像“模板站大礼包”——居中大标题、四张卡片、圆角毛茸茸的按钮、灰得不彻底的背景色看起来能用一截图就露怯。一开始我把问题归咎于模型能力不够后来换了几轮工具发现问题不在模型而在“我压根没告诉它什么叫好看”。于是我把手头项目的设计规范、组件经验、审美偏好全部沉淀成了一套可以直接塞进提示词里的“技能库”再让AI生成UI代码时效果直接从“能看的demo”跳到了“接近设计稿”的级别。这篇文章就把这套技能库的结构、写法和完整案例摊开来讲适合正在用AI写前端、又对视觉效果有要求的人参考。1. 为什么AI生成的界面总带着一股“廉价感”先说结论AI生成的UI丑本质上不是模型不懂设计而是它缺少约束。大模型训练时见过无数开源项目、后台模板、文档示例所以它默认产出的“最常见形态”就是那种放之四海而皆准的后台框架样式。这不是随机偏差而是概率分布的必然——它在讨好“大多数人的平均偏好”而平均审美从来都不是审美。1.1 “模板感”究竟来自哪里我用一句话概括AI丑界面的特征所有间距都相等所有层级都扁平所有状态都缺失。具体拆开看无非这几点间距毫无节奏。整页全是p-4或gap-4卡片之间、标题和内容之间、按钮和输入框之间的空隙完全没有层级差异页面看起来像一堆方块挤在一起。色彩没有倾向。背景用纯白或纯灰#F9FAFB文字用纯黑#000000主色选个蓝色就往按钮上硬贴。AI没有“色板意识”它只知道“有彩色比没彩色好”结果就是蓝得刺眼、灰得发闷。圆角迷之统一。所有元素一律rounded-lg或rounded-md卡片、按钮、输入框、标签全用一种圆角细节感直接归零。状态反馈等于零。没有 hover、focus、disabled、selected 这类交互状态做出来的界面像一张死图鼠标放上去毫无反应。组件比例失衡。按钮过高、输入框过矮、表格行距过大、侧边栏宽度失控整体看起来像一个没校准过的天平重心不稳。如果你自己手写界面你会在过程中不断“看”和“调”AI不会。它一次生成就直接输出终稿。除非你在提示词里把“调整标准”也告诉它否则它只会重复平均值。1.2 为什么“写清楚需求”还是治标不治本很多人试过这样写提示词“做一个现代简洁的后台管理界面风格类似Linear或者Stripe要有质感。”结果还是丑。原因在于“像Linear”和“有质感”是主观语义模型理解不了其中的物理参数。它不知道Linear卡片背景色的具体色值、不知道Stripe按钮在hover时阴影变化的幅度、也不知道“质感”是由细致的1px边框、克制的投影、清晰的层级叠加共同构成的。你给它的形容词再多不如给它一套可执行的数字规则。这就是“技能库”存在的价值把设计师脑子里那些“凭感觉”的决策翻译成 AI 能照做的规范。间距用几像素、圆角用几像素、阴影分几档、色板固定几个色号全部量化AI照着写产出自然稳定。2. UI技能库的三层结构Token、组件规范、自检清单我实践下来一套管用的UI技能库必须是三层结构缺一不可。光是给一堆色值AI大概率不会好好用光是给设计理念AI又无法落地。三层各司其职才能让AI稳定输出设计师级代码。2.1 设计Token层把审美量化成一套数字Token是整个技能库的地基它解决的是“用什么”的问题。这一层不要贪多把最高频的设计变量定清楚就行。我用的是Tailwind CSS所以Token天然就映射到Tailwind的扩展配置上。下面是我常用的基础Token间距基线4px 起步常用档位 0、1、2、3、4、6、8、12、16、20、24、32对应 Tailwind 的p-0到p-32。核心规则是“相邻元素用小间距4/8卡片内部用中间距16/20页面大区块用大间距24/32”。字号阶梯12/13/14/16/18/20/24/30/36。正文默认14或16辅助信息12或13页面标题24一级大标题30或36。千万不要让AI自己“看着办”它一看就办成16px全跑。中性色板推荐直接用 Tailwind 的 slate 或 gray 色阶但把它收敛成固定几个slate-50背景、slate-100次级背景、slate-200分隔线、slate-500次要文字、slate-700正文、slate-900标题。纯黑少用纯白也少用灰阶里有层次页面才有气质。主色与语义色主色固定一个不要多。语义色固定四个成功、警告、错误、信息。全部用色板枚举禁止AI自己发明颜色。圆角梯度4、6、8、12、16 五档。按钮和输入框用6卡片用12大容器弹窗/抽屉用16标签和徽章用999。阴影梯度一档小阴影用于卡片shadow-sm一档中阴影用于下拉和浮层shadow-md一档大阴影用于弹窗shadow-xl。默认元素不加阴影加了就显脏。把这些Token写进技能库的第一章AI生成代码时自然会多用常用类名少造轮子。2.2 组件规范层高频组件必须有“标准答案”Token解决的是全局风格但组件的细节还得逐一定。组件库里的规格不需要覆盖所有组件但要把最高频的几个写清楚按钮一级按钮h-9 px-4 text-sm rounded-lg bg-primary text-white hover:bg-primary/90二级按钮同尺寸但bg-transparent border border-border text-slate-700。不要突然造一个h-12 px-10的大胖按钮。输入框h-10 px-3 text-sm rounded-lg border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-primary/30。重点是focus状态AI经常漏掉。卡片rounded-xl border border-slate-200 bg-white p-6 shadow-sm。卡片内部标题用text-base font-semibold描述用text-sm text-slate-500距离卡片边缘统一 24px。表格表头text-xs font-medium text-slate-500 uppercase单元格text-sm text-slate-700 px-4 py-3行hoverhover:bg-slate-50表头底部加border-b border-slate-200。导航侧栏宽w-60菜单项h-10 px-3 rounded-lg text-sm text-slate-600 hover:bg-slate-100选中项bg-slate-100 text-slate-900 font-medium。每一类组件我都写一个标准类名组合AI生成时直接引用。它能自己发挥的空间越大界面越丑所以“标准答案”越早给出越好。2.3 自检清单层让AI做“专业阅卷人”这一层是我体验中最关键的一环。很多人在提示词里写了规范但AI生成完就交差了不规范的部分没被修正。我在技能库的第三层专门写了一份“UI审查清单”要求AI生成完代码后逐项对照检查并自我修正。清单内容如下所有间距是否落在Token定义的档位内有没有出现p-2.5这种断档所有颜色是否来自色板枚举有没有出现#3366FF这种孤立色号所有可点击元素是否都有 hover、focus、disabled 状态字体大小是否依照字号阶梯标题是否与正文有足够对比圆角和阴影是否符合梯度规则有没有出现圆角全一致或阴影过重的现象响应式断点是否处理窄屏下网格塌陷、按钮宽度自适应是否正常把这一层写进技能库后AI在输出代码前会“自己给自己打分”很多一眼假的问题在生成阶段就被干掉了。3. 把技能库接入AI编程工作流一份可以直接抄的提示词模板技能库建好以后真正要解决的是“怎么把它塞进AI的工作流里”。很多人以为把整本技能库粘贴进system prompt就行结果AI反而“消化不良”——规范太多优先级混乱该遵守的没遵守不该发挥的乱发挥。正确的姿势是分层注入、按需引用。3.1 系统级提示词只定基调不定细节第一层是system prompt就是每次对话刚开始时注入的内容。这一层只写方向性的约束让AI从一开始就知道“这不是一个随便写写的页面是有规范约束的项目”。我目前用的系统级提示词大致是这样你是一名资深UI工程师擅长使用Tailwind CSS shadcn/ui风格的组件编写高质量前端页面。 你遵循以下硬性规则 1. 禁止使用内联style禁止在class外直接写颜色、间距、字体大小。 2. 所有颜色必须来自Tailwind预设色板首选slate和指定品牌色。 3. 所有间距遵循4px基线体系禁止随意填写p-2.5、gap-3.5这类自定义值。 4. 所有视觉元素必须有状态反馈包括hover、focus、disabled、selected。 5. 生成代码前请先阅读并遵守《UI设计规范》文档生成后请依据《UI自检清单》逐项检查并修正。注意这一层不需要把所有Token都贴进来只需要让AI知道“有规范”并把规范的入口放出来。你可以在后续对话中把技能库作为文件上传或者用系统提示词直接引用。关键是让AI从第一轮开始就进入“受约束生成”的状态而不是放飞自我。3.2 页面级提示词给需求、给场景、给“评分标准”第二层是每轮具体页面生成时的提示词。这一层要做得具体否则AI又会开始平均化创作。我总结了一套好用的公式需求描述 页面类型 目标用户 核心任务 验收标准举个例子生成一个用户管理表格页我不会只写“做一个用户列表页面”而是这样写做一个用户管理列表页面向企业内部管理员。 核心任务 - 页面顶部是标题和“新增用户”按钮。 - 表格列包含用户姓名、邮箱、角色、状态、最近登录时间、操作。 - 表格下方有分页器。 - 表格行支持点击展开更多信息。 验收标准 - 页面整体应符合《UI设计规范》间距、颜色、字号、圆角、阴影均需对齐。 - 表格在窄屏下应能横向滚动而不是压缩变形。 - 状态列用徽章展示使用语义色启用绿禁用灰。 - 操作列至少包含编辑、删除两个按钮且hover状态清晰。你会发现这段提示词里没有一个形容词但信息密度极高。AI一看就知道“用户是谁、页面要完成什么任务、好看的界面要满足哪些条件”生成出来的页面自然稳。3.3 技能库文件把规范文档作为AI的“必读材料”如果你的AI工具支持文件上传或知识库引用强烈建议把整套技能库做成一个独立的 Markdown 文档上传为项目级规范。我自己的技能库目录结构长这样ui-skill-kit/ ├── 00-design-tokens.md ├── 01-component-spec.md ├── 02-layout-pattern.md ├── 03-ui-review-checklist.md └── examples/ ├── dashboard-page.md ├── form-page.md └── table-page.md上传后每轮生成代码前只需要在提示词里加上一句“请先阅读00-design-tokens.md和01-component-spec.md再开始写代码”AI就会自动去查阅对应文件并严格按规范产出。实测下来这种方式比把规范贴进system prompt要稳定得多。原因很简单系统提示词长度有限规范太多会挤占生成空间而通过文件引用AI是在“需要时查阅”既不会遗忘也不会让上下文过于臃肿。3.4 一个完整案例从“模糊需求”到“设计师级产出”为了让你更直观地看到差异我拿一个实际的Dashboard页面做对比演示。先看“传统写法”的提示词帮我做一个数据看板页面包含销售额、订单量、用户数这几个指标下面再放一个图表和最近订单列表整体要简洁现代。AI大概率会输出一个四平八稳的页面四个卡片并排每张卡片一个数字下面一个占满全宽的图表再下面一个简单的表格。所有元素间距一致、颜色寡淡、加了可有可无的阴影连图标都是随便挑的。能看但就是“AI味”十足。再看用技能库加持的写法以《UI设计规范》为基准做一个数据看板页面。 页面顶部页面标题“运营总览”右侧放日期范围筛选器两个日期输入框 一个查询按钮。 指标卡片区 - 4张卡片每张卡片包含指标名称、数值、环比变化。 - 卡片尺寸一致使用规范卡片样式内部间距p-6。 - 环比正增长用绿色徽章负增长用红色徽章数值较上次统计的增幅需要醒目展示。 图表区 - 两张图表并排左侧是“销售额趋势”折线图右侧是“渠道占比”环形图。 - 图表容器使用规范卡片样式高度固定为h-80。 最近订单列表 - 表格展示订单号、客户名、金额、状态、下单时间。 - 状态用徽章已完成绿处理中蓝已取消灰。 - 表格底部显示分页器。 验收标准严格遵循UI规范所有状态都有反馈响应式断点不小于md窄屏横向滚动。这段提示词并没有增加多少字数但信息密度完全不同。AI能清楚地知道“每个区域长什么样、用什么组件、状态怎么表达”输出结果基本上可以直接prd评审。我用同一套模板让AI生成了十几个页面一致性非常高几乎不需要再手工调整间距和颜色。4. 实操过程中的“质检环节”让AI按设计师视角逐项自检代码生成只是第一步真正让UI从“能用”到“设计师水准”的关键在于生成后的审查与修正。AI生成的代码在结构上往往没问题但在视觉细节上仍会漏掉很多设计师会在意的东西。这些细节人工逐个检查太累完全靠肉眼又容易漏所以我让AI承担了“质检员”的角色。4.1 为什么要把“审美要求”转成“可执行检查项”直接问AI“你觉得这个页面好看吗”它一定会说“好看”因为它没有真实视觉能力只会顺着你的话说。但如果你给它一份具体的检查清单它就能按照清单逐项排查并找出问题。我的做法是每次AI生成完页面代码后追加一句现在请从以下维度对代码进行UI自检发现问题直接修改代码后输出 1. 间距是否落在4px梯度内 2. 颜色是否都来自色板 3. 字体大小是否符合字号阶梯 4. 可交互元素是否都有hover/focus状态 5. 卡片、按钮、表格的圆角是否符合规范 6. 是否使用了内联样式或魔法数字这个操作看似很简单但效果很明显。AI会像过安检一样把不符合规范的地方找出来然后再重新生成一版修正后的代码。多跑一轮“生成再自检”整个页面的视觉完成度会提升一大截。4.2 状态反馈最容易忽略但最影响质感的细节如果只让我说一个“AI丑界面”和“设计师界面”的分水岭我会选择“状态反馈”没有之一。一个没有hover效果的按钮视觉上是“死”的一个有hover效果的按钮交互上才是“活”的。设计师稿里的按钮、菜单、表格行几乎每一个可点击区域都有对应的状态变化。而AI默认生成的代码里这些状态十有八九是缺失的。所以我在技能库里特别强调了一个规则所有可交互元素至少要有三种状态——默认态、hover态、focus态如果是按钮类元素还要有active态如果是列表项还要有selected态。具体表达方式如下- 按钮hover时背景变深或亮度变化focus时显示阴影环。 - 输入框focus时边框变为品牌色并带一道淡淡的聚焦光圈。 - 表格行hover时整行背景变为slate-50。 - 导航菜单项选中态用背景色文字加粗双重表达而不仅仅靠颜色深浅。这条规则让生成出来的代码有了“呼吸感”用户操作时能清晰感知到“这个元素当前处于什么状态”。很多AI生成的代码在静态截图下看着不错一交互就露怯逃不过这个原因。4.3 用响应式断点约束页面在不同屏幕下的表现另一个“AI默认写不好”的维度是响应式。AI生成的页面往往是“桌面端优先”宽度超过1440px时内容拉得很开低于768px时元素挤成一团完全没有断点概念。我在技能库里定了一条硬性规则所有页面必须使用响应式类名 - 默认移动端单列布局按钮全宽。 - md以上多列布局按钮自适应宽度。 - lg以上网格间距可适当增大但不得超出Token档位。举个例子生成一个卡片列表AI默认可能会写grid-cols-3在窄屏下把三张卡片挤在一起。带技能库后AI会写grid-cols-1 sm:grid-cols-2 lg:grid-cols-3这样在各端下都有合理的表现。老话说得好响应式做得好不好不是看代码能不能跑而是看每一个断点下页面有没有“设计过”。我见过太多AI生成页面在默认宽度下一切正常一缩浏览器就原形毕露。4.4 自检之后的人工修正留出“打磨窗口”虽然AI自检能修掉大部分问题但我最后还是留了一道人工检查的工序主要看两件事第一页面的“节奏感”对不对。AI自检能发现间距是否落在Token里但判断不了上下两个区块之间的间距是16还是24更合适这需要人看一眼实际效果后做微调。我通常会让AI先按规范生成然后我截图看一遍整体视觉只调整那些“看起来别扭”的地方。第二文案和真实业务逻辑是否匹配。AI生成的是视觉代码它对业务流程的理解有限经常会生成“查看详情”这种无意义链接。这些地方不值得在视觉层面纠结直接换掉就行。技术圈里流行一句话叫“AI负责把活干完人负责把活干好”放到UI生成这个场景里非常贴切。AI能在几秒内把一百多行UI代码拉出来人只需要在细节上花十分钟润色产出质量就能超过大部分手工写的页面。5. 实战中踩过的坑与排查技巧做这套技能库的过程中我踩了不少坑有些是提示词层面的有些是AI工具本身的特性导致的。整理几个高频问题给后来者避坑。5.1 “明明写了设计规范AI却视而不见”这个问题我一开始频繁遇到。写了一大段规范AI还是自说自话地输出蓝色渐变按钮、text-center大标题。排查后发现问题不在AI而在我的提示词表达方式。AI对“否定词”的理解很差。你在提示词里写“不要用内联样式”它真的可能用过一次内联样式因为它把“不要用”当成了一个低权重的提示。更有效的写法是直接给出替代方案使用class...而不是style...直接列出允许的类名组合AI照着做就行。所以我在技能库里尽量避免“禁止XX”的表述全部换成“请使用XX”的指令式句式。比如不要写禁止使用自定义颜色。要写所有颜色只能从slate和brand色板中选取。这样AI的遵守率会高很多。5.2 “组件库和设计规范冲突AI代码跑起来样式混乱”任何一个正经项目里都不会只用纯Tailwind你大概率会引入shadcn/ui、Radix或自己的组件库。这时候技能库和组件库之间如果没对齐AI生成的代码就会“一层写规范、一层被组件库默认样式覆盖”最终效果奇丑无比。我的经验是技能库必须先确认“基于哪个组件库”并在组件规范中写清楚“哪些用组件库原样式哪些需要覆盖”。比如我用shadcn/ui时会在技能库里写明按钮的尺寸和圆角沿用shadcn默认但颜色覆盖为品牌色输入框沿用shadcn默认但focus环颜色覆盖为品牌色。同时提示词里也要注明技术栈。我会在系统级提示词里加上技术栈React TypeScript Tailwind CSS shadcn/ui。 使用组件库已有组件时保持组件原有的结构和交互仅调整视觉样式。这样AI第一次生成的代码就能和项目现有代码无缝衔接而不是凭空创造一套和项目风格冲突的“新界面”。5.3 “规范太全AI反而记不住越到后面越走样”技能库内容做得越多越容易踩另一个坑长对话进行到后期AI会“遗忘”前面注入的规范回到泛化状态。这个问题在长上下文中特别明显。我的应对方式是把规范性内容分散到多个“检查点”上。与其在系统提示词里一次性塞满所有规则不如在每次生成前把与本次页面类型最相关的规范单独拎出来再强调一遍。比如生成表单页时附加一句“表单相关规范请重点参考01-component-spec.md中的表单章节”。另一个技巧是让AI在输出的代码文件顶部用注释写下它遵守了哪些规范。比如// 设计规范间距遵循4px梯度颜色遵循slate色板按钮状态齐全。这种做法相当于让AI“自我承诺”在生成后续代码时会下意识延续这份约定比只在一开始的系统提示词里写规则要牢固得多。5.4 “技能库做成了静态文档团队其他人不用怎么办”最后聊一个流程层面的坑。技能库如果只是我本地一个Markdown文件只有我自己在用那就失去了杠杆效应。后来我把技能库放到了团队共用的知识库里并和几个常用组件模板绑定在一起写了个简单的说明文档新页面开发时先看技能库再让AI生成生成完过一遍自检清单两个小时内可以交付一个质量很高的页面。更大的收益在于反向沉淀。每当我们发现AI生成的一个新问题比如“数据表格在窄屏下卡顿”“筛选器间距过大”就把对应的修正规则补进技能库下一次生成时会自动规避。这样我的技能库不是一成不变的而是越用越聪明、越沉淀越完备。其实这个方法适合每一个想用AI做UI的人哪怕你没有完整的设计师经验只要把“设计师的判断标准”沉淀成可执行的规则AI就能帮你把界面质感拉上来一大截。我自己的感觉是做UI这件事难的不是写代码而是把“什么是好看”讲清楚。技能库的本质就是把这句“讲不清楚的话”翻译成了AI听得懂的参数。