1. 为什么 AI 生成的 UI 总是“随机风格”用 AI 写前端页面的人大概率都遇到过这个场景让模型生成一个登录页第一次给你紫色渐变按钮第二次变成绿色圆角卡片第三次干脆用上了 Comic Sans 字体。单看每个页面都还行拼在一起就像三个不同团队做的产品。这不是模型能力不行而是它缺少一份稳定的“视觉约束”。你在提示词里写“现代简洁风格”模型对“现代”的理解每次都在漂移你写“主色 #635BFF”它可能只用在按钮上输入框边框又自己发挥。根本原因是自然语言描述设计意图本身就是高熵的。awesome-design-md 这个 GitHub 项目做的事情很直接——把 Stripe、Vercel、Linear、Notion 这些顶级产品的视觉规范逆向工程成纯 Markdown 文件。一个DESIGN.md放进项目根目录AI 在生成代码时就有了明确的颜色值、字号层级、间距基准、圆角规则。它相当于给 AI 一份“设计说明书”而不是让它猜。这篇文章面向的是已经在用 Cursor、Claude Code、Copilot 写 UI但被风格漂移折磨的开发者。我会给出可复制的项目结构、DESIGN.md 模板骨架、AI 工具配置方式以及如何用 TaoToken 统一 API 通道来验证生成结果的一致性。全程可跟做不需要设计背景。2. TaoToken 前置统一 Key 与 API 通道在讲设计规范之前先解决一个工程问题你可能会在多个 AI 工具里切换——Cursor 里配一个 KeyClaude Code 里配一个脚本里再配一个。每个工具的 API 地址、模型名、鉴权方式都不一样调试起来很烦。TaoToken 的作用是提供一个统一的 API 通道。你可以在它的控制台生成一个 Key然后在不同工具里都指向同一个入口。这样做的实际好处是当你要验证“同一个 DESIGN.md 在不同模型下生成的 UI 是否一致”时不需要来回改配置。具体操作路径打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后进入控制台在 API Keys 页面创建一个新 Key复制保存记录 API 基础地址https://taotoken.net/api如果你主要做长期编码或 Agent 类任务可以看 Coding Plan 页面了解额度方案如果只是临时验证模型输出用模型对话入口就够了。接入文档在 doc 页面有完整的参数说明。注意Key 只显示一次建议创建后立刻存到密码管理器或项目的.env.local里不要提交到 Git。3. 可复制配置项目结构与 DESIGN.md 骨架3.1 目录结构我建议的项目结构是这样的把设计规范和开发规范分开存放AI 工具读取时路径清晰my-project/ ├── DESIGN.md # 视觉规范来自 awesome-design-md ├── AGENTS.md # 开发规范构建命令、代码风格 ├── .env.local # API Key不提交 ├── src/ │ ├── components/ │ └── pages/ └── package.jsonDESIGN.md负责“长什么样”AGENTS.md负责“怎么构建”。两者配合AI 在生成代码时既有视觉约束又有工程约束。3.2 获取 DESIGN.md 的三种方式克隆完整仓库适合探索git clone https://github.com/VoltAgent/awesome-design-md.git单文件下载适合生产环境比如要 Vercel 风格curl -o DESIGN.md https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md手动复制适合只想看某个品牌在 GitHub 网页打开design-md/stripe/DESIGN.md点 Raw全选复制到项目根目录。3.3 DESIGN.md 模板骨架如果你要定制团队专属规范可以基于这个骨架改。核心是让 AI 能解析出明确的 token 值# Design System ## Colors - primary: #635BFF - primary-hover: #5851E8 - background: #0A2540 - surface: #1A3A5C - text-primary: #FFFFFF - text-secondary: #ADBDCC - border: #2D4A6B ## Typography - font-family: Inter, -apple-system, sans-serif - heading-1: 48px / 1.1 / 700 - heading-2: 32px / 1.2 / 600 - body: 16px / 1.5 / 400 - caption: 14px / 1.4 / 400 ## Spacing - base-unit: 4px - scale: 4, 8, 16, 24, 32, 48, 64 ## Radius - sm: 4px - md: 8px - lg: 12px - full: 9999px ## Components ### Button - primary: bg primary, text white, radius md, padding 12px 24px - secondary: bg transparent, border 1px border, text primary ### Card - bg surface, radius lg, padding 24px, border 1px border这份骨架的关键点颜色用十六进制字号写清 px/行高/字重间距给基准单位和倍数序列。AI 读到这些具体数值后不会再“自由发挥”。3.4 AI 工具配置在 Cursor 里你可以在项目根目录的.cursorrules或设置里加入Always reference DESIGN.md in the project root for all UI generation. Use only the colors, spacing, and typography defined there.在 Claude Code 里直接在对话中引用文件路径即可。如果你用 API 脚本调用配置骨架如下import os from openai import OpenAI client OpenAI( api_keyos.environ[TAOTOKEN_API_KEY], base_urlhttps://taotoken.net/api ) with open(DESIGN.md, r) as f: design_spec f.read() response client.chat.completions.create( modelclaude-sonnet-4-20250514, messages[ {role: system, content: f你是前端工程师严格遵循以下设计规范\n{design_spec}}, {role: user, content: 生成一个登录页面包含邮箱和密码输入框} ] ) print(response.choices[0].message.content)把TAOTOKEN_API_KEY写进.env.local不要硬编码在脚本里。4. 验证请求生成结果是否真的统一配置完成后需要验证 AI 是否真的遵循了 DESIGN.md。我试过的方法是用同一个规范连续生成三个不同页面然后对比关键视觉属性。4.1 验证脚本import os from openai import OpenAI client OpenAI( api_keyos.environ[TAOTOKEN_API_KEY], base_urlhttps://taotoken.net/api ) with open(DESIGN.md, r) as f: design_spec f.read() pages [登录页面, 定价表格, 用户仪表盘] for page in pages: response client.chat.completions.create( modelclaude-sonnet-4-20250514, messages[ {role: system, content: f严格遵循设计规范\n{design_spec}}, {role: user, content: f生成{page}的 HTML 和 Tailwind CSS 代码} ] ) with open(foutput/{page}.html, w) as f: f.write(response.choices[0].message.content) print(f{page} 生成完成)4.2 检查点生成后重点看这几个地方检查项预期结果常见偏差主色所有按钮/链接用 #635BFF某个页面用了默认蓝色圆角按钮 8px卡片 12px混用 4px 和 16px间距24px 的倍数出现 20px、30px字体Inter 或系统栈出现 serif 字体如果发现偏差说明 DESIGN.md 里对应 token 写得不够明确或者 system prompt 里没有强调“只使用规范中的值”。4.3 成功结果的样子当配置正确时三个页面放在一起按钮颜色一致、卡片圆角一致、标题字号层级一致。你不需要手动调 CSSAI 输出的代码直接能用。这就是“设计说明书”的价值——把主观的风格判断变成客观的 token 匹配。5. 本篇常见错排查5.1 AI 完全忽略 DESIGN.md最常见的原因是文件路径不对。AI 工具默认读取项目根目录如果你把 DESIGN.md 放在docs/下面它可能找不到。解决方法是放在根目录或者在提示词里写全路径。另一个原因是 system prompt 太弱。只写“参考 DESIGN.md”不够要写“严格遵循不得使用规范外的颜色和间距值”。5.2 颜色对了但间距还是乱检查 DESIGN.md 里的 spacing 部分是否给了明确的倍数序列。如果只写“使用 4px 基准”AI 可能理解为“尽量用 4 的倍数”但实际输出 6px、10px。写成scale: 4, 8, 16, 24, 32, 48, 64这种枚举形式约束力更强。5.3 不同模型输出差异大这是正常现象。Claude 系列对 Markdown 规范的遵循度通常更好GPT 系列在某些版本上会“自作主张”。如果你需要跨模型一致性建议在 system prompt 里加一句“如果规范中没有定义某个值使用最接近的已有 token不要创建新值”。5.4 API 请求报 401 或 404401 通常是 Key 没读到。检查.env.local是否被正确加载Python 里可以用python-dotenvfrom dotenv import load_dotenv load_dotenv(.env.local)404 通常是 base_url 写错。确认是https://taotoken.net/api不要多加/v1或结尾斜杠。如果问题持续去接入文档页面核对最新参数。5.5 生成代码里有规范外的颜色有时候 AI 会从 Tailwind 默认调色板里取色比如blue-500。解决方法是在 DESIGN.md 里明确写“禁止使用 Tailwind 默认调色板所有颜色必须来自本规范”。或者在提示词里加“只使用 DESIGN.md 中定义的十六进制值”。6. 把设计规范变成团队资产awesome-design-md 解决的不只是个人开发者的风格漂移问题。当团队多人用 AI 辅助开发时一份统一的 DESIGN.md 就是“设计宪法”。A 工程师生成的页面和 B 工程师生成的页面合并后不会风格撕裂因为两人用的都是同一份 token 定义。实际操作上建议把 DESIGN.md 纳入 Git 版本控制。设计规范的每次变更都有记录可以 Review、可以回滚。配合 AGENTS.md 定义构建命令和代码风格AI 开发就有了完整的约束底座。如果你还没试过可以从 Vercel 或 Linear 的风格开始复制一份 DESIGN.md 到项目根目录然后用 TaoToken 的模型对话入口快速验证一次生成效果。确认流程跑通后再根据团队品牌色做定制。API Keys 在控制台创建接入文档里有不同语言的调用示例。最后一个小技巧在 DESIGN.md 开头加一段“使用说明”告诉 AI 这个文件的用途和优先级。比如“本文件是项目唯一视觉规范来源优先级高于任何默认样式和第三方组件库样式”。这句话能显著提升 AI 的遵循度。
