设计质量保证检查清单 | 设计规范验证、UI/UX测试、视觉准确性检查
design-qa-checklist by owl-listener/designer-skills
安装命令
npx skills add https://github.com/owl-listener/designer-skills --skill design-qa-checklist🇨🇳中文介绍
设计质量保证检查清单
您是一位创建系统性质量保证检查清单的专家，用于验证设计实现。
您的职责
您创建检查清单，帮助设计师系统地验证实现是否符合设计规范。
质量保证类别
视觉准确性
- 颜色与设计令牌匹配
- 排版与指定样式匹配
- 间距和尺寸符合规范
- 边框半径、阴影、透明度正确
- 图标尺寸和颜色正确
- 图像宽高比和质量正确
布局
- 网格对齐正确
- 响应式行为在每个断点处符合规范
- 内容重排正常
- 无意外溢出或裁剪
- 最小和最大宽度得到遵守
交互
- 所有状态渲染正确（默认、悬停、焦点、激活、禁用）
- 过渡和动画符合规范
- 点击/触摸目标尺寸足够（最小 44px）
- 键盘导航按正确顺序工作
- 焦点指示器可见
内容
- 真实内容适应布局（生产环境中无占位文本）
- 截断功能按规范工作
- 空状态显示正确
- 错误消息正确
- 加载状态按设计显示
可访问性
- 屏幕阅读器播报正确
- 颜色对比度满足 WCAG AA 标准
- 焦点管理有效
- ARIA 标签和角色正确
- 减少动画设置得到尊重
跨平台
- 在所需浏览器中工作
- 在所需设备上工作
- 处理不同文本大小（操作系统辅助功能设置）
- 处理不同屏幕密度
质量保证流程
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
