AI 写的 UI 总跑偏?Google 给了它一份设计说明书

你让 AI 写一个设置页，它很快交出代码：功能能跑，按钮能点，布局也没有大错。问题是，第一屏像后台管理，第二屏像 SaaS 官网，第三个弹窗突然变成了默认 Tailwind 蓝。

这不是哪个模型「审美差」这么简单。对 coding agent 来说，产品的视觉语言经常散落在 Figma、旧页面、设计师口头要求和几段 CSS 里。它能读代码，但未必知道哪个颜色是品牌色，哪个圆角是组件规范，哪个间距只是上次随手写的。

开源项目简介

DESIGN.md 是 Google Labs 开源的一个格式规范，目标很直接：把设计系统写成一个 coding agent 能读、能校验、能跟着执行的 Markdown 文件。

它的结构有点像给 UI 的 AGENTS.md。文件顶部用 YAML front matter 写机器可读的 design tokens，比如颜色、字体、字号、间距、圆角和组件 token；下面再用 Markdown 写人能读懂的设计理由，比如为什么主色要克制、哪些按钮应该更重、什么时候不要用阴影。

这样一来，Claude Code、Cursor、Copilot 或其他会读仓库上下文的工具，不用每次从零猜你的 UI 风格。它可以先读 DESIGN.md，再按同一套视觉规则生成页面和组件。

几个核心亮点

第一，它把「感觉」拆成了可执行约束。颜色不再是「高级一点」，而是 primary: "#1A1C1E"；按钮圆角不再靠模型猜，而是引用 {rounded.sm}。这对反复让 AI 改 UI 的人很实用，因为你终于有了一个能被版本控制的审美入口。

第二，它不是只给人看的文档。项目自带 CLI，可以 lint 一个 DESIGN.md，检查 broken token reference、缺失主色、组件前景/背景对比度是否达不到 WCAG AA 等问题。输出是结构化 JSON，agent 可以把这些 findings 当成下一轮修改依据。

第三，它能做 diff 和 export。diff 可以比较两个设计系统版本，报告 token 增删改和潜在回退；export 可以导出 Tailwind v3/v4、DTCG 等格式。也就是说，它不只是提示词材料，还能进入前端工程链路。

第四，门槛很低。它本质上还是一个文本文件，能放进 Git，能 review，能被人手改，也能被 agent 改。对小团队来说，这比先搭一套完整设计系统轻很多。

怎么用

最小用法是在项目根目录新建 DESIGN.md，先写少量关键 token：主色、背景色、正文和标题字体、基础间距、按钮圆角。不要一上来追求完整，先覆盖最容易跑偏的部分。

然后安装或直接运行官方 CLI：

npx @google/design.md lint DESIGN.md

如果你在 Windows 上遇到 @ 或 .md 命令名的问题，README 里也提醒了两个处理方式：安装时可给包名加引号，脚本里可以用 designmd 这个 alias。

实际配合 agent 时，可以在任务里明确一句：先读取根目录的 DESIGN.md，再实现页面；完成后用 npx @google/design.md lint DESIGN.md 或相关规则检查设计 token。做产品 UI 时，这比反复说「再现代一点」「不要那么紫」有效得多。

简短判断

DESIGN.md 现在还是 alpha，规范会变，生态也还早。它不能替代设计师，更不能保证 AI 一次生成好看的界面。

但它抓住了一个真问题：coding agent 写前端时，缺的往往不是组件代码，而是稳定、可传递、可检查的设计上下文。对于正在用 AI 做原型、后台、SaaS 页面的人，这个项目值得放进工具箱试一次。

关注「唔想编程」：每天挑一个真正有用的开源项目、AI 编程工具或开发者工作流，少一点热闹，多一点能上手的东西。

项目/源码链接：

https://github.com/google-labs-code/design.md