awesome-design-md 全拆解一份 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让 AI 生成页面为什么总带塑料感色不准、字不对、圆角全跑偏。awesome-design-md 就是来解决这个痛点的一个从 73 个品牌官网提取的设计系统文档DESIGN.md合集拷一份进项目AI 编码 Agent 就能生成品牌同款的界面。DESIGN.md 是什么一份 AI 能读懂的视觉规范DESIGN.md是 Google Stitch 提出的概念一份纯 Markdown 的设计系统文档AI Agent 读完它就知道该用什么颜色、字体和组件。没有 Figma 导出没有 JSON Schema也不需要解析器丢进项目根目录就能用——Markdown 恰好是大模型读得最懂的格式。它解决什么同类方案长什么样差在哪AI 生成与品牌一致的界面Figma 设计稿Agent 读不懂设计稿只能读文本项目长啥样的视觉语言AGENTS.md 构建说明AGENTS.md 管怎么做DESIGN.md 管长啥样零工具链、放进即生效JSON 令牌 Schema不用写解析器、不用配置它就像厨房里的菜谱卡厨师Agent不需要对着成品菜逆向工程照着卡片就能复刻同一味。最快上手路径30 秒体验最小步骤就三招每招花几秒拿一份终端执行git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md合集在 design-md/ 目录丢进去把看中的DESIGN.md复制到你的项目根目录说一声对 Agent 说build me a page that looks like thisAgent 会自动读取设计令牌design token即给设计变量起的语义化名字如primaryAgent 用它代替裸色值与规则直接产出风格一致的页面无需任何额外配置。数据层设计令牌如何写成结构化键值对数据层是整个文件的底座所有色值、字号、圆角都被命名后存在文件头部这块叫frontmatter 头文件顶端的结构化元数据块。Linear 版是典型头部令牌分五类全部按职能命名令牌类别存了什么示例colors20 余个语义色canvas: #010102typography11 档字号字重display-xl: 80px / 600 / -3.0pxrounded7 档圆角pill: 9999pxspacing4px → 96px 间距刻度lg: 24pxcomponents组件完整定义button-primary命名是重点Agent 看不懂#5e6ad2是干嘛的但它能理解primary只该出现在 CTA 上。规则层决定 UI 质量的九段规范每份 DESIGN.md 的正文都遵循同一套九段规范从氛围到组件逐层覆盖不是随手写的散文#章节约束什么1Visual Theme Atmosphere设计哲学与氛围2Color Palette Roles语义名 色值 用途3Typography Rules字体族与完整层级表4Component Stylings按钮、卡片及其状态5Layout Principles间距刻度与留白6Depth Elevation阴影与表面层级7Dos and Donts设计护栏8Responsive Behavior断点与折叠策略9Agent Prompt Guide即用型提示词Spotify 版按 1–9 编号推进是这套规范的完整示范。它的色彩章节不只写#1ed760还写明角色播放按钮、激活态、主 CTA——什么时候用说清楚了Agent 才不会拿品牌绿去刷背景。消费层Agent 如何消费这份文件消费层最轻没有解析、没有工具链文件放进根目录即完成接入。Agent 接到生成任务后走三步自动发现根目录的 DESIGN.md读取令牌在上下文里建成一本样式字典生成 HTML/CSS 时按名引用令牌并对照 Do/Dont 列表自检文档质量直接决定消费上限——这份文件既是规范也是你和 Agent 之间的接口。令牌引用怎么写用 {colors.primary} 替代重复色值Linear 式文档与 Spotify 式最大的区别是正文里用令牌引用代替裸色值需要颜色时不写十六进制写令牌名。以button-primary为例一处定义引用了四处其他令牌button-primary: backgroundColor: {colors.primary} textColor: {colors.on-primary} typography: {typography.button} rounded: {rounded.md} padding: 8px 14px好处很实际换主题色只改 frontmatter 一处全局生效Agent 也不会从二十多个颜色里拿错色值。自建项目文档时这是统一主题最快的写法。反模式约束Donts 怎么写才能拦住 AI 跑偏字数最少、对生成质量影响最大的章节是 Dos and Donts。AI 的自由发挥最不怕看起来都行明确的禁令才能砍掉跑偏路径。Spotify 版的禁令几乎可以照抄❌ 不要装饰性使用品牌绿——它只服务功能状态 ❌ 不要用方形按钮——会破坏品牌识别 ❌ 不要加额外品牌色——绿 无彩灰就是完整色板注意句式都是不要 X 原因。原因是给 Agent 的判断依据只写不要 X不写原因遇到边界情况它就又自由发挥去了。选型与避坑该选哪种骨架三个高频翻车点先给决策。合集里两种骨架对应不同场景你的场景选哪个原因第一次写自己的品牌文档九段编号式Spotify 式纯 Markdown门槛最低项目已有设计令牌frontmatter 令牌引用Linear 式改一处全局生效色值不散落只想生成一个页面直接用合集现成文件拷走即用不用自己写高频翻车点写之前先对一遍⚠️写虚词不写数值——高级感对 Agent 没有信息量要写#121212、24px 模糊阴影⚠️色值散落各处——同一颜色反复硬编码改起来顾此失彼改用令牌引用⚠️忘了字体替代方案——专有字体加载不了时得提前写明可替换的开源字体如 Inter去 design-md/ 目录挑一份喜欢的品牌文档放进项目Agent 马上开工。发现令牌写错了可对照 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），仅供参考 awesome-design-md 全拆解：一份 DESIGN.md 三步生成品牌同款 UI
awesome-design-md 全拆解一份 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让 AI 生成页面为什么总带塑料感色不准、字不对、圆角全跑偏。awesome-design-md 就是来解决这个痛点的一个从 73 个品牌官网提取的设计系统文档DESIGN.md合集拷一份进项目AI 编码 Agent 就能生成品牌同款的界面。DESIGN.md 是什么一份 AI 能读懂的视觉规范DESIGN.md是 Google Stitch 提出的概念一份纯 Markdown 的设计系统文档AI Agent 读完它就知道该用什么颜色、字体和组件。没有 Figma 导出没有 JSON Schema也不需要解析器丢进项目根目录就能用——Markdown 恰好是大模型读得最懂的格式。它解决什么同类方案长什么样差在哪AI 生成与品牌一致的界面Figma 设计稿Agent 读不懂设计稿只能读文本项目长啥样的视觉语言AGENTS.md 构建说明AGENTS.md 管怎么做DESIGN.md 管长啥样零工具链、放进即生效JSON 令牌 Schema不用写解析器、不用配置它就像厨房里的菜谱卡厨师Agent不需要对着成品菜逆向工程照着卡片就能复刻同一味。最快上手路径30 秒体验最小步骤就三招每招花几秒拿一份终端执行git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md合集在 design-md/ 目录丢进去把看中的DESIGN.md复制到你的项目根目录说一声对 Agent 说build me a page that looks like thisAgent 会自动读取设计令牌design token即给设计变量起的语义化名字如primaryAgent 用它代替裸色值与规则直接产出风格一致的页面无需任何额外配置。数据层设计令牌如何写成结构化键值对数据层是整个文件的底座所有色值、字号、圆角都被命名后存在文件头部这块叫frontmatter 头文件顶端的结构化元数据块。Linear 版是典型头部令牌分五类全部按职能命名令牌类别存了什么示例colors20 余个语义色canvas: #010102typography11 档字号字重display-xl: 80px / 600 / -3.0pxrounded7 档圆角pill: 9999pxspacing4px → 96px 间距刻度lg: 24pxcomponents组件完整定义button-primary命名是重点Agent 看不懂#5e6ad2是干嘛的但它能理解primary只该出现在 CTA 上。规则层决定 UI 质量的九段规范每份 DESIGN.md 的正文都遵循同一套九段规范从氛围到组件逐层覆盖不是随手写的散文#章节约束什么1Visual Theme Atmosphere设计哲学与氛围2Color Palette Roles语义名 色值 用途3Typography Rules字体族与完整层级表4Component Stylings按钮、卡片及其状态5Layout Principles间距刻度与留白6Depth Elevation阴影与表面层级7Dos and Donts设计护栏8Responsive Behavior断点与折叠策略9Agent Prompt Guide即用型提示词Spotify 版按 1–9 编号推进是这套规范的完整示范。它的色彩章节不只写#1ed760还写明角色播放按钮、激活态、主 CTA——什么时候用说清楚了Agent 才不会拿品牌绿去刷背景。消费层Agent 如何消费这份文件消费层最轻没有解析、没有工具链文件放进根目录即完成接入。Agent 接到生成任务后走三步自动发现根目录的 DESIGN.md读取令牌在上下文里建成一本样式字典生成 HTML/CSS 时按名引用令牌并对照 Do/Dont 列表自检文档质量直接决定消费上限——这份文件既是规范也是你和 Agent 之间的接口。令牌引用怎么写用 {colors.primary} 替代重复色值Linear 式文档与 Spotify 式最大的区别是正文里用令牌引用代替裸色值需要颜色时不写十六进制写令牌名。以button-primary为例一处定义引用了四处其他令牌button-primary: backgroundColor: {colors.primary} textColor: {colors.on-primary} typography: {typography.button} rounded: {rounded.md} padding: 8px 14px好处很实际换主题色只改 frontmatter 一处全局生效Agent 也不会从二十多个颜色里拿错色值。自建项目文档时这是统一主题最快的写法。反模式约束Donts 怎么写才能拦住 AI 跑偏字数最少、对生成质量影响最大的章节是 Dos and Donts。AI 的自由发挥最不怕看起来都行明确的禁令才能砍掉跑偏路径。Spotify 版的禁令几乎可以照抄❌ 不要装饰性使用品牌绿——它只服务功能状态 ❌ 不要用方形按钮——会破坏品牌识别 ❌ 不要加额外品牌色——绿 无彩灰就是完整色板注意句式都是不要 X 原因。原因是给 Agent 的判断依据只写不要 X不写原因遇到边界情况它就又自由发挥去了。选型与避坑该选哪种骨架三个高频翻车点先给决策。合集里两种骨架对应不同场景你的场景选哪个原因第一次写自己的品牌文档九段编号式Spotify 式纯 Markdown门槛最低项目已有设计令牌frontmatter 令牌引用Linear 式改一处全局生效色值不散落只想生成一个页面直接用合集现成文件拷走即用不用自己写高频翻车点写之前先对一遍⚠️写虚词不写数值——高级感对 Agent 没有信息量要写#121212、24px 模糊阴影⚠️色值散落各处——同一颜色反复硬编码改起来顾此失彼改用令牌引用⚠️忘了字体替代方案——专有字体加载不了时得提前写明可替换的开源字体如 Inter去 design-md/ 目录挑一份喜欢的品牌文档放进项目Agent 马上开工。发现令牌写错了可对照 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），仅供参考