如果还没有安装CC点击Claude Code的安装和配置查看
awesome-design-md是由VoltAgent 团队发起的开源项目，汇集了 58 个知名品牌 (如 Vercel、Apple、Stripe、Notion 等) 的DESIGN.md文件，专为 AI 编程助手 (如 Google Stitch、Cursor、Codex 等) 设计的纯文本设计规范库。
获取方式
- 官方网站：https://getdesign.md/
- GitHub 仓库： https://github.com/VoltAgent/awesome-design-md
- npm 包：
npm install awesome-design-md
核心概念：DESIGN.md
DESIGN.md是 Google Stitch 提出的创新概念，本质是：
- 一份放在项目根目录的纯 Markdown 设计系统文档
- 为 AI 智能体提供视觉真理源 (Source of Truth)
- 包含 9 个标准部分：颜色系统、排版规则、间距网格、组件规范、布局原则、响应式设计、交互状态、深色模式和视觉哲学
- 无需复杂设计工具 (如 Figma)，AI 可像读取 API 文档一样理解设计规范
项目内容与使用方法
收录的知名品牌设计系统
- 科技巨头：Apple、Google、Microsoft
- 开发者工具：Vercel、Figma、GitHub
- 金融科技：Stripe、PayPal
- 产品工具：Notion、Linear、Slack 等共 58 个品牌
使用步骤
1根目录放 DESIGN.md → 2. Claude 自动加载 → 3. 用指令让它遵循规范写代码
1.从 GitHub 仓库 https://github.com/VoltAgent/awesome-design-md或 npm 包获取所需品牌的 DESIGN.md 文件
2.将文件复制到项目根目录(命名为：DESIGN.md（必须大写 D，标准文件名，Claude 优先识别）)
3.启动 AI 编程助手，它会自动读取并遵循设计规范
4.生成 HTML/CSS/ 组件代码，保持与源品牌一致的视觉风格
基础指令（直接复制使用）
指令 1：让 Claude 加载并解读设计规范
读取项目根目录的 DESIGN.md，总结这个设计系统的核心规则（颜色、排版、间距、组件）
指令 2：生成全新代码（最常用）
按照 DESIGN.md 中的设计规范，生成一个【登录表单/导航栏/卡片组件】，使用 React/HTML+CSS/Tailwind，严格遵循设计系统的颜色、字体、间距、圆角规则
指令 3：修改现有代码（统一设计风格）
把我选中的代码，按照 DESIGN.md 的设计规范重构，保持功能不变，统一视觉样式（颜色、排版、间距、交互状态）
指令 4：生成完整页面
根据 DESIGN.md 设计系统，生成一个【个人资料页面/仪表盘】，包含响应式布局、深色模式、标准组件
