Awesome DESIGN.md

74 份从真实开发者向网站提取的 DESIGN.md 设计系统规格。每份都是一个完整设计规格，AI agent 读它就能生成品牌一致的 UI。

上游仓库：https://github.com/VoltAgent/awesome-design-md（MIT License, Copyright (c) 2026 VoltAgent）。参考文件为本技能内嵌副本，路径相对本技能目录。

What is DESIGN.md?

DESIGN.md 是 Google Stitch 提出的概念——一份纯文本设计系统文档，给 AI agent 读，用来生成一致的 UI。就是一个 markdown 文件。放到项目根目录，任何 AI coding agent 立刻知道 UI 该长什么样。

How to Use

1. 用户说"做成像 [品牌] 那样" → 在下表找对应条目
2. 读参考文件（见下表 Reference 列，文件位于 references/ 目录，如 stripe 品牌读 references/stripe.md）
3. 把内容复制到用户项目根目录，存为 DESIGN.md
4. 按其中的 design tokens（颜色、字体、间距、组件）生成 UI 代码

Available Design Systems

AI & Machine Learning

Developer Tools & Platforms

Infrastructure & Cloud

Design & Productivity

Fintech & Crypto

Enterprise & Consumer

参考文件缺失或用户想要的品牌不在表内时：如实说没有，不要凭记忆编造 tokens；可以推荐表内最接近的几个风格，或建议上游仓库 getdesign.md/request 申请。

What Each DESIGN.md Contains

每份文件按 Google Stitch 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 — 速查色值 + 可直接用的 prompt

文件头部另有 YAML frontmatter（colors / typography 等结构化 tokens），生成代码时可直接取值。

Workflow

1. 用户指定品牌 → 直接匹配

User: "Build me a landing page that looks like Stripe"
→ read references/stripe.md（相对本技能目录）
→ 复制内容到用户项目根目录 DESIGN.md
→ 按 tokens 生成 UI 代码

2. 用户想浏览 → 过滤并推荐

User: "Show me dark-themed design systems"
→ 推荐：Vercel, Cursor, ElevenLabs, Resend, Warp, Supabase, xAI, Linear, Sentry, The Verge 等
→ 用户挑一个，再读对应参考文件

3. 用户没说风格 → 主动推荐

用户要建 UI 但没提任何品牌或风格偏好（如"帮我做一个落地页"、"写一个 dashboard"、"做一个 SaaS 官网"）时，主动推荐 3–5 个设计系统：

推荐流程：

User: "帮我做一个 AI 聊天产品的界面"
→ Agent: "推荐以下设计风格供你选择：
   1. 🟠 Claude — 温暖柔和的赤陶色调，编辑式布局，适合对话产品
   2. 🟣 Mistral AI — 法式工程极简，紫色调，优雅专业
   3. 🎬 ElevenLabs — 暗色电影感，波形美学，适合音频/多模态
   4. ⬛ Vercel — 黑白精准，极致简约
   5. 🟢 VoltAgent — 终端风格，翠绿高亮，适合技术型 AI
   选一个编号，我直接用对应的设计系统帮你生成。"
→ 用户选一个 → read 参考文件 → 生成 UI

用户说"随便 / 你决定"：

• 默认 Vercel（最稳的全能选项：干净、现代、专业）
• 说明选择并给切换余地："我先用 Vercel 风格（简约黑白），不喜欢随时换。"

4. 多风格混搭

用户想 A 的配色 + B 的排版：分别 read 两份参考文件，以一份为主板（surface / spacing / 组件骨架），另一份只取 tokens 子集（palette 或 type scale），明确告诉用户混了哪两部分，避免无来源的缝合。

输出与交付规范

• 复制 DESIGN.md 到用户项目时整份复制，不要摘要——agent 后续要靠完整 tokens 生成代码
• 生成 UI 代码时，颜色写 CSS 变量 / Tailwind theme token，不要把 hex 散落在组件里
• 交付时说明用了哪份设计系统（品牌名 + 参考文件名），用户能追溯
• 对上表里没有的品牌，不得编造 tokens

注意事项

• 路径基准：所有 references/ 目录下的参考文件相对本技能目录解析
• 文件命名：带点的品牌名保留点（mistral.ai.md / x.ai.md / linear.app.md / opencode.ai.md / together.ai.md），文件名即仓库目录名
• 正文语言：参考文件是英文原文，不要翻译后写入用户项目（设计术语翻译会失真）
• 许可证：上游 MIT，内嵌副本保留原始内容；再分发时保留 VoltAgent 归属与本技能内 LICENSE 说明
• 数量：本技能含 74 份参考（上游 README badge 标注 73，以实际文件为准）