awesome-design-md 深度解析73 份品牌设计档案两步让 AI 生成符合 DESIGN.md 的品牌 UI【免费下载链接】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 设计系统文档用来生成视觉一致的品牌 UI。下面带你走通三件事73 份档案怎么组织、单份文件内部长什么样、如何两步把品牌设计搬进自己的项目。仓库全景——73 份品牌档案的组织方式仓库核心内容全在design-md/目录每个子目录对应一个品牌标配两个文件DESIGN.md设计系统本体代理真正读取的内容和README.md该品牌设计分析的入口页与说明唯一的例外是design-md/slack/只含 DESIGN.md。README 徽章标注 DESIGN.md 数量为 73条目按 10 个品类归档且每个条目都带一条「一句话设计摘要」——它正是对应品牌 DESIGN.md 中description字段的浓缩版品类代表品牌一句话设计摘要AI 与 LLM 平台Claude、ElevenLabs、Ollama暖陶土点缀、编辑式排版 / 暗色电影感、音频波形美学 / 终端优先的单色极简开发者工具与 IDECursor、Vercel、Warp暗色界面、渐变点缀 / 黑白精准、Geist 字体 / IDE 化暗色终端、块状命令 UI后端、数据库与 DevOpsClickHouse、MongoDB、Supabase黄色点缀的技术文档风格 / 绿色叶子品牌、开发者文档导向 / 暗色翡翠主题、代码优先生产力与 SaaSLinear、Notion、Resend超极简、精准、紫色点缀 / 暖极简、衬线标题 / 极简暗色、等宽字体点缀设计与创意工具Figma、Miro、Webflow多彩活泼又专业 / 亮黄色点缀、无限画布 / 蓝色点缀、精修营销站质感金融科技与加密Stripe、Binance、Coinbase标志性紫色渐变、weight-300 排版 / 单色底上的醒目黄 / 干净蓝色身份、机构感电商与零售Airbnb、Nike、Shopify暖珊瑚色、摄影驱动 / 单色 UI、巨型大写 Futura / 暗色电影感、霓虹绿点缀媒体与消费科技Apple、Spotify、SpaceX高级留白、SF Pro / 暗底活力绿、专辑封面驱动 / stark 黑白、全出血影像汽车Tesla、BMW、Ferrari激进减法、全视口电影感摄影 / 暗色高级表面 / 明暗对比黑白编辑风复古 Web 怀旧系列Dell (1996)、Nintendo.com (2001)黑色页面框架、扁平色块 ribbon cards / Y2K「主机镀铬」拉丝金属面板复古 Web 品类是 README 自称的「周六系列」从 1990 年代网页中提取 DESIGN.md对应design-md/dell-1996/、design-md/nintendo-2001/两个目录让代理生成年代准确的复古 UI。单份文件解剖——YAML 骨架 9 段正文README 声明全部文件遵循 Google Stitch 提出的 DESIGN.md 格式并做了扩展。以结构最完整的 design-md/claude/DESIGN.md共 589 行为例YAML frontmatter——文件顶部由---分隔的元数据块——是 token 化设计系统的真正载体。设计 token即把颜色、字号、圆角等设计值抽象成命名变量。Claude 的 frontmatter 由colors、typography、rounded、spacing、components五组构成colors: primary: #cc785c # Anthropic 标志性珊瑚色 canvas: #faf9f5 # 页面默认底色 surface-card: #efe9de surface-dark: #181715 ink: #141413 typography: display-xl: fontFamily: Copernicus, Tiempos Headline, serif fontSize: 64px fontWeight: 400 letterSpacing: -1.5px button: fontFamily: StyreneB, Inter, sans-serif fontSize: 14px fontWeight: 500 rounded: md: 8px lg: 12px pill: 9999px spacing: xxs: 4px section: 96px components: button-primary: backgroundColor: {colors.primary} textColor: {colors.on-primary} typography: {typography.button} rounded: {rounded.md} height: 40px其后的 Markdown 正文遵循统一的 9 段式骨架README 给出了对应表#段落捕获的内容1Visual Theme Atmosphere氛围、密度、设计哲学2Color Palette Roles语义名 十六进制值 功能角色3Typography Rules字体族、完整字号层级表4Component Stylings按钮、卡片、输入框、导航及各状态5Layout Principles间距刻度、栅格、留白哲学6Depth Elevation阴影系统、表面层级7Dos and Donts设计护栏与反模式8Responsive Behavior断点、触控目标、折叠策略9Agent Prompt Guide快速颜色参考、可直接使用的提示词Claude 文件并不止步于这 9 段实际标题里还有 Shapes圆角刻度与插画规范、Iteration Guide修改文件时的规则、Known Gaps专有字体、动画时长、表单校验态等未提取项清单说明分析深度随目标站点特征而异——Claude 有商用字体所以专门交代了开源替代方案。一句话概括这层分工frontmatter 是机器的速查表正文是代理的深度语义库。frontmatter 只记primary: #cc785c正文的## Colors段则说明它是标志性的暖珊瑚色用于所有主 CTA 背景、全出血 callout 卡片与字标点缀## Typography段给出 14 行字号层级表逐行标注实际用在哪里。token 化设计的三个关键决策DESIGN.md 能让代理生成视觉一致的品牌 UI靠的是 YAML 里的三个组织决策在 Claude 文件里都能逐条核对语义化 token 命名颜色不用裸值而是primary、canvas、ink、surface-dark这类角色名。代理看到canvas: #faf9f5就能理解它是「页面默认底色」而非某种灰。Claude 的 frontmatter 中 25 个颜色 token 全部如此命名从on-primary珊瑚按钮上的文字色到hairline-soft几乎不可见的分隔线。花括号引用语法components:内部几乎全是{colors.primary}、{typography.button}、{rounded.md}这样的 token 引用把颜色、字体、圆角组合成组件。上面代码块里的button-primary六行写完整了主按钮却复用了 4 个 token——将来珊瑚色变更只需改colors段一行所有引用它的组件自动同步这才是 token 复用的本质。状态变体平铺为独立条目button-primary-active、button-primary-disabled、text-input-focused、category-tab-active都作为独立 entry 平铺在components:下与默认状态并列代理不需要推断「按下是什么样」直接查表。Claude 的## Iteration Guide明确写下这条约定变体一律 live as separate entries incomponents:。两步上手——把品牌设计搬进你的项目 README 给出的使用流程只有两步。步骤 1复制目标品牌的DESIGN.md到项目根目录。先克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md然后把design-md/stripe/DESIGN.md或你心仪的任意一份复制到项目根目录。步骤 2给 AI 代理一句话指令。README 的原文示例就是 build me a page that looks like this照这个设计生成一个页面。Markdown 无需解析、YAML token 无需转换代理读完即开工想让指引更明确还可以在 prompt 里直接引用{colors.primary}这类 token 引用作为上下文。README 同时说明每个站点还配有preview.html展示色板、字号层级、按钮与卡片目录的可视化 catalog与preview-dark.html同一目录的深色表面版本使用某品牌设计系统前可先打开核对色板与组件。注意当前仓库的品牌子目录内并未放置这两个文件它们按 README 说明随各站点发布。DESIGN.md 与AGENTS.md的分工在 README 中有对照表文件谁读取定义什么AGENTS.md编码代理如何构建这个项目DESIGN.md设计代理项目的外观与体验应该是什么样参与、许可与边界贡献流程写在 CONTRIBUTING.md 里共四步先开 issue描述想改什么拿到维护者反馈打开目标站点的 DESIGN.md对照真实站点修正错误的十六进制色值、缺失 token、薄弱的设计描述若改动影响展示的 token同步更新preview.html与preview-dark.html提交 PR 并附上 before/after 的改动理由。⚠️ 边界同样写得很明确仓库不接受新品牌 DESIGN.md 的直接 PR以维持既有收藏的质量。仓库采用 MIT LicenseLICENSE 给出三条边界所有 DESIGN.md 按 as is 提供、不附任何担保提取的设计 token 代表公开可见的 CSS 值仓库不主张对任何站点视觉标识的所有权。你可以借走的是「设计语言」的结构与方法而不是品牌资产本身。小结 延伸阅读awesome-design-md 把「从真实品牌提取设计系统」变成了一条可复制的流水线73 份 DESIGN.md 覆盖 AI 平台到汽车、复古网页的 10 个品类每份都是「YAML token frontmatter 9 段正文」的双层结构——前者供代理直接查表后者给代理讲清「为什么」。对你最直接的价值选一个心仪品牌的设计语言把它的 DESIGN.md 复制进项目根目录一句话让 AI 代理产出风格统一的页面。延伸阅读均为仓库内相对路径design-md/claude/DESIGN.md589 行结构最完整含 Shapes / Iteration Guide / Known Gaps 扩展章节是学习写法的最佳范本design-md/stripe/DESIGN.md487 行的深蓝墨 电光靛体系金融科技品类的典型样本CONTRIBUTING.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），仅供参考
