关于 quality-checklist
Quality Checklist 是一项设计评审技能，可用于评估当前对话中的设计。它按层级、字体、颜色、间距、细节和设计系统扩展性进行检查，并将清单作为诊断工具，而非简单的通过或失败判断。
主要功能
- 01检查视觉层级
- 02检查字体与颜色
- 03评估间距和细节
- 04评估设计系统扩展性
- 05提示常见评审误区
适用场景
- 01评审屏幕设计
- 02检查无障碍对比度
- 03评估组件的一致性
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/quality-checklist确认已加载。
详细介绍
质量检查清单
系统性检查设计质量的各个维度。
使用方法
/quality-checklist对本次对话中的任意设计进行质量评估。
约束
层级
- 每个屏幕都有清晰的主元素
- 视觉权重与内容优先级相符
- 同一层级中没有无意争夺注意力的元素
- 视线遵循预期的阅读顺序
排版
- 字号比例采用一致的尺度
- 字重的使用有明确且系统化的用途
- 行高设置恰当（标题更紧凑，正文更宽松）
- 每个屏幕的字号不超过 4-6 种，并且有明确依据
- 字体风格与产品调性相符
颜色
- 每种颜色都有明确且不重叠的用途
- 语义颜色在各处保持一致
- 中性色承担 80-90% 的主要视觉工作
- 对比度满足无障碍要求（至少达到 WCAG AA）
空间
- 间距遵循一致的尺度
- 邻近关系能准确表达元素之间的关联
- 信息密度与使用场景相符
- 页边距留白恰当
工艺
- 不同类型元素的边框圆角保持一致
- 需要对齐的元素达到像素级精准
- 覆盖所有状态：加载、空状态、错误、成功、溢出
- 过渡效果目的明确且时长一致
系统
- 设计可以扩展到另外 10 个屏幕而不出问题
- 其他设计师无需询问即可扩展设计
- 组件可复用，而非一次性制作
- 系统中的偏离是有意为之，而非无心造成
反模式
- 只检查视觉润色，忽略信息架构
- 将清单视为通过或不通过的判定，而非诊断工具
- 只运行一次清单，之后不再复查
评论
支持 Markdown