Skip to content

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

使用方法

  1. 复制目标站点的 DESIGN.md 到项目根目录
  2. 告诉 AI agent:"build me a page that looks like this"

数据

  • 87.8k Stars · 10.5k Forks · 288 Issues
  • GitHub Rank #150

定位

  • Awesome DESIGN.md:让风格更统一

Released under the MIT License.