让 AI 一次生成品牌同款 UIawesome-design-md 里 73 份 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 编码 Agent 做个落地页它 30 秒就能吐出一版但配色飘忽、圆角忽大忽小改三次也没对上你想要的感觉。问题往往不在 Agent 能力而在你给它的视觉信息太模糊。awesome-design-md 就是为此而生的一个开源合集它收录了从 70 多个知名品牌官网提取的73 份 DESIGN.md 文件你只需挑一份放进项目根目录AI Agent 读完就能生成风格高度一致的 UI。核心功能一句话把长什么样写进一份 Agent 直接读得懂的 Markdown告别反复调教。先说清楚DESIGN.md 和 AGENTS.md 各管一摊DESIGN.md 这个概念来自 Google Stitch一份纯 Markdown 的设计系统文档专门给 AI Agent 阅读后生成一致的界面。它的门槛几乎为零——没有 Figma 导出、没有 JSON Schema、没有需要安装的解析器就是一个文本文件而 Markdown 恰好是大语言模型读得最透的格式。放进项目根目录任何 AI 编码 Agent 或 Google Stitch 立刻明白你的 UI 该长什么样。项目里有两个容易搞混的文件分工很明确文件谁来读定义什么AGENTS.md编码 Agent项目怎么构建DESIGN.md设计 Agent项目应该长什么样一个管怎么做一个管长啥样互补而不冲突。这份仓库提供的正是后者的现成答案——而且不是随手抄几个色值而是包含分析出的设计模式、令牌和规则目标是高质量生成不是表面模仿。从拿到文件到页面出炉4 步跑通拿到文件。clone 整个仓库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 a pill button: #1f1f1f background, white text, 9999px radius…直接复制给 Agent 就能精确复刻某个组件这是把文档升级成工具的关键。如果你不知道选哪个别急着打开 73 份文档——每个品牌文件夹里还有一份README.md里面有一句风格概括比如 Linear 是极致极简、精密、紫色点缀Spotify 是深色底 高饱和绿 专辑封面驱动扫一遍就能圈出候选再打开对应的DESIGN.md细看。打开任意一份文档你会看到这 9 个标准章节每份 DESIGN.md 都遵循同一套内容规范只是组织方式不同。通读下来它们都按这 9 个章节依次展开章节内容1. Visual Theme Atmosphere氛围、密度、设计哲学2. Color Palette Roles语义名 色值 功能角色3. Typography Rules字体族与完整层级表格4. Component Stylings按钮、卡片、输入框及其状态5. Layout Principles间距刻度、网格、留白哲学6. Depth Elevation阴影体系、表面层级7. Dos and Donts设计护栏与反模式8. Responsive Behavior断点、触控目标、折叠策略9. Agent Prompt Guide速查色表 现成提示词拿 design-md/spotify/DESIGN.md 当样本看就能明白每个章节怎么服务 Agent第 1 章用几段散文点出设计人格——Spotify 的关键词是内容优先的黑暗UI 退进#121212的阴影里让专辑封面成为唯一色彩来源。第 2 章给颜色三件套语义名 色值 用在哪。Spotify Green#1ed760只用于播放按钮、激活态和主 CTA绝不装饰错误态另有专属的 Negative Red#f3727f。第 3 章是一张 14 行角色表从 Section Title 到 10px 的 Micro 字号全部列出并注明替代方案——专有字体未公开时写明可替换的开源字体。第 4 章把手感写成数值所有按钮走胶囊形500px–9999px 圆角播放控件用 50% 正圆按钮文字统一大写 1.4px–2px 宽字距。第 7 章是护栏不用绿色做装饰、不做方形按钮、不额外加品牌色——绿 无彩灰就是完整色板。这些章节的共同点是只写 Agent 能执行的数值和规则不写高级感这类虚词。两种写法对照叙事型 vs 令牌型73 份文档在呈现上分成两种骨架各有适用场景。叙事型Spotify 式正文就是上面那 9 个编号章节纯 Markdown 描述读起来像一篇设计说明。适合氛围感强、感觉比精确更重要的品牌。令牌型Linear / Stripe 式文件头部加一段 YAML frontmatter把所有设计值集中定义为令牌例如 design-md/linear.app/DESIGN.md 的开头--- colors: primary: #5e6ad2 on-primary: #ffffff canvas: #010102 surface-1: #0f1011 ---正文里再用{colors.primary}这样的引用代替重复写色值比如按钮背景{colors.primary}、文字{colors.on-primary}。好处是改一处令牌全局生效Agent 也不会拿错色值。Linear 的组件块把每个状态都单独立了令牌——button-primary、button-primary-hover、button-primary-pressed各占一条间距刻度从 4px 起步一路排到 section 的 96px一查就有。怎么选判断标准其实就一条你的产品是视觉叙事型音乐、零售、媒体挑叙事型当模板重点抄它的章节结构和 Dos Donts 写法你的产品是工程/工具型SaaS、开发者平台挑令牌型直接把 frontmatter 改成自己的品牌值正文引用令牌即可。按业务类型对号入座合集覆盖 8 大类每类的味道各不相同挑的时候先对号业务类型值得看的几份风格关键词开发者工具vercel、linear.app、cursor黑白精密、等宽点缀生产力 SaaSnotion、supabase温暖极简、深翠绿金融科技stripe、coinbase、wise紫色渐变、机构蓝电商零售airbnb、nike、starbucks摄影驱动、大地色系媒体消费spotify、apple、theverge深色沉浸、酸性薄荷汽车行业tesla、ferrari、bmw全屏影像、极简留白复古怀旧dell-1996、nintendo-20011996 目录页、Y2K 金属面板拿不准时看两点目标用户的审美预期金融要克制媒体可以大胆以及你的团队能否守住文档里的约束比如 Spotify 那套深色 单一绿执行偏差会很明显。三个最常见的翻车点写虚词不写数值。深色主题、高级感对 Agent 没有信息量。要写#121212、24px 模糊阴影、9999px 圆角——Agent 只会精确执行它读到的数字。色值散落各处。同一个主色在文档里硬编码七八遍改一处漏三处Agent 还可能混用新旧值。用令牌型的 frontmatter 集中定义正文一律引用。只写能做的不写不能做的。没有 Donts 的文档等于给 AI 放开了自由发挥——而看起来都行正是跑偏的源头。哪怕只写三条禁令别拿品牌色做装饰、别做方形按钮、别引入额外强调色都能砍掉一半偏航概率。挑一份喜欢的现在就能开始仓库遵循 MIT 协议见 LICENSE所有文档提取自公开网站、按原样提供。想修错色值、补漏令牌先看 CONTRIBUTING.md 的指南提 issue 讨论后再动手。完整清单入口在 design-md/ 目录——73 个品牌任选。挑一份合眼缘的 DESIGN.md 丢进项目根目录告诉你的 Agentbuild me a page that looks like this然后看看它交出来的东西和你想象的距离有多大。【免费下载链接】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 一次生成品牌同款 UI：awesome-design-md 里 73 份 DESIGN.md 的完整使用指南
让 AI 一次生成品牌同款 UIawesome-design-md 里 73 份 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 编码 Agent 做个落地页它 30 秒就能吐出一版但配色飘忽、圆角忽大忽小改三次也没对上你想要的感觉。问题往往不在 Agent 能力而在你给它的视觉信息太模糊。awesome-design-md 就是为此而生的一个开源合集它收录了从 70 多个知名品牌官网提取的73 份 DESIGN.md 文件你只需挑一份放进项目根目录AI Agent 读完就能生成风格高度一致的 UI。核心功能一句话把长什么样写进一份 Agent 直接读得懂的 Markdown告别反复调教。先说清楚DESIGN.md 和 AGENTS.md 各管一摊DESIGN.md 这个概念来自 Google Stitch一份纯 Markdown 的设计系统文档专门给 AI Agent 阅读后生成一致的界面。它的门槛几乎为零——没有 Figma 导出、没有 JSON Schema、没有需要安装的解析器就是一个文本文件而 Markdown 恰好是大语言模型读得最透的格式。放进项目根目录任何 AI 编码 Agent 或 Google Stitch 立刻明白你的 UI 该长什么样。项目里有两个容易搞混的文件分工很明确文件谁来读定义什么AGENTS.md编码 Agent项目怎么构建DESIGN.md设计 Agent项目应该长什么样一个管怎么做一个管长啥样互补而不冲突。这份仓库提供的正是后者的现成答案——而且不是随手抄几个色值而是包含分析出的设计模式、令牌和规则目标是高质量生成不是表面模仿。从拿到文件到页面出炉4 步跑通拿到文件。clone 整个仓库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 a pill button: #1f1f1f background, white text, 9999px radius…直接复制给 Agent 就能精确复刻某个组件这是把文档升级成工具的关键。如果你不知道选哪个别急着打开 73 份文档——每个品牌文件夹里还有一份README.md里面有一句风格概括比如 Linear 是极致极简、精密、紫色点缀Spotify 是深色底 高饱和绿 专辑封面驱动扫一遍就能圈出候选再打开对应的DESIGN.md细看。打开任意一份文档你会看到这 9 个标准章节每份 DESIGN.md 都遵循同一套内容规范只是组织方式不同。通读下来它们都按这 9 个章节依次展开章节内容1. Visual Theme Atmosphere氛围、密度、设计哲学2. Color Palette Roles语义名 色值 功能角色3. Typography Rules字体族与完整层级表格4. Component Stylings按钮、卡片、输入框及其状态5. Layout Principles间距刻度、网格、留白哲学6. Depth Elevation阴影体系、表面层级7. Dos and Donts设计护栏与反模式8. Responsive Behavior断点、触控目标、折叠策略9. Agent Prompt Guide速查色表 现成提示词拿 design-md/spotify/DESIGN.md 当样本看就能明白每个章节怎么服务 Agent第 1 章用几段散文点出设计人格——Spotify 的关键词是内容优先的黑暗UI 退进#121212的阴影里让专辑封面成为唯一色彩来源。第 2 章给颜色三件套语义名 色值 用在哪。Spotify Green#1ed760只用于播放按钮、激活态和主 CTA绝不装饰错误态另有专属的 Negative Red#f3727f。第 3 章是一张 14 行角色表从 Section Title 到 10px 的 Micro 字号全部列出并注明替代方案——专有字体未公开时写明可替换的开源字体。第 4 章把手感写成数值所有按钮走胶囊形500px–9999px 圆角播放控件用 50% 正圆按钮文字统一大写 1.4px–2px 宽字距。第 7 章是护栏不用绿色做装饰、不做方形按钮、不额外加品牌色——绿 无彩灰就是完整色板。这些章节的共同点是只写 Agent 能执行的数值和规则不写高级感这类虚词。两种写法对照叙事型 vs 令牌型73 份文档在呈现上分成两种骨架各有适用场景。叙事型Spotify 式正文就是上面那 9 个编号章节纯 Markdown 描述读起来像一篇设计说明。适合氛围感强、感觉比精确更重要的品牌。令牌型Linear / Stripe 式文件头部加一段 YAML frontmatter把所有设计值集中定义为令牌例如 design-md/linear.app/DESIGN.md 的开头--- colors: primary: #5e6ad2 on-primary: #ffffff canvas: #010102 surface-1: #0f1011 ---正文里再用{colors.primary}这样的引用代替重复写色值比如按钮背景{colors.primary}、文字{colors.on-primary}。好处是改一处令牌全局生效Agent 也不会拿错色值。Linear 的组件块把每个状态都单独立了令牌——button-primary、button-primary-hover、button-primary-pressed各占一条间距刻度从 4px 起步一路排到 section 的 96px一查就有。怎么选判断标准其实就一条你的产品是视觉叙事型音乐、零售、媒体挑叙事型当模板重点抄它的章节结构和 Dos Donts 写法你的产品是工程/工具型SaaS、开发者平台挑令牌型直接把 frontmatter 改成自己的品牌值正文引用令牌即可。按业务类型对号入座合集覆盖 8 大类每类的味道各不相同挑的时候先对号业务类型值得看的几份风格关键词开发者工具vercel、linear.app、cursor黑白精密、等宽点缀生产力 SaaSnotion、supabase温暖极简、深翠绿金融科技stripe、coinbase、wise紫色渐变、机构蓝电商零售airbnb、nike、starbucks摄影驱动、大地色系媒体消费spotify、apple、theverge深色沉浸、酸性薄荷汽车行业tesla、ferrari、bmw全屏影像、极简留白复古怀旧dell-1996、nintendo-20011996 目录页、Y2K 金属面板拿不准时看两点目标用户的审美预期金融要克制媒体可以大胆以及你的团队能否守住文档里的约束比如 Spotify 那套深色 单一绿执行偏差会很明显。三个最常见的翻车点写虚词不写数值。深色主题、高级感对 Agent 没有信息量。要写#121212、24px 模糊阴影、9999px 圆角——Agent 只会精确执行它读到的数字。色值散落各处。同一个主色在文档里硬编码七八遍改一处漏三处Agent 还可能混用新旧值。用令牌型的 frontmatter 集中定义正文一律引用。只写能做的不写不能做的。没有 Donts 的文档等于给 AI 放开了自由发挥——而看起来都行正是跑偏的源头。哪怕只写三条禁令别拿品牌色做装饰、别做方形按钮、别引入额外强调色都能砍掉一半偏航概率。挑一份喜欢的现在就能开始仓库遵循 MIT 协议见 LICENSE所有文档提取自公开网站、按原样提供。想修错色值、补漏令牌先看 CONTRIBUTING.md 的指南提 issue 讨论后再动手。完整清单入口在 design-md/ 目录——73 个品牌任选。挑一份合眼缘的 DESIGN.md 丢进项目根目录告诉你的 Agentbuild me a page that looks like this然后看看它交出来的东西和你想象的距离有多大。【免费下载链接】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），仅供参考