AI 写网页时总爱偷懒——上来就是 Tailwind 默认配色、Inter 字体，一看就是模板味。五年前 Tailwind 创始人把 TailwindUI 里每个按钮都设成 bg-indigo-500，导致地球上每个 AI 生成的 UI 都是靛蓝色。
让它换风格，它就把紫色换成橙色，仅此而已。问题在于，我们很难用精确的专业语言指导 AI 调整视觉风格，说"高级一些"、"炫酷一些"这种抽象表达，AI 根本无法生成符合预期的效果。
最近几个月，GitHub 上涌现了大量让 AI 生成网页更美观的开源项目。其中 Google Labs 开源的 design.md 尤为值得关注——上线不久就拿到近 2 万 Star。
design.md 是什么
DESIGN.md 是写给 AI Agent 看的设计系统规范文件。类比一下就好理解：大家都在写 CLAUDE.md、AGENTS.md 教 AI 怎么写代码，而 DESIGN.md 教 AI 怎么写长得对的代码。
它最早是 Google 内部 AI 设计工具 Stitch 的配套规范，让设计师在 Stitch 里调好风格后，AI 能稳定输出符合该风格的 UI。2026 年 4 月，Google 把这套规范开源。
GitHub 地址：google-labs-code/design.md
你可能还听说过另一个项目 Awesome Design.md，它把 Claude、Notion、Apple 等知名网站的视觉风格逆向翻译成 DESIGN.md 文件，已有 70+ 个真实品牌样本。两者的区别是：Google 的 design.md 定义了文件格式标准，VoltAgent 的 Awesome Design.md 则是按这个标准填好的内容范例。
核心设计：两层结构
DESIGN.md 文件分为两层：
第一层：YAML front matter——机器可读的设计 token，包括颜色十六进制值、字号、间距、圆角等精确数值。
第二层：Markdown 正文——人可读的设计理念，解释为什么主色选这个、为什么按钮要做成圆角。
这是它最聪明的地方：AI 既拿到了精确数值可以执行，又理解了设计意图可以判断。
以下是一段 Heritage 风格的官方示例：
---
name: Heritage
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
rounded:
sm: 4px
md: 8px
spacing:
sm: 8px
md: 16px
---
## 概览
建筑极简主义遇上报刊庄重感。UI 呈现高级哑光质感——像高端大报或当代画廊。
## 配色
- **主色(#1A1C1E)**：深墨色，用于标题和正文核心文字
- **次色(#6C7278)**：沉稳石板灰，用于边框、说明文字、元数据
- **强调色(#B8422E)**："波士顿黏土"——唯一的交互驱动色
- **中性色(#F7F5F2)**：暖石灰底色，比纯白更柔和
AI 读了这个文件，就会输出一个 Public Sans 字体、深色标题、温暖米色背景、Boston Clay 红色 CTA 按钮的页面。每个值都有出处，每段意图都有解释。
配套 CLI 工具
Google 提供了 @google/design.md CLI 工具，零配置，npx 直接跑：
- lint：校验文件，自动跑 8 条规则，包括引用检查、主色缺失、WCAG 对比度、孤立 token、章节顺序等。校验结果输出 JSON，AI agent 可以直接消费。
- diff：对比两个版本的 DESIGN.md，发现 token 级别的回归。
- export：导出 Tailwind 主题配置 / W3C DTCG 标准 token，跟主流设计工具无缝衔接。
- spec：输出规范文档，可以塞进 AI 的 system prompt 里让它完整理解格式。
npx @google/design.md lint DESIGN.md
不用装包、不用配置文件，开箱即用。
配合 Google Stitch 使用
设计师在 Stitch 里调好一个设计，Stitch 自动从画布生成对应的 DESIGN.md。把这个文件丢进项目仓库根目录，Claude Code 读它生成 UI，颜色、字体、间距就不会跑偏。
这本质上是 Google 想给 AI 一个共享的设计语言，让设计师、开发者、Agent 三方有一套标准的描述方式。
生态也在快速壮大。除了官方的 design.md 和 VoltAgent 的范例库，已经有 designkit.sh、getdesign.md 等第三方聚合站，专门收集和浏览 DESIGN.md 文件。
快速上手
三步就能用起来：
# 第一步：在项目根目录创建 DESIGN.md
touch DESIGN.md
# 第二步：写入设计 token 和理念（可参考 Heritage 示例修改）
# 第三步：lint 校验
npx @google/design.md lint DESIGN.md
如果项目已经用了 Tailwind，可以一行命令导出主题配置：
npx @google/design.md export --format tailwind DESIGN.md > tailwind.theme.json
配合 Claude Code 的 frontend-design skill 效果更佳。在 CLAUDE.md 里加一行，让它读取项目根目录的 DESIGN.md，就会把里面的 token 当作生成 UI 的依据。
总结
用 AI Agent 绕不开一个核心问题：怎么把自己脑子里好设计的标准，稳定地传给 AI。代码层面，AGENTS.md 和 CLAUDE.md 已经给了答案。设计层面，DESIGN.md 补上了这块。
当 AI 写代码成为常态，怎么告诉 AI 什么是好设计会变成新的硬技能。门槛低到一份 Markdown 文件，效果立竿见影。
开源地址：google-labs-code/design.md