尧图网页设计 
awesome-design-md 完整指南一份 DESIGN.md 让 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-mdawesome-design-md 是 Google Stitch 提出的 DESIGN.md 格式的开源样本库收录 73 份从知名网站提取的设计系统文档。把它丢进项目根目录你的 AI 编码代理就能读懂色板、字号和组件规则直接产出视觉一致的页面。读完这篇你能拿到选型方法、具体 token 示例和一套可照做的操作步骤。30 秒速览这个仓库是什么是什么给谁用解决什么问题73 份 DESIGN.md 纯文本设计系统文档按 10 个行业分类存放每份含色板、排版、组件、响应式 9 个板块用 AI 代理写界面的开发者、vibecoder以及需要参考色值字号的设计师AI 生成的页面看着就不对没有设计系统约束颜色、字重、圆角全靠模型即兴发挥每个品牌目录还配preview.html与preview-dark.html两套可视化样本需要对比深色模式效果的人光读文本记不住 20 个 hex 值预览页直接展示色卡、字阶和按钮样式README.md 里说得很直白AGENTS.md告诉代理怎么构建项目DESIGN.md告诉代理项目应该长什么样。这个仓库提供的就是后者而且是现成的、量化过的。场景走读三类人各自怎么用它场景一开发者让代理抄Linear 的界面。你要做一个 SaaS 落地页但不想自己定设计。克隆仓库后打开 design-md/linear.app/DESIGN.md把这个文件复制到项目根目录对 AI 代理说build me a page that looks like this。跑完你会看到页面画布是近黑的#010102唯一的彩色强调是薰衣草蓝#5e6ad2卡片落在#0f1011的炭色面板上标题用 600 字重而不是 700——因为文件里写死了Dont 上 700 display weights。场景二设计师做深色模式与复古风探索。设计师小张接了个90 年代怀旧主题活动页。她翻到 design-md/dell-1996/DESIGN.md里面把 1996 年 Dell 官网的视觉语言拆成了 token黄色贴纸色#fcc20f、Arial Black 36px 字重 900 的大标题、Times New Roman 14px 的正文。直接把这份文件喂给代理就能拿到时代感正确的旧网页而不是 AI 脑补的伪复古。场景三不写代码的人当参考手册用。你只需要查Stripe 的优雅细体到底是几号字——打开 design-md/stripe/DESIGN.mdweight-300 的排版规则就在那里紫色渐变也有对应色值。设计系统文档本来就是给人看的代理只是它的第二读者。核心功能深挖token 化与 9 板块结构最有辨识度的地方是量化。每份 DESIGN.md 都遵循 Stitch 格式正文里所有样式都写成{colors.canvas}、{typography.display-xl}这类 token 引用。以 Linear 的display-xl为例一次写清 5 个参数80px、字重 600、行高 1.05、字距 -3.0px、Linear Display 字体。移动端怎么缩文件里直接给了断点表1440px 默认布局、1024px 卡片从 3 列变 2 列、480px 时标题从 80px 缩到约 36pxCTA 触控目标保持 40px 以上。第二块招牌是年代复刻。Retro Web 系列目前 2 份1996 年的 Dell 和 2001 年的 Nintendo。design-md/nintendo-2001/DESIGN.md 里连像素马里奥欢迎气泡都写成了设计规则。这是整库 73 份文件里唯一能穿越的玩法。每份文件的 9 个固定板块视觉主题与氛围、色板与语义角色、排版规则、组件样式、布局原则、深度与高程、Dos Donts、响应式行为、Agent Prompt 指南。最后这个板块最实用——它给你一段现成的提示词和快速色值参考省得你自己总结。实操手册从克隆到出页面本地终端克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md本地选品牌打开 README.md 的 Collection 部分10 个分类按行业组织——AI 平台 12 份、开发者工具 7 份、媒体与消费电子 12 份、汽车 7 份每份带一句话风格描述比如 Warp 标着block-based command UI。本地读目标文件进入对应目录如 design-md/warp/DESIGN.md重点看色板表和 Dos Donts 两节确认风格符合预期。本地复制到你的项目根目录和AGENTS.md放一起两者分工明确、互不冲突。你的 AI 工具下一句指令build me a page that looks like this。代理会自动把 DESIGN.md 当作视觉约束。本地校验可选改过文件后跑一行npx google/design.md lint DESIGN.md检查格式。避坑与选型建议选型看描述别看名字。同名行业风格差异很大同为深色界面Supabase 是墨绿代码风ElevenLabs 是影院级黑加声波美学。README 里的一句话描述dark emerald theme, code-first比品牌名更能帮你定位。别期待像素级还原。DESIGN.md 给的是 token 和护栏不是截图。文件里公开声明色值是publicly visible CSS values仓库不主张任何视觉版权产物以你项目实际生成为准。改文件前先提 issue。想修正错误色值或补全缺失 tokenCONTRIBUTING.md 要求先开 issue 讨论再提 PR且流程明确不接收未经沟通的 DESIGN.md 新增。你可能还关心两个问题。想要的品牌没收录怎么办仓库提供 Request 入口可以为指定网站申请一份甚至支持只交付给你自己的私人请求。预览去哪看每个品牌目录的 README如 design-md/apple/README.md都指向了 getdesign.md 平台那里有色板预览、深色模式样本和下载入口不用克隆仓库也能先看效果。收尾一句话总结awesome-design-md 把 73 个顶级品牌的设计语言拆成了 AI 能读、人能查的纯文本 token。现在就去 Collection 里挑一个你最常用的品牌把它的 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），仅供参考 awesome-design-md 完整指南：一份 DESIGN.md 让 AI 代理生成品牌级 UI
awesome-design-md 完整指南一份 DESIGN.md 让 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-mdawesome-design-md 是 Google Stitch 提出的 DESIGN.md 格式的开源样本库收录 73 份从知名网站提取的设计系统文档。把它丢进项目根目录你的 AI 编码代理就能读懂色板、字号和组件规则直接产出视觉一致的页面。读完这篇你能拿到选型方法、具体 token 示例和一套可照做的操作步骤。30 秒速览这个仓库是什么是什么给谁用解决什么问题73 份 DESIGN.md 纯文本设计系统文档按 10 个行业分类存放每份含色板、排版、组件、响应式 9 个板块用 AI 代理写界面的开发者、vibecoder以及需要参考色值字号的设计师AI 生成的页面看着就不对没有设计系统约束颜色、字重、圆角全靠模型即兴发挥每个品牌目录还配preview.html与preview-dark.html两套可视化样本需要对比深色模式效果的人光读文本记不住 20 个 hex 值预览页直接展示色卡、字阶和按钮样式README.md 里说得很直白AGENTS.md告诉代理怎么构建项目DESIGN.md告诉代理项目应该长什么样。这个仓库提供的就是后者而且是现成的、量化过的。场景走读三类人各自怎么用它场景一开发者让代理抄Linear 的界面。你要做一个 SaaS 落地页但不想自己定设计。克隆仓库后打开 design-md/linear.app/DESIGN.md把这个文件复制到项目根目录对 AI 代理说build me a page that looks like this。跑完你会看到页面画布是近黑的#010102唯一的彩色强调是薰衣草蓝#5e6ad2卡片落在#0f1011的炭色面板上标题用 600 字重而不是 700——因为文件里写死了Dont 上 700 display weights。场景二设计师做深色模式与复古风探索。设计师小张接了个90 年代怀旧主题活动页。她翻到 design-md/dell-1996/DESIGN.md里面把 1996 年 Dell 官网的视觉语言拆成了 token黄色贴纸色#fcc20f、Arial Black 36px 字重 900 的大标题、Times New Roman 14px 的正文。直接把这份文件喂给代理就能拿到时代感正确的旧网页而不是 AI 脑补的伪复古。场景三不写代码的人当参考手册用。你只需要查Stripe 的优雅细体到底是几号字——打开 design-md/stripe/DESIGN.mdweight-300 的排版规则就在那里紫色渐变也有对应色值。设计系统文档本来就是给人看的代理只是它的第二读者。核心功能深挖token 化与 9 板块结构最有辨识度的地方是量化。每份 DESIGN.md 都遵循 Stitch 格式正文里所有样式都写成{colors.canvas}、{typography.display-xl}这类 token 引用。以 Linear 的display-xl为例一次写清 5 个参数80px、字重 600、行高 1.05、字距 -3.0px、Linear Display 字体。移动端怎么缩文件里直接给了断点表1440px 默认布局、1024px 卡片从 3 列变 2 列、480px 时标题从 80px 缩到约 36pxCTA 触控目标保持 40px 以上。第二块招牌是年代复刻。Retro Web 系列目前 2 份1996 年的 Dell 和 2001 年的 Nintendo。design-md/nintendo-2001/DESIGN.md 里连像素马里奥欢迎气泡都写成了设计规则。这是整库 73 份文件里唯一能穿越的玩法。每份文件的 9 个固定板块视觉主题与氛围、色板与语义角色、排版规则、组件样式、布局原则、深度与高程、Dos Donts、响应式行为、Agent Prompt 指南。最后这个板块最实用——它给你一段现成的提示词和快速色值参考省得你自己总结。实操手册从克隆到出页面本地终端克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md本地选品牌打开 README.md 的 Collection 部分10 个分类按行业组织——AI 平台 12 份、开发者工具 7 份、媒体与消费电子 12 份、汽车 7 份每份带一句话风格描述比如 Warp 标着block-based command UI。本地读目标文件进入对应目录如 design-md/warp/DESIGN.md重点看色板表和 Dos Donts 两节确认风格符合预期。本地复制到你的项目根目录和AGENTS.md放一起两者分工明确、互不冲突。你的 AI 工具下一句指令build me a page that looks like this。代理会自动把 DESIGN.md 当作视觉约束。本地校验可选改过文件后跑一行npx google/design.md lint DESIGN.md检查格式。避坑与选型建议选型看描述别看名字。同名行业风格差异很大同为深色界面Supabase 是墨绿代码风ElevenLabs 是影院级黑加声波美学。README 里的一句话描述dark emerald theme, code-first比品牌名更能帮你定位。别期待像素级还原。DESIGN.md 给的是 token 和护栏不是截图。文件里公开声明色值是publicly visible CSS values仓库不主张任何视觉版权产物以你项目实际生成为准。改文件前先提 issue。想修正错误色值或补全缺失 tokenCONTRIBUTING.md 要求先开 issue 讨论再提 PR且流程明确不接收未经沟通的 DESIGN.md 新增。你可能还关心两个问题。想要的品牌没收录怎么办仓库提供 Request 入口可以为指定网站申请一份甚至支持只交付给你自己的私人请求。预览去哪看每个品牌目录的 README如 design-md/apple/README.md都指向了 getdesign.md 平台那里有色板预览、深色模式样本和下载入口不用克隆仓库也能先看效果。收尾一句话总结awesome-design-md 把 73 个顶级品牌的设计语言拆成了 AI 能读、人能查的纯文本 token。现在就去 Collection 里挑一个你最常用的品牌把它的 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），仅供参考