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-mdawesome-design-md 收录了从 70 品牌官网提取的 74 份 DESIGN.md 设计文档。本文以 Spotify 与 Linear 两份真实文档为样本带你写出一份 AI Agent 能读懂、并据此生成风格一致 UI 的 DESIGN.md不用从零发明写法。为什么 AI 总把你的界面做走样先看一段 Agent 的典型输出页面能跑但配色像换了一个品牌按钮圆角时大时小标题字号全凭它猜。原因不在模型在输入。你只说了参考 Spotify 风格而参考不是一个规格。DESIGN.md 解决的就是这件事一份纯 Markdown 的设计系统文档Agent 读完按里面的数值生成页面。它不需要 Figma 导出不需要 JSON也不需要任何解析工具——Markdown 是大语言模型读得最顺的格式。它和 AGENTS.md 的分工一句话DESIGN.md 定义界面长什么样AGENTS.md 定义项目怎么构建。前者给设计 Agent 看后者给编码 Agent 看互不替代。走查一份真实文档Spotify 的九段式结构打开 design-md/spotify/DESIGN.md它用 1-9 的编号章节顺序推进这也是 README.md 里列出的标准九章。逐段看它各管什么章节写什么文档中的写法1 视觉主题与氛围整体气质与设计哲学content-first darknessUI 退进阴影色彩只来自专辑封面2 色彩与角色语义名 色值 用途Spotify Green#1ed760只给播放与 CTANear Black#121212作最深背景Negative Red#f3727f仅表错误3 字体规则完整层级表24px 700 节标题到 12px 标签共 15 行并说明只用 700/400 两档字重分层级4 组件样式各状态的具体参数深色药丸按钮背景#1f1f1f、内边距 8px 16px、圆角 9999px5 布局原则间距刻度与网格基础单位 8px圆角从 2px 徽章一路排到 9999px 胶囊6 深度与阴影阴影分层两层rgba(0,0,0,0.3) 0 8px 8px给卡片0 8px 24px给弹窗7 Dos and Donts明确禁止项禁止方形按钮、禁止第二品牌色8 响应式行为断点与折叠策略425px 以下紧凑布局侧栏折叠为底栏9 Agent 提示词指南现成提示词Design a pill button: #1f1f1f background, 9999px radius…可直接复制使用读完记住三点每个颜色都写了用在哪字体是一张能直接抄进代码的表组件列出了具体数值而非形容词。这三点就是 Agent 能落地的原因。两种写法怎么选叙事式还是令牌式仓库里的 74 份文档分成两种结构内容规范相同组织方式不同。纯 Markdown 叙事式以 Spotify 为代表。正文按九章顺序写数值散落在文字和表格中。适合快速上手、风格偏简单的场景人读起来最顺。YAML frontmatter 加令牌引用式以 Linear 和 Stripe 为代表。文件头部放一块结构化令牌设计令牌 tokens给颜色、字号、圆角起的变量名正文用{colors.primary}这样的引用代替反复写色值。design-md/linear.app/DESIGN.md 的头部大致是--- name: Linear-design-analysis colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 surface-1: #0f1011 rounded: md: 8px lg: 12px spacing: md: 16px lg: 24px ---正文随后写按钮背景{colors.primary}、卡片圆角{rounded.lg}。选它的场景组件多、颜色多、以后会反复调色的产品。好处是改一处令牌全局生效Agent 也不会拿错色值。Linear 的components块里连按钮的默认、hover、pressed 三态各占一个令牌。怎么选看一条线文档超过两屏、色板超过 10 个就用令牌式否则叙事式足够。最小模板四区块写出一份可用的 DESIGN.md下面这份模板包含四个必备区块替换占位色值和字体后即可用# 我的产品 设计系统 ## 色板 | 语义名 | 色值 | 用途 | |--------|------|------| | 画布 | #0b0e14 | 页面背景 | | 表面 | #12161f | 卡片背景 | | 强调 | #4f7cff | 主按钮、激活态、焦点环仅用于功能 | | 正文 | #e8eaed | 主要文字 | | 弱化 | #8a93a3 | 次要文字、未激活导航 | | 错误 | #e5484d | 仅错误提示 | ## 字体层级 字体Inter专有字体加载不了时用 Inter 500/600/700 替代。 | 角色 | 字号 | 字重 | 行高 | |------|------|------|------| | 页面标题 | 40px | 700 | 1.1 | | 节标题 | 24px | 700 | 1.2 | | 正文 | 16px | 400 | 1.5 | | 按钮文字 | 14px | 600 | 1.2 | ## 组件状态 按钮背景 #4f7cff文字 #ffffff圆角 8px内边距 8px 16px - 默认如上 - hover背景 #6b8fff - focus外加 2px #4f7cff 焦点环 卡片表面 #12161f圆角 12px内边距 24px。 ## Dos and Donts - 只用上表色值颜色必须走语义名 - 间距只用 4/8/12/16/24px - 不要给卡片加投影用 1px 边框分界 - 不要用强调色做背景或装饰 - 不要出现圆角不一致的同类按钮四个区块缺一不可色板给出数值字体表给出层级组件状态给出手感Donts 给出边界。落地使用方式与生成质量自检清单落地只需三步拿到文件git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md或直接用仓库里现成的 74 份。把选中的 DESIGN.md 复制到项目根目录无需任何配置。对 Agent 说一句按 DESIGN.md 生成这个页面它会自行读取令牌和规则。生成结果不满意时按这份自检清单逐条对照每个颜色是否都有语义名、十六进制色值和用途说明只有高级感科技感这类词等于没写。组件是否写全了默认、hover、focus 各状态漏写的状态 Agent 会自己发明。有没有至少三条具体的 Donts禁令划掉的是 Agent 自由发挥的空间这是生成质量的分水岭。专有字体是否注明了替代方案不写 fallback字体一加载失败排版就崩。同一色值是否重复散落散落多处就改成令牌引用避免改一处漏三处。下一步从 design-md/ 目录开始design-md/ 下有 74 个品牌文件夹每份含DESIGN.md与README.md完整分类见 README.md想校改文档先读 CONTRIBUTING.md。挑一份喜欢的风格拷进项目跑一次再用上面的模板给自己产品写一份 DESIGN.md。【免费下载链接】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 生成品牌风格一致的 UI
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-mdawesome-design-md 收录了从 70 品牌官网提取的 74 份 DESIGN.md 设计文档。本文以 Spotify 与 Linear 两份真实文档为样本带你写出一份 AI Agent 能读懂、并据此生成风格一致 UI 的 DESIGN.md不用从零发明写法。为什么 AI 总把你的界面做走样先看一段 Agent 的典型输出页面能跑但配色像换了一个品牌按钮圆角时大时小标题字号全凭它猜。原因不在模型在输入。你只说了参考 Spotify 风格而参考不是一个规格。DESIGN.md 解决的就是这件事一份纯 Markdown 的设计系统文档Agent 读完按里面的数值生成页面。它不需要 Figma 导出不需要 JSON也不需要任何解析工具——Markdown 是大语言模型读得最顺的格式。它和 AGENTS.md 的分工一句话DESIGN.md 定义界面长什么样AGENTS.md 定义项目怎么构建。前者给设计 Agent 看后者给编码 Agent 看互不替代。走查一份真实文档Spotify 的九段式结构打开 design-md/spotify/DESIGN.md它用 1-9 的编号章节顺序推进这也是 README.md 里列出的标准九章。逐段看它各管什么章节写什么文档中的写法1 视觉主题与氛围整体气质与设计哲学content-first darknessUI 退进阴影色彩只来自专辑封面2 色彩与角色语义名 色值 用途Spotify Green#1ed760只给播放与 CTANear Black#121212作最深背景Negative Red#f3727f仅表错误3 字体规则完整层级表24px 700 节标题到 12px 标签共 15 行并说明只用 700/400 两档字重分层级4 组件样式各状态的具体参数深色药丸按钮背景#1f1f1f、内边距 8px 16px、圆角 9999px5 布局原则间距刻度与网格基础单位 8px圆角从 2px 徽章一路排到 9999px 胶囊6 深度与阴影阴影分层两层rgba(0,0,0,0.3) 0 8px 8px给卡片0 8px 24px给弹窗7 Dos and Donts明确禁止项禁止方形按钮、禁止第二品牌色8 响应式行为断点与折叠策略425px 以下紧凑布局侧栏折叠为底栏9 Agent 提示词指南现成提示词Design a pill button: #1f1f1f background, 9999px radius…可直接复制使用读完记住三点每个颜色都写了用在哪字体是一张能直接抄进代码的表组件列出了具体数值而非形容词。这三点就是 Agent 能落地的原因。两种写法怎么选叙事式还是令牌式仓库里的 74 份文档分成两种结构内容规范相同组织方式不同。纯 Markdown 叙事式以 Spotify 为代表。正文按九章顺序写数值散落在文字和表格中。适合快速上手、风格偏简单的场景人读起来最顺。YAML frontmatter 加令牌引用式以 Linear 和 Stripe 为代表。文件头部放一块结构化令牌设计令牌 tokens给颜色、字号、圆角起的变量名正文用{colors.primary}这样的引用代替反复写色值。design-md/linear.app/DESIGN.md 的头部大致是--- name: Linear-design-analysis colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 surface-1: #0f1011 rounded: md: 8px lg: 12px spacing: md: 16px lg: 24px ---正文随后写按钮背景{colors.primary}、卡片圆角{rounded.lg}。选它的场景组件多、颜色多、以后会反复调色的产品。好处是改一处令牌全局生效Agent 也不会拿错色值。Linear 的components块里连按钮的默认、hover、pressed 三态各占一个令牌。怎么选看一条线文档超过两屏、色板超过 10 个就用令牌式否则叙事式足够。最小模板四区块写出一份可用的 DESIGN.md下面这份模板包含四个必备区块替换占位色值和字体后即可用# 我的产品 设计系统 ## 色板 | 语义名 | 色值 | 用途 | |--------|------|------| | 画布 | #0b0e14 | 页面背景 | | 表面 | #12161f | 卡片背景 | | 强调 | #4f7cff | 主按钮、激活态、焦点环仅用于功能 | | 正文 | #e8eaed | 主要文字 | | 弱化 | #8a93a3 | 次要文字、未激活导航 | | 错误 | #e5484d | 仅错误提示 | ## 字体层级 字体Inter专有字体加载不了时用 Inter 500/600/700 替代。 | 角色 | 字号 | 字重 | 行高 | |------|------|------|------| | 页面标题 | 40px | 700 | 1.1 | | 节标题 | 24px | 700 | 1.2 | | 正文 | 16px | 400 | 1.5 | | 按钮文字 | 14px | 600 | 1.2 | ## 组件状态 按钮背景 #4f7cff文字 #ffffff圆角 8px内边距 8px 16px - 默认如上 - hover背景 #6b8fff - focus外加 2px #4f7cff 焦点环 卡片表面 #12161f圆角 12px内边距 24px。 ## Dos and Donts - 只用上表色值颜色必须走语义名 - 间距只用 4/8/12/16/24px - 不要给卡片加投影用 1px 边框分界 - 不要用强调色做背景或装饰 - 不要出现圆角不一致的同类按钮四个区块缺一不可色板给出数值字体表给出层级组件状态给出手感Donts 给出边界。落地使用方式与生成质量自检清单落地只需三步拿到文件git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md或直接用仓库里现成的 74 份。把选中的 DESIGN.md 复制到项目根目录无需任何配置。对 Agent 说一句按 DESIGN.md 生成这个页面它会自行读取令牌和规则。生成结果不满意时按这份自检清单逐条对照每个颜色是否都有语义名、十六进制色值和用途说明只有高级感科技感这类词等于没写。组件是否写全了默认、hover、focus 各状态漏写的状态 Agent 会自己发明。有没有至少三条具体的 Donts禁令划掉的是 Agent 自由发挥的空间这是生成质量的分水岭。专有字体是否注明了替代方案不写 fallback字体一加载失败排版就崩。同一色值是否重复散落散落多处就改成令牌引用避免改一处漏三处。下一步从 design-md/ 目录开始design-md/ 下有 74 个品牌文件夹每份含DESIGN.md与README.md完整分类见 README.md想校改文档先读 CONTRIBUTING.md。挑一份喜欢的风格拷进项目跑一次再用上面的模板给自己产品写一份 DESIGN.md。【免费下载链接】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），仅供参考