尧图网站建设 
写出 AI Agent 能读懂的 DESIGN.md用 73 份现成设计系统文档生成品牌同款 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 是一个设计系统文档合集从 Stripe、Spotify、Linear 等品牌官网提取了 73 份 DESIGN.md 文件把每个站点真实的视觉语言——色值、字体层级、组件状态、间距刻度——整理成 AI Agent 可以直接阅读的 Markdown。把其中任意一份放进你的项目根目录Agent 就能生成风格统一的页面。为什么 AI 生成的页面总有一股AI 味你向 AI 描述过这样的需求做一个深色、高级感、极简风格的登录页。结果每次生成出来的页面背景色不深、按钮圆角忽大忽小、强调色一会儿蓝一会儿紫——因为深色、高级感这类形容词对模型来说信息量太低它只能靠猜。DESIGN.md 的思路是把这些形容词全部换成可执行的数值不写深色写#010102不写柔和的阴影写rgba(0,0,0,0.3) 0px 8px 8px。这个概念来自 Google Stitch——一个纯文本的设计系统文档不依赖 Figma 导出、不依赖 JSON Schema因为 Markdown 是大模型读取效果最好的格式。项目里对两份容易混淆的文件做了明确分工文件读取者内容AGENTS.md编码 Agent项目怎么构建、怎么测试DESIGN.md设计 Agent页面该呈现什么视觉规则一份管构建流程一份管视觉输出两者放在一起不冲突。快速上手一条命令、一次复制、一句指令 整个过程没有任何解析器或插件配置克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md挑一个品牌文件夹比如 design-md/vercel/把里面的DESIGN.md复制到你项目的根目录。对 Agent 说一句按照 DESIGN.md 的规范生成页面即可。它会自行读取令牌tokens与规则产出颜色、字号、圆角都对得上的界面。design-md/ 下的 73 份文档怎么组织所有文档都在 design-md/ 目录下一个品牌一个文件夹每个文件夹固定包含文件作用DESIGN.md设计系统本体Agent 真正读取的文件README.md该站点的风格速览README.md 把 70 个品牌分成了 8 个行业大类每类附一句风格描述方便按口味挑选。几类典型风格开发者工具Vercel 的黑白精确风 Geist 字体、Supabase 的深翠绿 code-first 界面金融科技Coinbase 的机构级蓝色信任感、Binance 的交易大厅黄黑配色电商零售Nike 的全出血摄影 超大 Futura 标题、Shopify 的霓虹绿暗色风复古系列design-md/dell-1996/1996 年 Dell 目录页的黑框彩条卡片、design-md/nintendo-2001/Y2K 风格 2001 年任天堂官网两种写法九段编号式与 YAML 令牌式通读全部文档后发现内容规范一致呈现骨架只有两种。写法一九段编号Spotify、Starbucks 等采用正文用 1–9 编号章节依次推进全部是散文 表格 列表。例如 design-md/spotify/DESIGN.md 第一章用三段话讲清内容优先的黑暗哲学界面退进阴影里色彩只来自专辑封面本身品牌绿#1ed760永远只做功能色。写法二YAML frontmatter 令牌引用Linear、Stripe 等采用文件头部放一段结构化数据正文所有位置用令牌名代替具体数值。以 design-md/linear.app/DESIGN.md 为例头部声明基础令牌--- name: Linear-design-analysis colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 ---正文组件部分则全部引用令牌components: button-primary: backgroundColor: {colors.primary} textColor: {colors.on-primary} rounded: {rounded.md} padding: 8px 14px这样做的直接收益把主色从#5e6ad2改成别的值只需改一处全文几十个引用点同步生效Agent 也不会因为同一颜色被反复硬编码而拿错值。维度九段编号式YAML 令牌式结构1–9 编号章节散文为主frontmatter 声明令牌正文引用可读性人读体验最好人、机都好读结构化最强改值成本全文搜索替换改一处令牌全局生效代表design-md/spotify/design-md/linear.app/怎么写出自己的 DESIGN.md九段标准结构 逐段要点无论选哪种骨架内容都覆盖同一套 9 个标准章节规范列于 README.md#章节应包含的内容1Visual Theme Atmosphere设计哲学、氛围、密度配 Key Characteristics 要点2Color Palette Roles语义名 十六进制 功能角色3Typography Rules字体族 完整层级表格4Component Stylings按钮、卡片、输入框及其各状态5Layout Principles间距刻度、网格、留白策略6Depth Elevation阴影体系、表面层级7Dos and Donts允许与禁止的设计边界8Responsive Behavior断点、触控目标、折叠策略9Agent Prompt Guide色值速查 可复制的提示词每个章节的写法要点第 1 章先立设计人格2–3 段散文说清哲学。Linear 的文档直接点明最深黑画布#010102 唯一薰衣草蓝强调色一句话锁住基调。色板给足三个信息语义名、色值、用在哪。对照 design-md/starbucks/DESIGN.md 看——四档绿#006241/#00754A/#1E3932/#2b5148各自绑定不同表面角色金色#cba258只出现在会员等级场景绝不滥用。字体给一张层级表角色 / 字体 / 字号 / 字重 / 行高 / 字间距 / 用途七列缺一不可。同时注明字重对比策略Linear 用 600 显示 400 正文刻意避开 700和替代字体专有字体拿不到时写明 Inter、Geist Sans、JetBrains Mono 等免费平替否则 Agent 无从下手。组件写全状态按钮至少覆盖默认 / hover / pressed 三态。Linear 的button-primary三个状态各占一个独立令牌hover 变#828fff、pressed 变#5e69d1Agent 因此能还原完整交互。间距与圆角同样给刻度4px 基础单位向上推导出 xs(4)→md(16)→section(96) 的间距令牌4px 徽章→8px 按钮→12px 卡片的圆角阶梯。第 7 章的 Donts 是质量分水岭只写能做什么的文档Agent 会在灰色地带自由发挥。Linear 的禁止清单相当狠——不允许浅色营销页、禁止把薰衣草色当区块背景、禁止第二种强调色、CTA 不许做成胶囊形。每条禁令都直接砍掉一类跑偏。第 9 章附现成提示词把做一个深色卡片#181818背景、8px 圆角、标题 16px/700 白色这类可直接粘贴的 prompt 写进文档等于给 Agent 备好了标准答案。自查清单四种让文档失效的写法交付前对照检查任何一条中招都会拉低生成质量通篇形容词简约、大气、科技感对 Agent 为零信息。把每个形容词翻译成#hex、px、字重数值。色值散落硬编码同一个#5e6ad2在文里出现二十次改一处漏十九处。换成令牌引用。只有 Do 没有 Dont没有边界的设计文档Agent 的每次自由发挥都是风险。漏写字体 fallback专有字体加载失败时若文档没给替代方案整页排版会退化成系统默认。从今天开始挑一份放进项目根目录下一步就三件事打开 design-md/按行业翻到合眼缘的风格不确定就从 design-md/linear.app/ 或 design-md/vercel/ 入手将对应的DESIGN.md复制到你的项目根目录让 AI Agent 依据它生成第一版页面再按第 9 章的提示词迭代。如果发现某份文档的色值或令牌有误可以按 CONTRIBUTING.md 的流程先开 issue 讨论再提 PR项目采用 MIT 协议见 LICENSE放心使用。选一份喜欢的品牌设计系统文档让 AI 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），仅供参考 写出 AI Agent 能读懂的 DESIGN.md：用 73 份现成设计系统文档生成品牌同款 UI 的完整指南
写出 AI Agent 能读懂的 DESIGN.md用 73 份现成设计系统文档生成品牌同款 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 是一个设计系统文档合集从 Stripe、Spotify、Linear 等品牌官网提取了 73 份 DESIGN.md 文件把每个站点真实的视觉语言——色值、字体层级、组件状态、间距刻度——整理成 AI Agent 可以直接阅读的 Markdown。把其中任意一份放进你的项目根目录Agent 就能生成风格统一的页面。为什么 AI 生成的页面总有一股AI 味你向 AI 描述过这样的需求做一个深色、高级感、极简风格的登录页。结果每次生成出来的页面背景色不深、按钮圆角忽大忽小、强调色一会儿蓝一会儿紫——因为深色、高级感这类形容词对模型来说信息量太低它只能靠猜。DESIGN.md 的思路是把这些形容词全部换成可执行的数值不写深色写#010102不写柔和的阴影写rgba(0,0,0,0.3) 0px 8px 8px。这个概念来自 Google Stitch——一个纯文本的设计系统文档不依赖 Figma 导出、不依赖 JSON Schema因为 Markdown 是大模型读取效果最好的格式。项目里对两份容易混淆的文件做了明确分工文件读取者内容AGENTS.md编码 Agent项目怎么构建、怎么测试DESIGN.md设计 Agent页面该呈现什么视觉规则一份管构建流程一份管视觉输出两者放在一起不冲突。快速上手一条命令、一次复制、一句指令 整个过程没有任何解析器或插件配置克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md挑一个品牌文件夹比如 design-md/vercel/把里面的DESIGN.md复制到你项目的根目录。对 Agent 说一句按照 DESIGN.md 的规范生成页面即可。它会自行读取令牌tokens与规则产出颜色、字号、圆角都对得上的界面。design-md/ 下的 73 份文档怎么组织所有文档都在 design-md/ 目录下一个品牌一个文件夹每个文件夹固定包含文件作用DESIGN.md设计系统本体Agent 真正读取的文件README.md该站点的风格速览README.md 把 70 个品牌分成了 8 个行业大类每类附一句风格描述方便按口味挑选。几类典型风格开发者工具Vercel 的黑白精确风 Geist 字体、Supabase 的深翠绿 code-first 界面金融科技Coinbase 的机构级蓝色信任感、Binance 的交易大厅黄黑配色电商零售Nike 的全出血摄影 超大 Futura 标题、Shopify 的霓虹绿暗色风复古系列design-md/dell-1996/1996 年 Dell 目录页的黑框彩条卡片、design-md/nintendo-2001/Y2K 风格 2001 年任天堂官网两种写法九段编号式与 YAML 令牌式通读全部文档后发现内容规范一致呈现骨架只有两种。写法一九段编号Spotify、Starbucks 等采用正文用 1–9 编号章节依次推进全部是散文 表格 列表。例如 design-md/spotify/DESIGN.md 第一章用三段话讲清内容优先的黑暗哲学界面退进阴影里色彩只来自专辑封面本身品牌绿#1ed760永远只做功能色。写法二YAML frontmatter 令牌引用Linear、Stripe 等采用文件头部放一段结构化数据正文所有位置用令牌名代替具体数值。以 design-md/linear.app/DESIGN.md 为例头部声明基础令牌--- name: Linear-design-analysis colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 ---正文组件部分则全部引用令牌components: button-primary: backgroundColor: {colors.primary} textColor: {colors.on-primary} rounded: {rounded.md} padding: 8px 14px这样做的直接收益把主色从#5e6ad2改成别的值只需改一处全文几十个引用点同步生效Agent 也不会因为同一颜色被反复硬编码而拿错值。维度九段编号式YAML 令牌式结构1–9 编号章节散文为主frontmatter 声明令牌正文引用可读性人读体验最好人、机都好读结构化最强改值成本全文搜索替换改一处令牌全局生效代表design-md/spotify/design-md/linear.app/怎么写出自己的 DESIGN.md九段标准结构 逐段要点无论选哪种骨架内容都覆盖同一套 9 个标准章节规范列于 README.md#章节应包含的内容1Visual Theme Atmosphere设计哲学、氛围、密度配 Key Characteristics 要点2Color Palette Roles语义名 十六进制 功能角色3Typography Rules字体族 完整层级表格4Component Stylings按钮、卡片、输入框及其各状态5Layout Principles间距刻度、网格、留白策略6Depth Elevation阴影体系、表面层级7Dos and Donts允许与禁止的设计边界8Responsive Behavior断点、触控目标、折叠策略9Agent Prompt Guide色值速查 可复制的提示词每个章节的写法要点第 1 章先立设计人格2–3 段散文说清哲学。Linear 的文档直接点明最深黑画布#010102 唯一薰衣草蓝强调色一句话锁住基调。色板给足三个信息语义名、色值、用在哪。对照 design-md/starbucks/DESIGN.md 看——四档绿#006241/#00754A/#1E3932/#2b5148各自绑定不同表面角色金色#cba258只出现在会员等级场景绝不滥用。字体给一张层级表角色 / 字体 / 字号 / 字重 / 行高 / 字间距 / 用途七列缺一不可。同时注明字重对比策略Linear 用 600 显示 400 正文刻意避开 700和替代字体专有字体拿不到时写明 Inter、Geist Sans、JetBrains Mono 等免费平替否则 Agent 无从下手。组件写全状态按钮至少覆盖默认 / hover / pressed 三态。Linear 的button-primary三个状态各占一个独立令牌hover 变#828fff、pressed 变#5e69d1Agent 因此能还原完整交互。间距与圆角同样给刻度4px 基础单位向上推导出 xs(4)→md(16)→section(96) 的间距令牌4px 徽章→8px 按钮→12px 卡片的圆角阶梯。第 7 章的 Donts 是质量分水岭只写能做什么的文档Agent 会在灰色地带自由发挥。Linear 的禁止清单相当狠——不允许浅色营销页、禁止把薰衣草色当区块背景、禁止第二种强调色、CTA 不许做成胶囊形。每条禁令都直接砍掉一类跑偏。第 9 章附现成提示词把做一个深色卡片#181818背景、8px 圆角、标题 16px/700 白色这类可直接粘贴的 prompt 写进文档等于给 Agent 备好了标准答案。自查清单四种让文档失效的写法交付前对照检查任何一条中招都会拉低生成质量通篇形容词简约、大气、科技感对 Agent 为零信息。把每个形容词翻译成#hex、px、字重数值。色值散落硬编码同一个#5e6ad2在文里出现二十次改一处漏十九处。换成令牌引用。只有 Do 没有 Dont没有边界的设计文档Agent 的每次自由发挥都是风险。漏写字体 fallback专有字体加载失败时若文档没给替代方案整页排版会退化成系统默认。从今天开始挑一份放进项目根目录下一步就三件事打开 design-md/按行业翻到合眼缘的风格不确定就从 design-md/linear.app/ 或 design-md/vercel/ 入手将对应的DESIGN.md复制到你的项目根目录让 AI Agent 依据它生成第一版页面再按第 9 章的提示词迭代。如果发现某份文档的色值或令牌有误可以按 CONTRIBUTING.md 的流程先开 issue 讨论再提 PR项目采用 MIT 协议见 LICENSE放心使用。选一份喜欢的品牌设计系统文档让 AI 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），仅供参考