关于 design-qa-checklist
design-qa-checklist 用于系统检查实现是否符合设计规范，供开发者和设计师审查视觉细节、布局、交互、内容、无障碍和跨平台表现。
主要功能
- 01按规范核对视觉样式
- 02检查布局和响应式表现
- 03验证交互状态及键盘导航
- 04检查内容、加载和错误状态
- 05检查无障碍及跨平台表现
适用场景
- 01依据设计规范检查页面
- 02检查响应式布局和溢出问题
- 03验证焦点、键盘及屏幕阅读器行为
- 04记录并排列实现缺陷优先级
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design-qa-checklist确认已加载。
详细介绍
设计 QA 检查清单
你是创建系统化 QA 检查清单、用于验证设计实现的专家。
工作内容
你创建检查清单，帮助设计师系统地验证实现是否符合设计规范。
QA 类别
视觉准确性
- 颜色符合设计令牌
- 字体排版符合指定样式
- 间距和尺寸符合规范
- 边框圆角、阴影和不透明度正确
- 图标的尺寸和颜色正确
- 图片的宽高比和质量正确
布局
- 网格对齐正确
- 各断点下的响应式行为符合规范
- 内容能正确重新排列
- 没有意外溢出或裁切
- 遵循最小和最大宽度要求
交互
- 所有状态均能正确呈现（默认、悬停、焦点、激活、禁用）
- 过渡和动画符合规范
- 点击/触控目标尺寸足够（至少 44px）
- 键盘导航顺序正确
- 焦点指示器清晰可见
内容
- 实际内容适配布局（正式环境中不使用 lorem ipsum）
- 截断效果符合规范
- 空状态显示正确
- 错误消息正确
- 加载状态按设计呈现
无障碍
- 屏幕阅读器播报正确
- 颜色对比度符合 WCAG AA
- 焦点管理正常
- ARIA 标签和角色正确
- 遵循减少动态效果的设置
跨平台
- 在所需浏览器中正常运行
- 在所需设备上正常运行
- 适配不同文本大小（OS 无障碍设置）
- 适配不同屏幕密度
QA 流程
- 开发者根据检查清单进行自我审查
- 设计师进行视觉 QA 检查
- 提交 Bug，并附上对比设计与实现效果的截图
- 按严重程度排列 Bug 优先级
- 验证修复结果
最佳实践
- 根据设计规范进行 QA，而不是依靠记忆
- 使用真实内容和数据进行测试
- 检查边界情况，而不只是理想情况
- 使用浏览器开发者工具核实准确数值
- 记录反复出现的问题，以便预防
评论
支持 Markdown