企业官网建设流程全解析

awesome-design-md质量自检清单：发布DESIGN.md前必查的10项指标

【免费下载链接】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

如果你正准备向 awesome-design-md 贡献或发布自己的 DESIGN.md，这份质量自检清单能帮你在提交前逐项核对。DESIGN.md是 AI 代理读取的设计系统文档，决定生成页面的视觉一致性——文档质量直接决定 UI 生成质量。下面基于仓库中 73 份真实文件的通用规范，整理出发布前必查的 10 项指标。

为什么需要一份 DESIGN.md 质量自检清单

awesome-design-md 是一个知名品牌设计系统的 DESIGN.md 精选合集：把某个站点的DESIGN.md放进项目根目录，告诉 AI 编码代理"照着这个风格构建页面"，就能生成风格一致的 UI。

但"能跑"和"专业"是两回事。一份粗糙的 DESIGN.md 会让代理产出生硬、不一致的界面；一份高质量的文档则包含分析过的模式、设计令牌（tokens）和明确规则。仓库官方要求所有文件遵循 Stitch DESIGN.md 格式，共 9 个标准章节：

以下 10 项指标就围绕这套结构展开。💡 建议逐项对照打分，10 项全过再发布。

快速开始：获取标杆样本对照检查

先克隆仓库，把里面的文件当作"及格线"参照物：

git clone https://link.gitcode.com/i/96faeeeef6c7a7448668c278ae689c45

推荐对照这三份不同风格的标杆文件：

• design-md/vercel/DESIGN.md：黑白极简 + 渐变装饰，结构最完整
• design-md/linear.app/DESIGN.md：深色产品风，单一强调色
• design-md/tesla/DESIGN.md：严格执行 9 章节编号格式

对照方法很简单：打开你自己的文档和标杆文件并排放，缺哪一节补哪一节。

指标 1：Frontmatter 元数据三要素齐全

每个 DESIGN.md 开头都有一段 YAML frontmatter，最小要求是：

--- version: alpha name: 你的品牌-design-analysis description: 一句话概括设计语言（色彩、氛围、字体气质） ---

以 design-md/vercel/DESIGN.md 为例，description 不仅写了"黑白双音 + 网格式渐变装饰"，还点明了装饰系统在整个页面中的角色。自检要点：版本、名称、描述三者齐备，且描述不是"现代简洁风"这种空话，而是具体到色板、字体和装饰语言。

指标 2：色彩令牌 = 语义名 + 色值 + 角色

仓库的通行写法是语义名: "#十六进制"三件套，例如 Vercel 文档中的色彩块：

colors: primary: "#171717" on-primary: "#ffffff" canvas: "#ffffff" canvas-soft: "#fafafa" hairline: "#ebebeb"

自检要点：

• 每个色值都有语义化命名（canvas、hairline、ink），而不是color1、blue
• 正文中说明该色的功能角色（Vercel 文档为每个主色单独写了使用场景）
• 对照站点实际页面核实色值——CONTRIBUTING.md 明确把"修复错误色值、缺失令牌"列为首要改进方向

指标 3：色彩数量克制，强调色不超过"一套系统"

好文档的色板是收敛的。Linear 的文档中全品牌只有一枚色彩强调色#5e6ad2（薰衣草蓝），其余全是墨黑、表面灰阶与中性文字色。

自检要点：数一数你的强调色有几个。如果超过 2~3 种彩色强调，要么删掉、要么解释它们为什么构成一套体系。同时检查 success / warning / error 等语义色是否齐备——表单类产品尤其需要。

指标 4：排版层级表覆盖全部字级

排版部分应给出一张完整的层级表，每一级都带齐fontFamily / fontSize / fontWeight / lineHeight / letterSpacing。Vercel 文档的表格包含 13 个字级，从 48px 的 display-xl 一直排到 12px 的 caption。

自检要点：

• 是否至少覆盖：展示级标题、卡片标题、正文、次级文字、按钮文字
• 负字距等品牌特征是否写明（Vercel 明确说"-2.4px 字距是品牌声音的一部分，恢复默认字距会毁掉品牌感"）
• 专有字体是否给出开源替代（Vercel 标注了 Inter、JetBrains Mono 作为备选）

指标 5：间距刻度成系统，不出现"魔法数字"

所有间距都应来自同一刻度。Vercel 的基础单位是 4px，全部令牌都是 4 的倍数：

spacing: xs: 8px sm: 12px md: 16px lg: 24px section: 192px

自检要点：全文出现的数值能否全部归入这套刻度？卡片内边距、组件间隔、区块留白是否各自对应明确令牌（如"营销卡片 24px，模板网格卡片 16px"）？出现刻度外的值，要么解释原因，要么改掉。

指标 6：组件样式带状态，引用令牌而非裸值

组件部分应覆盖按钮、卡片、输入框、导航四类核心组件，且每个组件的属性引用令牌而不是硬编码，例如{colors.primary}、{rounded.pill}、{spacing.sm}。

自检要点：

• 主按钮是否写明背景/文字/字号/圆角/高度五要素
• 是否有 hover / active / focus 等交互状态（Vercel 连导航按钮的 28px 高度都标注了）
• 组件引用链是否可解析——{colors.xxx}里的名字必须在色彩块里真实存在，这是最容易出现的"断链"问题

指标 7：布局与响应式策略明确

这部分回答"页面骨架"问题：容器最大宽度、栅格列数、断点行为。Vercel 文档给出了五档断点表（<600px 移动 / 600–959 平板 / 960–1199 桌面 / 1200–1399 / ≥1400 超宽），并说明每档下三列网格如何降为 2 列、1 列。

自检要点：断点数值是否列出？触控目标是否达到 44×44px 底线？折叠策略（导航收汉堡菜单、卡片纵向堆叠）是否写清？

指标 8：阴影与层次分级，而非一句"轻微阴影"

专业文档会把阴影做成分级系统。Vercel 定义了 Level 0（无阴影的沉浸式区块）到 Level 5（模态框）共 6 级，每级都给出具体偏移值，并强调"用多层小偏移堆叠模拟自然光，绝不使用单个大模糊投影"。

自检要点：阴影是否有明确的 Level 编号？卡片默认在哪一级、模态框在哪一级？"卡片靠 1px 内嵌描边 + 柔和光晕悬浮"这类规则是否写明？

指标 9：Do's and Don'ts 护栏写得出具体反模式

这是区分"描述文档"和"护栏文档"的关键一节。Vercel 的 Don't 列表具体到操作层面：

• 不要引入第六种强调色
• 不要把标题渲染成全大写
• 不要把品牌渐变缩小到图标尺寸
• 不要让几何无衬线字体超过 600 字重

自检要点：你的 Don'ts 是否都是可执行的禁止项？"不要做得太丑"不算；"不要把 100px 药丸 CTA 和 6px 导航圆角混用在同一屏"才算。

指标 10：Agent 提示指南 + 无占位符残留

最后两查：

1. Agent Prompt Guide：提供快速取色参考和"复制即用"的提示词（tesla 的文档将其列为第 9 章），让代理不用通读全文也能快速上手
2. 无占位符残留：用编辑器搜索TO_FILL、TODO等标记，确保没有未完成的推导项——这是评审者一眼就会抓的问题

发布前最后一遍：对照贡献规范

自检通过后，再读一遍 CONTRIBUTING.md：先开 issue 与维护者讨论、与线上站点对比核对色值、更新preview.html与preview-dark.html预览页（如果改动影响展示令牌），最后在 PR 中附上修改前后理由。

📌一句话总结：10 项指标过全 + 令牌零断链 + 预览页同步更新，你的 DESIGN.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