55+ 精选网站设计系统 · AI Agent 友好的 DESIGN.md 文件
DESIGN.md 是 Google Stitch 提出的设计系统文档格式 —— 用纯文本 Markdown 记录设计系统，让 AI 编码 Agent 能够生成风格一致的 UI。
本仓库收集了 55+ 个热门网站/产品的 DESIGN.md 文件，涵盖：
- Notion、Linear、Stripe、Figma、Vercel 等知名产品
- Airbnb、Spotify、Uber、BMW 等品牌官网
- Cursor、Raycast、Warp、Expo 等开发者工具
每个设计系统包含：
| 文件 | 说明 |
|---|---|
DESIGN.md |
完整设计系统文档（9大章节） |
preview.html |
交互式设计 Token 预览（浅色） |
preview-dark.html |
交互式设计 Token 预览（深色） |
每个文件遵循 Google Stitch 规范，包含 9 个章节：
- Visual Theme & Atmosphere — 视觉基调与设计哲学
- Color Palette & Roles — 色彩体系与语义命名
- Typography Rules — 字体家族与完整层级表
- Component Stylings — 按钮、卡片、输入框等组件状态
- Layout Principles — 间距系统、网格、留白哲学
- Depth & Elevation — 阴影系统、表面层级
- Do's and Don'ts — 设计禁区与反模式
- Responsive Behavior — 响应式断点策略
- Agent Prompt Guide — AI 提示词参考
将 DESIGN.md 拖入项目根目录，告诉你的 AI 编码助手：
"用这个设计系统，帮我做一个 Notion 风格的导航栏"
即可生成像素级还原的设计！
数据来源：VoltAgent/awesome-design-md (12k+ ⭐)