夜雨聆风你跟 AI 说「帮我做一个登录页面，用我们的品牌色」。
它生成了一个，你觉得还行，颜色差不多。
然后你又让它加一个弹窗。弹窗的颜色跟登录页不一样。你让它改，它改了这个，改了那个，第三个地方又偏了。一来一回，跟 AI 讨论设计的精力，比你自己写 CSS 还多。
这不是 AI 不行。是 AI 没有一个设计说明书可以看。你每次口述品牌色、字体、圆角——每次描述都有细微偏差，每次结果就不同。
Google 今天在 GitHub 上火了一个项目，就是来解决这个的。
它叫 DESIGN.md。
你把品牌的设计规范写在一个文件里——颜色、字体、间距、图标风格、组件变体——然后 AI 编程助手每次生成 UI 之前，自动读这个文件。从此生成的按钮、卡片、弹窗、导航，全部自动对齐你的设计系统。
01 真实场景：一个按钮引发的无限循环
讲一个所有用 AI 写前端的人都经历过的场景。
你的产品主色是 #1a1a2e，强调色是 #e94560，正文字体 Inter，代码字体 JetBrains Mono，圆角统一 8px。
你让 Claude Code 做一个设置页面。它做出来了，但是按钮圆角用了 4px，标题字体用了系统默认，强调色变成了 #ff6b6b。你说你改一下，按钮圆角 8px，标题字体 Inter bold。它改了。但是你发现旁边那个筛选面板的圆角还是 4px，底部导航的颜色又变成了 #ff4757。
你开始一个一个地改。
这就是没有 DESIGN.md 的时候——AI 知道怎么做 UI，但不知道你品牌的规矩是什么。你每次都要口头重复一遍，每次描述都不一样，每次结果就不同。一个下午就这么磨掉了。
有了 DESIGN.md 之后，整个流程变成这样：
你在项目根目录放一个设计规范文件，写上主色、辅色、字体栈、间距体系、圆角、阴影、图标风格。AI 打开项目先读这个文件。你说「做一个设置页面」，它自动用 Inter bold 做标题、8px 圆角做卡片、#1a1a2e 做主背景。你说「加一个弹窗」，它自动匹配同样的配色和字体。你说「这组颜色改一下」，你改 DESIGN.md 里一个变量，所有已生成的组件自动对齐——不是靠 AI 记住，是靠 AI 每次生成前重读文件。
02 一个文件怎么写，AI 就听话了
DESIGN.md 不是让你写几百行的设计规范文档。它的格式很轻。
一个典型的 DESIGN.md 长这样：
colors: primary #1a1a2e, accent #e94560, background #f8f9fa。
typography: headings Inter bold, body Inter regular 16px/1.6, code JetBrains Mono 14px。
spacing: base 8px, sections 24px, cards 16px padding。
components: buttons 8px radius 40px height, cards 12px radius subtle shadow, inputs 8px radius 1px border。
icon-style: phosphor regular, 24px。
就这么多。五六个板块，每个板块几行字。不用写 Markdown 表格，不用写 JSON，就是用人类能看懂的关键词描述。AI 编程助手读完就懂。
它不是让你重新学一套语法。是把你脑子里已经知道的品牌规范——那些你每次口头告诉 AI 的东西——写成一个结构化文件，放在一个固定的地方。
AI 的 prompt 里多一句话：「先读 DESIGN.md，所有 UI 输出必须对齐这个文件。」
03 不只是省时间——是省心力
这个工具的价值不只是少改几次颜色。
你团队有新成员用 AI 生成 UI，不用你口头传授品牌规范了。他拉代码，AI 自动读 DESIGN.md，他生成的页面自动跟你的产品长一个样。
你外包一个页面给外部开发者，不用反复截图标注「这个颜色不对」「这个圆角大了」。给他们代码仓库，DESIGN.md 就在里面，他们用 AI 生成的 UI 自然就对齐了。
你做一个新产品，想快速出 MVP。在项目初期就把 DESIGN.md 写好，之后 AI 生成的所有界面都在一个设计体系里——不会出现首页一个风格、设置页另一个风格的情况。
本质上，它是把「设计共识」从人的脑子里搬到了一个文件里。以前设计共识靠口头传递、靠设计稿标注、靠截图沟通，丢信息是常态。现在 AI 读一个文件，永远不吃字、不记错、不偷懒。
04 谁该马上搞一个
独立开发者 / 小团队。 你自己既写代码又做设计，只要把脑子里那套规范写下来，AI 替你严格执行。
用 AI 写前端的人。 如果你已经在用 Claude Code、Cursor、Copilot 生成 UI，一个 DESIGN.md 能让你少说至少一半的废话——不用再每次强调「用我们的品牌色」。
有多人协作的团队。 不同人用 AI 生成的 UI 风格不统一，DESIGN.md 就是团队级的 AI 设计约束。新人来，拉代码，自动对齐。
反过来，谁暂时用不上。 如果你主要写后端、数据分析、脚本自动化——UI 场景不多的，这东西暂时跟你的关系不大。
05 现在的局限
不是所有的 AI 编程助手都自动支持。 目前主要是 Claude Code、Cursor、Copilot 这些能读项目文件的 Agent。纯聊天式的 AI 工具读不到你本地的 DESIGN.md。
规范写得越细，结果越稳定。 只写一个主色不够。字体、间距、圆角、阴影——写全了 AI 才能准确输出。刚开始可能觉得烦，但比起每次口头纠正，一次性写完是值的。
复杂视觉风格难以捕捉。 如果你的品牌有强烈的插画风格、独特的动效语言、非标准化的视觉表达——这些超出了 DESIGN.md 能描述的边界，需要更专业的设计系统工具。
写在最后
DESIGN.md 的理念特别简单：把人和 AI 之间的「口头约定」变成「书面协议」。
以前没有 AI 设计助手的时候，设计规范是做给人看的。现在 AI 也在写代码、做界面了，设计规范也应该有一份是写给 AI 看的。
你不是设计师也没关系。你知道你的产品主色是什么、字体用的什么、圆角大概多大——写下来，放项目里，你的 AI 编程助手从此就是一个懂你品牌的设计师助手。
你让 AI 做界面的时候，有没有「颜色总对不上」的烦恼？评论区打 1：天天遇到，烦死了。打 2：偶尔，但改起来确实烦。打 3：我不做 UI，跟我没关系。
如果你想拿今天工具的原始地址和使用资料，回复关键词：今日工具。
