awesome-design-md 指南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让 AI 代理写页面常卡在看起来像但不像那个品牌——说清用哪个色、多大字号、什么字重往往比写代码更费劲。awesome-design-md 解决这个问题它提供 73 份从知名品牌官网逆向出的 DESIGN.md 设计系统文档任选一份放进项目根目录编码代理就能按该品牌的视觉语言生成页面。它到底是什么DESIGN.md 这个概念来自 Google Stitch一份纯文本的设计系统文档回答界面应该长什么样而 AGENTS.md 回答的是项目怎么构建。两者放进同一个仓库代理才同时拥有构建规则和视觉规则。它只是一个 Markdown 文件不需要从 Figma 导出不需要 JSON schema也不依赖任何解析工具。LLM 读 Markdown 最顺复制进项目根目录代理就能拿到整套色板、字号、圆角 token。仓库里的 73 份文件全部来自对真实官网的分析把视觉语言拆成可执行的数值。与传统做法的差异对比维度传统设计交付awesome-design-md规格来源Figma 导出、设计稿 PDF一份 Markdown 文件代理生成依据截图 提示词猜测直接读 tokenhex、px、字重落地成本导出、转格式、来回对齐复制到根目录即可里面有什么10 类共 73 份内容按业务线分组与 README.md 的 Collection 一一对应类别份数代表示例AI LLM 平台12Claude、xAI媒体与消费科技12Apple、Spotify后端、数据库与 DevOps8ClickHouse、Supabase金融与加密7Stripe、Wise开发者工具与 IDE7Cursor、Vercel生产力 SaaS7Linear、Notion设计工具6Figma、Webflow汽车7Tesla、Ferrari电商零售5Airbnb、Nike复古网页2Dell1996、Nintendo2001最后两份复古文件专门用于复刻年代感页面。每份文件结构统一共 9 个板块视觉主题与氛围、色板与语义角色、排版规则、组件样式、布局原则、深度与高程、Dos Donts、响应式行为、Agent Prompt 指南。量化到什么程度design-md/linear.app/DESIGN.md 里画布锁定 #010102、卡片 #0f1011唯一的强调色 #5e6ad2 只允许出现在品牌标与焦点环上Display 最大档 80px、字重 600、字距 -3px。design-md/stripe/DESIGN.md 则把主色定为 #533afd正文用 Söhne 的 weight-300金额数字启用 tnum 表格数字特性。从零到第一个页面快速上手四步把仓库拉到本地。git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md完成后得到design-md/目录73 个子目录对应 73 个品牌一品牌一目录。挑一份并通读 token。打开如design-md/stripe/DESIGN.md看文件头部colors给语义名加 hex 值typography给每一档的字号、字重与字距。完成后你确认了色板与排版层级。复制到项目根目录。cp design-md/stripe/DESIGN.md your-project/DESIGN.md完成后代理扫描项目时能直接命中这份文件。交给代理生成页面。提示词写照根目录 DESIGN.md 给我搭一个落地页并用文件末尾的 Dos Donts 与 Agent Prompt 指南约束输出。完成后得到一份配色、字号、圆角都对得上的页面。高频问题问代理生成的页面还是不像那个品牌。原因多半是文件没被读到或提示词只说做得像某品牌而没有指向文件。确认 DESIGN.md 位于项目根目录并在提示词中点名这份文件、要求逐条执行其中的 token。问某个 hex 值和线上网站对不上。合集由社区维护、按 as-is 提供提取值与线上站点可能存在出入。按 CONTRIBUTING.md 走先开 issue 讨论再修值并提 PR这正是维护者欢迎的贡献方向。问只用一份文件必须 clone 整个仓库吗不必。日常使用只需复制一份 DESIGN.md 进项目。想一次拿全 73 份或要参与修正、提交 PR 时才需要 clone。翻到 README.md 的 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），仅供参考