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 就是一个 DESIGN.md 设计系统合集：它把 73 个知名网站的视觉语言拆成 73 份纯 Markdown 设计文档，任选一份丢进你的项目，AI 代理就能生成风格一致的界面。
为什么 AI 做的界面总差一口气
问题出在你只说了"做得像 Stripe"，但它不知道 Stripe 的主色到底是什么、正文为什么看起来那么轻、圆角和阴影该怎么定。它缺的是一组可执行的设计参数。
DESIGN.md 是 Google Stitch 提出的一种纯文本设计系统文档，和 AGENTS.md 分工明确：后者告诉代理"怎么构建"，前者告诉它"长什么样"。没有 Figma 导出，没有 JSON schema，没有特殊工具，就是一个 Markdown 文件，AI 编码代理开箱即读。
快速拿到设计文件
不用先 clone 仓库。getdesign.md 平台可以在线浏览每个品牌的色板、字体层级和组件样式，每套设计系统都提供浅色与深色两套预览，做深色模式适配时这是最直接的对照，单份 DESIGN.md 也支持直接下载。
73 份文件按行业分布：
- AI & LLM 平台 12 份：Claude、xAI、Mistral 等
- 媒体与消费科技 12 份：Apple、Spotify、Uber 等
- 后端 DevOps 8 份：ClickHouse、Supabase、Sentry 等
- 金融加密 7 份：Stripe、Coinbase、Wise 等
- 开发者工具 7 份：Cursor、Vercel、Warp 等
- 生产力 SaaS 7 份：Linear、Notion 等
- 设计工具 6 份：Figma、Webflow、Miro 等
- 电商零售 5 份：Airbnb、Nike、Shopify 等
- 汽车 7 份：Tesla、Ferrari、Lamborghini 等
- 复古彩蛋 2 份：1996 年的 Dell 和 2001 年的 Nintendo，专门用来复刻"年代感"页面
想一次拿全，整包 clone：
git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md让 AI 按品牌风格生成页面的做法
把选中的 DESIGN.md 复制到项目根目录，提示词里明确写"遵循这份设计系统"，而不是只说"做得像某某"——否则代理很可能根本没读文件。
每份文件结构统一，共 9 个板块，可以分三层理解：
- 大感觉：视觉主题与氛围、带语义角色的色板（每个颜色都写清语义名、hex 值、功能角色）、完整排版层级表；
- 细节：组件样式（按钮、卡片、输入框、导航及各自的状态）、布局间距刻度与留白、阴影系统与表面层级；
- 护栏：Do's & Don'ts 设计红线、响应式断点与触控目标、附现成提示词的 Agent Prompt 指南。
"量化"到什么程度？看 design-md/linear.app/DESIGN.md：画布是近黑的 #010102，卡片 #0f1011，正文 #f7f8f8，强调色 #5e6ad2 只出现在 logo、焦点环和少数 CTA 上，绝不装饰性滥用；Display 从 80px 起步、字重 600、字距收到 -3px；圆角按 4px 到 24px 分档，药丸按钮直接 9999px。design-md/stripe/DESIGN.md 则把"金融感"写成参数：主色 #533afd、海军蓝墨色 #0d253d、Söhne weight-300 细体，金额数字启用 tnum 表格数字特性。
代理读到的不是"高级感"三个字，而是能执行的数值。
边界与贡献流程
- 合集由社区维护、按 as-is 提供。发现色值写错、token 缺失，可以直接修：先提 Issue 讨论，再提 PR，流程见 CONTRIBUTING.md。
- 列表里缺你想要的品牌，可以上 getdesign.md 按指定网站申请一份，私人请求只交付给你自己。
下一步
从 README.md 的 Collection 里挑一个你信任其审美的品牌，把它的 DESIGN.md 放进项目根目录，今天就让代理写出"像那么回事"的页面。
【免费下载链接】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辅助生成（AIGC），仅供参考
