DESIGN.md 完整指南：一份 Markdown 设计系统文件，让 AI 生成视觉一致的 UI-开发者社区

DESIGN.md 完整指南：一份 Markdown 设计系统文件，让 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

让 AI 连续生成 5 次页面，你能拿到 5 个长相不同的界面——颜色漂了、圆角变了、字重对不上。问题出在：模型手里没有可参照的设计标准。仓库 awesome-design-md 给出的解法是 73 份 DESIGN.md：每份都是从真实网站提取的设计系统文档，复制一份到项目根目录，AI 就能生成视觉一致的 UI。读完本文，你会挑品牌文件、拆它的内部构造、自己改 token。

一个文件解决的方案：DESIGN.md 是什么

结论：DESIGN.md 就是一份纯文本设计系统文档，AI 读完它就能产出一致的界面。

把概念压缩成三句话：

它只是一个 Markdown 文件——不需要 Figma 导出、不需要 JSON schema、不需要任何特殊工具；
零配置——丢进项目根目录，任何 AI 编码代理或 Google Stitch 立刻知道你的 UI 该长什么样；
对 LLM 友好——Markdown 是模型读得最顺的格式，没有解析、没有转换环节。

这个概念来自 Google Stitch。它和已有的 AGENTS.md 分工明确，一张表说清：

文件	谁读	回答什么问题
`AGENTS.md`	编码代理	怎么构建这个项目
`DESIGN.md`	设计代理	界面长什么样、观感如何

一个管"代码怎么写"，一个管"画面长啥样"。而本仓库的 73 份文件都是从真实网站逆向出来的品牌设计系统 Markdown 文件：分析过设计模式（patterns）、token 与规则，不是手绘的色卡。

怎么选：73 个品牌的"设计简历"

结论：在 10 个品类里按你的产品类型对号入座，每个品牌都有一句话设计摘要。

全部内容集中在design-md/目录，一个品牌一个子目录，标配两个文件：DESIGN.md（代理实际读取的设计系统本体）和README.md（该份分析的入口页说明）。例外是slack/，它只有 DESIGN.md。

按 README 徽章计数为 73（目录下实际有 74 个，多出的slack/尚未列入 README 分类）。10 个品类的代表品牌如下，每条摘要都取自该文件自身的 description 字段：

AI 与 LLM 平台：Claude——暖陶土色点缀、干净的编辑式排版；Ollama——终端优先、单色极简
开发者工具与 IDE：Cursor——暗色界面、渐变点缀；Vercel——黑白精准、Geist 字体
后端、数据库与 DevOps：Supabase——暗色翡翠主题、代码优先；ClickHouse——黄色点缀、技术文档风
生产力与 SaaS：Linear——超极简、精准、紫色点缀；Notion——暖极简、衬线标题
设计与创意工具：Figma——多彩活泼又不失专业；Framer——黑蓝对比、动效优先
金融科技与加密：Stripe——标志性紫色渐变、细字重优雅排版；Binance——单色底上的 Binance 黄
电商与零售：Nike——单色 UI、巨型大写字体、全出血摄影；Airbnb——暖珊瑚色、摄影驱动
媒体与消费科技：Apple——高级留白、SF Pro、电影感影像；SpaceX——极简黑白、全出血图像
汽车：Tesla——激进减法、电影感全视口摄影；BMW——暗色高级表面、工程感
复古 Web 怀旧系列：Dell（1996）——目录时代企业网页，黑色页面框架 + 色块"ribbon 卡片"；Nintendo（2001）——Y2K"主机镀铬"风格

拿不准就从两类入手：做开发者产品看 Linear / Vercel / Stripe，做品牌官网看 Apple / Tesla / Nike。

拆开看一份文件：DESIGN.md 的内部构造

结论：每份文件都是"YAML frontmatter + Markdown 正文"的双层结构，前者给机器查，后者给代理深读。

以 design-md/claude/DESIGN.md 为例。

YAML frontmatter：token 化的设计系统

打开文件，前半部分是 YAML，三个设计决策值得注意：

语义化 token 命名：颜色全部按角色命名——primary、canvas、surface-dark、ink——而不是裸写十六进制值，代理因此知道"这个颜色是干嘛的"；
花括号引用语法：components:内部用"{colors.primary}"这样的引用指向 token，把颜色、字体、圆角、间距拼成组件，改一处 token 全局生效；
状态即独立条目：button-primary-active、text-input-focused这类状态变体平铺在components:下，各占一条，代理查表即得。

摘录 claude 文件的前几段：

colors: primary: "#cc785c" canvas: "#faf9f5" rounded: md: 8px components: button-primary: backgroundColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px

Markdown 正文：统一的 9 段式骨架

README 声明所有文件遵循 Stitch DESIGN.md 格式并做了扩展，73 份文件共享同一套 9 段骨架，按序是：Visual Theme & Atmosphere（氛围与密度）→ Color Palette & Roles（颜色及其功能角色）→ Typography Rules（完整字号层级）→ Component Stylings（按钮、卡片、输入框、导航及各状态）→ Layout Principles（间距刻度与栅格）→ Depth & Elevation（阴影与表面层级）→ Do's and Don'ts（护栏与反模式）→ Responsive Behavior（断点与触控目标）→ Agent Prompt Guide（可直接用的提示词参考）。

正文也不止于骨架：claude 的文件细分出 Shapes（形状语言）、Iteration Guide（迭代指南）、Known Gaps（已知缺口）等章节，全文 11 个 H2。Known Gaps 甚至坦白"表单的错误/成功状态未提取"——每份文件的分析深度随目标站点而变。

三分钟上手：复制 → 提示 → 生成

结论：流程只有两步，因为 DESIGN.md 的消费方式已被主流编码代理原生支持。

第一步，拿到文件。克隆仓库：

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

再把目标站点的DESIGN.md复制到你项目的根目录。

第二步，告诉代理。两种提示词写法：

一句话版："照项目根目录的 DESIGN.md，给我做一个落地页。"
显式约束版："颜色只用 DESIGN.md 中{colors.primary}等 token 定义的值，组件样式以 Components 段为准，先列方案再写代码。"

文件自带的 Agent Prompt Guide 段里就有现成的提示词参考，直接抄也行。生成出来的页面圆角、间距、字重都对得上，因为用的就是同一套 token，而不是"风格像"。

改造成你自己的：修改 token 的 3 个实操

结论：品牌文件是起点，改 3 处就能长成你自己的设计系统。

换色值，两处同改。十六进制值出现在 frontmatter 的colors:和正文 Colors 段各一次。比如把 claude 的主色#cc785c换成你的品牌蓝，两边要一起改——否则机器读的和人读的对不上，代理会随机采信；
补组件条目。文件缺少你需要的状态（比如次级按钮的 hover），就照现有模式在components:下新增独立条目，属性值一律用花括号引用既有 token，别硬编码新值；
同步预览文件。CONTRIBUTING.md 要求：若改动影响展示的 token，同步更新该站点的preview.html与preview-dark.html（README 把这两个文件列为各站点的视觉目录——明暗两套色板、字号层级、按钮与卡片样例）。

前两条服务于你自己项目；第三条只在回馈仓库时才需要。

参与和使用边界

结论：贡献必须"先 issue 后 PR"，而使用上仓库不主张任何品牌视觉所有权。

贡献流程见 CONTRIBUTING.md：先开 issue 讨论方向、拿到维护者反馈，再对照线上站点修正错误的十六进制值、缺失的 token 或薄弱描述，提交 PR 时附上 before/after 理由。⚠️ 仓库不接受新的 DESIGN.md 直提 PR，既收录集的质量靠这条线守住。

许可为 MIT（见 LICENSE），边界写得很清楚：文件是按"as is"提供的公开网站设计系统文档合集、不附带任何担保；提取的 token 仅代表公开可见的 CSS 值；仓库不主张对任何站点视觉标识的所有权。换句话说，你尽可在商业项目里复用这些文件，但"品牌观感"本身不是它授权给你的东西。

回头看，整套玩法其实只有一个文件：挑个品牌，复制它的 DESIGN.md，一句话指挥代理——AI 生成 UI 一致性从此有了标准可依。想细读 DESIGN.md 写法，建议从 design-md/claude/DESIGN.md 开始：589 行、结构最完整（含 Known Gaps 章节），也是本文全程引用的例子；再看 design-md/stripe/DESIGN.md，体会一套金融级 token 体系该怎么组织。

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