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——终端优先、单色极简开发者工具与 IDECursor——暗色界面、渐变点缀Vercel——黑白精准、Geist 字体后端、数据库与 DevOpsSupabase——暗色翡翠主题、代码优先ClickHouse——黄色点缀、技术文档风生产力与 SaaSLinear——超极简、精准、紫色点缀Notion——暖极简、衬线标题设计与创意工具Figma——多彩活泼又不失专业Framer——黑蓝对比、动效优先金融科技与加密Stripe——标志性紫色渐变、细字重优雅排版Binance——单色底上的 Binance 黄电商与零售Nike——单色 UI、巨型大写字体、全出血摄影Airbnb——暖珊瑚色、摄影驱动媒体与消费科技Apple——高级留白、SF Pro、电影感影像SpaceX——极简黑白、全出血图像汽车Tesla——激进减法、电影感全视口摄影BMW——暗色高级表面、工程感复古 Web 怀旧系列Dell1996——目录时代企业网页黑色页面框架 色块ribbon 卡片Nintendo2001——Y2K主机镀铬风格拿不准就从两类入手做开发者产品看 Linear / Vercel / Stripe做品牌官网看 Apple / Tesla / Nike。拆开看一份文件DESIGN.md 的内部构造结论每份文件都是YAML frontmatter Markdown 正文的双层结构前者给机器查后者给代理深读。以 design-md/claude/DESIGN.md 为例。YAML frontmattertoken 化的设计系统打开文件前半部分是 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 20pxMarkdown 正文统一的 9 段式骨架README 声明所有文件遵循 Stitch DESIGN.md 格式并做了扩展73 份文件共享同一套 9 段骨架按序是Visual Theme Atmosphere氛围与密度→ Color Palette Roles颜色及其功能角色→ Typography Rules完整字号层级→ Component Stylings按钮、卡片、输入框、导航及各状态→ Layout Principles间距刻度与栅格→ Depth Elevation阴影与表面层级→ Dos and Donts护栏与反模式→ 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.htmlREADME 把这两个文件列为各站点的视觉目录——明暗两套色板、字号层级、按钮与卡片样例。前两条服务于你自己项目第三条只在回馈仓库时才需要。参与和使用边界结论贡献必须先 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 体系该怎么组织。【免费下载链接】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），仅供参考