folo·21 天前
2 万多 Star！Google 开源了这个神级 GitHub 项目。
原创 逛逛 2026-06-30 16:39 浙江
因为训练的偏好，AI 写网页的时候喜欢偷懒，它生成的网页上来就是 Tailwind 默认颜色、Inter 字体。
但是，五年前 Tailwind 创始人将 TailwindUI 中的每个按钮都设为 bg-indigo-500，这导致地球上每个 AI 生成的 UI 也都是靛蓝色的。
这种配色一看就是 AI 写的模板味。
让它换风格，它就把紫色换成橙色，仅此而已。
但是我们又表达不出很精确专业的指导，只能说高级一些、炫酷一些。
往往这些很模糊、抽象的表达，让 AI 没办法生成真的符合预期的效果。
最近几个月，GitHub 上涌现了一大批设计相关，或者说让 AI 生成的网页更美观的开源项目。
改天搞一个合集，整体聊一聊。
今天看到 Google Labs 出了个开源项目叫 design.md，就是针对这个问题提供了一个规范和方法。
去 GitHub 一看，近 2 万 Star。
01
它到底是个啥
DESIGN.md 是写给 AI Agent 看的设计系统规范文件。
类比一下你可能更清楚。
最近一年大家都在写 CLAUDE.md、AGENTS.md，那是教 AI 怎么写代码，用什么框架、什么命名风格、什么测试规范。
DESIGN.md 是教 AI 怎么写长得对的代码。
它最早是 Google 自家 AI 设计工具 Stitch 内部在用的，让设计师在 Stitch 里调出风格后，AI 能稳定输出符合那种风格的 UI。
2026 年 4 月，Google 把这套规范抽出来开源成了 design.md 这个项目。
地址：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**
设计师在 Stitch 里调好一个设计，Stitch 自动从画布生成对应的 DESIGN.md。
把这个文件丢进项目仓库根目录，Claude Code 读它生成 UI，颜色、字体、间距就不会跑偏。
这个其实就是 Google 想给 AI 一个共享的设计语言，让设计师、开发者、agent 三方有一套标准的描述方式。
生态也起来了。
除了官方的 design.md 和 VoltAgent 的范例库，已经有 designkit.sh、getdesign.md 这种第三方聚合站，专门收集和浏览 DESIGN.md 文件。
05
**怎么用起来**
三步就行了：
第一步：在项目根目录建个 DESIGN.md 文件
touch DESIGN.md
第二步：把上面的 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 的依据。
06
**写在最后**
用 AI Agent 绕不开一个核心问题：怎么把自己脑子里那个好设计的标准，稳定地传给 AI。
代码层面，AGENTS.md 和 CLAUDE.md 已经给了答案。
设计层面，DESIGN.md 现在补上了这块。当 AI 写代码成为常态，怎么告诉 AI 什么是好设计会变成新的硬技能。
门槛低到一份 Markdown 文件，但效果立竿见影。
开源地址：https://github.com/google-labs-code/design.md
07
点击下方卡片，关注逛逛 GitHub
这个公众号历史发布过很多有趣的开源项目，如果你懒得翻文章一个个找，你直接关注微信公众号：逛逛 GitHub ，后台对话聊天就行了：
[跳转微信打开](https://wechat2rss.bestblogs.dev/link-proxy/?k=ab9e475d&r=1&u=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzUxNjg4NDEzNA%3D%3D%26mid%3D2247534970%26idx%3D1%26sn%3D99c4cfd8efb54884104642e3d7ce3d8b)