awesome-design-md

给AI编程工具装上「视觉基因」： awesome-design-md 如何用 Markdown 文件让 AI 生成像素级一致的 UI

想象这样一个场景：你是一名产品设计师，刚刚完成了一套精致的品牌设计系统——主色调是暖珊瑚红、标题字体用了衬线体、正文是无障碍友好的人文字体。你把设计稿交给开发团队，对方点头说「没问题」。三周后，你打开生成的页面，发现主色调变成了蓝色、字体换成了系统默认、间距全靠感觉——设计意图在 AI 生成的那一刻就已经「跑偏」了。

这个问题几乎是所有 AI 生成 UI 场景的通病：AI 能写代码，但它不理解「你想要什么风格」。设计稿（Figma/Sketch）需要人工解析，JSON Token 文件需要专门的工具转换。awesome-design-md 给出了一套更优雅的解法——用 Markdown 文件，直接告诉 AI「你的 UI 应该长什么样」，不需要任何额外工具，不需要 Figma 导出，也不需要特殊配置。

背景：Google Stitch 带来的设计文档新范式

2024 年，Google 在 I/O 大会上推出了一款实验性工具 Google Stitch，用来解决 AI 编程工具与设计系统之间的「语言鸿沟」。它的核心思想非常直接：设计系统不需要总是复杂的 JSON 格式或 Figma API，一份结构化的 Markdown 文件同样可以让 AI 理解设计意图。

Google Stitch 将这种文档格式命名为 DESIGN.md。和编程领域的 AGENTS.md 一样，它本质上是一份人可读、机器也能解析的设计规范文档。Stripe、Linear、Vercel 等一线公司的设计系统，都被 Stitch 团队逐一「翻译」成了 DESIGN.md 格式，供开发者和 AI 工具免费使用。

VoltAgent 团队是这个生态的重要推动者。他们不仅开发了开源的 TypeScript AI Agent 框架 VoltAgent，还在 GitHub 上维护了一个持续更新的 awesome-design-md 资源库，收集了大量来自真实网站的 DESIGN.md 文件——这份列表目前已收录 73 个来自不同品牌的设计规范，覆盖了 AI/LLM 平台、开发者工具、金融科技、汽车工业等多个领域。

核心技术：一份 DESIGN.md 文件能做什么

DESIGN.md 是一种结构化的 Markdown 文档，核心由以下模块组成：

• 颜色系统（colors）：定义主色、激活态、禁用态、画布色、表面色等，每个颜色对应十六进制值和语义化名称。比如 Claude 的 DESIGN.md 中，主色是暖珊瑚红 #cc785c，而不是抽象的 primary-color。
• 排版规范（typography）：定义标题、正文、代码等不同文本层的字体家族、字重、字号、行高、字间距。Stripe 的 DESIGN.md 特别强调了等宽数字字形（tabular figures），因为金融场景下金额对齐非常重要。
• 布局节奏（spacing & layout）：定义栅格系统、内边距、外边距等间距规范。Cursor 的 DESIGN.md 中定义了 80px 的段落间距节奏，用 hairline（发丝线）替代阴影作为卡片分隔手段。
• 组件规范（components）：按钮、输入框、卡片等组件的样式状态——默认、hover、pressed、disabled、loading，每个状态都有对应的视觉定义。
• 品牌特征（brand voltage）：每份 DESIGN.md 都会提炼出一个「品牌电压」——最能代表这个品牌视觉识别的核心元素。比如 Cursor 的品牌电压是「Cursor Orange」#f54e00，ElevenLabs 的品牌电压是暗色电影感界面与波形美学。

有了这份文件，AI 编程工具（比如 Cursor、Vercel v0、Claude Code）就能直接理解：主色调是什么？标题用什么字体？按钮 hover 状态是什么效果？卡片有没有阴影？生成的代码自然就更接近原始设计意图。

资源库内容：73 个真实网站的设计 DNA

awesome-design-md 的核心价值在于它收录的都是真实存在的网站，而非假设案例。按领域分类：

• AI & LLM 平台：Claude、Cohere、ElevenLabs、Minimax、Mistral AI、Ollama、OpenCode AI 等。这些平台的 DESIGN.md 特别有价值，因为它们的界面更新频繁、设计语言独特，传统的 Figma Export 在这里反而不如 Markdown 文件灵活。
• 开发者工具：Cursor、Linear、Vercel、Stripe、GitHub、Supabase、Planetscale、Railway 等。这些工具的 DESIGN.md 可以说是给 AI 编程 Agent 的「最佳实践指南」，学习它们的排版、色彩、交互模式，有助于构建高质量的技术文档和产品页面。
• 金融科技：Binance、Coinbase、Stripe 等。金融类网站对色彩一致性和数据展示规范要求极高，DESIGN.md 能精确约束字体、数字对齐、表格样式等细节。
• 汽车 & 奢侈品：BMW、Bugatti、Airbnb 等。这些品牌的设计规范往往包含大量细节规则（如字间距、留白比例），DESIGN.md 格式的优势在这里体现得尤为明显——规则即文档，文档即可执行。

每份 DESIGN.md 都遵循统一的 version: alpha 标记，说明这些文件基于公开网站的视觉分析提取，尚未经过品牌方官方认证，但已具备相当高的参考价值。

使用方式：把 DESIGN.md 扔进项目根目录

这可能是史上最简单的 AI 设计集成方式。使用流程只有两步：

1. 从 awesome-design-md 资源库中下载目标品牌的 DESIGN.md 文件，复制到项目根目录
2. 告诉 AI 编程工具：「参照这个 DESIGN.md 文件构建页面」，工具就会自动理解设计规范并生成代码

没有 npm install，没有配置文件，没有 Figma 插件，不需要任何账号注册。一个 .md 文件，解决所有设计语言对齐问题。这种「无摩擦接入」的设计，是 VoltAgent 团队在 AI Agent 工程化思考上的体现——工具应该适配人，而不是让人适应工具。

此外，VoltAgent 还提供了 getdesign.md 在线平台，支持用户申请定制 DESIGN.md，包括私有化需求。GitHub Stars 已突破 82,000，显示出开发者社区对这套方案的强烈认可。

架构与技术特点：纯内容库，无运行时依赖

awesome-design-md 本身是一个纯静态内容仓库，不包含任何可执行代码（无 Dockerfile、无 npm 包依赖、无构建流程）。它的工作方式更像一份参考手册，而非一个框架或库。

从代码仓库结构来看，项目分为两部分：

• 根目录包含 README.md、CONTRIBUTING.md、LICENSE 等标准文档
• design-md/ 子目录下按品牌名称分类，每个品牌一个目录，包含对应的 DESIGN.md 文件

VoltAgent 团队使用 TypeScript 构建了同名框架 VoltAgent，这是一个支持多模型（Claude、OpenAI、DeepSeek 等）的 AI Agent 编排框架，awesome-design-md 本质上是 VoltAgent 生态在「设计规范」维度的扩展。

局限与争议

第一，DESIGN.md 的「翻译」质量依赖分析者的设计素养。 不同人对同一个网站的视觉分析可能得出不同的颜色值或间距规则，73 个文件中并非每个都经过严格校验。VoltAgent 团队采用了 version: alpha 标记来诚实标注这一现状。

第二，不包含交互逻辑。 DESIGN.md 只描述视觉规范，不涉及动画过渡、状态管理、数据流等交互层设计。AI 生成的页面在视觉上可能一致，但交互行为仍需要额外约束。

第三，版权风险。 资源库中的 DESIGN.md 文件是对 Stripe、Linear 等品牌界面的逆向分析，可能涉及设计版权争议（类似于字体界的仿制问题）。VoltAgent 明确标注为「inspired by」而非官方认证，一定程度上规避了直接侵权风险，但商业使用仍需谨慎评估。

行业意义：设计系统的「AI-first」转型信号

awesome-design-md 的 82,000+ Stars 不仅仅是一个数字，它反映了 AI 编程时代对「设计系统」概念重新定义的渴望。传统设计系统（Design System）的核心用户是人类开发者，它的交付物是 Figma 文件、Storybook 组件库、Design Token 规范。但 AI 编程 Agent 不读 Figma，不解析 JSON，它们最擅长的格式是自然语言和 Markdown。

DESIGN.md 的出现，本质上是把设计系统「翻译」成了 AI 能读懂的格式。VoltAgent 的 awesome-design-md 是这个趋势中最早、最完整的资源库之一。如果 Google Stitch 的实验能够持续推进，未来可能会出现更多官方认证的 DESIGN.md 文件，甚至设计工具（如 Figma）会原生支持导出 DESIGN.md 格式。

awesome-design-md 的增长曲线本身就是最好的注脚——从一个工具的附属资源库，成长为独立的设计 AI 基础设施，这个转变只用了一年时间。