尧图网页设计 
DESIGN.md:写给 AI Agent 看的设计文档73 份实战案例帮你让 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 画页面出来的界面总是千篇一律品牌色还对不上问题往往不在模型而是你没给它一份读得懂的视觉说明书。DESIGN.md 就是这类文档纯 Markdown 写成的设计系统文档AI Agent能读写代码的 AI 助手读完就能生成品牌同款风格的 UI。awesome-design-md 仓库收录了 73 份从 70 多个品牌官网提取的实例。门槛还特别低不需要 Figma 导出不需要 JSON Schema一种用 JSON 描述数据结构的格式不需要任何特殊工具。Markdown 本来就是大语言模型读得最顺的格式文件往项目里一放就能用不用做任何解析和配置。DESIGN.md 与 AGENTS.md 的区别一个管长相一个管构建仓库一开头就区分了一个新手极易混淆的概念值得先讲清楚文件谁来读定义什么AGENTS.md编码 Agent项目怎么构建构建方式、工程约定DESIGN.md设计 Agent项目应该长什么样视觉语言两者互补、互不冲突可以并存。本文只讲 DESIGN.md 这一侧。怎么拿到现成的 DESIGN.md以及怎么用73 份文档全部放在 design-md/ 目录下一个品牌一个文件夹每个文件夹固定两个文件DESIGN.md是设计系统本体Agent 真正读的文件README.md是该站点的简要说明。完整分类清单见 README.md按 8 大行业组织覆盖 AI 平台、开发者工具、金融科技、汽车甚至还有 1996 年的复古网页风格。使用流程就三步克隆仓库或者只挑你需要的那一份git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md把对应品牌的DESIGN.md放进你的项目根目录对 Agent 说一句build me a page that looks like this它会自行读取文档里的令牌token先给色值、数值起名、后续再引用的设计变量与规则深读两份真实文档两种骨架长什么样通读 73 份文件会发现它们都遵循同一套 9 个标准章节Visual Theme Atmosphere视觉氛围、Color Palette Roles色板与角色、Typography Rules字体规则、Component Stylings组件样式、Layout Principles布局原则、Depth Elevation深度与层级、Dos and Donts禁令、Responsive Behavior响应式行为、Agent Prompt Guide提示词指南。差别只在呈现骨架上维度九段编号式YAML 令牌式代表SpotifyLinear、Stripe写法纯 Markdown 散文正文按 1–9 编号推进文件头部 frontmatter前置元数据块声明令牌取色值行文里直接写死色值用{colors.primary}这类引用维护改一处要逐处找改一个令牌全局生效九段编号式以 Spotify 为例开头是 2–3 段设计人格散文内容优先的黑暗主题——UI 退进#121212到#1f1f1f的炭黑色阶里让专辑封面成为唯一色彩来源随后跟一组 Key Characteristics 要点。色板章节是标准的三件套写法语义名按用途起的名字 色值 角色。例如 Spotify 绿#1ed760只用于功能播放按钮、激活态、主 CTA从不用于装饰。字体章节给了一张完整的角色 / 字体 / 字号 / 字重 / 行高 / 字间距 / 用途表格并额外注明两点字重只用 700/400 两档靠粗细而非大小拉层级专有字体不可用时拿什么替代。YAML 令牌式以 Linear 为例Linear 和 Stripe 把 colors、typography 等令牌声明在文件头部的 frontmatter 里正文全部用令牌引用代替重复写色值--- name: Linear-design-analysis description: 近黑画布 #010102 单一薰衣草蓝强调色 #5e6ad2 colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 surface-1: #0f1011 ---正文只需写按钮背景{colors.primary}、文本{colors.on-primary}。改一个令牌整份文件跟着变Agent 也不会拿错色值。自己写 DESIGN.md 的三个要点想给自己的产品写一份 DESIGN.md记住三件事开头先写设计人格第一章用 2–3 段散文讲清设计哲学氛围是什么、密度如何、最有辨识度的特征是什么。散文后面跟一组 Key Characteristics 要点让 Agent 先建立整体印象再进入具体数值。把手感写成数值高级感深色主题这类虚词对 Agent 没有信息量。正确写法按钮写全默认 / hover / pressed / focus 四种状态每种都给具体值间距给一套刻度基础单位 4px 或 8px往上排 xs/sm/md/lg/xl圆角同样给刻度比如 4px 徽章、8px 按钮、12px 卡片、9999px 胶囊字体层级表里注明专有字体加载不了时改用哪个开源字体如 Inter、Geist Sans。给 AI 明确的禁令Dos and Donts 是最容易被略掉、却最决定生成质量的一节。禁令的本质是划定边界AI 自由发挥最怕看起来都行写清楚 Donts 能直接砍掉跑偏概率。Spotify 的写法可以照搬思路不要装饰性使用品牌绿、不要用方形按钮、不要额外增加品牌色。写作时容易踩的四个坑只写虚词不写数值一句话如果不能替换成具体色值或像素值对 Agent 就是无效信息色值散落各处同一个颜色反复硬编码改一处漏一片——用令牌式写法只写能做什么不写不能做什么没有 DontsAI 会自由发挥忘记字体替代方案专有字体加载不了时Agent 没有 fallback 可抓只能自己乱选写在最后DESIGN.md 就是一份 AI Agent 看得懂的设计系统文档把品牌的视觉语言写进 Markdown生成这件事交给 Agent 去做。资源入口全部 73 份文档design-md/完整分类清单与格式说明README.md贡献指南修错色值、补令牌都可以提CONTRIBUTING.md许可证MIT见 LICENSE【免费下载链接】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），仅供参考 DESIGN.md:写给 AI Agent 看的设计文档，73 份实战案例帮你让 AI 一次画出品牌同款 UI
DESIGN.md:写给 AI Agent 看的设计文档73 份实战案例帮你让 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 画页面出来的界面总是千篇一律品牌色还对不上问题往往不在模型而是你没给它一份读得懂的视觉说明书。DESIGN.md 就是这类文档纯 Markdown 写成的设计系统文档AI Agent能读写代码的 AI 助手读完就能生成品牌同款风格的 UI。awesome-design-md 仓库收录了 73 份从 70 多个品牌官网提取的实例。门槛还特别低不需要 Figma 导出不需要 JSON Schema一种用 JSON 描述数据结构的格式不需要任何特殊工具。Markdown 本来就是大语言模型读得最顺的格式文件往项目里一放就能用不用做任何解析和配置。DESIGN.md 与 AGENTS.md 的区别一个管长相一个管构建仓库一开头就区分了一个新手极易混淆的概念值得先讲清楚文件谁来读定义什么AGENTS.md编码 Agent项目怎么构建构建方式、工程约定DESIGN.md设计 Agent项目应该长什么样视觉语言两者互补、互不冲突可以并存。本文只讲 DESIGN.md 这一侧。怎么拿到现成的 DESIGN.md以及怎么用73 份文档全部放在 design-md/ 目录下一个品牌一个文件夹每个文件夹固定两个文件DESIGN.md是设计系统本体Agent 真正读的文件README.md是该站点的简要说明。完整分类清单见 README.md按 8 大行业组织覆盖 AI 平台、开发者工具、金融科技、汽车甚至还有 1996 年的复古网页风格。使用流程就三步克隆仓库或者只挑你需要的那一份git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md把对应品牌的DESIGN.md放进你的项目根目录对 Agent 说一句build me a page that looks like this它会自行读取文档里的令牌token先给色值、数值起名、后续再引用的设计变量与规则深读两份真实文档两种骨架长什么样通读 73 份文件会发现它们都遵循同一套 9 个标准章节Visual Theme Atmosphere视觉氛围、Color Palette Roles色板与角色、Typography Rules字体规则、Component Stylings组件样式、Layout Principles布局原则、Depth Elevation深度与层级、Dos and Donts禁令、Responsive Behavior响应式行为、Agent Prompt Guide提示词指南。差别只在呈现骨架上维度九段编号式YAML 令牌式代表SpotifyLinear、Stripe写法纯 Markdown 散文正文按 1–9 编号推进文件头部 frontmatter前置元数据块声明令牌取色值行文里直接写死色值用{colors.primary}这类引用维护改一处要逐处找改一个令牌全局生效九段编号式以 Spotify 为例开头是 2–3 段设计人格散文内容优先的黑暗主题——UI 退进#121212到#1f1f1f的炭黑色阶里让专辑封面成为唯一色彩来源随后跟一组 Key Characteristics 要点。色板章节是标准的三件套写法语义名按用途起的名字 色值 角色。例如 Spotify 绿#1ed760只用于功能播放按钮、激活态、主 CTA从不用于装饰。字体章节给了一张完整的角色 / 字体 / 字号 / 字重 / 行高 / 字间距 / 用途表格并额外注明两点字重只用 700/400 两档靠粗细而非大小拉层级专有字体不可用时拿什么替代。YAML 令牌式以 Linear 为例Linear 和 Stripe 把 colors、typography 等令牌声明在文件头部的 frontmatter 里正文全部用令牌引用代替重复写色值--- name: Linear-design-analysis description: 近黑画布 #010102 单一薰衣草蓝强调色 #5e6ad2 colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 surface-1: #0f1011 ---正文只需写按钮背景{colors.primary}、文本{colors.on-primary}。改一个令牌整份文件跟着变Agent 也不会拿错色值。自己写 DESIGN.md 的三个要点想给自己的产品写一份 DESIGN.md记住三件事开头先写设计人格第一章用 2–3 段散文讲清设计哲学氛围是什么、密度如何、最有辨识度的特征是什么。散文后面跟一组 Key Characteristics 要点让 Agent 先建立整体印象再进入具体数值。把手感写成数值高级感深色主题这类虚词对 Agent 没有信息量。正确写法按钮写全默认 / hover / pressed / focus 四种状态每种都给具体值间距给一套刻度基础单位 4px 或 8px往上排 xs/sm/md/lg/xl圆角同样给刻度比如 4px 徽章、8px 按钮、12px 卡片、9999px 胶囊字体层级表里注明专有字体加载不了时改用哪个开源字体如 Inter、Geist Sans。给 AI 明确的禁令Dos and Donts 是最容易被略掉、却最决定生成质量的一节。禁令的本质是划定边界AI 自由发挥最怕看起来都行写清楚 Donts 能直接砍掉跑偏概率。Spotify 的写法可以照搬思路不要装饰性使用品牌绿、不要用方形按钮、不要额外增加品牌色。写作时容易踩的四个坑只写虚词不写数值一句话如果不能替换成具体色值或像素值对 Agent 就是无效信息色值散落各处同一个颜色反复硬编码改一处漏一片——用令牌式写法只写能做什么不写不能做什么没有 DontsAI 会自由发挥忘记字体替代方案专有字体加载不了时Agent 没有 fallback 可抓只能自己乱选写在最后DESIGN.md 就是一份 AI Agent 看得懂的设计系统文档把品牌的视觉语言写进 Markdown生成这件事交给 Agent 去做。资源入口全部 73 份文档design-md/完整分类清单与格式说明README.md贡献指南修错色值、补令牌都可以提CONTRIBUTING.md许可证MIT见 LICENSE【免费下载链接】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），仅供参考