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-md仓库里躺着 73 份 DESIGN.md每份都是纯文本写成的设计系统文档锁定一个知名网站的视觉语言精确到 hex 色值、px 字号、字距负值。Stripe 那份里主色是 #533afdDisplay 从 56px 起步、字重压到 300Vercel 那份里标题 48px、字距 -2.4px全部是可直接执行的数字。这就是 awesome-design-md 干的事把真实网站的设计系统拆成 73 份现成文件MIT 协议提供。复制其中一份到你项目根目录AI 编码代理就能照着生成配色和排版对得上的页面而不是一眼AI 味的通用模板。DESIGN.md 是什么写给 AI 的视觉说明书DESIGN.md 是 Google Stitch 提出的一种概念一个 Markdown 文件描述项目应该长什么样AI 代理读它来生成风格一致的界面。没有 Figma 导出、没有 JSON schema、不需要任何工具——Markdown 是 LLM 读得最顺的格式丢进项目就能用。它和 AGENTS.md 是一组搭档AGENTS.md 告诉编码代理怎么构建项目DESIGN.md 告诉它页面应该长什么样。一个管工程一个管长相两个文件各管一摊。适合谁用你用 Cursor、Claude Code 这类代理写产品页但不想页面看起来像套模板的人。73 份设计规范按什么分文件放在 design-md/ 目录下按 10 个业务线分组每个品牌一个目录分组份数代表文件风格关键词AI LLM 平台12Claude暖陶土色点缀编辑感排版开发者工具7Vercel黑白精确Geist 字体后端与 DevOps8Supabase深翡翠色代码优先金融科技与加密7Stripe靛蓝 #533afd300 细体生产力 SaaS7Linear极简紫色点缀设计工具6Figma多彩俏皮且专业电商零售5Airbnb暖珊瑚色摄影驱动媒体与消费科技12Spotify绿 #1ed760近黑底汽车7Tesla激进减法全屏摄影复古彩蛋2Dell 1996黑边框、缎带卡片、Times Roman 正文其中两份是年代复刻向的1996 年的 Dell 和 2001 年的 Nintendo专门用来让代理做出有年代感的页面。每份文件内部9 个量化板块所有文件结构统一共 9 个板块视觉主题与氛围情绪、密度、设计哲学色板与语义角色语义名 hex 值 功能角色例如 Spotify 的 #1ed760 只用于播放键、激活态和 CTA绝不装饰性滥用排版规则字体族加完整层级表从 Display 到 Micro 每档的字号、字重、行高、字距组件样式按钮、卡片、输入框、导航及各状态药丸按钮半径直接写到 500px–9999px布局原则间距刻度、栅格、留白哲学深度与高程阴影系统精确到rgba(0,0,0,0.5) 0px 8px 24px这种程度Dos Donts设计护栏与反模式响应式行为断点、触控目标、折叠策略Agent Prompt 指南快速取色参考和现成提示词代理读到的不是高级感三个字而是能直接落到 CSS 里的数值。从 clone 到第一页三步完成clone 仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md。73 份文件都在 design-md/ 下按品牌分好目录clone 一次全量拿到。把目标文件的 DESIGN.md 复制到项目根目录。代理按路径读文件放根目录就不用额外指定位置。在提示词里写明规则告诉代理遵循根目录的 DESIGN.md构建同风格页面。文件末尾的 Agent Prompt 指南板块有现成提示词直接取用。最容易卡住的三个问题生成的页面还是差一口气多半是代理根本没读文件。确认 DESIGN.md 在项目根目录、提示词里明确要求遵循这份设计系统而不是只说做得像 Stripe。文件里的色值和官网对不上合集由社区维护、按 as-is 提供色值取自各站公开可见的 CSS。发现错值、缺 token流程写在 CONTRIBUTING.md先开 Issue 讨论再提 PR 修正并附前后对比理由。修错正是目前最被欢迎的贡献方向。列表里缺我想要的品牌用 README 里的 Request 入口按指定网站申请一份 DESIGN.md支持只交付给你自己的私人申请不用自己动手提取。今晚就能做的一件事打开 design-md/ 目录挑一个你信任其审美的品牌把它的 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），仅供参考