awesome-design-md 深度解析：73 份品牌设计档案，两步让 AI 生成符合 DESIGN.md 的品牌 UI

awesome-design-md 深度解析：73 份品牌设计档案，两步让 AI 生成符合 DESIGN.md 的品牌 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

awesome-design-md 收录了 73 份从知名品牌真实网站提取的 DESIGN.md，每份都是 AI 编程代理可直接读取的纯文本AI 设计系统文档，用来生成视觉一致的品牌 UI。下面带你走通三件事：73 份档案怎么组织、单份文件内部长什么样、如何两步把品牌设计搬进自己的项目。

仓库全景——73 份品牌档案的组织方式

仓库核心内容全在design-md/目录，每个子目录对应一个品牌，标配两个文件：DESIGN.md（设计系统本体，代理真正读取的内容）和README.md（该品牌设计分析的入口页与说明）；唯一的例外是design-md/slack/，只含 DESIGN.md。README 徽章标注 DESIGN.md 数量为 73，条目按 10 个品类归档，且每个条目都带一条「一句话设计摘要」——它正是对应品牌 DESIGN.md 中description字段的浓缩版：

复古 Web 品类是 README 自称的「周六系列」：从 1990 年代网页中提取 DESIGN.md，对应design-md/dell-1996/、design-md/nintendo-2001/两个目录，让代理生成年代准确的复古 UI。

单份文件解剖——YAML 骨架 + 9 段正文

README 声明全部文件遵循 Google Stitch 提出的 DESIGN.md 格式并做了扩展。以结构最完整的 design-md/claude/DESIGN.md（共 589 行）为例：YAML frontmatter——文件顶部由---分隔的元数据块——是 token 化设计系统的真正载体。设计 token即把颜色、字号、圆角等设计值抽象成命名变量。Claude 的 frontmatter 由colors、typography、rounded、spacing、components五组构成：

colors: primary: "#cc785c" # Anthropic 标志性珊瑚色 canvas: "#faf9f5" # 页面默认底色 surface-card: "#efe9de" surface-dark: "#181715" ink: "#141413" typography: display-xl: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 64px fontWeight: 400 letterSpacing: -1.5px button: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 14px fontWeight: 500 rounded: md: 8px lg: 12px pill: 9999px spacing: xxs: 4px section: 96px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" height: 40px

其后的 Markdown 正文遵循统一的 9 段式骨架（README 给出了对应表）：

Claude 文件并不止步于这 9 段：实际标题里还有 Shapes（圆角刻度与插画规范）、Iteration Guide（修改文件时的规则）、Known Gaps（专有字体、动画时长、表单校验态等未提取项清单），说明分析深度随目标站点特征而异——Claude 有商用字体，所以专门交代了开源替代方案。一句话概括这层分工：frontmatter 是机器的速查表，正文是代理的深度语义库。frontmatter 只记primary: "#cc785c"，正文的## Colors段则说明它是标志性的暖珊瑚色，用于所有主 CTA 背景、全出血 callout 卡片与字标点缀；## Typography段给出 14 行字号层级表，逐行标注实际用在哪里。

token 化设计的三个关键决策

DESIGN.md 能让代理生成视觉一致的品牌 UI，靠的是 YAML 里的三个组织决策，在 Claude 文件里都能逐条核对：

1. 语义化 token 命名：颜色不用裸值，而是primary、canvas、ink、surface-dark这类角色名。代理看到canvas: "#faf9f5"就能理解它是「页面默认底色」而非某种灰。Claude 的 frontmatter 中 25 个颜色 token 全部如此命名，从on-primary（珊瑚按钮上的文字色）到hairline-soft（几乎不可见的分隔线）。
2. 花括号引用语法：components:内部几乎全是"{colors.primary}"、"{typography.button}"、"{rounded.md}"这样的 token 引用，把颜色、字体、圆角组合成组件。上面代码块里的button-primary六行写完整了主按钮，却复用了 4 个 token——将来珊瑚色变更，只需改colors段一行，所有引用它的组件自动同步，这才是 token 复用的本质。
3. 状态变体平铺为独立条目：button-primary-active、button-primary-disabled、text-input-focused、category-tab-active都作为独立 entry 平铺在components:下，与默认状态并列，代理不需要推断「按下是什么样」，直接查表。Claude 的## Iteration Guide明确写下这条约定：变体一律 live as separate entries incomponents:。

两步上手——把品牌设计搬进你的项目

📌 README 给出的使用流程只有两步。

步骤 1：复制目标品牌的DESIGN.md到项目根目录。先克隆仓库：

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

然后把design-md/stripe/DESIGN.md或你心仪的任意一份复制到项目根目录。

步骤 2：给 AI 代理一句话指令。README 的原文示例就是 "build me a page that looks like this"（照这个设计生成一个页面）。Markdown 无需解析、YAML token 无需转换，代理读完即开工；想让指引更明确，还可以在 prompt 里直接引用{colors.primary}这类 token 引用作为上下文。

README 同时说明每个站点还配有preview.html（展示色板、字号层级、按钮与卡片目录的可视化 catalog）与preview-dark.html（同一目录的深色表面版本），使用某品牌设计系统前可先打开核对色板与组件。注意当前仓库的品牌子目录内并未放置这两个文件，它们按 README 说明随各站点发布。

DESIGN.md 与AGENTS.md的分工在 README 中有对照表：

参与、许可与边界

贡献流程写在 CONTRIBUTING.md 里，共四步：

1. 先开 issue描述想改什么，拿到维护者反馈；
2. 打开目标站点的 DESIGN.md，对照真实站点；
3. 修正错误的十六进制色值、缺失 token、薄弱的设计描述，若改动影响展示的 token，同步更新preview.html与preview-dark.html；
4. 提交 PR 并附上 before/after 的改动理由。

⚠️ 边界同样写得很明确：仓库不接受新品牌 DESIGN.md 的直接 PR，以维持既有收藏的质量。仓库采用 MIT License，LICENSE 给出三条边界：所有 DESIGN.md 按 "as is" 提供、不附任何担保；提取的设计 token 代表公开可见的 CSS 值；仓库不主张对任何站点视觉标识的所有权。你可以借走的是「设计语言」的结构与方法，而不是品牌资产本身。

小结 + 延伸阅读

awesome-design-md 把「从真实品牌提取设计系统」变成了一条可复制的流水线：73 份 DESIGN.md 覆盖 AI 平台到汽车、复古网页的 10 个品类，每份都是「YAML token frontmatter + 9 段正文」的双层结构——前者供代理直接查表，后者给代理讲清「为什么」。对你最直接的价值：选一个心仪品牌的设计语言，把它的 DESIGN.md 复制进项目根目录，一句话让 AI 代理产出风格统一的页面。

延伸阅读（均为仓库内相对路径）：

• design-md/claude/DESIGN.md：589 行，结构最完整，含 Shapes / Iteration Guide / Known Gaps 扩展章节，是学习写法的最佳范本；
• design-md/stripe/DESIGN.md：487 行的深蓝墨 + 电光靛体系，金融科技品类的典型样本；
• CONTRIBUTING.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