📌 项目地址：google-labs-code/design.md | ⭐ 14,999 颗星 | 🔧 TypeScript | 📜 Apache-2.0
起点：不是“痛点”，是“对话断点”
我用AI生成UI组件时遇到一个具体问题：一次对话里，第一轮生成的按钮颜色是#B8422E，第二轮它改成了#D9534F。对话框没有设计记忆，每次生成都像从头开始。
这不是AI不够聪明，是上下文不够结构化。AI能理解“按钮是红色”，但对话轮次切换后，它不记得“红色具体指哪个色号”。
Google Labs的design.md项目（14999颗星，TypeScript）尝试解决这个问题：用一个标准文件告诉AI代理这套设计系统的全部规则。文件是Markdown格式，包含YAML前端设计标记和自然语言解释。
两种信息用一份文件装
DESIGN.md的结构是两层叠在一起。
YAML前端部分（---包裹的那段）给出机器能直接读的精确值：色号、字号、圆角像素、间距。比如colors.primary: "#1A1C1E"，AI拿到就能直接填进CSS。
Markdown正文（##小节）解释这些值为什么存在、怎么用。比如“深墨色（Primary #1A1C1E）用于标题和核心文本”、“Boston Clay（Tertiary #B8422E）是唯一的交互色”。
两者互补。YAML给数值，Markdown给意图。AI读到正文里的“Architectural Minimalism meets Journalistic Gravitas”，就能判断这个体系不是活泼风格，按钮不会用圆角加渐变。
下面是一个完整例子（来自项目README）：
---
name: Heritage
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
body-md:
fontFamily: Public Sans
fontSize: 1rem
label-caps:
fontFamily: Space Grotesk
fontSize: 0.75rem
rounded:
sm: 4px
md: 8px
spacing:
sm: 8px
md: 16px
---
## Overview
Architectural Minimalism meets Journalistic Gravitas. ...
## Colors
- Primary (#1A1C1E): Deep ink for headlines and core text.
- Secondary (#6C7278): Sophisticated slate for borders, captions, metadata.
- Tertiary (#B8422E): "Boston Clay" — the sole driver for interaction.
- Neutral (#F7F5F2): Warm limestone foundation, softer than pure white.工具链解决两个具体问题
项目带了两个CLI命令，输出都是JSON，方便CI或AI流程直接解析。
lint做两件事：验证DESIGN.md格式是否正确，检查WCAG对比度。直接跑：
npx @google/design.md lint DESIGN.md输出示例：
{
"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 }
}对比度检查对AI生成的页面是硬需求。很多AI生成的文字和背景对比度不够，lint在文件层面就报出来，不用等上线后调试。
diff比较两个版本的设计系统，检测哪些令牌变了、有没有退化：
npx @google/design.md diff DESIGN.md DESIGN-v2.md输出：
{
"tokens": {
"colors": { "added": ["accent"], "removed": [], "modified": ["tertiary"] },
"typography": { "added": [], "removed": [], "modified": [] }
},
"regression": false
}如果修改导致设计回退（比如某个颜色被改成和背景一样），regression字段会变成true。改设计时跑一下，不用人工对比两个大文件。
现状与边界
我试跑了一下lint和diff，命令都能正常输出JSON。文件本身是纯文本，可以放进任何Git仓库。
但有一个结构性问题要注意：lint输出里出现了path: "components.button-primary"。DESIGN.md文件本身没有定义组件路径，这意味着lint可能依赖外部组件映射，或者输出是来自组合检查的结果。项目spec目前标记为“alpha”，文件里没有组件层级的定义方式。实际使用可能需要额外配置。
另一个缺失是生成器。项目目前只有验证和对比工具，没有根据DESIGN.md生成CSS变量、Tailwind配置或设计令牌JSON的功能。如果社区补上这些，把设计文件直接转成前端代码的依赖，项目价值会更大。
一句话总结
14999颗星说明很多人遇到同一个问题。DESIGN.md的做法务实：把设计规范写成标准文件，让AI代理在文件层面读到精确值和使用规则，而不是在对话上下文里猜。工具还处于alpha阶段，但方向清楚——它可能成为AI原生开发流程里最底层的配置依赖。