2 万多 Star！Google 开源了这神级 GitHub 项目。
AI生成的网页总是带着明显的模板味，默认配色与字体暴露了机器痕迹。谷歌的 DESIGN.md 标准为这类问题提供了解决方案，让AI理解设计的精确值与意图。
由于训练数据的偏向，AI在生成网页时倾向于使用Tailwind的默认颜色和Inter字体，这种习惯性选择导致页面缺乏个性。
五年前，Tailwind创始人将TailwindUI中的每个按钮都设为bg-indigo-500，从而使得全球范围内AI生成的UI几乎都呈现靛蓝色调。
这种配色方案一眼就能看出是AI产出的模板化风格。
地址：https://github.com/google-labs-code/design.md它与Awesome Design.md有何不同？
此前我推荐过一个名为Awesome Design.md的开源项目。
该项目将Claude、Notion、Apple等知名网站的视觉风格逆向转化为DESIGN.md文件。
目前已有70多个真实品牌样本可供直接使用。
开源地址：https://github.com/voltagent/awesome-design-md谷歌的design.md定义了DESIGN.md文件的标准格式：YAML front matter存放机器可读的设计token，Markdown正文承载人可读的设计理念。
可以理解为Google制定规则，VoltAgent遵循规则填充内容。谷歌的规范说明了文件编写方式，VoltAgent的项目则扒下了各大网站的设计细节。
02
核心设计
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按钮的页面。
每个数值都有来源，每种意图都有解释。
03
配套CLI：四条命令够用了
CLI工具名为@google/design.md，无需配置，直接通过npx运行：
npx@google/design.md lint DESIGN.md校验结果输出为JSON格式，AI agent可直接消费：
```json
{
"findings": [
{
"severity":"warning",
"path":"components.button-primary",
"message":"textColor (#ffffff) on backgroundColor (#1A1C1E) has contrast ratio 15.42:1 — passes WCAG AA."
}
],
"summary": {
"errors":0,
"warnings":1,
"info":1
}
}
```四条命令各自承担不同功能：
lint：校验文件，自动运行8条规则，包括broken引用、缺失主色、WCAG对比度、孤立token、章节顺序等
diff：对比两个版本的DESIGN.md，发现token级别的回归
export：导出Tailwind主题配置或W3C DTCG标准token，与主流设计工具无缝衔接
spec：输出规范文档，可嵌入AI的system prompt中，使其完整理解格式
无需安装包，无需配置文件，开箱即用。
04
最爽的玩法是配合Stitch
05
怎么用起来
只需三步即可：
# 第一步：在项目根目录建个 DESIGN.md 文件
touchDESIGN.md
# 第二步：把上面的 Heritage 示例复制进去改改
# 第三步：跑 lint 校验
npx @google/design.md lint DESIGN.md如果项目已使用Tailwind，可通过一行命令导出主题配置：
npx@google/design.mdexport--format tailwindDESIGN.md> tailwind.theme.json配合Claude Code的frontend-design skill使用效果更佳。
在CLAUDE.md中添加一行指令，让其读取项目根目录的DESIGN.md，即可将其中token作为生成UI的依据。
06
写在最后
使用AI Agent时，一个核心问题始终存在：如何将自身对好设计的标准稳定传递给AI。
代码层面，AGENTS.md和CLAUDE.md已经给出了答案。
设计层面，DESIGN.md现在填补了这片空白。当AI编码成为常态，如何向AI传达什么是好设计将演变为一项新的硬技能。
门槛低至一份Markdown文件，但效果立竿见影。
开源地址：https://github.com/google-labs-code/design.mdDESIGN.md标准为AI设计提供了可遵循的规范，从色彩到间距，从意图到执行，一份文件即可传递高质量设计理念。当AI编码成为常态，掌握这一设计语言将化为关键技能。