Awesome Design MD 深度解析：当设计系统变成 AI 能读懂的母语

> **参考对象**：Dieter Rams 的设计十诫 + 极简主义哲学 + Google Material Design 的系统思维 --- ## 引子：一个奇怪的现象 2024 年，AI 编程助手已经能写出不错的代码了。但有一个问题始终困扰着开发者： **AI 写的界面，总是差一点"味道"。** 不是功能不对，是那种微妙的视觉一致性——颜色差了几个色号，圆角半径不对，字体 hierarchy 模糊。就像让一个不懂你品牌的人帮你做设计，技术过关，但感觉不对。 传统解决方案是：整理设计规范文档，截图标注，反复沟通。但这太慢了，而且 AI 看不懂 Figma 文件。 Google 的答案是：**DESIGN.md**。 --- ## 第一部分：DESIGN.md 是什么？ DESIGN.md 是 Google Stitch 引入的一个新概念。简单来说： > **一个纯文本文件，描述你的设计系统，让 AI 能读懂并执行。** 它长这样： ```markdown # Design System: Vercel ## Color Palette | Token | Hex | Usage | |-------|-----|-------| | --color-background | #000000 | Primary background | | --color-foreground | #FFFFFF | Primary text | | --color-accent | #FFFFFF | Buttons, links | | --color-muted | #666666 | Secondary text | ## Typography - **Font Family**: Geist Sans, Inter (fallback) - **Heading 1**: 48px, font-weight 700, line-height 1.1 - **Body**: 16px, font-weight 400, line-height 1.5 ## Components ### Button Primary - Background: #FFFFFF - Text: #000000 - Border-radius: 6px - Padding: 12px 24px - Hover: opacity 0.9 ### Card - Background: #111111 - Border: 1px solid #333333 - Border-radius: 12px - Shadow: none ``` 纯 Markdown，无 JSON schema，无特殊工具。任何人都能读，任何 AI 都能用。 --- ## 第二部分：为什么 Markdown？ 这个选择很巧妙。 ### 原因 1：LLM 的母语就是 Markdown 大语言模型在海量 Markdown 上训练。它们理解： - `#` 表示一级标题（重要） - `-` 表示列表项（枚举） - `**粗体**` 表示强调 - 表格表示结构化数据 相比 JSON 或 YAML，Markdown 对 LLM 更"自然"。 ### 原因 2：人类也能读 设计师不需要学新工具。打开任何文本编辑器就能看、能改。没有 Figma 也能工作。 ### 原因 3：Git 友好 版本控制、diff 查看、PR 审核——和代码一样的工作流。设计系统终于可以和代码一起演进了。 --- ## 第三部分：awesome-design-md 是什么？ > **一个仓库，收集了 55+ 个流行网站的 DESIGN.md 文件。** 作者是 **VoltAgent**，一个 AI Agent 框架团队。项目 2025 年 3 月发布，迅速获得 8.7k stars、1.1k forks。 ### 包含哪些网站？ | 分类 | 示例 | |------|------| | **AI/ML** | Claude、Mistral、ElevenLabs、xAI、Ollama | | **开发者工具** | Vercel、Linear、Supabase、Cursor、Raycast | | **设计工具** | Figma、Framer、Webflow | | **生产力** | Notion、Airtable、Linear | | **金融科技** | Stripe、Coinbase、Wise | | **消费品牌** | Apple、Spotify、Airbnb、SpaceX | 每个网站包含： - `DESIGN.md` —— 设计系统（AI 读取） - `preview.html` —— 视觉目录（颜色、字体、按钮展示） - `preview-dark.html` —— 暗色模式预览 --- ## 第四部分：如何使用——5 秒钟的魔法 ### 方法 1：curl 单文件 ```bash # 想要 Stripe 的风格 curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md # 想要 Vercel 的风格 curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md # 想要 Linear 的风格 curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear.app/DESIGN.md ``` ### 方法 2：克隆整个仓库 ```bash git clone https://github.com/VoltAgent/awesome-design-md.git ``` ### 方法 3：告诉 AI 使用它 ``` "读取项目根目录的 DESIGN.md，按照这个设计系统帮我构建一个登录页面。" ``` 就这样。AI 会自动读取文件，应用颜色、字体、间距、组件样式。 --- ## 第五部分：DESIGN.md 里有什么？ 每个文件遵循标准结构： | 章节 | 内容 | |------|------| | **1. Visual Theme & Atmosphere** | 氛围、密度、设计哲学 | | **2. Color Palette & Roles** | 语义命名 + 色值 + 功能角色 | | **3. Typography Rules** | 字体家族、完整层级表 | | **4. Component Stylings** | 按钮、卡片、输入框、导航及状态 | | **5. Layout Principles** | 间距规范、网格、留白哲学 | | **6. Depth & Elevation** | 阴影系统、表面层级 | | **7. Do's and Don'ts** | 设计 guardrails 和反模式 | | **8. Responsive Behavior** | 断点、触控目标、折叠策略 | | **9. Agent Prompt Guide** | 快速颜色参考、即用提示词 | ### 示例：Stripe 的 Do's and Don'ts ```markdown ## Do's and Don'ts ### ✅ Do - Use generous whitespace (64px+ between sections) - Prefer weight-300 for body text - Use purple gradients for hero backgrounds - Keep border-radius consistent at 4px ### ❌ Don't - Never use pure black (#000000) for text - Don't mix more than two font weights on one screen - Avoid centered text for long paragraphs - Never use drop shadows on cards (use borders instead) ``` 这些负向约束和正向规范一样重要。它们防止 AI 做出"技术上合理但品牌错误"的选择。 --- ## 第六部分：背后的范式转移 awesome-design-md 不仅是一个工具包，它代表了一个更大的趋势： ### 从"设计给人看"到"设计给 AI 读" 传统设计系统： - Figma 文件（设计师用） - Storybook（开发者用） - PDF 规范（管理层看） - 三者经常不同步 AI 时代的设计系统： - 一个 DESIGN.md 文件 - 设计师能读、开发者能读、AI 能执行 - 版本控制，随代码一起演进 ### 从"视觉资产"到"文本规范" Figma 是可视化的，但 AI 读不懂像素。Markdown 是文本的，但人类读起来需要一点想象力。 这种 trade-off 正在被重新评估：**如果 AI 能帮你把文本变成像素，也许我们不需要先看像素？** --- ## 第七部分：AGENTS.md 与 DESIGN.md——AI 项目的双轨制 | 文件 | 读者 | 定义 | |------|------|------| | `AGENTS.md` | Coding agents | 如何构建项目 | | `DESIGN.md` | Design agents | 项目应该长什么样 | 这两个文件正在形成 AI 时代的项目标准： ``` my-project/ ├── AGENTS.md ← "用 TypeScript + Next.js，测试覆盖率 > 80%" ├── DESIGN.md ← "按 Stripe 风格，紫色渐变，weight-300" ├── src/ └── package.json ``` 没有 JSON 配置，没有复杂工具链。两个 Markdown 文件，定义项目的"灵魂"。 --- ## 第八部分：为什么这很重要？ ### 1. 设计民主化 你不需要是设计师，也能做出有品位的界面。curl 一个 DESIGN.md，告诉 AI "按这个做"，就能得到专业级输出。 ### 2. 一致性自动化 一旦 DESIGN.md 就位，所有 AI 生成的代码都会自动遵循。不再需要人工检查每个 PR 的样式。 ### 3. 跨工具兼容 DESIGN.md 不绑定任何工具： - Claude Code 能读 - GitHub Copilot 能读 - Cursor 能读 - Google Stitch 原生支持 - 任何 LLM 都能读 ### 4. 可组合、可复用 看到喜欢的网站风格？提取 DESIGN.md，应用到自己的项目。设计系统变成了像 npm 包一样可复用的模块。 --- ## 第九部分：局限性与现实检验 ### 不是银弹 DESIGN.md 描述的是**设计 tokens 和模式**，不是具体布局。它告诉 AI "按钮长什么样"，但不告诉它 "这个按钮放在哪里"。 ### 需要迭代 即使有了 DESIGN.md，AI 输出通常也需要 1-2 轮调整。文件减少了"第一稿到最终稿"的距离，但没有消除迭代。 ### 版权问题 awesome-design-md 的免责声明： > "提取的设计 token 代表公开可见的 CSS 值。我们不声称拥有任何网站的视觉身份所有权。" 这些文件用于帮助 AI 生成一致的 UI，而非复制原网站的商标或品牌资产。 --- ## 尾声：Vibe Design 的时代 2024 年，"Vibe Coding" 成为热词——用自然语言描述，让 AI 生成代码。 2025 年，"Vibe Design" 正在兴起——用自然语言描述，让 AI 生成界面。 awesome-design-md 是这一趋势的基础设施。它把"像 Stripe 那样设计"这个模糊的意图，变成了可执行的规范。 最打动我的是它的简单性： - 没有新格式要学（就是 Markdown） - 没有新工具要装（curl 就能下载） - 没有新工作流要适应（Git 管理一切） 在这个追求"AI 原生"、"下一代工具"的时代，awesome-design-md 提醒我们：**有时候，最好的解决方案就是一张写得好的文本文件。** --- ## 参考链接 - **awesome-design-md**: https://github.com/VoltAgent/awesome-design-md - **Google Stitch**: https://stitch.withgoogle.com/ - **Google Stitch DESIGN.md 文档**: https://stitch.withgoogle.com/docs/design-md/overview/ - **VoltAgent**: https://github.com/VoltAgent - **AGENTS.md 规范**: https://github.com/VoltAgent/awesome-agent-skills --- ## 后记：从 Figma 到文本，从人到 AI 我很好奇，5 年后回顾，2025 年会不会被看作设计工具的转折点。 Figma 把设计从 Photoshop 的图层地狱中解放出来，用矢量画布和协作改变了行业。 但 Figma 仍然是"给人看的设计工具"。 DESIGN.md 可能是"给 AI 读的设计工具"的起点。不是替代 Figma，而是创造一个新的抽象层——让设计系统可以像代码一样版本控制、像 API 一样被调用、像文本一样被理解。 最终的赢家不是工具，而是**设计的可迁移性本身**。 --- *写于 2026 年 4 月 5 日，参考 awesome-design-md 官方仓库、Google Stitch 文档及社区讨论。*