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 个标准章节#章节作用1视觉主题与氛围情绪、密度、设计哲学2色彩调色板与角色语义名 色值 功能角色3排版规则字体族、完整层级表4组件样式按钮/卡片/输入框及状态5布局原则间距刻度、网格、留白6深度与层次阴影系统、表面层级7允许与禁止设计护栏与反模式8响应式行为断点、触控目标、折叠策略9Agent 提示指南快速取色参考、即用提示词以下 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 章节编号格式对照方法很简单打开你自己的文档和标杆文件并排放缺哪一节补哪一节。指标 1Frontmatter 元数据三要素齐全每个 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 内嵌描边 柔和光晕悬浮这类规则是否写明指标 9Dos and Donts 护栏写得出具体反模式这是区分描述文档和护栏文档的关键一节。Vercel 的 Dont 列表具体到操作层面不要引入第六种强调色不要把标题渲染成全大写不要把品牌渐变缩小到图标尺寸不要让几何无衬线字体超过 600 字重自检要点你的 Donts 是否都是可执行的禁止项不要做得太丑不算不要把 100px 药丸 CTA 和 6px 导航圆角混用在同一屏才算。指标 10Agent 提示指南 无占位符残留最后两查Agent Prompt Guide提供快速取色参考和复制即用的提示词tesla 的文档将其列为第 9 章让代理不用通读全文也能快速上手无占位符残留用编辑器搜索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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考