awesome-design-md：让 AI 瞬间写出神级 UI
元信息
- 来源：微信公众号「极客阁楼」+ GitHub
- GitHub：https://github.com/VoltAgent/awesome-design-md
- 采集时间：2026-04-20
- 分类：开发工具 / AI 编程 / 前端设计
核心概念
什么是 awesome-design-md？
一个纯文本 Markdown 文件的合集，精确收录了超过 69 家顶尖科技公司的设计系统，包括 Stripe、Vercel、Linear、Notion、Apple、Tesla 等巨头。
什么是 DESIGN.md？
DESIGN.md 是 Google Stitch 引入的新概念：一个纯文本设计系统文档，AI 智能体可以直接读取来生成一致的 UI。
- 就是一个 Markdown 文件
- 无需 Figma 导出、JSON schema、特殊工具
- 放到项目根目录，任何 AI 编码智能体或 Google Stitch 都能立即理解 UI 应该长什么样
- Markdown 是 LLM 最擅长读取的格式，无需解析或配置
核心理念
| 文件 | 谁读它 | 定义什么 |
|---|---|---|
| AGENTS.md | 编码智能体 | 如何构建项目 |
| DESIGN.md | 设计智能体 | 项目应该如何呈现和感觉 |
解决的问题
传统方案的痛点
- 强塞设计稿给 AI：容易导致理解混乱
- 复杂数据格式：需要解析、配置，增加门槛
- AI 幻觉：复杂任务并发时容易出错
awesome-design-md 的优势
- 降维成 Markdown：打通无损的理解通道
- 零配置门槛：抛弃一切复杂插件
- 高密度文字规则：死死约束住 AI，确保视觉效果不走样
- 双轨智能体架构：代码智能体专心搞业务逻辑，设计智能体专心抓视觉呈现
DESIGN.md 文件结构
每个文件遵循 Stitch DESIGN.md 格式，包含 9 大层级架构：
| # | 章节 | 捕获内容 |
|---|---|---|
| 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 | 设计护栏和反模式 |
| 8 | Responsive Behavior | 断点、触摸目标、折叠策略 |
| 9 | Agent Prompt Guide | 快速颜色参考、即用提示词 |
每个站点包含的文件
| 文件 | 用途 |
|---|---|
| DESIGN.md | 设计系统（智能体读取） |
| preview.html | 视觉目录：颜色样本、字体比例、按钮、卡片 |
| preview-dark.html | 同样的目录，深色表面 |
收录的设计系统（69 个）
AI 平台（12 个）
- Claude：Anthropic 的 AI 助手，温暖的赤陶色调，干净的编辑布局
- Cohere：企业 AI 平台，鲜艳渐变，数据丰富的仪表板美学
- ElevenLabs：AI 语音平台，深色电影 UI，音频波形美学
- Minimax：AI 模型提供商，大胆的深色界面配霓虹色调
- Mistral AI：开放权重 LLM 提供商，法式工程极简主义，紫色调
- Ollama：本地运行 LLM，终端优先，单色简约
- OpenCode AI：AI 编码平台，开发者中心深色主题
- Replicate：通过 API 运行 ML 模型，干净白色画布，代码优先
- RunwayML：AI 视频生成，电影深色 UI，媒体丰富布局
- Together AI：开源 AI 基础设施，技术性，蓝图风格设计
- VoltAgent：AI 智能体框架，虚空黑画布，翡翠色调，终端原生
- xAI：Elon Musk 的 AI 实验室，鲜明单色，未来主义极简
开发工具（7 个）
- Cursor：AI 优先代码编辑器，时尚深色界面，渐变色调
- Expo：React Native 平台，深色主题，紧凑字距，代码中心
- Lovable：AI 全栈构建器，俏皮渐变，友好的开发美学
- Raycast：生产力启动器，时尚深色 Chrome，鲜艳渐变色调
- Superhuman：快速邮件客户端，高级深色 UI，键盘优先，紫色光晕
- Vercel：前端部署平台，黑白精确，Geist 字体
- Warp：现代终端，深色 IDE 风格界面，基于块的命令 UI
基础设施与数据（7 个）
- ClickHouse：快速分析数据库，黄色调，技术文档风格
- Composio：工具集成平台，现代深色配彩色集成图标
- HashiCorp：基础设施自动化，企业级干净，黑白
- MongoDB：文档数据库，绿叶品牌，开发者文档焦点
- PostHog：产品分析，俏皮刺猬品牌，开发者友好深色 UI
- Sanity：无头 CMS，红色调，内容优先编辑布局
- Sentry：错误监控，深色仪表板，数据密集，粉紫色调
- Supabase：开源 Firebase 替代品，深色翡翠主题，代码优先
SaaS 与协作（8 个）
- Cal.com：开源日程安排，干净中性 UI，开发者导向简约
- Intercom：客户消息，友好蓝色调色板，对话式 UI 模式
- Linear：工程师项目管理，超极简，精确，紫色调
- Mintlify：文档平台，干净，绿色调，阅读优化
- Notion：一体化工作空间，温暖极简主义，衬线标题，柔和表面
- Resend：开发者邮件 API，极简深色主题，等宽字体调
- Zapier：自动化平台，温暖橙色，友好插图驱动
设计工具（5 个）
- Airtable：电子表格-数据库混合体，多彩，友好，结构化数据美学
- Clay：创意机构，有机形状，柔和渐变，艺术指导布局
- Figma：协作设计工具，鲜艳多色，俏皮而专业
- Framer：网站构建器，大胆黑蓝，动作优先，设计前瞻
- Miro：视觉协作，明亮黄色调，无限画布美学
- Webflow：视觉网页构建器，蓝色调，精致营销网站美学
金融科技（7 个）
- Binance：加密货币交易所，大胆的币安黄配单色，交易大厅紧迫感
- Coinbase：加密货币交易所，干净蓝色身份，信任焦点，机构感
- Kraken：加密货币交易平台，紫色调深色 UI，数据密集仪表板
- Mastercard：全球支付网络，温暖奶油画布，轨道药丸形状，编辑温暖
- Revolut：数字银行，时尚深色界面，渐变卡片，金融科技精确
- Stripe：支付基础设施，标志性紫色渐变，weight-300 优雅
- Wise：国际汇款，明亮绿色调，友好清晰
消费品牌（6 个）
- Airbnb：旅行市场，温暖珊瑚色调，摄影驱动，圆角 UI
- Meta：科技零售店，摄影优先，二元明暗表面，Meta 蓝 CTA
- Nike：运动零售，单色 UI，巨大大写 Futura，全出血摄影
- Shopify：电商平台，深色优先电影，霓虹绿调，超轻展示字体
- Starbucks：咖啡零售旗舰，四层大地绿系统，温暖奶油画布，专有 SoDoSans 排版
科技与媒体（11 个）
- Apple：消费电子，高级留白，SF Pro，电影影像
- IBM：企业技术，Carbon 设计系统，结构化蓝色调色板
- NVIDIA：GPU 计算，绿黑能量，技术力量美学
- Pinterest：视觉发现平台，红色调，砌体网格，图像优先
- PlayStation：游戏主机零售，三表面通道布局，青色悬停缩放交互
- SpaceX：太空技术，鲜明黑白，全出血影像，未来主义
- Spotify：音乐流媒体，深色上的鲜艳绿色，大胆字体，专辑艺术驱动
- The Verge：科技编辑媒体，酸薄荷和紫外色调，Manuka 展示字体
- Uber：出行平台，大胆黑白，紧凑字体，城市能量
- Vodafone：全球电信品牌，纪念碑式大写展示，Vodafone 红章节带
- WIRED：科技杂志，纸白大报密度，定制衬线，墨蓝链接
汽车（6 个）
- BMW：豪华汽车，深色高级表面，精确德国工程美学
- Bugatti：豪华超跑，电影黑画布，单色简朴，纪念碑式展示字体
- Ferrari：豪华汽车，明暗对比黑白编辑，法拉利红配极度稀疏
- Lamborghini：豪华汽车，真黑大教堂，金色调，LamboType 定制 Neo-Grotesk
- Renault：法国汽车，鲜艳极光渐变，NouvelR 专有字体，零半径按钮
- Tesla：电动汽车，激进减法，电影全视口摄影，Universal Sans
使用方法
基础用法
- 复制某个站点的 DESIGN.md 到你的项目根目录
- 告诉你的 AI 智能体使用它
示例
# 复制 Stripe 的设计系统
cp stripe/DESIGN.md ./
# 告诉 AI
"使用 DESIGN.md 构建一个支付页面"
贡献指南
可以做的贡献
- 改进现有文件：修复错误颜色、缺失 token、弱描述
- 报告问题：让我们知道哪里看起来不对
注意：在开 PR 之前，请先开 issue 讨论你的想法并获得维护者反馈。
许可证
MIT License - 见 LICENSE
免责声明
这个仓库是从公开网站提取的设计系统文档的精选集合。所有 DESIGN.md 文件按"原样"提供，不提供任何保证。提取的设计 token 代表公开可见的 CSS 值。我们不声称拥有任何站点的视觉身份。这些文档的存在是为了帮助 AI 智能体生成一致的 UI。
核心价值
传统方案 vs awesome-design-md
| 方案 | 问题 |
|---|---|
| 硬喂 Figma 给大模型 | 理解混乱，解析困难 |
| 复杂 JSON schema | 配置门槛高，AI 容易出错 |
| 无规范约束 | AI 自由发挥，视觉效果不稳定 |
| awesome-design-md 优势 | 说明 |
|---|---|
| 纯文本 Markdown | LLM 最擅长的格式，无损理解 |
| 零配置 | 无需插件、工具、解析 |
| 高密度规则 | 精确约束 AI，确保像素级完美 |
| 双轨架构 | 代码/设计智能体分离，杜绝幻觉 |
九层架构的威力
从最表层的色彩排版，一路深钻到 Z 轴空间深度与响应式逻辑：
- 基础视觉管控：具体色值与功能模块死死绑定，字间距微调到极致
- 物理空间布局：严禁随意间距和低廉阴影，强制几何倍数网格与高级层级景深
- 底层防线：设立审美红线（如"绝不许用纯白"），将设计指令强行贯穿进 AI 大脑
相关资源
- 官网：https://getdesign.md/
- GitHub：https://github.com/VoltAgent/awesome-design-md
- Google Stitch 文档：https://stitch.withgoogle.com/docs/design-md/overview/
- VoltAgent：https://github.com/VoltAgent/voltagent
- Discord：https://s.voltagent.dev/discord
总结
awesome-design-md 把全球顶尖科技公司的 UI 视觉基因拆解并翻译成了大模型能直接读取的纯文本"资产库"。它能把极其抽象的"高级感"精准转译成硬核指令，无论是极客终端风、极致极简风还是工业图纸风，AI 都能根据具体的文本锚点完美复刻。
核心理念：别再硬喂 Figma 给大模型了，用 Markdown 让 AI 瞬间写出神级 UI。