DESIGN.md 怎么写让 AI Agent 生成风格一致 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 生成页面结果总不像一个品牌每次都长得不一样。awesome-design-md 收录了 73 份从 Stripe、Spotify 等品牌官网提取的 DESIGN.md 设计系统文档放进项目根目录Agent 就能生成风格匹配的 UI。本文拆解这些文档的内在结构两种写法骨架、六个写法要点、避坑症状和最短实操路径。什么是 DESIGN.mdAI Agent 读的设计系统文档DESIGN.md 是一份纯 Markdown 的设计系统文档AI Agent 读完后即可产出符合该品牌调性的界面概念由 Google Stitch 提出。没有 Figma 导出、没有 JSON Schema、没有特殊工具就是一个文本文件而 Markdown 恰好是大语言模型读得最熟的格式。它容易和仓库里另一个文件搞混分工一张表说清文件读者回答的问题AGENTS.md编码 Agent项目怎么构建DESIGN.md设计 Agent界面应该长什么样两个文件可以同时放在同一个项目里一个是构建手册一个是视觉规则书各管一段。编号式 vs 令牌式DESIGN.md 格式怎么选73 份文档都覆盖同一套 9 个标准章节视觉主题、色板与角色、字体规则、组件样式、布局、层级与阴影、Dos Donts、响应式行为断点是布局切换结构的屏幕宽度阈值该章节还写折叠策略、Agent 提示词指南。骨架则分成两种九段编号式以 design-md/spotify/DESIGN.md 为例正文按 1–9 编号章节推进纯 Markdown 叙述信息直观、上手快。YAML 令牌式以 design-md/linear.app/DESIGN.md、design-md/stripe/DESIGN.md 为例文件头部写 YAML frontmatter放在文件顶部、以键值对形式书写的结构化元数据块把颜色、字体、圆角、间距一次性声明成设计令牌可理解为“变量声明”正文再用{colors.primary}这样的名字引用替代反复硬编码色值。对比项九段编号式YAML 令牌式代表文件SpotifyLinear、Stripe文件头部无 frontmatter直接进编号章节frontmatter 令牌块色值写法行内硬编码十六进制{colors.primary}式引用修改成本全文查找替换改一处令牌全局生效适用场景单站点快速归档、给人读组件多状态多、团队长期维护选型建议归档单站、快速看懂编号式足够组件多、状态多、打算长期维护直接令牌式Agent 也不会拿错色值。文档全部位于 design-md/ 目录一个品牌一个文件夹73 个品牌覆盖 8 大类每个文件夹固定两个文件DESIGN.md是设计系统本体Agent 真正读的文件README.md是该站点的简要说明。DESIGN.md 怎么写设计系统文档的 6 个要点设计哲学用 2–3 段散文写出“设计人格”问题Agent 不知道界面气质从何而来只能输出通用脸。做法第一章用 2–3 段散文讲清设计哲学再跟一组 Key Characteristics 要点。Spotify 的开头直接点明“内容优先的黑暗”——UI 退隐进#121212–#1f1f1f的炭色阴影里专辑封面是唯一色彩来源。反例只写“深色主题、高级感、沉浸式”全文没有一个色值Agent 只能靠猜。色板每个色值都带上三个属性问题纯十六进制列表没有信息量。做法每个颜色给语义名、用途、边界。Spotify Green#1ed760只用于播放按钮、激活态和主 CTA绝不装饰Near Black#121212是最深背景表面Negative Red#f3727f仅出现在错误状态。Linear 一侧画布#010102是最深底色唯一彩色强调是#5e6ad2薰衣草蓝只给品牌标记、焦点圈和少数 CTA。反例色值罗列不带角色Agent 把品牌色刷到背景上“好看”。字体层级表怎么填一张完整表 字重策略问题“标题大一点、正文易读”等于没写。做法核心是一张“角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 用途”表Spotify 的有 14 行字号范围 10px–24px。两个加分项写明字重对比策略——Spotify 靠 700/400 两档字重对比分层级而不是靠字号注明字体替代方案专有字体未公开时给出 Inter、Geist Sans 这类可替换的开源字体。反例只有字体族名没有字号、行高、字间距。组件与刻度状态值 两套刻度问题“手感”最容易被描述飘掉。做法按钮写全状态默认 / hover / pressed / focusLinear 的button-primary三种状态各占一个令牌色值全部引用 frontmatter。再给两套刻度间距刻度以 4px 或 8px 为基数 → xs/sm/md/lg/xlLinearxxs 4px、xs 8px直到 xxl 48px、section 96px圆角刻度4px 徽章 → 8px 按钮 → 12px 卡片 → 9999px 胶囊。反例只写“按钮圆角、间距舒适”没有数字。禁令给 AI 立一组 lint 规则问题AI 自由发挥最怕“看起来都行”Dos 划不出边界。做法Donts 一节等于给生成过程写 lint 规则。Spotify 的是范本不要装饰性使用品牌绿——它只服务功能不要用方形按钮——会破坏胶囊几何的品牌识别不要加额外品牌色——绿 无彩灰就是完整色板。明确禁令能直接砍掉跑偏概率。反例文档只写“能做什么”Agent 自由发挥出一堆金色按钮。提示词把即用型 Prompt 附在文档末尾问题文档止步于规则Agent 每次生成都要自己重新拼参数。做法Spotify 第 9 章直接给可复制的提示词例如“Design a pill button:#1f1f1f背景、白色文字、9999px 圆角、8px 16px padding、14px 字重 700、大写、字距 1.4px”并配一张速查色表写提示词不用翻全文。反例文档没有示例、没有参数化描述只能靠几句模糊形容。实操三步接入项目的最短路径获取文档clone 整个仓库或只拿你需要的那份——git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md放进根目录把目标品牌的DESIGN.md复制到项目根目录无需任何解析或配置。一句话提示词开工告诉 Agent “build me a page that looks like this”它会读令牌和规则生成风格一致的界面。项目里已有AGENTS.md的话两个文件并存即可互不干扰。避坑4 种无效文档的症状自己写 DESIGN.md 时对照以下判断自查命中就改看到色值在正文不同位置出现三次以上→ 改成令牌引用色值集中进 frontmatter正文统一用{colors.xxx}。看到“高级感 / 深色 / 简洁”这类抽象词却没有色值和 px 数→ 把每个抽象词换成具体数值如#121212、24px 模糊阴影。看到只有 Dos、没有 Donts→ 补一节禁令写清品牌色能用在哪、方形按钮不能出现在哪。看到只写了专有字体名、没有 fallback→ 补上可替换的开源字体Inter、Geist Sans 等字体加载不到时 Agent 有明确选择。速查一页回顾要点一句话是什么纯 Markdown 设计系统文档AI Agent 的视觉规范怎么用拷进项目根目录让 Agent 读取并生成页面两种骨架九段编号式Spotify/ YAML 令牌式Linear、Stripe质量关键语义化色板、完整字体表、组件状态、Donts资源入口design-md/ 目录73 个品牌、8 大类想校正现有文档按 CONTRIBUTING.md 的指南提 issue项目采用 MIT 协议见 LICENSE。从清单里挑一个最对你味道的品牌把DESIGN.md拷进项目根目录让 Agent 今晚就生成第一页风格一致的界面 【免费下载链接】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），仅供参考
