TL;DR： 本文将介绍 awesome-design-md 项目——一个收录了 70+ 品牌设计系统的 Markdown 文档集合。通过一个纯文本的 DESIGN.md 文件，你可以让 Claude、Cursor 等 AI 编程助手生成与目标品牌视觉风格高度一致的用户界面，无需 Figma 导出、无需 JSON 配置。
什么是 DESIGN.md？
DESIGN.md 是 Google Stitch 提出的一种新概念——纯文本设计系统文档。它不依赖任何特殊工具，就是一个 .md 文件。AI 编程代理读取后，能立即理解一个界面的视觉语言（色彩、字体、间距、组件样式），从而生成与目标设计保持一致的高质量 UI。
| 文件 |
读者 |
作用 |
AGENTS.md |
编码代理 |
定义如何构建项目 |
DESIGN.md |
设计代理 |
定义项目的视觉风格与质感 |
Markdown 是大语言模型最擅长的格式，所以 DESIGN.md 无需任何解析或配置过程——放进项目根目录即可生效。
项目简介
Awesome DESIGN.md 收集了大量从真实品牌网站中提取的 DESIGN.md 文件，覆盖了以下 10 个品类、共 70+ 个品牌：
AI 与 LLM 平台
包括 Claude（Anthropic）、Cohere、ElevenLabs、Minimax、Mistral AI、Ollama、OpenCode AI、Replicate、Runway、Together AI、VoltAgent、xAI。每个文档都捕捉了品牌标志性的视觉特征——Claude 的暖陶土色调、Ollama 的终端极简风、xAI 的未来主义单色等。
开发者工具与 IDE
Cursor、Expo、Lovable、Raycast、Superhuman、Vercel、Warp。这些品牌普遍采用深色主题和渐变强调色。
后端、数据库与 DevOps
ClickHouse、Composio、HashiCorp、MongoDB、PostHog、Sanity、Sentry、Supabase。覆盖从黄色强调（ClickHouse）到深翡翠绿（Supabase）的丰富视觉语言。
生产力与 SaaS
Cal.com、Intercom、Linear（工程师极简风格，紫色强调）、Mintlify、Notion（暖色极简 + 衬线标题）、Resend、Zapier。
设计与创意工具
Airtable、Clay、Figma（多色活力风格）、Framer、Miro（亮黄强调）、Webflow。
金融科技与加密货币
Binance（黄色标志）、Coinbase（蓝色信任）、Kraken（紫色暗色）、Mastercard、Revolut、Stripe（标志性紫色渐变）、Wise。
电商与零售
Airbnb（暖珊瑚色 + 摄影驱动）、Meta、Nike、Shopify、Starbucks。
媒体与消费科技
Apple、HP、IBM、NVIDIA、Pinterest、PlayStation、SpaceX、Spotify、The Verge、Uber、Vodafone、WIRED。
汽车
BMW、BMW M、Bugatti、Ferrari、Lamborghini、Renault、Tesla。每个奢侈汽车品牌的设计文档都极其精致——例如 Bugatti 的电影黑画布、Ferrari 的红白对比、Lamborghini 的黑色教堂 + 金色点缀。
复古网页 · DESIGN.md 怀旧系列
项目还包含从 1990 年代互联网中提取的复古设计：
- Dell (1996) — 黑色页面框架、扁平色块"缎带卡片"、Helvetica-Black 标题叠加 Times Roman 正文、手工 GIF 贴纸。
- Nintendo.com (2001) — 磨砂蓝紫色斜面金属面板、半色调碳素导航、方块艺术字标叠加电路板英雄区、像素马里奥气泡。
每个 DESIGN.md 包含什么
所有文件遵循 Google Stitch 的 DESIGN.md 格式，并做了扩展，通常包含以下 9 个部分：
Apple 的 DESIGN.md 文档示例
| # |
章节 |
内容 |
| 1 |
视觉主题与氛围 |
情绪密度、设计哲学 |
| 2 |
色彩方案与角色 |
语义名称 + Hex 值 + 功能角色 |
| 3 |
排版规则 |
字体族、完整层级表 |
| 4 |
组件样式 |
按钮、卡片、输入框、导航及其状态 |
| 5 |
布局原则 |
间距体系、栅格、留白哲学 |
| 6 |
深度与层级 |
阴影系统、表面层次 |
| 7 |
注意事项 |
设计红线与反模式 |
| 8 |
响应式行为 |
断点、触摸目标、折叠策略 |
| 9 |
代理提示指南 |
快速色彩参考、即用提示 |
每个目录还包含 preview.html 和 preview-dark.html（视觉目录，展示色板、字号、按钮、卡片），以及 README.md（指向 getdesign.md 网站）。
使用方法
只需要两步：
- 将某个品牌的
DESIGN.md 复制到你的项目根目录
- 告诉你的 AI 代理："按照这个设计系统来构建页面"
# 示例：使用 Claude 品牌设计
cp design-md/claude/DESIGN.md /your-project/
然后对 Claude、Cursor、Google Stitch 等工具说 "Build me a landing page using this design system"，AI 就会按照该品牌的色彩、字体、间距、组件样式生成高度一致的界面代码。
进阶：格式说明
项目中的 DESIGN.md 主要采用两种格式：
- YAML + Markdown（详细版，300-800+ 行）：YAML 前置元数据定义
colors、typography、spacing、components 等结构化令牌，Markdown 正文中用 {colors.primary} 这样的令牌引用，确保 AI 代理精确使用设计值。
- 纯 Markdown（精简版，100-300 行）：无 YAML，直接用编号章节组织内容。
令牌命名规范：colors.*、typography.*、rounded.*、spacing.*、component.*。AI 代理在生成代码时会将这些令牌直接映射到 CSS 值中。
总结
awesome-design-md 是一个面向 AI 驱动开发时代的实用资源库。它的价值在于：
- 零配置：纯文本 Markdown，无需任何构建工具
- 高质量：每个文档都经过深度分析，包含色彩、字体、组件、间距的完整设计系统
- 即用即走：放入项目根目录，AI 代理立刻理解你的设计语言
- 覆盖广泛：70+ 品牌，从科技巨头到奢侈汽车品牌，从现代到复古网页
如果你正在使用 Claude Code、Cursor 或其他 AI 编程工具构建 UI，花几分钟研究一下这些设计文档，可能会让你的输出质量大幅提升。云栈社区上也有不少开发者分享类似的 AI 编程实践和设计系统经验，值得一看。
扩展阅读
发表于 9 小时前
|
查看: 6|
回复: 0
