Awesome DESIGN.md：给 AI 选设计参照，而不是照抄品牌

介绍 VoltAgent/awesome-design-md：把成熟产品的可见设计语言整理成 DESIGN.md，帮助 Claude Code、Codex、OpenCode 或 Open Design 先获得清晰的视觉规则，再生成自己的网页、文档或后台原型。

内容更新 2026-08-03

先看结论

Awesome DESIGN.md 不是一键抄网站的素材包，而是一组可读的设计说明书：先选一个适合任务的视觉方向，再把原则改写成自己的 DESIGN.md 和验收标准。

操作步骤

  1. 先写清页面职责和用户任务，例如“技术文档需要快速找到配置”，不要先挑一个看起来酷的品牌
  2. 只选一个主参照；需要补充时最多再选一个，避免把 Linear、Notion、The Verge 等规则混成没有中心的拼贴
  3. 阅读参照 DESIGN.md 里的视觉氛围、颜色角色、字体层级、组件状态、布局与响应式，不必照搬全部 token
  4. 把适合自己的原则改写成项目 DESIGN.md：保留信息层级、阅读宽度、强调色使用范围和移动端规则，替换成自己的内容与品牌 token
  5. 让 Agent 先生成一个可预览页面，再按“可读性、任务完成、移动端、无障碍、品牌区分度”验收，而不是只评价“像不像”

DESIGN.md 到底解决什么

  • AGENTS.md 解决“怎么做项目”；DESIGN.md 解决“页面应该呈现什么视觉语言”。两者一起用，Agent 才不容易一边写对功能、一边做出随机界面。
  • 它最有价值的不是某个 hex 色值，而是把颜色用途、字号层级、边框、圆角、间距、交互状态和响应式规则放在同一份可审查说明里。
  • 它适合原型、设计探索和项目内的视觉约束；不替代品牌手册、设计评审、Figma 源文件或生产质量保证。

按任务选参照，不按名气选

  • 技术文档 / 配置中心：优先研究 Mintlify 的阅读优先布局、侧栏 / 正文 / 目录分工、代码与提示框层级。
  • 暗色产品工具 / Dashboard：优先研究 Linear 的近黑画布、单一强调色、细边框和紧凑产品信息层级。
  • 知识库 / 工作台：可研究 Notion 的内容分组和柔和表面，但应替换成自己的品牌色与内容结构。
  • 数字杂志 / 内容专题：可研究 The Verge 的章节节奏、色彩作为层级和媒体卡片节拍；不要复刻其排版、标题或视觉资产。

从参照到自己的 DESIGN.md：5 步就够

  1. 摘取 5-8 条可迁移规则，例如“正文最大宽度”“主要 CTA 只用一种强调色”“代码与正文的字体角色不同”。
  2. 为自己的项目重命名 token，例如把“Linear lavender”改成“品牌强调色”，不要把第三方品牌名写成自己的设计变量。
  3. 写清 Do / Don't：哪些页面可用卡片、哪些不允许大 Hero、什么情况下才出现动效或渐变。
  4. 补上移动端：导航如何收起、表格和代码如何滚动、按钮触控区域多大、内容先后顺序如何变化。
  5. 把这份自有 DESIGN.md 和一个小页面一起交给 Agent；先验证一个页面，再扩展到整站。

可复制的设计任务模板

请为 {产品/页面} 生成一个可预览原型。

页面职责：{帮助用户完成什么任务}
目标用户：{谁使用，最常见的设备}
主参照：{Mintlify / Linear / Notion / The Verge 中的一种}，只学习其公开的设计原则，不复制品牌名、Logo、文案、图片、专有字体或原页面布局。

必须保留：
- {3-6 个内容或功能模块}
- {信息优先级和阅读/操作路径}
- {移动端规则}

视觉规则：
- 颜色：{自己的主色、强调色、语义色}
- 字体与层级：{正文、代码、标题如何区分}
- 组件：{按钮、卡片、输入框、提示框的状态}
- 禁止：{例如不要 3D、不要粒子、不要大面积渐变、不要过度毛玻璃}

先输出：页面结构 + 一个可预览版本 + 5 条验收检查；不要声称与参照品牌有关联。

生成后先检查这 6 件事

  1. 5 秒内能看出页面用途和下一步动作，而不是先被装饰吸走注意力。
  2. 标题、正文、代码、提示框和按钮有清晰层级；长内容不会被巨型 Hero 挤出首屏。
  3. 强调色只承担主操作、选中或状态，不在每张卡片上同时发光。
  4. 键盘焦点、对比度、按钮点击区域、移动端折叠和横向滚动都能正常使用。
  5. 没有第三方品牌的名称、Logo、截图、专有字体、营销文案或容易造成官方关联误解的说法。
  6. 用真实或严格去标识化内容复查一遍，避免占位文案掩盖阅读和布局问题。

许可证、品牌与版权边界

  • awesome-design-md 本身采用 MIT 许可证；使用仓库中的说明时保留必要的许可证与来源信息。
  • MIT 不等于取得被分析品牌的商标、Logo、产品文案、图片、专有字体或整页商业外观；这些仍要单独判断授权。
  • 正确做法是提炼“规则”，例如阅读宽度、状态层级、单一强调色、响应式策略；不要交付“仿某品牌官网”的成品。
  • 项目会持续更新，具体 DESIGN.md 数量、内容和维护状态以 GitHub 当前仓库为准。

参考来源

适合谁看

  • 页面结构已经有了，但 AI 每次生成的颜色、间距、卡片和字体都不稳定
  • 想用 Codex、Claude Code、OpenCode 或 Open Design 做知识库、产品页、Dashboard 或客户 Demo 原型
  • 需要给客户或团队明确视觉方向，但还没有完整 Figma 设计系统

需要解决的问题

  • 提示词只写“高级、科技、像某某网站”，结果变成泛用渐变和卡片堆砌
  • 同一项目的页面各长各的，按钮、圆角、间距和层级不一致
  • 拿到参考网站后只会截图，让 Agent 猜风格，无法变成可执行规则

先理解这些

  • DESIGN.md 用自然语言把视觉氛围、颜色角色、字体层级、组件状态、布局、响应式和禁用项写成 Agent 能读取的说明
  • 截至 2026-08-03，VoltAgent/awesome-design-md README 列出 73 份公开网站分析，按 AI、开发工具、SaaS、设计工具、媒体等场景分类
  • 仓库采用 MIT 许可证，但参考的是公开可见的视觉特征；品牌名称、Logo、文案、图片、专有字体和产品界面仍不能当作自己的资产

遇到困难时

  • 如果不知道选哪套，知识库或帮助页先看 Mintlify 的阅读型三栏思路；暗色产品工具先看 Linear 的单一强调色和克制层级
  • 如果想做内容杂志感，只借 The Verge 的章节节奏和色彩层级，不借其标题、版式、图片或品牌标记
  • 如果生成结果仍像模板，先减少参考数量，补充“必须有 / 禁止有 / 移动端如何折叠 / 什么算完成”四类约束
  • 如果要上线，不要把参考 DESIGN.md 当生产规范；仍要做真实内容、可访问性、性能、版权和浏览器测试