尧图网站建设 
DESIGN.md 完全指南从 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 照着官网写页面配色却像九十年代网吧——awesome-design-md 这个仓库就是治这个的73 份从 Stripe、Spotify、Linear 等品牌官网提炼出的设计规范 DESIGN.md丢进项目根目录AI 就能照着生成风格统一的界面。一句话说清 DESIGN.md 是什么一份纯 Markdown 的设计说明书AI 读完就知道你的 UI 该长什么样。谁读它管什么编码 AgentAGENTS.md项目怎么构建命令、测试、目录约定设计 AgentDESIGN.md页面长什么样颜色、字体、组件、间距这个概念由 Google Stitch 提出思路很朴素大模型读 Markdown 最熟设计系统就写成 Markdown。不用 Figma 导出不用 JSON Schema不用任何解析器文本文件本身就是接口。任何能读文件的编码 Agent 都接得住不需要额外配置。看懂 AI 读设计文档的底层逻辑把 DESIGN.md 想成给施工队AI的图纸。口述来个高级感的暗色站施工队只能靠猜图纸上写墙面 #121212、柜门 8px 圆角、按钮一律胶囊形每一铲子落在哪都清楚。AI 生成 UI 时最容易翻车的恰恰是这些它猜不了的数值。Markdown 在大模型训练语料里占比极高是读得最顺的格式所以这份文档不需要翻译层。仓库里 73 份文档都遵守同一套 9 章节骨架氛围、色板、字体、组件、布局、深度、禁令、响应式、提示词指南见 README.md。骨架分两种写法Spotify 式用九段编号纯散文推进Linear 式在文件头放 YAML 令牌正文用{colors.primary}引用代替重复色值。两种写法内容同源差别只在色值写几遍。固定骨架还有第二个好处Agent 知道去哪找什么。问主按钮什么样它直接翻组件章问错误提示什么颜色直接翻色板章不必通读全文。三步把 DESIGN.md 用上1. 拿文件。整仓 clone或只挑你需要的品牌目录git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md2. 拷到项目根目录。每个品牌目录固定两个文件真正起作用的是 DESIGN.md把它复制过去即可它不依赖任何解析器放哪从哪读。3. 下一句口头指令。对 Agent 说 build me a page that looks like this它会自己读里面的令牌和规则产出的按钮、卡片、配色都贴着规范走不用你再逐条叮嘱。拆解三种最有区分度的写法1. 给每个颜色配齐三件套语义名、色值、角色解决 AI 乱用色、乱加色的问题。语义名色值角色Spotify Green#1ed760播放键、激活态、主 CTA只做功能色Near Black#121212最深背景界面底色Negative Red#f3727f只出现在错误提示只罗列一串 hex 值AI 分不清哪个是主色哪个是描边配上语义名和角色每个颜色在页面里的位置就被钉死了。角色一栏别偷懒写到哪个组件的哪个状态更好Spotify 把文字灰阶拆成四档——白、近白、银、浅灰分别对应标题、正文、次级标签、弱化项AI 生成卡片时知道哪行字该弱。做错了会怎样只给色值不写角色AI 很快就把品牌绿铺满背景。2. 把色值收进 YAML 令牌改一处全站生效解决同一颜色散落各处、改一处漏十处的问题。design-md/linear.app/DESIGN.md 的文件头长这样colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8正文里按钮背景写{colors.primary}而不是#5e6ad2。不止颜色typography、rounded、spacing、components 全都在 frontmatter 里成令牌正文只引用。frontmatter 是 YAML 块Markdown 原生语法不破坏渲染Agent 看到令牌名就回头查表取色不会拿错。这跟 CSS 变量是一个思路只是消费方从浏览器换成了大模型。主色想换动一行几百处引用跟着变。3. 写一份禁令清单砍掉 AI 的跑偏空间解决看起来都行时 AI 自由发挥的问题。Spotify 的 Donts 是范本见 design-md/spotify/DESIGN.md禁令为什么品牌绿不做装饰、不铺背景绿 无彩灰就是全部色板按钮不做方形胶囊形是品牌识别的一部分阴影不用轻的暗底上轻阴影直接看不见每条禁令都指向一个具体视觉特征AI 生成完自检有依据。禁令最好和 Do 成对出现背后藏着一个可执行阈值比如阴影不用轻的对应暗底上透明度 0.3 以上的阴影才可见AI 拿到的是规则不是空喊口号。只写 Do 不写 DontAI 会往安全方向加渐变、加第三色页面慢慢失焦。Spotify 文档末尾还附了一组现成提示词像做个胶囊按钮#1f1f1f 底、白字、9999px 圆角、8px 16px 内边距可以直接复制给 Agent。字体层级值得同样对待。Spotify 用一张表把角色、字号、字重、行高、字间距钉死并说明只用 700/400 两档字重分层级。更关键的是字体替代方案Linear 的专有字体不公开文档直接写明用 Inter 或 Geist Sans 顶上——专有字体加载失败时AI 手里有明确的退路。对比三种常见做法看差别在哪做法改动成本出错概率AI 拿到什么口头描述高级感暗色站低高一堆形容词截几张官网图喂给 AI中中视觉参考没有规则一份 DESIGN.md一次性低色值、字距、组件状态全在旧方案不是不能用但每次开口都要重新解释一遍DESIGN.md 把解释变成了一次性资产之后的指令都站在它肩膀上。避开四个真实会踩的坑 ⚠️❌ 写深色主题、高级感不写数值 → 对 Agent 是零信息量 → ✅ 写#121212、24px 模糊阴影❌ 色值在正文反复硬编码 → 改一处漏十处 → ✅ 用{colors.primary}令牌引用❌ 只写能做什么 → AI 自由发挥加色 → ✅ 配一份 Donts 禁令❌ 专有字体不写 fallback → 字体加载失败页面跑版 → ✅ 注明 Inter、Geist Sans 等开源替代从一份现成的规范开始设计规范写得好不好AI 生成的第一屏页面见分晓。现在打开仓库的 design-md/ 目录挑一个你喜欢的品牌把它的 DESIGN.md 拷进项目根目录让 Agent 开画想自己写一份照着 CONTRIBUTING.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 完全指南：从 73 份品牌规范里学会让 AI 生成同款 UI
DESIGN.md 完全指南从 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 照着官网写页面配色却像九十年代网吧——awesome-design-md 这个仓库就是治这个的73 份从 Stripe、Spotify、Linear 等品牌官网提炼出的设计规范 DESIGN.md丢进项目根目录AI 就能照着生成风格统一的界面。一句话说清 DESIGN.md 是什么一份纯 Markdown 的设计说明书AI 读完就知道你的 UI 该长什么样。谁读它管什么编码 AgentAGENTS.md项目怎么构建命令、测试、目录约定设计 AgentDESIGN.md页面长什么样颜色、字体、组件、间距这个概念由 Google Stitch 提出思路很朴素大模型读 Markdown 最熟设计系统就写成 Markdown。不用 Figma 导出不用 JSON Schema不用任何解析器文本文件本身就是接口。任何能读文件的编码 Agent 都接得住不需要额外配置。看懂 AI 读设计文档的底层逻辑把 DESIGN.md 想成给施工队AI的图纸。口述来个高级感的暗色站施工队只能靠猜图纸上写墙面 #121212、柜门 8px 圆角、按钮一律胶囊形每一铲子落在哪都清楚。AI 生成 UI 时最容易翻车的恰恰是这些它猜不了的数值。Markdown 在大模型训练语料里占比极高是读得最顺的格式所以这份文档不需要翻译层。仓库里 73 份文档都遵守同一套 9 章节骨架氛围、色板、字体、组件、布局、深度、禁令、响应式、提示词指南见 README.md。骨架分两种写法Spotify 式用九段编号纯散文推进Linear 式在文件头放 YAML 令牌正文用{colors.primary}引用代替重复色值。两种写法内容同源差别只在色值写几遍。固定骨架还有第二个好处Agent 知道去哪找什么。问主按钮什么样它直接翻组件章问错误提示什么颜色直接翻色板章不必通读全文。三步把 DESIGN.md 用上1. 拿文件。整仓 clone或只挑你需要的品牌目录git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md2. 拷到项目根目录。每个品牌目录固定两个文件真正起作用的是 DESIGN.md把它复制过去即可它不依赖任何解析器放哪从哪读。3. 下一句口头指令。对 Agent 说 build me a page that looks like this它会自己读里面的令牌和规则产出的按钮、卡片、配色都贴着规范走不用你再逐条叮嘱。拆解三种最有区分度的写法1. 给每个颜色配齐三件套语义名、色值、角色解决 AI 乱用色、乱加色的问题。语义名色值角色Spotify Green#1ed760播放键、激活态、主 CTA只做功能色Near Black#121212最深背景界面底色Negative Red#f3727f只出现在错误提示只罗列一串 hex 值AI 分不清哪个是主色哪个是描边配上语义名和角色每个颜色在页面里的位置就被钉死了。角色一栏别偷懒写到哪个组件的哪个状态更好Spotify 把文字灰阶拆成四档——白、近白、银、浅灰分别对应标题、正文、次级标签、弱化项AI 生成卡片时知道哪行字该弱。做错了会怎样只给色值不写角色AI 很快就把品牌绿铺满背景。2. 把色值收进 YAML 令牌改一处全站生效解决同一颜色散落各处、改一处漏十处的问题。design-md/linear.app/DESIGN.md 的文件头长这样colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8正文里按钮背景写{colors.primary}而不是#5e6ad2。不止颜色typography、rounded、spacing、components 全都在 frontmatter 里成令牌正文只引用。frontmatter 是 YAML 块Markdown 原生语法不破坏渲染Agent 看到令牌名就回头查表取色不会拿错。这跟 CSS 变量是一个思路只是消费方从浏览器换成了大模型。主色想换动一行几百处引用跟着变。3. 写一份禁令清单砍掉 AI 的跑偏空间解决看起来都行时 AI 自由发挥的问题。Spotify 的 Donts 是范本见 design-md/spotify/DESIGN.md禁令为什么品牌绿不做装饰、不铺背景绿 无彩灰就是全部色板按钮不做方形胶囊形是品牌识别的一部分阴影不用轻的暗底上轻阴影直接看不见每条禁令都指向一个具体视觉特征AI 生成完自检有依据。禁令最好和 Do 成对出现背后藏着一个可执行阈值比如阴影不用轻的对应暗底上透明度 0.3 以上的阴影才可见AI 拿到的是规则不是空喊口号。只写 Do 不写 DontAI 会往安全方向加渐变、加第三色页面慢慢失焦。Spotify 文档末尾还附了一组现成提示词像做个胶囊按钮#1f1f1f 底、白字、9999px 圆角、8px 16px 内边距可以直接复制给 Agent。字体层级值得同样对待。Spotify 用一张表把角色、字号、字重、行高、字间距钉死并说明只用 700/400 两档字重分层级。更关键的是字体替代方案Linear 的专有字体不公开文档直接写明用 Inter 或 Geist Sans 顶上——专有字体加载失败时AI 手里有明确的退路。对比三种常见做法看差别在哪做法改动成本出错概率AI 拿到什么口头描述高级感暗色站低高一堆形容词截几张官网图喂给 AI中中视觉参考没有规则一份 DESIGN.md一次性低色值、字距、组件状态全在旧方案不是不能用但每次开口都要重新解释一遍DESIGN.md 把解释变成了一次性资产之后的指令都站在它肩膀上。避开四个真实会踩的坑 ⚠️❌ 写深色主题、高级感不写数值 → 对 Agent 是零信息量 → ✅ 写#121212、24px 模糊阴影❌ 色值在正文反复硬编码 → 改一处漏十处 → ✅ 用{colors.primary}令牌引用❌ 只写能做什么 → AI 自由发挥加色 → ✅ 配一份 Donts 禁令❌ 专有字体不写 fallback → 字体加载失败页面跑版 → ✅ 注明 Inter、Geist Sans 等开源替代从一份现成的规范开始设计规范写得好不好AI 生成的第一屏页面见分晓。现在打开仓库的 design-md/ 目录挑一个你喜欢的品牌把它的 DESIGN.md 拷进项目根目录让 Agent 开画想自己写一份照着 CONTRIBUTING.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），仅供参考