Awesome DESIGN.md 设计系统合集
收录 80+ 个知名品牌与开发者网站的设计系统分析，整理成可直接放入项目的 DESIGN.md 文件。AI 编码代理读取后即可生成风格统一的 UI，无需 Figma 导出或复杂配置。
过去 7 天收获 5 颗 Star
爱鲜报评分
0 人评分
124k
星数
否
中文
—
主语言
是
活跃
4
贡献者
人工分析
EDITORIAL推荐理由
DESIGN.md 是 Google Stitch 提出的纯文本设计系统文档，这个仓库把 Claude、Vercel、Linear、Supabase 等热门产品的设计语言提炼成可直接复用的 Markdown 文件，对使用 Cursor、Claude Code 等 AI 编码工具的开发者非常实用。只需把文件放进项目根目录，告诉代理「按这个风格做页面」，就能显著提升生成 UI 的一致性和质感。
适用场景
- 用 AI 编码代理生成落地页或官网
- 为项目快速建立统一的设计规范
- 模仿知名产品的视觉风格做原型
- 前端开发者学习设计系统与设计令牌
- Vibe Coding 场景下提升 UI 生成质量
优点
- 纯 Markdown 格式，零配置、即插即用
- 覆盖 AI、开发工具、SaaS 等多类知名品牌
- 包含设计令牌、版式规则等深度分析，而非表面描述
- 与 Cursor、Claude Code、Google Stitch 等工具天然兼容
- MIT 协议，可自由修改与商用
缺点
- 仅提供设计文档，不包含可直接运行的组件代码
- 部分品牌风格描述偏主观，需自行微调
- 依赖 AI 代理的理解能力，生成效果因模型而异
- 仓库以英文为主，中文用户需一定英文阅读能力
项目简介
Awesome DESIGN.md 是一个精选合集，收录了 80 多个知名品牌与开发者网站的设计系统分析，并整理成可直接使用的 DESIGN.md 文件。
DESIGN.md 是 Google Stitch 提出的概念：一份纯文本的设计系统文档，AI 代理读取后即可生成风格一致的 UI。它只是 Markdown 文件，不需要 Figma 导出、JSON Schema 或任何特殊工具。
它解决什么问题
| 文件 | 谁读取 | 定义什么 |
|---|---|---|
AGENTS.md |
编码代理 | 项目如何构建 |
DESIGN.md |
设计代理 | 项目应该长什么样 |
把 DESIGN.md 放进项目根目录，告诉 AI 代理「帮我做一个这种风格的页面」，即可生成视觉统一的高质量 UI。
收录内容
仓库按类别整理了众多品牌的设计语言，例如：
- AI 与 LLM 平台：Claude、Cohere、ElevenLabs、Mistral AI、Ollama、xAI 等
- 开发者工具与 IDE：Cursor、Vercel、Raycast、Warp、Expo 等
- 后端、数据库与 DevOps：Supabase、MongoDB、ClickHouse、Sentry、PostHog 等
- 效率与 SaaS：Linear、Notion、Cal.com、Resend、Intercom 等
每个条目都包含对配色、字体、间距、组件规则等设计要素的分析，而不仅是风格描述。
使用方式
基本流程非常直接：
- 从仓库或官网挑选一个喜欢的
DESIGN.md - 将其复制到你的项目根目录
- 向 AI 编码代理描述需求，例如：
参考项目根目录的 DESIGN.md，帮我生成一个产品落地页。
代理会依据文档中的设计令牌与规则生成匹配的界面。
适用人群
- 使用 Cursor、Claude Code 等 AI 编码工具的开发者
- 需要快速搭建统一视觉风格原型的独立开发者
- 想学习知名产品设计系统与设计令牌的前端工程师
注意事项
仓库提供的是设计文档而非现成组件，最终效果取决于所用 AI 代理的理解能力，建议生成后按需微调。
评论
- 暂无评论，来写第一条吧。