awesome-design-md 项目分析：71 个顶级网站的 DESIGN.md 是如何被逆向工程的
如果一个 Markdown 文件能让 AI 精准还原 Stripe 的渐变网格、Linear 的薰衣草紫、Apple 的纯白空间——那我们是不是正在见证”设计规范”这个概念的重新定义？
一、什么是 DESIGN.md
DESIGN.md 是由 Google Stitch 团队提出的一个新概念：用纯 Markdown 文件描述一网站的完整视觉设计系统。
它的核心逻辑很简单：
| 文件 | 谁读它 | 它定义什么 |
|---|---|---|
AGENTS.md | 编程 Agent | 如何构建项目 |
DESIGN.md | 设计 Agent | 项目应该长什么样 |
不需要 Figma 导出，不需要 JSON Schema，不需要专门的工具。把一个 DESIGN.md 丢进项目根目录，任何 AI 编程助手（Claude Code、Codex、Gemini CLI）或 Google Stitch 都能立刻理解：配色该用什么色值、标题该用多大字号、圆角该设多少像素、按钮该用什么样的阴影。
Markdown 是 LLM 最容易理解的格式——没有解析成本，没有配置开销。
二、awesome-design-md 项目概况
awesome-design-md 是一个 Awesome 列表仓库（遵循 awesome-re 标准），以 MIT 许可证开源，收集了 71 个真实网站的 DESIGN.md 文件。
基本数据
| 指标 | 数值 |
|---|---|
| DESIGN.md 数量 | 71 个 |
| 总行数 | 约 35,000 行（平均每个文件 ~500 行） |
| 最长单个文件 | 852 行（Mintlify） |
| 最短单个文件 | 92 行（Webflow） |
| 许可证 | MIT |
| 贡献方式 | Issue 讨论 → PR 审核 |
行业覆盖
这 71 个网站横跨了 10 大行业类别：
| 行业分类 | 代表品牌 |
|---|---|
| AI & LLM 平台 | Claude、Cohere、OpenAI、xAI、Ollama、Mistral AI、Runway、ElevenLabs |
| 开发者工具 | Cursor、Vercel、Raycast、Warp、Lovable、Expo、Superhuman |
| 后端/数据库/DevOps | Supabase、MongoDB、ClickHouse、Sentry、PostHog、HashiCorp、Sanity |
| 生产力 & SaaS | Linear、Notion、Figma、Cal.com、Mintlify、Intercom、Zapier、Resend |
| 金融科技 & 加密货币 | Stripe、Coinbase、Binance、Revolut、Mastercard、Wise、Kraken |
| 电商 & 零售 | Airbnb、Shopify、Nike、Starbucks、Meta |
| 媒体 & 消费电子 | Apple、Spotify、SpaceX、NVIDIA、The Verge、WIRED、Pinterest、Uber |
| 汽车 | Tesla、BMW、BMW M、Ferrari、Lamborghini、Bugatti、Renault |
| 设计 & 创意工具 | Framer、Webflow、Airtable、Miro、Clay |
| 通讯 | Vodafone |
几乎每一家知名互联网公司的视觉语言，都能在这里找到对应的 DESIGN.md。
三、DESIGN.md 的 9 段式结构
每个 DESIGN.md 文件都遵循 Google Stitch 定义的格式规范，包含 9 个核心部分：
---
version: alpha
name: 网站名称
description: 一段话概括整个视觉系统
colors:
primary: "主色 #HEX"
canvas: "画布背景色"
ink: "正文色"
# ... 数十个语义化色值
typography:
display-xl:
fontFamily: "字体族"
fontSize: 80px
fontWeight: 600
lineHeight: 1.05
letterSpacing: -3.0px
# ... 完整的字号层级表
rounded:
xs: 4px
sm: 6px
md: 8px
# ... 圆角尺度
spacing:
xxs: 4px
xs: 8px
# ... 间距系统
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
# ... 完整的组件样式定义
---9 个核心段落
| # | 段落 | 内容 |
|---|---|---|
| 1 | Visual Theme & Atmosphere | 整体 mood、密度、设计哲学 |
| 2 | Color Palette & Roles | 每个颜色的语义角色（不只是色值，而是”这个颜色用来干什么”） |
| 3 | Typography Rules | 完整的字体族、字号层级、字重、行高、字间距 |
| 4 | Component Stylings | 按钮、卡片、输入框、导航栏……每个组件的每个状态 |
| 5 | Layout Principles | 间距尺度、网格系统、留白哲学 |
| 6 | Depth & Elevation | 阴影系统、表面层级 |
| 7 | Do’s and Don’ts | 设计边界——“该做”和”不该做” |
| 8 | Responsive Behavior | 断点、触控目标、响应式折叠策略 |
| 9 | Agent Prompt Guide | 配色速查表、即用 Prompt |
这种结构的价值在于：它不只是”设计规范的机器可读版”，而是”设计决策的结构化表达”。
四、几个值得细看的案例
1. Linear：极致暗色的克制
Linear 的 DESIGN.md 是这份收集中最克制的案例之一：
- 画布色是
#010102——几乎是纯黑，但带着极淡的蓝色调。这是整个收集中最深的暗色。 - 唯一的彩色是薰衣草紫蓝
#5e6ad2——只用在品牌标识、焦点环、主 CTA 按钮。绝不装饰性地使用。 - 四级表面阶梯（canvas → surface-1 → surface-2 → surface-3）替代阴影来承载层次关系。
- 产品截图是主角——营销页面几乎就是 Linear 产品 UI 的深色框架展示。
关键原则：“不引入第二种彩色，不做氛围渐变，不做聚光灯卡片。“
2. Stripe：基础设施级别的优雅
Stripe 的 DESIGN.md 展示了另一种完全不同的风格：
- 白色画布 + 深蓝墨水色（
#0d253d） - 电光靛蓝
#533afd作为主色——出现在几乎每个页面的上三分之一处的渐变网格中 - Sohne 字体以 300 极细字重展示大标题——负字间距（-1.4px 在 56px 时），营造编辑密度感
- 按钮是紧半径药丸形，卡片放在近白色表面上
- 仪表板则翻转极性——切换到熟悉的深色 App 外壳
3. BMW M：赛车性能的视觉表达
汽车品牌的 DESIGN.md 展现了完全不同的设计语言：
- M 三色条纹（浅蓝、深蓝、红色）作为性能标识
- 高对比度设计——纯黑底色配明亮的 M 色点缀
- 数据密集仪表板美学——性能指标的可视化优先
- 零圆角或极小圆角——传达精确、工程感
4. The Verge：编辑密度的极致
科技媒体的 DESIGN.md 展示了编辑设计的另一极：
- 酸性薄荷和紫外紫色调——极其鲜明的编辑色彩
- Manuka display 字体——自定义衬线体，用于大标题
- 报纸式的文本密度——文章页面塞满内容，几乎没有喘息空间
- 靛蓝色链接——传统编辑设计的数字继承
五、这个项目的技术方法论
设计令牌（Design Tokens）的逆向提取
每个 DESIGN.md 本质上是一组设计令牌的逆向工程。从真实的 CSS 变量和渲染结果中提取：
真实网站的 CSS 变量
→ 色值、字重、间距的精确提取
→ 语义化命名（不只是 #5e6ad2，而是 "Linear lavender-blue, primary CTA"）
→ 组件级封装（button-primary 的颜色、字号、圆角、内边距全部关联到令牌）
→ 结构化 Markdown 输出这不是简单的截图配色分析，而是对完整视觉系统的逆向建模。
前端预览文件
每个网站目录下还包含 preview.html 和 preview-dark.html，用于可视化展示该 DESIGN.md 中定义的色板、字号阶梯、按钮样式和卡片效果。这些预览文件既是质量检查工具，也是人类设计师的参考。
六、DESIGN.md 的生态位
与 Open Design 的关系
在上一篇博客中分析过的 Open Design 项目，正是 awesome-design-md 的最大消费者之一。
Open Design 内置了 70 套从 awesome-design-md 提取的 Design System，加上 2 套手工编写的 starter，共 72 套可直接在 Web 界面中切换的视觉语言。
用户在 Open Design 的下拉菜单中选择 “Linear” 或 “Stripe”，对应的 DESIGN.md 就会被加载，与当前 Skill 的 Prompt 组合，发送给 Coding Agent。Agent 就会按照该品牌的视觉规范输出 HTML。
可以说，awesome-design-md 是 AI 驱动设计工具的基石。
与 AGENTS.md 的互补
GitHub 上的 AGENTS.md 文化（告诉 AI 如何构建代码）已经普及，DESIGN.md 填补了另一半空白：
AGENTS.md → 告诉 AI "代码怎么写"
DESIGN.md → 告诉 AI "界面长什么样"两者结合，AI Agent 就能从头到尾独立完成一个项目。
七、项目的局限与展望
当前的局限
- 静态提取——DESIGN.md 是对某一时刻网站视觉的快照，网站更新后需要同步更新
- 纯视觉层——不包含交互设计、动效规范、无障碍（a11y）细节
- 人工维护——贡献流程是”先开 Issue 讨论 → 再提 PR”，更新速度依赖社区
- 版本标记为 alpha——格式仍在演进中
未来的想象空间
- 自动化工具——开发 DESIGN.md 自动生成器（从 URL 到 DESIGN.md 的逆向工具）
- 版本对比——追踪同一网站 DESIGN.md 的演进历史
- 设计差异分析——比较两个品牌 DESIGN.md 的差异，做竞品视觉分析
- 设计系统迁移——把现有项目从 A 品牌的视觉风格一键切换到 B 品牌
八、如何开始使用
方式一：直接用于 AI 项目
# 复制一个 DESIGN.md 到你的项目根目录
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear.app/DESIGN.md
# 然后告诉你的 AI 助手：
# "Build me a landing page that looks like this DESIGN.md"方式二：通过 Open Design Web 界面
访问 Open Design 的 Web 界面，在 Design System 下拉菜单中直接选择任意品牌，配合 Skill 使用。
方式三：学习设计系统方法论
即使不用于 AI，阅读这些 DESIGN.md 也是极好的设计系统学习材料。每个文件都是一个完整的设计决策文档，展示了顶级团队是如何系统化思考视觉一致性的。
九、总结
awesome-design-md 做的事情，用一句话概括就是：把”好设计”从”只存在于设计师脑子里”变成了”任何 AI 都能读取的 Markdown 文件”。
71 个顶级网站，35,000 行设计规范，10 大行业覆盖。这不是一个普通的 Awesome 列表——它是一份互联网视觉语言的百科全书。
当 AI 编程助手越来越强大时，它们最缺的不是写代码的能力，而是”知道代码应该长什么样”的判断力。awesome-design-md 恰好填补了这个空白。
项目地址：VoltAgent/awesome-design-md 在线浏览：getdesign.md DESIGN.md 规范文档：Google Stitch