一句话结论
Awesome DESIGN.md 不是一键抄网站的素材包，而是一组可读的设计说明书：先选一个适合任务的视觉方向，再把原则改写成自己的 DESIGN.md 和验收标准。
适用场景
- 页面结构已经有了，但 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、文案、图片、专有字体和产品界面仍不能当作自己的资产
解决步骤
- 先写清页面职责和用户任务，例如“技术文档需要快速找到配置”，不要先挑一个看起来酷的品牌
- 只选一个主参照；需要补充时最多再选一个，避免把 Linear、Notion、The Verge 等规则混成没有中心的拼贴
- 阅读参照 DESIGN.md 里的视觉氛围、颜色角色、字体层级、组件状态、布局与响应式，不必照搬全部 token
- 把适合自己的原则改写成项目 DESIGN.md：保留信息层级、阅读宽度、强调色使用范围和移动端规则，替换成自己的内容与品牌 token
- 让 Agent 先生成一个可预览页面，再按“可读性、任务完成、移动端、无障碍、品牌区分度”验收，而不是只评价“像不像”
仍然不行怎么办
- 如果不知道选哪套，知识库或帮助页先看 Mintlify 的阅读型三栏思路；暗色产品工具先看 Linear 的单一强调色和克制层级
- 如果想做内容杂志感，只借 The Verge 的章节节奏和色彩层级，不借其标题、版式、图片或品牌标记
- 如果生成结果仍像模板，先减少参考数量，补充“必须有 / 禁止有 / 移动端如何折叠 / 什么算完成”四类约束
- 如果要上线，不要把参考 DESIGN.md 当生产规范；仍要做真实内容、可访问性、性能、版权和浏览器测试
DESIGN.md 到底解决什么
- AGENTS.md 解决“怎么做项目”；DESIGN.md 解决“页面应该呈现什么视觉语言”。两者一起用，Agent 才不容易一边写对功能、一边做出随机界面。
- 它最有价值的不是某个 hex 色值，而是把颜色用途、字号层级、边框、圆角、间距、交互状态和响应式规则放在同一份可审查说明里。
- 它适合原型、设计探索和项目内的视觉约束；不替代品牌手册、设计评审、Figma 源文件或生产质量保证。
按任务选参照，不按名气选
- 技术文档 / 配置中心：优先研究 Mintlify 的阅读优先布局、侧栏 / 正文 / 目录分工、代码与提示框层级。
- 暗色产品工具 / Dashboard：优先研究 Linear 的近黑画布、单一强调色、细边框和紧凑产品信息层级。
- 知识库 / 工作台：可研究 Notion 的内容分组和柔和表面，但应替换成自己的品牌色与内容结构。
- 数字杂志 / 内容专题：可研究 The Verge 的章节节奏、色彩作为层级和媒体卡片节拍；不要复刻其排版、标题或视觉资产。
从参照到自己的 DESIGN.md：5 步就够
- 摘取 5-8 条可迁移规则，例如“正文最大宽度”“主要 CTA 只用一种强调色”“代码与正文的字体角色不同”。
- 为自己的项目重命名 token，例如把“Linear lavender”改成“品牌强调色”，不要把第三方品牌名写成自己的设计变量。
- 写清 Do / Don't：哪些页面可用卡片、哪些不允许大 Hero、什么情况下才出现动效或渐变。
- 补上移动端：导航如何收起、表格和代码如何滚动、按钮触控区域多大、内容先后顺序如何变化。
- 把这份自有 DESIGN.md 和一个小页面一起交给 Agent；先验证一个页面，再扩展到整站。
可复制的设计任务模板
请为 {产品/页面} 生成一个可预览原型。
页面职责：{帮助用户完成什么任务}
目标用户：{谁使用，最常见的设备}
主参照：{Mintlify / Linear / Notion / The Verge 中的一种}，只学习其公开的设计原则，不复制品牌名、Logo、文案、图片、专有字体或原页面布局。
必须保留：
- {3-6 个内容或功能模块}
- {信息优先级和阅读/操作路径}
- {移动端规则}
视觉规则：
- 颜色：{自己的主色、强调色、语义色}
- 字体与层级：{正文、代码、标题如何区分}
- 组件：{按钮、卡片、输入框、提示框的状态}
- 禁止：{例如不要 3D、不要粒子、不要大面积渐变、不要过度毛玻璃}
先输出：页面结构 + 一个可预览版本 + 5 条验收检查；不要声称与参照品牌有关联。
生成后先检查这 6 件事
- 5 秒内能看出页面用途和下一步动作，而不是先被装饰吸走注意力。
- 标题、正文、代码、提示框和按钮有清晰层级；长内容不会被巨型 Hero 挤出首屏。
- 强调色只承担主操作、选中或状态，不在每张卡片上同时发光。
- 键盘焦点、对比度、按钮点击区域、移动端折叠和横向滚动都能正常使用。
- 没有第三方品牌的名称、Logo、截图、专有字体、营销文案或容易造成官方关联误解的说法。
- 用真实或严格去标识化内容复查一遍，避免占位文案掩盖阅读和布局问题。
许可证、品牌与版权边界
- awesome-design-md 本身采用 MIT 许可证；使用仓库中的说明时保留必要的许可证与来源信息。
- MIT 不等于取得被分析品牌的商标、Logo、产品文案、图片、专有字体或整页商业外观；这些仍要单独判断授权。
- 正确做法是提炼“规则”，例如阅读宽度、状态层级、单一强调色、响应式策略；不要交付“仿某品牌官网”的成品。
- 项目会持续更新，具体 DESIGN.md 数量、内容和维护状态以 GitHub 当前仓库为准。
还卡着？
仅把删除凭证、客户数据和环境变量值后的必要截图、日志片段、需求说明或当前页面链接发到 zhemuy@gmail.com。