awesome-design-md：73 份 DESIGN.md 设计系统文件，让 AI 写出品牌味道的界面

awesome-design-md73 份 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 不懂Stripe 味具体指什么你说帮我做一个像 Stripe 的页面AI 能写出来但主色可能不对、字重可能偏粗。DESIGN.md 是 Google Stitch 提出的设计系统概念本质上是一份现成的 AI 设计系统文档单个 Markdown 文件说明界面该长什么样。它和讲怎么构建的 AGENTS.md 互为视觉对照。它不做 Figma 导出也没有 JSON schema整个文件就是 Markdown——LLM 读起来最顺的格式没有解析和配置环节。仓库里每个品牌一个目录内含一份 DESIGN.md 加 README.md内容从真实站点 CSS 里提炼给的是可执行数值不是高级感这类形容词。最短上手路径三步第一步挑风格。73 份文件按行业分布照需求直接找AI LLM 平台 12 份Claude、xAI、Mistral 等媒体与消费科技 12 份Apple、Spotify、Uber 等后端 DevOps 8 份ClickHouse、Supabase、Sentry 等金融加密 7 份Stripe、Coinbase、Wise 等开发者工具 7 份Cursor、Vercel、Warp 等生产力 SaaS 7 份Linear、Notion 等设计工具 6 份Figma、Webflow、Miro 等电商零售 5 份Airbnb、Nike、Shopify 等汽车 7 份Tesla、Ferrari、Lamborghini 等复古彩蛋 2 份Dell 1996 与 Nintendo 2001用来做有年代感的页面第二步拿到文件。getdesign.md 站点上每个品牌都有浅色、深色预览也支持单份下载想一次拿全 73 份就 clone 仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md第三步交给 AI。把选中的 DESIGN.md 复制到项目根目录提示词里写明遵循这份设计系统只说做得像 Stripe是不算数的。文件里的 9 个板块其实是 3 类信息每份 DESIGN.md 结构相同共 9 个板块。逐条看效率低按用途归成三类更清楚。第一类回答长什么样视觉主题与氛围、色板与语义角色、排版规则。每个 token色板里带名字的色值变量都标了语义名、hex 值和功能角色。Stripe 的文件 把主色写成 #533afd、海军蓝墨色 #0d253dSöhne 字体用 weight-300 细体金额数字启用 tnum 表格数字特性。第二类回答怎么搭组件样式、布局原则、深度与高程。Linear 的 DESIGN.md 里最大号标题 80px、字重 600、字距 -3px圆角从 4px 到 24px 分档药丸按钮单独 9999px。第三类回答边界和用法Dos Donts、响应式行为、Agent Prompt 指南。护栏防止 AI 跑偏指南部分附了快速取色参考和现成提示词句。对着深色模式校色、申请缺失品牌、参与贡献深色模式校色站点为同一组 token 提供浅色、深色两套预览方便对比它们落在不同表面上的效果。色板按语义角色书写——Linear 的画布是近黑 #010102卡片 #0f1011正文 #f7f8f8强调色 #5e6ad2 只出现在 logo、焦点环和少数 CTA 上。做暗色适配时这是最直接的参照。品牌缺失getdesign.md 站点有 Request 入口可以按指定网站申请一份 DESIGN.md私人请求的交付物只给你自己用。数值不对文件由社区提炼、按 as-is 提供不作保证。发现色值写错或 token 缺失可以走 CONTRIBUTING.md 的流程——先提 Issue 讨论再提 PR。常见问题Q生成的页面结构对了味道不对 A多半是代理没真正读到文件。检查 DESIGN.md 是否在项目根目录、提示词是否点名要求遵循它。Q某个数值和真实网站对不上 A文件来自公开 CSS 的提炼社区维护个别误差正常。可以按 CONTRIBUTING.md 提 issue 修正这正是最被欢迎的贡献方向。Q不想 clone 整个仓库 A不必。单份直接下载就够只有想一次拿全 73 份或参与贡献时才需要完整仓库。打开 README.md从 Collection 里挑一个你信任其审美的品牌把它的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考