DESIGN.md 完整指南9 个要点让 AI 画出 Stripe、Spotify 同款界面【免费下载链接】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 是一批从 Stripe、Spotify、Linear 等知名官网拆解出来的 DESIGN.md 合集。它解决的问题很直接你不用再跟 AI 反复描述要深色、要高级感只要把对应品牌的那份文档放进项目AI 就能按同一套视觉语言把页面画出来。AI 画页面为什么总差点那个味儿你有没有这种经历提示词写得再细AI 出来的页面也像那么回事但就是不像某个牌子。原因不在于 AI 不行而在于视觉语言没法用一句话交代清——哪个色值只许出现在按钮上、字体粗细怎么拉开层级、卡片圆角到底 8px 还是 12px这些细节藏在设计系统里口述必然丢。DESIGN.md 就是把这套隐藏规则摊开写明白让 AI 直接照着执行。它本质是个纯 Markdown 文本没有任何特殊格式大语言模型读它就像读普通文章不用装插件、不用解析。这个概念由 Google Stitch 提出强调零门槛没有 Figma 导出、没有 JSON Schema就是一个谁都能打开的 .md 文件。DESIGN.md 是什么跟 AGENTS.md 怎么分工项目里常有两个容易搞混的文件它们的读者和职责完全不同文件名谁来读负责什么AGENTS.md编码 Agent这个项目怎么构建、怎么跑DESIGN.md设计 Agent这个项目该长什么样一句话记忆AGENTS.md管怎么做DESIGN.md管长啥样。两份文档各管一边互不冲突放在项目里可以一起用。三步让项目用上选好的品牌风格上手成本很低整个过程不用配任何工具第一步拿到你想要的那份文档。要么把整个仓库拉下来要么只挑你需要的品牌git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md第二步把目标品牌的DESIGN.md拷到你项目的根目录直接放就行不需要解析或改配置。第三步对 AI Agent 说一句大白话比如给我做一个长这样的页面。Agent 会自己去读文件里的设计令牌和规则生成风格一致的界面。在仓库里 73 份文档怎么挑所有文档都放在 design-md/ 目录下规则很简单一个品牌一个文件夹每个文件夹里固定两个文件。DESIGN.md是真正给 Agent 读的设计系统本体README.md是这一站点的简要说明。合集按行业分了 8 大类、覆盖 70 多个品牌随便举几类方便你对号入座开发者工具design-md/vercel/、design-md/linear.app/创意与流媒体design-md/figma/、design-md/spotify/金融科技design-md/stripe/、design-md/coinbase/汽车design-md/tesla/、design-md/ferrari/复古怀旧design-md/dell-1996/还原 1996 年 Dell 官网的老式目录风完整分类和每站的风格描述都在 README.md 里翻一翻就能找到你想要的调性。拆开 Spotify 这份文档看标准写法光说概念太抽象直接拿 design-md/spotify/DESIGN.md 走一遍你就知道一份合格的 DESIGN.md 是怎么组织信息的。它用 1 到 9 的编号章节把整套规则串起来这也是合集里 9 个标准章节的完整形态视觉主题、色板角色、字体规则、组件样式、布局原则、深度与层次、Dos and Donts、响应式行为、Agent 提示词指南。下面挑六个最能决定生成质量的部分讲。第一段先写设计人格别急着上颜色第一章Visual Theme Atmosphere用两三段散文先交代设计哲学再给一组 Key Characteristics 要点。Spotify 开头就点出内容优先的黑暗content-first darkness整个界面退进近乎黑色的阴影里#121212到#1f1f1f让专辑封面成为页面里唯一的色彩来源。先立人设后面所有数值才有依据。色板别只贴色值把语义名和用途一起写只罗列十六进制色值是最没用的写法Agent 不知道该用在哪。正确姿势是给每个颜色配语义名 色值 用在哪三件套Spotify Green#1ed760播放按钮、激活态、主 CTA——只服务功能绝不拿来装饰Near Black#121212最深的背景表面Negative Red#f3727f只用于错误状态三样缺一个Agent 都可能拿错色或乱用色。字体规则压成一张层级表字体章节的核心是一张角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 用途的表格Agent 靠它精确区分标题、正文、按钮文字的差别。Spotify 的字号区间很窄10px 到 24px靠字重而非字号拉层级大部分文字只在 700粗和 400常规两档里切换。再补两点更容易出好效果说明字重对比策略以及专有字体加载不了时用哪个开源字体顶替。按钮状态、间距和圆角都落成具体数值手感这种东西必须写成数字。按钮要把默认、hover、pressed、focus 各状态都写全间距和圆角各给一套刻度。Spotify 的间距基础单位是 8px圆角从 2px 徽章一路排到 9999px 的胶囊按钮按钮统一用大写加 1.4px 到 2px 的字间距形成一种标签感。数值给得越具体AI 越没有发挥空间。用 Donts 给 AI 划一道禁区这是最容易被忽略、却最能拉高生成质量的一节。Spotify 的禁令堪称范本不要用品牌绿做装饰、不要出方形按钮会破坏品牌识别、不要额外加品牌色——绿色加无彩灰就是完整色板。说白了AI 最怕看起来都行明确的 Donts 能直接砍掉一半跑偏的概率。结尾附一段能直接粘走的提示词Spotify 式文档的第九章还提供可复制的现成提示词比如设计一个胶囊按钮#1f1f1f背景、白色文字、9999px 圆角、8px 16px 内边距……。这一步等于把文档升级成了工具你或 Agent 可以直接照着产出组件。九段编号还是 YAML 令牌骨架按项目挑通读全仓库后会发现所有文档讲的都是那套内容只是呈现骨架分成两种选哪种取决于你的项目习惯。九段编号式像 Spotify 那样正文用 1 到 9 的编号章节顺序推进纯 Markdown 描述靠散文加表格把规则铺开。好处是读起来顺、信息全适合想一次性讲清整套系统的项目。YAML 令牌式像 Linear 和 Stripe 那样这种在文件头部先放一段结构化 frontmatter把色、字、圆角、间距、组件都定义成令牌正文里再用{colors.primary}这样的引用代替反复写死色值。以 design-md/linear.app/DESIGN.md 为例头部大概是--- name: Linear-design-analysis colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 surface-1: #0f1011 ---正文里写按钮背景用{colors.primary}、文字用{colors.on-primary}就行。这套写法的最大好处是改一处令牌、全局生效Agent 也不会抄错色值。design-md/stripe/DESIGN.md 也是同一路数。完整的 colors、typography、rounded、spacing、components 令牌块去 Linear 那份的开头部分就能看到。写自己的 DESIGN.md 时绕开这四个坑写的时候这样做 vs 不这样做的差别往往就在下面四处。写虚词还是不写数值「深色主题、高级感」对 Agent 几乎没有信息量换成#121212、24px 模糊阴影这种可执行的描述效果立刻不一样。色值散落还是令牌引用同一颜色在全文反复硬编码改一处漏三处用 YAML 令牌式就能集中管理。只写能做什么还是连不能做什么一起写没有 Donts 的文档AI 很容易自由发挥把禁区写出来边界立刻清楚。忘记字体替代还是写明 fallback专有字体在多数环境加载不了得提前告诉 Agent 可以换成哪个开源字体比如 Inter、Geist Sans等宽字体可用 JetBrains Mono 或 Geist Mono。一张速查表DESIGN.md 写作要点回顾要点一句话它是什么纯 Markdown 设计系统文档AI 的视觉规范怎么用拷到项目根目录让 Agent 读它来生成页面两种骨架九段编号式Spotify/ YAML 令牌式Linear、Stripe质量关键语义化色板、完整字体表、组件全状态、Dos Donts资源入口design-md/ 目录73 个品牌随挑想改进或校对其中的文档可以参照 CONTRIBUTING.md 的指南项目遵循 MIT 协议详见 LICENSE。挑一份你喜欢的品牌风格放进项目让 AI Agent 开工吧。【免费下载链接】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），仅供参考
