awesome-design-md：73 份 DESIGN.md 品牌设计系统，让 AI 编码代理直接写出品牌同款页面-开发者社区

awesome-design-md：73 份 DESIGN.md 品牌设计系统，让 AI 编码代理直接写出品牌同款页面

【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md

让 AI 写页面，颜色总差一点、字重总重一档，你知道不对，却说不出该改哪个数字。awesome-design-md 把 73 个知名网站的视觉语言量化成了 73 份 DESIGN.md 设计系统文件，语义色值、完整字阶、组件圆角全都写死，AI 拿来就能读。

DESIGN.md 是什么：AI 能直接读的纯 Markdown 设计系统文档

DESIGN.md 是 Google Stitch 提出的一种新事物：纯文本设计系统文档，AI 代理读它来生成一致的界面。它和你可能见过的 AGENTS.md 是配套关系——AGENTS.md 告诉编码代理"这个项目怎么构建"，DESIGN.md 告诉它"这个项目应该长什么样"。一个管构建，一个管长相。

这个仓库做的事，就是把 Stripe、Linear、Apple、Tesla 这类真实网站的视觉语言，拆成结构统一的 9 个板块：氛围、色板与角色、排版层级表、组件样式与状态、间距刻度、阴影层级、Do's & Don'ts、响应式行为、提示词指南。没有 Figma 导出，没有 JSON schema，丢进项目根目录代理就能读。你可以把它理解成给 AI 的一份量化"品牌手册"，而不是"高级感"三个字。

纯 Markdown，零解析零配置
9 板块结构，全是可执行数值
73 个品牌，10 个类目，2 份复古彩蛋

73 份品牌设计系统怎么分布：按业务线各拿一份

核心资产	真实数字
DESIGN.md 文件总数	73 份
类目分布	AI & LLM 平台 12 份、媒体与消费科技 12 份、后端 DevOps 8 份、开发者工具 7 份、生产力 SaaS 7 份、金融加密 7 份、汽车 7 份、设计工具 6 份、电商零售 5 份、复古彩蛋 2 份
单份文件结构	9 大板块，含色板、字阶、组件、布局、阴影、Do's & Don'ts、响应式、提示词指南
复古彩蛋	Dell（1996）与 Nintendo（2001）各一份
许可	MIT，文件按 as-is 提供

量化程度最足的，看 design-md/linear.app/DESIGN.md 和 design-md/stripe/DESIGN.md：Linear 的画布是近黑 #010102，卡片 #0f1011，强调色 #5e6ad2 只允许出现在 logo、焦点环和少数 CTA 上；Stripe 主色 #533afd、墨色 #0d253d，Söhne 细体 weight-300，金额数字启用 tnum 表格数字特性。

两个高频用法：单文件拷进项目根目录，和复刻年代感页面

让代理按某个品牌的样子写页面

你的目标很简单：产出的页面要有 Stripe 的质感，而"做得像一点 Stripe"这种话约束不住模型。做法分三步：先在 README.md 的 Collection 里挑一个你信任审美的品牌；再把它那份 DESIGN.md 拷进项目根目录；最后对代理说"按这份设计系统生成页面"。结果就是主色、字号、圆角全部来自文件里的参数表，而不是模型的想象——文件末尾还自带 Do's & Don'ts 和现成提示词指南，可以直接用来卡输出。

如果你要的不是现代 SaaS 风，而是某个特定年代的页面，仓库里还有一条隐藏线。

用复古彩蛋复刻"年代感"

动机：做产品发布页或者搞怪页面，想要 1996 年的目录式企业官网、2001 年的 Y2K 主机站。做法同样三步：从 README 的 Retro Web 区块拿 dell-1996 或 nintendo-2001；拷进项目根目录；让代理"build a period-accurate vintage UI"。结果：Dell 1996 那份写明了黑色页面边框、扁平色块丝带卡片、Helvetica-Black 大标题配 Times 正文；Nintendo 2001 那份写明了刷面长春花蓝金属斜面面板、半调网点碳纹导航和琥珀色发光。年代感不用再靠你口述。

最小上手路径：一条命令就够

克隆仓库：

git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md

挑一份 DESIGN.md 拷进你的项目根目录
让代理按这份文件生成页面，并用文件里的 Do's & Don'ts 约束输出

文件放进去了，为什么输出还是不像？README 里"How to Use"只有两行：把 DESIGN.md 放在项目根目录，并且明确告诉 AI agent 使用它。只说"做得像 Stripe"不算使用，代理得真的读到那份文件。

想新增一个品牌、改错色值，为什么不能直接提 PR？CONTRIBUTING.md 写得很直接：不接受新增 DESIGN.md 的 PR，任何改动都要先开 issue 讨论；但修正错误色值、补齐缺失 token、重写模糊描述是被欢迎的方向。另外文件本身按 as-is 提供、不带任何保证，读到一个色值不对劲，那本身就是可以贡献的缺口。

今晚就从 Collection 里挑一个你信任的品牌，把它的 DESIGN.md 丢进项目根目录，让代理写出第一版页面。视觉语言被钉死成数字之后，"像不像那个网站"就不再靠运气 🎯

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考