简介
Awesome DESIGN.md 是一个精选的 DESIGN.md 文件集合，灵感来源于真实知名网站的视觉设计系统。由 VoltAgent 维护，核心理念是：把一个 DESIGN.md 丢进项目根目录，告诉 AI 代理"按这个风格生成 UI"，就能得到像素级匹配的界面。
核心概念
DESIGN.md 源自 Google Stitch 提出的概念——用纯文本 Markdown 描述设计系统，让 AI 代理直接读懂并生成一致的 UI。无需 Figma 导出、JSON Schema 或特殊工具。
与 AGENTS.md 的关系：
- AGENTS.md → 编码代理怎么构建项目
- DESIGN.md → 设计代理项目应该长什么样
收录品牌（50+）
覆盖多个领域：
- AI & LLM：Claude、Mistral AI、Ollama、Replicate、Vercel、xAI 等
- 开发者工具：Cursor、Expo、Raycast、Warp、Linear
- 后端/DevOps：Supabase、MongoDB、Sentry、PostHog、ClickHouse
- SaaS：Notion、Intercom、Cal.com、Zapier
- 设计工具：Figma、Framer、Miro、Webflow
- Fintech：Stripe、Coinbase、Revolut、Wise
- 消费品牌：Apple、Tesla、SpaceX、Nike、Spotify
- 汽车：BMW、Ferrari、Lamborghini、Renault、Tesla
每个 DESIGN.md 包含
| 段落 | 内容 |
|---|---|
| Visual Theme & Atmosphere | 情绪、密度、设计哲学 |
| Color Palette & Roles | 语义名称 + Hex + 功能角色 |
| Typography Rules | 字体族、完整层级表 |
| Component Stylings | 按钮、卡片、输入框、导航及各状态 |
| Layout Principles | 间距系统、网格、留白哲学 |
| Depth & Elevation | 阴影系统、表面层级 |
| Do’s and Don’ts | 设计护栏和反模式 |
| Responsive Behavior | 断点、触摸目标、折叠策略 |
| Agent Prompt Guide | 快速颜色参考、可直接使用的提示词 |
每个站点还附带 preview.html 和 preview-dark.html 预览文件。