Awesome DESIGN.md — 72+ 个品牌设计系统文档集合(87.8k Stars)
A collection of DESIGN.md files by popular brand design systems. 放进项目,AI 就能按指定风格生成界面。
核心理念
Google Stitch 提出的 DESIGN.md 概念:纯文本设计系统文档,AI Agent 读取后生成一致 UI。无需 Figma 导出、JSON schema、特殊工具,只要一个 markdown 文件。
| 文件 | 用途 |
|---|---|
AGENTS.md | 编码 Agent:如何构建项目 |
DESIGN.md | 设计 Agent:项目应该长什么样 |
收录内容(72+ DESIGN.md)
AI & LLM平台
Claude、Cohere、ElevenLabs、Minimax、Mistral AI、Ollama、OpenCode AI、Replicate、Runway、Together AI、VoltAgent、xAI
开发者工具 & IDE
Cursor、Expo、Lovable、Raycast、Superhuman、Vercel、Warp
后端、数据库 & DevOps
ClickHouse、Composio、HashiCorp、MongoDB、PostHog、Sanity、Sentry、Supabase
生产力 & SaaS
Cal.com、Intercom、Linear、Mintlify、Notion、Resend、Zapier
设计 & 创意工具
Airtable、Clay、Figma、Framer、Miro、Webflow
金融 & 加密
Binance、Coinbase、Kraken、Mastercard、Revolut、Stripe、Wise
电商 & 零售
Airbnb、Meta、Nike、Shopify、Starbucks
汽车
BMW、BMW M、Bugatti、Ferrari、Lamborghini、Renault、Tesla
复古 Web(Nostalgia 系列)
Dell1996 等
每个 DESIGN.md 包含
| 章节 | 内容 |
|---|---|
| Visual Theme & Atmosphere | 氛围、密度、设计哲学 |
| Color Palette & Roles | 语义名 + hex + 功能角色 |
| Typography Rules | 字体家族 + 完整层级表 |
| Component Stylings | 按钮/卡片/输入/导航(含状态) |
| Layout Principles | 间距 scale、grid、留白哲学 |
| Depth & Elevation | 阴影系统、表面层级 |
| Do's and Don'ts | 设计护栏和反模式 |
| Responsive Behavior | 断点、touch targets、折叠策略 |
| Agent Prompt Guide | 快捷配色参考、可直接用 prompt |
使用方法
- 复制目标站点的
DESIGN.md到项目根目录 - 告诉 AI agent:"build me a page that looks like this"
数据
- 87.8k Stars · 10.5k Forks · 288 Issues
- GitHub Rank #150
定位
- Awesome DESIGN.md:让风格更统一