VoltAgent Awesome-DESIGN-MD 深度研究

🎯 核心收获

DESIGN.md 范式的诞生：Google Stitch 提出的 DESIGN.md 概念，用纯文本 Markdown 替代 Figma/JSON Schema，让 AI Agent 能直接读取并生成一致的设计系统

AGENTS.md + DESIGN.md 双文件架构：前者告诉 AI "怎么构建项目"，后者告诉 AI "项目应该长什么样"，形成完整的 AI 开发工作流

Markdown 是 LLM 最擅长的格式：无需解析、无需配置，直接读取即可使用，大幅降低 AI 理解设计意图的门槛

9 个标准板块结构：Visual Theme、Color Palette、Typography、Components、Layout、Depth、Do's & Don'ts、Responsive、Agent Prompt Guide，覆盖设计系统的完整维度

像素级描述的可行性：通过 YAML 结构化数据（hex 色值、精确字号、行高、字间距）实现可量化的设计规范

70+ 知名网站的 DESIGN.md 收录：从 AI 平台到豪华汽车品牌，形成可迁移的设计系统库

对企业培训的价值：非设计师也能用 Markdown 编写设计规范，实现"设计文档民主化"

📖 正文内容

一、DESIGN.md 概念的诞生与核心价值

1.1 Google Stitch 的起源

DESIGN.md 概念源自 Google 在 2025 年 I/O 开发者大会上正式发布的 Google Stitch——一个 AI 驱动的 UI 设计工具。Stitch 前身为专注 Text to UI 功能的初创公司 Galileo AI，被谷歌收购后深度整合 Gemini 大模型能力。

2026 年 3 月，Stitch 发布了自发布以来最大的一次更新（v2.0），引入了"Vibe Design"（氛围设计）概念。这次更新直接导致 Figma 股价在两天内暴跌 8.8%，市值蒸发超过 30 亿美元。

1.2 DESIGN.md 的核心定义

DESIGN.md 是 Google Stitch 提出的纯文本设计系统文档格式。VoltAgent 的 awesome-design-md 项目在此基础上进行了扩展，形成了更完善的设计规范体系。

文件	读取者	定义内容
`AGENTS.md`	编码代理	如何构建/执行项目
`DESIGN.md`	设计代理 + 编码代理	项目应该如何呈现

1.3 为什么 Markdown 是 LLM 最擅长的设计描述格式

LLM 原生理解文本：大语言模型在训练过程中接触过海量文本，对 Markdown 的结构有天然的解析能力
无需中间转换层：DESIGN.md 不需要 Figma 插件导出、不需要 JSON Schema 解析器，AI 直接读取即可
语义化的层级结构：Markdown 的标题层级（#、##、###）天然对应设计系统的层级
可版本控制：作为纯文本文件，DESIGN.md 可以用 Git 管理

二、DESIGN.md 的 9 个标准板块深度解析

板块	定义内容
1. Visual Theme & Atmosphere	情绪、密度、设计哲学
2. Color Palette & Roles	语义名 + Hex + 功能角色
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	快速颜色参考 + 提示词模板

三、实际 DESIGN.md 文件分析

Claude DESIGN.md 亮点

核心设计哲学：温暖、文学、编辑感

品牌色：#cc785c（珊瑚色）用于 CTA，而非 AI 行业常见的蓝色

排版系统：Copernicus/Tiempos Headline 衬线体用于 display 层级

组件系统：12 种按钮变体、9 种卡片类型、3 种表面模式

Vercel DESIGN.md 亮点

核心设计哲学：精准、工程感、极简

品牌色：#171717（近黑）作为主色调

阴影系统：5 层阴影系统是品牌差异化的核心

排版系统：Geist 字体、标题 weight 600、句首大写、句末句号

Apple DESIGN.md 亮点

核心设计哲学：摄影优先、UI 隐退、产品说话

品牌色：#0066cc（Action Blue）是唯一的强调色

阴影哲学：整个系统只有一处阴影，仅用于产品图片

排版系统：17px body（非常规 16px）、刻意跳过 weight 500

四、对 AI 编码工作流的革命性影响

传统 vs DESIGN.md 驱动流程

传统流程：用户描述 → AI 随机生成 → 多次迭代

DESIGN.md 流程：参考 DESIGN.md → AI 读取完整规范 → 像素级匹配

AGENTS.md + DESIGN.md + SKILL.md 协同

规范	定义内容	适用场景
AGENTS.md	构建流程	项目初始化、部署
DESIGN.md	视觉规范	UI 生成、样式一致性
SKILL.md	专业技能	复杂任务分解、最佳实践

五、DESIGN.md 生态分析

70+ 网站设计系统分类

AI/LLM：Claude、xAI、Mistral 开发工具：Cursor、Vercel、Raycast SaaS：Linear、Notion、Stripe 汽车：Tesla、BMW、Ferrari

六、对企业培训的启发

"用 Markdown 做设计规范"的意义

设计文档民主化：任何人都可以读写 Markdown
无摩擦的 AI 理解：直接提供给 AI Agent 使用
版本控制的原生支持：Git diff、PR review、协作
低门槛的创作：不需要设计工具，用文本编辑器即可

企业 AI 使用场景

场景 1：内部工具开发 → 需求方 + DESIGN.md → AI 生成一致 UI

场景 2：产品原型验证 → 产品经理需求 + DESIGN.md → 快速原型

场景 3：设计系统文档化 → 现有设计系统 → DESIGN.md → 所有项目引用

💭 思考与实践

对看宝 AI 知识库的实践建议

设计系统标准化：为知识库网站建立 DESIGN.md，作为所有页面的设计基准
技能集成：考虑在 web-design-master 技能中添加 DESIGN.md 输出支持
模板库建设：借鉴 VoltAgent 的 70+ 网站设计系统，积累看宝 AI 的行业设计模板

对企业 AI 培训的实践建议

培训内容更新：将"Prompt 技巧"阶段与 DESIGN.md 结合
实操练习设计：从网站提取 DESIGN.md、基于 DESIGN.md 生成 UI
效果评估指标：AI 生成 UI 的一次性通过率、设计-开发交接时间节省

开放性问题

DESIGN.md 能完全替代 Figma 吗？答案是否定的。DESIGN.md 是补充而非替代，复杂交互、原型验证仍需 Figma
谁应该负责编写 DESIGN.md？理想情况是设计师直接输出，但现实往往是开发者基于设计系统逆向提取
DESIGN.md 的维护成本？初始投入较高，但长期收益是 AI 生成一致性提升

⚙️ VoltAgent Awesome-DESIGN-MD 深度研究