DESIGN.md：纯文本设计系统，让 AI 编码 Agent 生成像素级匹配的 UI

你告诉 AI agent “做一个登录页”，它给你一个蓝底白字的 Bootstrap 默认样式。你让它在现有项目里加一个弹窗，它写出来的按钮和你的设计稿差了三个色号。agent 不蠢 —— 它只是不知道你的项目长什么样。

Figma 导出、CSS 变量 JSON、Storybook 组件库……把这些塞进 agent 上下文的套路，要么太慢，要么太贵，要么 agent 根本不认。Google Stitch 团队提出了一个更简单的东西：DESIGN.md。

DESIGN.md 是什么

DESIGN.md 是一个纯文本的设计系统文档。没有 JSON schema，没有 Figma 插件，没有特殊工具。就是一个 markdown 文件，放在项目根目录，AI 编码 agent 或 Google Stitch 读它就能理解你的 UI 应该长什么样。

文件	谁读	定义什么
AGENTS.md	编码 agent	怎么构建项目
DESIGN.md	设计 agent	项目的视觉和交互规范

Markdown 是 LLM 读得最舒服的格式，不需要解析、不需要配置。复制粘贴，agent 就懂了。

awesome-design-md 是这个格式的公共资源库：从真实网站上提取的 73 个 DESIGN.md 文件，覆盖 Claude、Stripe、Vercel、Notion、Figma、Apple、Nike、SpaceX 等品牌。GitHub 上 79.6k star，9.6k fork。

每个 DESIGN.md 里有什么

每个文件遵循 Google Stitch 的 DESIGN.md 格式，包含 9 个段落：

#	段落	内容
1	视觉主题与氛围	整体 mood、密度、设计哲学
2	颜色调色板与语义角色	语义名称 + 十六进制色值 + 功能角色
3	排版规则	字体族，完整的字号层级表
4	组件样式	按钮、卡片、输入框、导航，含各状态
5	布局原则	间距刻度、栅格、留白哲学
6	深度与层级	阴影系统、表面层级
7	该做和不该做	设计护栏和反模式
8	响应式行为	断点、触控目标、元素折叠策略
9	Agent 提示指南	颜色速查表，开箱即用的 prompt

每个品牌还附带两个可视化预览文件：preview.html（亮色）和 preview-dark.html（暗色），展示色板、字号层级、按钮、卡片的实际效果。

这不是 Figma 文件的平替 —— 它是 agent 直接能”看”的东西。LLM 不会打开 Figma，但它能逐行理解 markdown。

什么时候用

DESIGN.md 解决的是一个很具体的问题：AI agent 生成的 UI 和你的品牌不一致。

Vibe coding 快速原型：告诉 agent “按 DESIGN.md 的风格做一个面板”，出来的东西不会像默认组件库
多 agent 协作：不同 agent 在同一个项目里写的代码，视觉风格保持一致
新项目冷启动：从 awesome-design-md 里挑一个品牌风格（比如 Stripe 的暗色渐变、Linear 的极简紫调），直接复制 DESIGN.md，agent 就能按这个风格写 UI
团队规范对齐：开发者不需要记色号、字号、圆角，agent 代劳

这个东西不擅长的事

DESIGN.md 是给 agent 读的设计参考，不是给人读的完整设计稿。

不能替代 Figma：它不描述复杂的交互状态（如多步动画、手势反馈），适合静态视觉规范
无法覆盖极端边缘情况：9 段描述覆盖了常见组件，但高度定制化的界面仍需人工校准
品牌越复杂，效果越打折：简单、现代的品牌（Stripe、Vercel、Linear）效果好；视觉元素极度密集的品牌（如带复杂插画语言的平台），agent 的理解会有偏差
依赖 agent 的设计能力：底层 LLM 对 CSS 和视觉呈现的理解直接决定输出质量 —— Claude Code、Gemini CLI、Cursor 等不同 agent 的效果有差异

一句话：如果你的项目已经有成熟的设计系统和组件库，DESIGN.md 对你的价值有限。如果你在用 AI agent 搭建新界面、做原型、或者没有专职设计师，这东西能省你一整天。

怎么用

awesome-design-md 是一个 GitHub 仓库，不涉及安装。直接打开网站挑文件。

浏览 getdesign.md 或 GitHub 仓库中的 design-md/ 目录
找到你要的品牌风格，复制它的 DESIGN.md
把文件放到项目根目录
告诉 AI agent：“参考项目里的 DESIGN.md 生成 UI”

github 仓库本身也提供了快速使用方法：

# 克隆整个仓库
git clone https://github.com/VoltAgent/awesome-design-md.git

# 复制需要的 DESIGN.md 到你的项目
cp awesome-design-md/design-md/stripe/DESIGN.md ./DESIGN.md

实践示例

假设你要用 AI agent 做一个 SaaS 后台面板。你选了 Linear 的极简风格。

先把 Linear 的 DESIGN.md 复制到项目根目录，然后告诉 agent：

“按照项目里 DESIGN.md 的规范，生成一个项目仪表盘页面。包含侧边导航栏、顶部状态栏、主体区域用卡片展示项目进度、团队成员和待办任务列表。”

agent 读完 DESIGN.md 后，自动应用 Linear 的视觉规则：Inter Display 字体、紫色主色调（#5E6AD2）、严格的 4px 间距系统、无圆角（border-radius: 0）、暗色背景配半透明卡片……

如果没有 DESIGN.md，agent 会用默认偏好生成一个泛泛的 UI，和你想要的效果可能完全不搭。有了 DESIGN.md，一步到位。

/* agent 根据 DESIGN.md 生成的按钮样式示例 */
.btn-primary {
  background: var(--color-accent, #5E6AD2);
  color: #fff;
  border-radius: 0;
  font-family: 'Inter Display', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  letter-spacing: -0.05em;
}

自己写一个 DESIGN.md

awesome-design-md 提供的文件是别人网站的提取版本。如果你想给自己的项目写一个，按 Google Stitch 的格式来。

最小可用的 DESIGN.md：

# Project Design System

## Visual Theme & Atmosphere
Clean, minimal, developer-first. High contrast, generous whitespace.

## Color Palette & Roles
| Name | Hex | Role |
|---|---|---|
| Primary | #3B82F6 | CTAs, links, active states |
| Surface | #FFFFFF | Cards, modals, elevated containers |
| Background | #F8FAFC | Page background |
| Text Primary | #0F172A | Body copy, headings |

## Typography Rules
| Level | Family | Size | Weight |
|---|---|---|---|
| Display | Inter | 48px / 1.1 | 700 |
| H1 | Inter | 32px / 1.25 | 600 |
| H2 | Inter | 24px / 1.3 | 600 |
| Body | Inter | 16px / 1.6 | 400 |
| Caption | Inter | 13px / 1.5 | 400 |

## Layout Principles
Spacing scale: 4px system (4, 8, 12, 16, 24, 32, 48, 64)
Max content width: 1200px
Grid: 12-column, 24px gutter