跳转到使用指南
Design QA Checklist作者 owl-listener

Design QA Checklist Skill.

把设计规范转化为实现检查项。

  • 设计验收
  • 交接
源文件解读 · design-qa-checklistSKILL.md
任务 把设计规范转化为实现检查项。 产出 依据设计规范生成、有明确范围的检查清单。 开始前的准备 清单需要设计参照;模糊意图无法证明实现精确匹配。
编辑摘要 · 源文件核查于 2026-11-02 · 非生成示例

01 功能说明

把设计规范转化为实现检查项

创建设计验收清单,覆盖视觉准确性、布局、交互、内容、无障碍及必测平台。

基于来源的工作流并非执行基准测试

工作方法

Design QA Checklist 帮助团队确认已构建界面是否符合规范,覆盖视觉数值、响应式布局、组件状态、真实内容、无障碍和平台要求。它以实际设计规范为参照,因此比凭记忆检查更能准确识别不一致。

源文件描述了从开发者自检到设计师验收、附截图的问题报告,再到修复验证的检查顺序。生成清单是在为这一过程做准备;真正执行仍需访问运行中的界面、目标设备,并完成相关辅助功能检查。

预期交付物

  • 依据设计规范生成、有明确范围的检查清单。
  • 相关视觉、响应式、交互和内容状态的检查项。
  • 针对实现偏差的问题报告和复测结构。
查看示例简报

从简报到审查

  1. 01
    阅读预期设计

    收集规范、设计变量和必测平台要求。把要求转化为检查项,明确检查者应当看到什么。

  2. 02
    覆盖状态和边界情况

    按适用范围包含悬停、焦点、激活、禁用、加载、空和错误状态。使用真实内容,检查截断、溢出和重排。

  3. 03
    检查实现

    先由开发者自检,再由设计师检查。通过浏览器工具核对准确数值,用截图进行有意义的设计稿与实现对比。

  4. 04
    确定优先级并复测

    按严重程度记录偏差,并验证修正。记录反复出现的问题类型,便于后续检查更早发现。

02 适用场景

适合什么场景

清单需要设计参照;模糊意图无法证明实现精确匹配。

适合的场景

  • 实现交接功能已经构建,需要一次明确的设计验收。
  • 可重复的团队验收开发者和设计师需要对状态及视觉细节保持同一预期。

需要检查的限制

  • 依赖规范清单需要设计参照;模糊意图无法证明实现精确匹配。
  • 仍需实际执行写好的清单不能证明已测试浏览器、设备或屏幕阅读器。
  • 交付物不同源文件将面向研发的交接规范交给 handoff-spec skill。

请提供这些输入

  • 设计规范提供布局、设计变量和预期组件行为。
  • 可运行的实现版本指出待验收实现及检查者可以进入的状态。
  • 平台矩阵明确必测浏览器、设备、文字大小和无障碍条件。

03 关键决策

影响结果的关键选择

  1. 统一预期

    开发者和设计师依据同一份明确定义的参照检查。

  2. 覆盖各类状态

    错误和空状态与默认视图一样,都是验收范围。

  3. 落实复测

    确认问题解决之前,重新检查已报告的修复。

04 示例任务

从一份具体的需求开始

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

查看源文件和环境要求

提供布局、设计变量和预期组件行为。

上游源文件
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-ops/skills/design-qa-checklist/SKILL.md

下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求;这不是安装命令。

先完成一项明确的交付物

运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。

示例简报
使用 design-qa-checklist 为新发票页面制定检查清单。阅读设计规范和设计变量定义,然后创建桌面和移动布局、空结果、加载、校验错误和禁用操作的检查项。按适用范围加入键盘顺序、可见焦点、文字放大和减少动态效果行为。使用真实示例发票,不用占位文案。区分清单准备与已执行测试。对实际观察到的实现偏差,记录预期行为、实际行为、截图证据和严重程度,并为修复保留明确复测项。

检查结果

根据以下可观察标准检查实际输出。

  • 检查项指向规范或明确的产品要求。
  • 明确区分已执行检查与未测试条件。
  • 已解决问题包含修正后状态的验证。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
owl-listener
技能文件
SKILL.md
许可证
MIT
已审查的快照
2026-11-02 · 9a6930cf84a8
编辑来源摘要
把设计规范转化为实现检查项。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前可能想问

它只是视觉检查清单吗?

不是。它也包括交互、内容、无障碍和跨平台检查。

截图能证明键盘行为正确吗?

键盘和焦点检查需要实际操作构建界面;截图用于辅助视觉对比。

验收应该使用什么内容?

源文件建议使用真实内容和边界情况,不要只依赖正常流程或占位文字。

OpenDesign

让需求和设计工作保存在一起。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程前,请检查其自身的设置说明。

上游源文件
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-ops/skills/design-qa-checklist/SKILL.md