Awesome DESIGN.md：84 个顶级产品设计系统全集 · 最全指南（12 万星）
一句话定位：GitHub 开源项目
VoltAgent/awesome-design-md（123,405 ★，全球 GitHub 排名 #150）是收录 84 个顶级真实品牌设计系统的 DESIGN.md 文档合集——复制一个 DESIGN.md 进你的项目，告诉 AI 智能体"帮我做一个像这样的页面"，就能生成视觉一致的高质量 UI。0 配置，丢进项目，AI 直接读懂。仓库地址：https://github.com/VoltAgent/awesome-design-md · MIT License · 官网：https://getdesign.md/
目录
- 一、官方跳转与下载链接
- 二、什么是 DESIGN.md
- 三、项目亮点
- 四、官方图片
- 五、84 个产品设计系统全清单
- 六、每个 DESIGN.md 内部包含什么
- 七、使用方法（0 配置）
- 八、适配 AI 工具一览
- 九、如何请求定制 DESIGN.md
- 十、如何贡献
- 十一、常见问题 FAQ
- 十二、License 与免责声明
- 十三、参考链接汇总
一、官方跳转与下载链接
| 资源 | 链接 |
|---|---|
| GitHub 源码仓库 | https://github.com/VoltAgent/awesome-design-md |
| 源码 ZIP 打包下载 | https://github.com/VoltAgent/awesome-design-md/archive/refs/heads/main.zip |
| 项目官网 getdesign.md | https://getdesign.md/ |
| 请求定制 DESIGN.md | https://getdesign.md/request |
| DESIGN.md 官方规范（Google Stitch） | https://stitch.withgoogle.com/docs/design-md/specification/ |
| DESIGN.md 概念介绍（Google Stitch） | https://stitch.withgoogle.com/docs/design-md/overview/ |
| 官方 MCP 服务器仓库 | https://github.com/VoltAgent/official-mcp-servers |
| Discord 社区 | https://s.voltagent.dev/discord |
| 成为赞助商 | https://sponsors.voltagent.dev/#awesome-design-md |
| 贡献指南 | https://github.com/VoltAgent/awesome-design-md/blob/main/CONTRIBUTING.md |
| License（MIT） | https://github.com/VoltAgent/awesome-design-md/blob/main/LICENSE |
Git 克隆命令：
git clone https://github.com/VoltAgent/awesome-design-md.git
# 或浅克隆
git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git
二、什么是 DESIGN.md
DESIGN.md 是 Google Stitch 提出的一种全新概念：一份纯文本的设计系统文档，AI 智能体读了就能生成一致的 UI。
| 文件 | 谁读它 | 它定义什么 |
|---|---|---|
AGENTS.md |
编码智能体 | 项目如何构建 |
DESIGN.md |
设计智能体 | 项目的外观与感觉 |
它就是一个 markdown 文件。没有 Figma 导出、没有 JSON schema、没有特殊工具。把它丢进项目根目录，任何 AI 编码智能体或 Google Stitch 立刻明白你的 UI 应该长什么样。Markdown 是 LLM 读得最好的格式，所以无需解析、无需配置。
本仓库提供开箱即用的 DESIGN.md 文件——从真实网站中提取，包含分析出的模式、token 和规则，用于高质量 UI 生成，而非表面输出。
三、项目亮点
| 亮点 | 说明 |
|---|---|
| ⭐ 123,405 Stars | 全球 GitHub 排名 #150 的社区资源 |
| 📦 84 个真实产品 DESIGN.md | 从真实网站提取，非虚构 |
| 🔧 0 配置 | 复制进项目，AI 直接读懂 |
| 🎨 内置深度分析 | 每个文件含视觉主题、色彩、字体、组件、布局、阴影、Do/Don't、响应式、Agent 提示词 |
| 🌐 跨工具兼容 | Claude Code、Cursor、Google Stitch、Codex 等所有 AI 编码智能体通用 |
| 🕰️ Retro 系列 | 90 年代网页怀旧 DESIGN.md（Dell 1996、Nintendo 2001） |
四、官方图片
4.1 项目 Logo（官方横幅）
五、84 个产品设计系统全清单
5.1 AI & LLM 平台（13 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| Claude | getdesign.md/claude/design-md | 暖赤陶色点缀，干净的编辑式布局 |
| Cohere | getdesign.md/cohere/design-md | 企业 AI 平台，活力渐变、数据丰富仪表盘 |
| ElevenLabs | getdesign.md/elevenlabs/design-md | AI 语音平台，暗色电影感 UI，音频波形美学 |
| Jobright | getdesign.md/jobright/design-md | AI 求职平台，薄荷绿、黑色胶囊按钮 |
| Minimax | getdesign.md/minimax/design-md | AI 模型提供商，大胆暗色界面 + 霓虹点缀 |
| Mistral AI | getdesign.md/mistral.ai/design-md | 开源 LLM 提供商，法式极简、紫色调 |
| Ollama | getdesign.md/ollama/design-md | 本地运行 LLM，终端优先、单色极简 |
| OpenCode AI | getdesign.md/opencode.ai/design-md | AI 编码平台，开发者向暗色主题 |
| Replicate | getdesign.md/replicate/design-md | API 运行 ML 模型，干净白画布、代码优先 |
| Runway | getdesign.md/runwayml/design-md | AI 创意工具，电影节编辑美学、电影级暗色 Hero |
| Together AI | getdesign.md/together.ai/design-md | 开源 AI 基础设施，技术蓝图式设计 |
| VoltAgent | getdesign.md/voltagent/design-md | AI 智能体框架，虚空黑画布、翡翠点缀、终端原生 |
| xAI | getdesign.md/x.ai/design-md | 埃隆·马斯克 AI 实验室，极简单色、未来主义 |
5.2 开发者工具与 IDE（7 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| Cursor | getdesign.md/cursor/design-md | AI 优先代码编辑器，暗色界面、渐变点缀 |
| Expo | getdesign.md/expo/design-md | React Native 平台，暗色主题、紧凑字距、代码中心 |
| Lovable | getdesign.md/lovable/design-md | AI 全栈构建器，俏皮渐变、友好开发美学 |
| Raycast | getdesign.md/raycast/design-md | 生产力启动器，暗色镀铬、活力渐变点缀 |
| Superhuman | getdesign.md/superhuman/design-md | 快速邮件客户端，高级暗色 UI、键盘优先、紫光 |
| Vercel | getdesign.md/vercel/design-md | 前端部署平台，黑白精准、Geist 字体 |
| Warp | getdesign.md/warp/design-md | 现代终端，暗色 IDE 界面、块式命令 UI |
5.3 后端、数据库与 DevOps（9 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| ClickHouse | getdesign.md/clickhouse/design-md | 快速分析数据库，黄色点缀、技术文档风格 |
| Composio | getdesign.md/composio/design-md | 工具集成平台，现代暗色 + 彩色集成图标 |
| HashiCorp | getdesign.md/hashicorp/design-md | 基础设施自动化，企业级黑白 |
| MongoDB | getdesign.md/mongodb/design-md | 文档数据库，绿叶品牌、开发文档中心 |
| Oracle | getdesign.md/oracle/design-md | 企业云与数据库，暖中性阶梯、炭色动作 |
| PostHog | getdesign.md/posthog/design-md | 产品分析，俏皮刺猬品牌、开发者友好暗色 UI |
| Sanity | getdesign.md/sanity/design-md | Headless 内容平台，暗色优先编辑营销表面 |
| Sentry | getdesign.md/sentry/design-md | 错误监控，暗色仪表盘、粉紫点缀 |
| Supabase | getdesign.md/supabase/design-md | 开源 Firebase 替代，暗色翡翠主题、代码优先 |
5.4 生产力与 SaaS（8 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| Cal.com | getdesign.md/cal/design-md | 开源日程，干净中性 UI、开发者极简 |
| Intercom | getdesign.md/intercom/design-md | 客户消息，友好蓝色、对话式 UI 模式 |
| Linear | getdesign.md/linear.app/design-md | 工程师项目管理，超极简、紫色点缀 |
| Mintlify | getdesign.md/mintlify/design-md | 文档平台，绿色点缀、阅读优化 |
| Notion | getdesign.md/notion/design-md | 一体化工作区，暖极简、衬线标题、柔和表面 |
| Resend | getdesign.md/resend/design-md | 开发者邮件 API，极简暗色、等宽点缀 |
| SAP | getdesign.md/sap/design-md | 企业业务软件，白画布、扁平蓝带 |
| Zapier | getdesign.md/zapier/design-md | 自动化平台，暖橙、插画驱动 |
5.5 设计与创意工具（6 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| Airtable | getdesign.md/airtable/design-md | 电子表格-数据库混合，彩色友好、结构化数据美学 |
| Clay | getdesign.md/clay/design-md | 创意代理，有机形状、柔和渐变、艺术指导布局 |
| Figma | getdesign.md/figma/design-md | 协作设计工具，活力多色、俏皮专业 |
| Framer | getdesign.md/framer/design-md | 网站构建器，大胆黑白蓝、动效优先 |
| Miro | getdesign.md/miro/design-md | 可视化协作，亮黄点缀、无限画布美学 |
| Webflow | getdesign.md/webflow/design-md | 可视化网页构建，蓝色点缀、精致营销美学 |
5.6 金融科技与加密（9 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| Binance | getdesign.md/binance/design-md | 加密货币交易所，币安黄 + 单色、交易厅紧迫感 |
| Coinbase | getdesign.md/coinbase/design-md | 加密货币交易所，干净蓝、信任导向、机构感 |
| Kraken | getdesign.md/kraken/design-md | 加密交易平台，紫色点缀暗色 UI、数据密集仪表盘 |
| Mastercard | getdesign.md/mastercard/design-md | 全球支付网络，暖奶油画布、轨道胶囊形 |
| Mercury | getdesign.md/mercury/design-md | 创业银行，墨紫夜世界、靛蓝动作胶囊 |
| NerdWallet | getdesign.md/nerdwallet/design-md | 个人理财对比平台，深云杉绿、薄荷洗、近方形圆角 |
| Revolut | getdesign.md/revolut/design-md | 数字银行，暗色界面、渐变卡片、金融科技精准 |
| Stripe | getdesign.md/stripe/design-md | 支付基础设施，标志性紫色渐变、weight-300 优雅 |
| Wise | getdesign.md/wise/design-md | 国际汇款，亮绿点缀、友好清晰 |
5.7 电商与零售（6 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| Airbnb | getdesign.md/airbnb/design-md | 旅行市场，暖珊瑚点缀、摄影驱动、圆角 UI |
| Meta | getdesign.md/meta/design-md | 科技零售店，摄影优先、二元明暗表面、Meta 蓝 CTA |
| mydealz | getdesign.md/mydealz/design-md | 德国交易社区，密集白卡信息流、投票胶囊 |
| Nike | getdesign.md/nike/design-md | 运动零售，单色 UI、大写 Futura、全幅摄影 |
| Shopify | getdesign.md/shopify/design-md | 电商平台，暗色电影优先、霓虹绿点缀、超轻显示字体 |
| Starbucks | getdesign.md/starbucks/design-md | 咖啡零售旗舰，四层土绿系统、暖奶油画布 |
5.8 媒体与消费科技（18 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| 1win | getdesign.md/1win/design-md | 加密赌场与博彩，近黑画布、亮绿动作色 |
| Al Jazeera | getdesign.md/aljazeera/design-md | 全球新闻网络，扁平白纸、密集 Roboto 头条 |
| Apple | getdesign.md/apple/design-md | 消费电子，高级留白、SF Pro、电影级影像 |
| DJI | getdesign.md/dji/design-md | 无人机与相机，影棚产品瓦片、工程蓝胶囊 |
| HP | getdesign.md/hp/design-md | PC 与打印机，纯白画布、HP 电光蓝信号 CTA |
| IBM | getdesign.md/ibm/design-md | 企业技术，Carbon 设计系统、结构化蓝调 |
| NVIDIA | getdesign.md/nvidia/design-md | GPU 计算，绿黑能量、技术力量美学 |
| Oura | getdesign.md/oura/design-md | 智能戒指健康品牌，暖纸奶油、编辑衬线 |
| getdesign.md/pinterest/design-md | 视觉发现平台，红点缀、砖石网格、图像优先 | |
| PlayStation | getdesign.md/playstation/design-md | 游戏主机零售，三表面通道布局、青色悬停缩放 |
| SpaceX | getdesign.md/spacex/design-md | 太空技术，极简黑白、全幅影像、未来主义 |
| Spotify | getdesign.md/spotify/design-md | 音乐流媒体，暗色亮绿、粗体字、专辑艺术驱动 |
| The Verge | getdesign.md/theverge/design-md | 科技编辑媒体，酸性薄荷 + 紫外点缀 |
| Uber | getdesign.md/uber/design-md | 出行平台，大胆黑白、紧凑字型、城市能量 |
| Vodafone | getdesign.md/vodafone/design-md | 全球电信品牌，纪念性大写显示、Vodafone 红 |
| WIRED | getdesign.md/wired/design-md | 科技杂志，纸白大报密度、定制衬线、墨蓝链接 |
5.9 汽车（7 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| BMW | getdesign.md/bmw/design-md | 豪华汽车，暗色高级表面、精密德国工程美学 |
| BMW M | getdesign.md/bmw-m/design-md | 性能汽车，赛车运动对比、M 色彩点缀 |
| Bugatti | getdesign.md/bugatti/design-md | 豪华超跑，影院黑画布、单色禁欲、纪念性显示字 |
| Ferrari | getdesign.md/ferrari/design-md | 豪华汽车，明暗黑白编辑、法拉利红极端稀疏 |
| Lamborghini | getdesign.md/lamborghini/design-md | 豪华汽车，真黑教堂、金色点缀 |
| Renault | getdesign.md/renault/design-md | 法国汽车，活力极光渐变、零圆角按钮 |
| Tesla | getdesign.md/tesla/design-md | 电动车，激进减法、电影全视口摄影 |
5.10 Retro 网页怀旧系列（2 个）
| 产品 | 链接 | 设计特征 |
|---|---|---|
| Dell (1996) | getdesign.md/dell-1996/design-md | 目录时代企业网页：黑色页面框、扁平色块"缎带卡片"、手切 GIF 贴纸 |
| Nintendo.com (2001) | getdesign.md/nintendo-2001/design-md | Y2K"主机镀铬"网页：拉丝紫红斜切金属面板、半调圆点碳导航、像素马里奥气泡 |
六、每个 DESIGN.md 内部包含什么
每个文件遵循 Stitch 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 | 设计护栏与反模式 |
| 8 | Responsive Behavior | 断点、触控目标、折叠策略 |
| 9 | Agent Prompt Guide | 快速色彩参考、即用提示词 |
每个网站还附带：
| 文件 | 用途 |
|---|---|
DESIGN.md |
设计系统（AI 读的） |
preview.html |
视觉目录：色板、字阶、按钮、卡片 |
preview-dark.html |
暗色表面的同款目录 |
七、使用方法（0 配置）
7.1 三步上手
# ① 克隆仓库
git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git
# ② 把某个产品的 DESIGN.md 复制进你的项目根目录
cp awesome-design-md/design-md/apple/DESIGN.md your-project/
# 例如：复制 Apple 的设计系统
# ③ 告诉你的 AI 智能体
# "参考项目根目录的 DESIGN.md，帮我做一个这样的页面"
7.2 在 AI 编码工具中使用
| 工具 | 用法 |
|---|---|
| Claude Code | 把 DESIGN.md 放项目根，直接对话："用 DESIGN.md 做这个页面" |
| Cursor | 项目根放 DESIGN.md，Agent 模式自动读取 |
| Google Stitch | 原生支持 DESIGN.md 概念，直接引用 |
| Codex CLI | 项目根放 DESIGN.md，自然语言指令 |
| 任何 AI 编码智能体 | DESIGN.md 是 markdown，LLM 天然可读，0 配置 |
7.3 快速在线预览
不想克隆？直接访问 https://getdesign.md/xxx/design-md（xxx 为产品名），在线查看/复制任一产品的 DESIGN.md、preview.html 与 preview-dark.html。
八、适配 AI 工具一览
| 工具 | 类型 | 适配方式 |
|---|---|---|
| Claude Code | AI 编码智能体 | 项目根目录 DESIGN.md |
| Google Stitch | Google 设计工具 | 原生 DESIGN.md 概念 |
| Cursor | AI 编辑器 | Agent 模式自动读取 |
| Codex | OpenAI CLI | 自然语言 + DESIGN.md |
| 全部 AI 编码智能体 | 通用 | Markdown 0 配置 |
九、如何请求定制 DESIGN.md
访问 getdesign.md/request 可请求某个特定网站的设计系统文档，包括仅发送给你个人的私有请求。
十、如何贡献
- 改进现有文件：修正错误颜色、缺失 token、薄弱描述；
- 报告问题：发现不对的地方提 issue；
- 提 PR 前先 开 issue 与维护者讨论。
详细规则见 CONTRIBUTING.md。
十一、常见问题 FAQ
| 问题 | 回答 |
|---|---|
| 需要配置吗？ | 完全不需要。DESIGN.md 就是 markdown，丢进项目 AI 直接读懂 |
| 需要 Figma 或设计工具吗？ | 不需要。没有 Figma 导出、没有 JSON schema、没有特殊工具 |
| 免费吗？ | 开源免费，MIT License |
| 能用于任何 AI 工具吗？ | 能。Claude Code、Cursor、Google Stitch、Codex 等所有 AI 编码智能体通用 |
| 84 个是真实产品吗？ | 是，全部从真实网站提取的公开可见 CSS 值 |
| 有暗色模式预览吗？ | 每个产品带 preview.html 和 preview-dark.html 双预览 |
| DESIGN.md 和 AGENTS.md 区别？ | AGENTS.md 定义"如何构建"，DESIGN.md 定义"外观与感觉" |
十二、License 与免责声明
- 本仓库采用 MIT License；
- 所有 DESIGN.md 文件均从公开网站提取，按"原样"提供，不附带任何担保；
- 提取的设计 token 代表公开可见的 CSS 值；
- 本项目不主张任何网站视觉身份的所有权，这些文档只用于帮助 AI 智能体生成一致的 UI。
十三、参考链接汇总
免责声明：本文所有命令、规则、数据均整理自官方 GitHub 仓库
VoltAgent/awesome-design-md的 README 原文，如仓库更新请以最新版本为准。