Awesome DESIGN.md

73 份知名品牌的 DESIGN.md 设计系统模板，覆盖 Linear、Stripe、Vercel、Notion、Apple、Figma、Cursor、Raycast 等。把对应文件丢进项目根，让 Claude Code 或 Cursor 按它生成 UI，能拿到一个明显「像该品牌」的页面。适合用 vibe coding 写前端但卡在 UI 没风格的人，不适合追求像素级品牌一致的设计师。

项目定位

73 份现成的品牌 DESIGN.md，给 vibe coding 写前端的人当 UI 风格定调器。

核心能力

覆盖 73 个知名品牌：Linear、Stripe、Vercel、Notion、Apple、Figma、Cursor、Raycast、Supabase、Sentry、Clay、Framer 等
每份 DESIGN.md 是结构化 markdown：颜色 token、字体阶、间距、组件规则、页面节奏一应俱全
直接被 Claude Code、Cursor、Google Stitch 读懂，不需要额外解析
MIT 协议，clone 即用

适合谁

用 vibe coding 写前端、但 AI 输出 UI 总是「像 ChatGPT 默认审美」的人
想快速试不同品牌风格、做风格 A/B 的独立开发者

不适合谁

做品牌官方产品（参考性质的复刻，商用要看清版权）
已经有完整设计系统的团队（重写没必要）

上手


bash
git clone https://github.com/VoltAgent/awesome-design-md.git
cp awesome-design-md/design-md/linear.app/DESIGN.md ./your-project/
# 然后让 Claude Code 按这份 DESIGN.md 生成页面

边界提醒

仓库本质是「品牌风格逆向」，不是品牌官方设计系统，细节会跟最新版有出入
AI 读完仍可能挑错 surface 层级或滥用 accent 颜色，第一稿后要人工对一下

源码仓库官方网站

语言

Markdown

分类

Vibe Coding

许可证

MIT

更新时间

5/8/2026

标签

design-mddesign-systemvibe-codingui-prompt

~/安装方式

# source

$git clone https://github.com/VoltAgent/awesome-design-md.git

$cp awesome-design-md/design-md/<brand>/DESIGN.md ./your-project/

# usage

$在 Claude Code 或 Cursor 中要求按项目根的 DESIGN.md 生成 UI