awesome-design-md九大章节写作指南：从视觉主题到Agent Prompt Guide完整模板

awesome-design-md九大章节写作指南从视觉主题到Agent Prompt Guide完整模板【免费下载链接】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 Agent 生成视觉一致的高品质 UI。本文以仓库中的真实文件为样本带你完整读懂 DESIGN.md 的九大章节结构手把手教你掌握这份视觉主题 → 色彩 → 排版 → 组件 → 布局 → 深度 → 规范 → 响应式 → Agent Prompt Guide的设计系统模板。一、DESIGN.md 是什么为什么需要九大章节DESIGN.md 是 Google Stitch 提出的新概念一份纯 Markdown 的设计系统文档AI Agent 读它就知道项目应该长什么样。文件谁在读取定义什么AGENTS.md编码 Agent如何构建项目DESIGN.md设计 Agent项目应有的视觉风格它的价值在于深度分析而非表面模仿。每个文件都包含提炼的设计模式tokens、规则和反模式让 AI 生成看起来像 Linear、感觉像 Tesla的界面而不只是抄一个配色。仓库收录了 Apple、Tesla、Spotify、Vercel 等 73 个品牌的设计系统按 AI 平台、开发者工具、金融科技、电商、媒体、汽车等分类整理详见 README.md。快速上手两步使用把目标站点的DESIGN.md复制到你的项目根目录告诉 AI Agent请按照 DESIGN.md 的风格帮我构建这个页面就这么简单无需 Figma 导出、无需 JSON Schema、无需任何额外工具。二、九大章节完整模板解析每个 DESIGN.md 都严格遵循 Stitch 规范固定分为九大章节。下面结合仓库中的真实文件逐一拆解。章节 1视觉主题与氛围Visual Theme Atmosphere开篇定调气质、密度、设计哲学。以 Spotify 的 DESIGN.md 为例它用一个近黑背景 单一品牌绿 高对比排版的组合定义了沉浸式音乐应用的整体氛围。这一章回答的核心问题是这个品牌的感觉是什么是 Linear 的安静奢华还是 Tesla 的极致减法章节 2色彩系统与角色Color Palette Roles这是 Agent 使用频率最高的一章。规范做法是语义化命名 十六进制色值 功能角色三要素缺一不可。以 Linear 的 DESIGN.md 为例它定义了唯一品牌色#5e6ad2薰衣草蓝——只用于品牌标识、主 CTA、焦点环四级表面阶梯#010102 → #0f1011 → #141516——卡片层级全靠抬升而非阴影四级文字墨色#f7f8f8 → #62666d——区分主次信息⚠️ 关键点不要写深色背景要写#010102 近黑带淡蓝调的画布色。Agent 需要精确值才能还原品牌感。章节 3排版规则Typography Rules标准写法是字体家族 完整层级表格。Spotify 的排版章节 给出了教科书级的层级表角色字号字重说明章节标题24px700粗体强调正文16px400标准正文按钮大写14px600–700宽字距 1.4–2px徽章10.5px600小字标签值得学习的细节Linear 的文档还说明了专有字体的开源替代方案如用 Inter 500/600/700 替代其定制字体这样 Agent 在无法获取原字体时也有明确降级路径。章节 4组件样式Component Stylings按钮、卡片、输入框、导航每个组件都要写全状态默认 / 悬停 / 按下 / 聚焦。Linear 的button-primary定义了完整三态背景#5e6ad2、悬停#828fff、按下#5e69d1。Tesla 的组件章则强调每个屏幕最多两个 CTA——组件规范不只是样式还包括使用纪律。章节 5布局原则Layout Principles三大件间距比例、网格系统、留白哲学。基础单位Linear 是 4pxSpotify 是 8px网格卡片桌面 3 列 → 平板 2 列 → 移动 1 列留白哲学Linear 的深色画布本身就是留白Spotify 的内容密度优先这是 App 不是营销页这些哲学性描述是拉开表面模仿和深度还原差距的关键。章节 6深度与层级Depth Elevation阴影系统的层级表。这里藏着反直觉的知识点深色主题下阴影必须加重Spotify 用0.3–0.5不透明度否则完全看不见Linear 几乎拒绝阴影层级全靠表面阶梯 1px 发丝边框章节 7Dos and Donts设计规范红线这是九大章节中最容易被忽视、但对 Agent 约束力最强的一章。以 Spotify 的规范章节 为例✅ Do绿色#1ed760只用于播放控件、激活态和主 CTA所有按钮使用胶囊形500px–9999px 圆角❌ Dont不要用绿色做装饰或背景——它是功能色不要用浅色背景做主表面——深色沉浸是核心不要放松行高——Spotify 排版是紧凑密集的 反模式清单直接决定了 Agent 不会创造性发挥破坏品牌一致性。章节 8响应式行为Responsive Behavior四部分标准结构断点表、触控目标、折叠策略、图片行为。以 Tesla 的响应式章节 为例它精确到每个断点的关键变化768px时导航折叠为汉堡菜单、主标题缩至 28px、按钮垂直堆叠。触控目标则给出明确数值主 CTA 按钮 200px × 40px远超 44×44px 的无障碍标准。章节 9Agent Prompt GuideAgent 提示词指南最终章也是直接产出价值的一章包含三个模块① 快速色彩参考——给 Agent 的速查卡Primary CTA: Electric Blue (#3E6AE1) Background: Pure White (#FFFFFF) Heading text: Carbon Dark (#171A20)② 现成的组件提示词——可直接复制使用的完整 Prompt 模板例如 Tesla 的 Prompt 指南 中创建一个全视口背景图的 Hero 区域居中 Model Y 标题Universal Sans Display40px字重 500白色下方一行副标题两个并排按钮Electric Blue (#3E6AE1) 的 Order Now 主按钮和白色 View Inventory 次按钮均 4px 圆角、40px 高度③ 迭代指南——生成后如何修正一次只聚焦一个组件、引用具体色名和色值、用自然语言描述感受画廊般的留白比 margin-bottom: 100vh 更有效。三、写一份高质量 DESIGN.md 的实操清单如果你要为某个网站撰写 DESIGN.md可以对照以下清单完整贡献流程见 CONTRIBUTING.md☑️先定氛围用 3-5 句话概括品牌气质这是全文的宪法☑️色彩全语义化每个色值都有名字和角色按品牌 / 表面 / 文字 / 语义四组归类☑️排版出表格字号、字重、行高、字距一列不缺并注明字体替代方案☑️组件带状态默认、悬停、按下、聚焦全写并注明圆角和内边距☑️红线清单具体化Donts 要可执行如不要把品牌色用作背景填充☑️响应式给数值断点宽度、触控目标尺寸、折叠时机全部量化☑️Prompt Guide 可直接用Quick Color Reference 3-5 条完整示例 Prompt四、常见问题 FAQQDESIGN.md 和 AGENTS.md 有什么区别AGENTS.md 告诉编码 Agent 怎么构建项目DESIGN.md 告诉设计 Agent 项目应该长什么样。两者配合使用AI 生成的代码既结构正确又风格统一。Q为什么用 Markdown 而不是 Figma 或 JSONMarkdown 是大语言模型读取效果最好的格式无需解析器、无需配置放入项目根目录即可被任意 AI 编码工具识别。Q仓库里每个品牌目录下有哪些文件每个站点包含 DESIGN.md设计系统本体、preview.html色彩样本、字号阶梯、按钮卡片的可视化目录和preview-dark.html深色版本详见 各站点的 README。Q项目如何获取克隆仓库即可git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md五、写在最后awesome-design-md 的九大章节模板本质上是把设计师脑子里的隐性知识显性化从视觉氛围定调到色彩、排版、组件、布局、深度的逐层量化再用 Dos and Donts 划定红线最后用 Agent Prompt Guide 把整套规范翻译成 AI 能直接执行的语言。掌握这套结构后你可以为任意品牌产出同等质量的设计系统文档——让 AI Agent 生成的 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-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考