73 份品牌 DESIGN.md 随取随用：如何用 awesome-design-md 让 AI 代理写出品牌级 UI

73 份品牌 DESIGN.md 随取随用：如何用 awesome-design-md 让 AI 代理写出品牌级 UI

【免费下载链接】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

把品牌色写进 prompt，AI 会照用，但字号、圆角、间距仍是它的默认审美——一句口语 prompt 说不清设计细节。awesome-design-md 把 73 个知名品牌的视觉语言写成 DESIGN.md 纯文本设计系统文档：挑一份复制到项目根目录，AI 编码代理生成的页面就能在配色、字号和组件上贴近目标品牌。

三步跑起来：让 AI 按品牌调性出页面

本节解决"最快怎么看到效果"。

最短路径就三步：克隆仓库、复制选中品牌的档案、给代理一句口语化指令。

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

以 claude 为例，把它的 DESIGN.md 复制进项目根目录：

cp awesome-design-md/design-md/claude/DESIGN.md ./DESIGN.md

接着对代理说 "build me a page that looks like this"（照着这份设计生成一个页面）即可。无需解析、无需转换：文件就是 Markdown，里面的 YAML token 也是模型直接能读的写法，代理通读一遍，按钮、卡片的颜色圆角字号就跟着这个品牌走了。想更精确，可以在 prompt 里直接引用文件里的 token 名（如{colors.primary}）。

为什么一份文件有这么大的约束力？往下看。

这份文件凭什么管用：DESIGN.md 与 AGENTS.md 的分工

本节交代 DESIGN.md 的来历，以及它管什么、不管什么。

DESIGN.md 是 Google Stitch 提出的概念：一份 AI 代理读完即可生成一致 UI 的纯文本设计系统文档。它不是任何软件的导出物——不依赖 Figma、不需要 JSON schema、不需要专用工具。

类比中央厨房的标准菜谱卡：每道菜的底料、火候、摆盘，甚至"禁止加什么"都写死，谁来掌勺口味都不飘。DESIGN.md 就是页面级的菜谱卡。

选 Markdown 载体是因为 LLM 最擅长读这种格式，拿来即用、零配置。它与 AGENTS.md 的分工很清晰：

还有个关键事实：73 份文件不是二手摘要，而是逐站从真实网站提取、分析后的产物，patterns、tokens、rules 都对应线上可见的 CSS 值，目标是稳定可复现的 UI 生成。

design-md/ 目录怎么组织：一品牌一目录，一句话摘要选档

本节解决"文件在哪、怎么快速定位"。

全部内容位于 design-md/ 目录，一个品牌一个子目录，标配两份文件：DESIGN.md 是代理真正读取的设计系统本体，README.md 是该站分析说明的入口页。slack 目录例外，只有 DESIGN.md。

仓库按品类归档，摘几份有代表性的：

• AI 与 LLM 平台：Claude（暖陶土色点缀、编辑感排版）、Ollama（终端优先的单色极简）、Replicate（白画布、代码优先）
• 开发者工具：Cursor（暗色界面 + 渐变点缀）、Vercel（黑白精准 + Geist 字体）、Warp（IDE 化的暗色终端）
• 后端与数据库：Supabase（暗色翡翠主题）、MongoDB（绿色叶子品牌、文档导向）
• 生产力与 SaaS：Linear（超极简 + 紫色点缀）、Notion（暖极简、衬线标题）
• 金融科技：Stripe（标志性紫色渐变 + weight-300 排版）、Coinbase（干净蓝色、机构感）
• 电商与零售：Nike（单色 UI、巨型大写 Futura、全出血摄影）、Airbnb（暖珊瑚色、摄影驱动）
• 汽车：Tesla（激进减法、全视口电影感摄影）、Bugatti（影院黑画布）
• 复古 Web：design-md/dell-1996/DESIGN.md（字面意义的黑色页面框架、扁平色块 ribbon cards、Helvetica-Black 标题配 Times Roman 正文）与 design-md/nintendo-2001/DESIGN.md（Y2K 的"主机镀铬"网页风格）——复制进项目，代理能产出年代准确的 90 年代老网页

README 里每个条目都带一句话设计摘要，其实就是对应 DESIGN.md 中 description 字段的浓缩。浏览目录时先读它筛选，能省一半时间。

精读 claude 的 DESIGN.md：5 组 token + 9 段骨架

本节以 design-md/claude/DESIGN.md（全文约 589 行）为例，拆解这份文件怎么写。

文件分两层。

第一层：YAML frontmatter 里的 token。正文前是一段 YAML，按五个顶层键组织：colors、typography、rounded、spacing、components。书写规则有三条：

摘录如下：

colors: primary: "#cc785c" canvas: "#faf9f5" components: button-primary: backgroundColor: "{colors.primary}" rounded: "{rounded.md}"

第二层：正文对 token 的语义展开。73 份文件共享同一套 9 段骨架：

frontmatter 里每个 token 都会在正文展开成语义说明：claude 的 Colors 段写清珊瑚色只出现在主 CTA、全出血 callout 卡片和品牌字标上；Typography 段列出 14 档字号层级表（display-xl 到 nav-link，含字号、字重、行高、字距与适用场景）。这份文件还有 9 段之外的 Shapes、Iteration Guide、Known Gaps 等章节——分析深度按站点实际特征伸缩，骨架只保证下限。

另一份 design-md/stripe/DESIGN.md 展示了不同品类的深度：weight-300 的编辑感标题、金额数字专用的表格数字体（tabular figures）、深色仪表盘壳层，同样写进了 token 与正文。

怎么挑、怎么贡献：先开 issue，再谈版权

本节处理三个问题：选哪份、怎么提、License 怎么算。

按产品气质选。开发者工具看 Cursor、Vercel、Warp；消费端产品看 Airbnb、Nike、Spotify；要怀旧感就用 dell-1996 或 nintendo-2001。推荐动作：先读目录页的一句话摘要，再打开对应 DESIGN.md 翻 Colors 与 Do's and Don'ts 两节——这两节能最快判断"它像不像你要的样子"。

贡献流程写在 CONTRIBUTING.md：先开 issue 与维护者讨论，再动手改文件——对照线上站点修正错误的十六进制值、补齐缺失 token、强化薄弱描述；若改动影响展示的 token，同步更新 preview 页面；PR 附上 before/after 的理由。⚠️ 为维护既有收藏的质量，仓库不接受新站点的 DESIGN.md 直提 PR，问题反馈优先走 issue。

版权边界：仓库采用 MIT License（见 LICENSE）。所有 DESIGN.md 按 as-is 提供、不附带任何担保；token 对应公开可见的 CSS 值；仓库不主张对任何站点视觉标识的所有权——这些文档的意义就是帮 AI 代理生成一致的 UI。

想要品牌级的视觉一致性：挑一份 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