73 份 DESIGN.md 设计系统让 AI 代理还原品牌界面的完整指南【免费下载链接】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 是收录 73 份 DESIGN.md 设计系统文件的合集每份对应一个知名网站的视觉规范。把其中一份复制进项目根目录AI 编码代理就能生成配色、排版都贴近该品牌的页面适合想让 AI 写出品牌级界面的开发者。它是什么一个给 AI 代理读的设计系统文档DESIGN.md 是 Google Stitch 提出的一种纯文本设计系统文档——它说明项目应该长什么样对应 AGENTS.md 说明的怎么构建。简单说就是一个 Markdown 文件代理直接读取无 Figma 导出、无 JSON schema、无额外工具零解析零配置。它不是 Figma 文件、不是 CSS 文件而是一份可执行数值的清单语义化色名加 hex 值、完整字体层级表、组件状态说明。README 明确每份文件都基于真实网站分析提取 token 与规则不是表面级描述。一句话73 份文件一品牌一份数量与 README 徽章标注的 73 一致。适用场景三类人最常打开它开发者要写支付页却想要 Stripe 的感觉 → 把 design-md/stripe/DESIGN.md 复制到项目根目录 → 代理按文件里的 #533afd 主色与 Söhne 细体生成页面而不是随手抓一种紫色。设计师要把品牌感交给 AI 统一输出 → 按行业挑最接近的品牌 → 73 份文件分布在 10 个类别AI 平台 12 份、媒体消费科技 12 份、后端 DevOps 8 份、金融加密 7 份、汽车 7 份、开发者工具 7 份、生产力 SaaS 7 份、设计工具 6 份、电商零售 5 份、复古 2 份。想复刻年代感页面 → 合集收录了 1996 年 Dell 和 2001 年 Nintendo 两份复古彩蛋 → 让代理照文件搭一个 90 年代企业站即可。按行业挑品牌10 个类别里基本都能找到参照。三步最短上手路径克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md本地拿齐全部 73 份文件。在 README.md 的 Collection 里选定品牌把它的 DESIGN.md 复制到项目根目录代理从此能引用这份文件。对代理说照这份设计系统给我写个页面得到配色、字体、组件风格都贴合该品牌的页面。下一步是验收整个流程 3 步唯一必须敲的命令就是那条 git clone。内容拆解每份文件锁定的 9 个板块README 定义了统一结构73 份文件共用 9 个板块板块锁定什么视觉主题与氛围情绪、密度、设计哲学色板与语义角色语义名 hex 值 功能角色排版规则字体族、完整层级表组件样式按钮、卡片、输入框、导航及各状态布局原则间距刻度、栅格、留白哲学深度与高程阴影系统、表面层级Dos Donts设计护栏与反模式响应式行为断点、触控目标、折叠策略Agent Prompt 指南快速取色参考、现成提示词锁定到什么程度看两个实例Linear 的文件里画布是近黑的 #010102、卡片 #0f1011、正文 #f7f8f8强调色 #5e6ad2 只出现在 logo、焦点环和少数 CTA 上Display 从 80px 起步、字重 600、字距 -3.0px药丸按钮圆角直接 9999px。Stripe 的文件则把主色定为 #533afd、墨色定为海军蓝 #0d253dSöhne 用 weight-300 细体金额单元格启用 tnum 表格数字特性——金融感被写成参数。代理读到的不是高级感三个字而是一套能直接执行的数值 常见疑问三个高频问题生成的页面总觉得差一口气原因代理没真正读到文件或提示词只说做得像 Stripe没点明文件。 怎么办确认 DESIGN.md 在项目根目录提示词里明确写遵循这份设计系统。某个色值看着不对原因合集由社区维护README 声明所有文件按 as-is 提供。 怎么办按 CONTRIBUTING.md 的流程先开 Issue 讨论、再提 PR——官方欢迎的贡献方向正是修正错误色值与缺失 token。列表里没有想要的网站原因73 份是精选清单并非全网覆盖。 怎么办README 提供 Request 入口可针对指定网站申请一份私人请求只交付给请求者本人。从 README 的 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），仅供参考