Back to Details

design-qa

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design - QA

设计-QA

This skill guides Claude through systematic design quality assurance - reviewing implemented products against design specifications, brand guidelines, and best practices to ensure high-quality execution.
本技能引导Claude完成系统化的设计质量保证工作：对照设计规范、品牌指南和最佳实践评审已实现的产品，确保高质量的交付效果。

Core Methodology

核心方法论

Purpose of Design QA

设计QA的用途

Design QA serves multiple purposes:
  • Validation: Confirm implementation matches design specifications
  • Quality Control: Catch visual and interaction bugs before users do
  • Spec Improvement: Identify gaps or ambiguities in design documentation
  • Consistency: Ensure brand and design system adherence
  • Accessibility: Verify WCAG compliance and inclusive design
设计QA可实现多个目标：
  • 验证：确认实现效果与设计规范一致
  • 质量控制：在用户发现前捕获视觉与交互bug
  • 规范优化：识别设计文档中的缺口或模糊之处
  • 一致性：确保遵循品牌与设计系统要求
  • 可访问性：验证WCAG合规性与包容性设计

Design QA is NOT User Testing

设计QA不等于用户测试

This skill focuses on design implementation, not user experience validation:
  • ✅ "Does this button match the spec?"
  • ✅ "Is spacing consistent across screens?"
  • ✅ "Do hover states work correctly?"
  • ❌ "Do users understand this flow?" (That's user research)
本技能聚焦于设计实现效果，而非用户体验验证：
  • ✅ 「这个按钮符合规范吗？」
  • ✅ 「不同页面的间距是否一致？」
  • ✅ 「hover态是否正常工作？」
  • ❌ 「用户能理解这个流程吗？」（属于用户研究范畴）

Design QA Process

设计QA流程

  1. Review Preparation: Gather specs, guidelines, context
  2. Systematic Review: Check implementation against specifications
  3. Issue Documentation: Log discrepancies with clear evidence
  4. Severity Assessment: Prioritize issues by impact
  5. Feedback Delivery: Provide actionable recommendations
  6. Validation: Confirm fixes meet specifications
  1. 评审准备：收集规范、指南、上下文信息
  2. 系统评审：对照规范检查实现效果
  3. 问题记录：用清晰的证据记录差异点
  4. 严重程度评估：按影响优先级排序问题
  5. 反馈交付：提供可落地的建议
  6. 验证：确认修复内容符合规范

Tool Usage Patterns

工具使用模式

Initial Setup & Context Gathering

初始设置与上下文收集

Step 1: Collect Reference Materials
Questions to ask user:
1. What product/feature are we reviewing?
2. Where can I access it? (URL, staging link, screenshots)
3. Do you have design specs or Figma files?
4. Are there brand guidelines to check against?
5. Any specific concerns or focus areas?
6. What's the review scope? (specific screens/flows or full product)

Use `view` to read:
- Design specification documents
- Design system documentation
- Brand guidelines
- Previous QA reports (if any)

Use `web_fetch` to:
- Load the live product/staging site
- Analyze HTML, CSS, interactions
- Test responsive behavior
Step 2: Understand the Specification Before reviewing implementation:
  • Read design specs completely
  • Note all specified states (hover, active, focus, disabled, loading, error)
  • Identify defined interactions and animations
  • Review responsive breakpoints
  • Check accessibility requirements
  • List any open questions or ambiguities
步骤1：收集参考材料
需要向用户询问的问题：
1. 我们正在评审的产品/功能是什么？
2. 我可以在哪里访问它？（URL、预发布环境链接、截图）
3. 是否有设计规范或Figma文件？
4. 是否需要对照品牌指南检查？
5. 有没有特定的关注点或重点领域？
6. 评审范围是什么？（特定页面/流程或完整产品）

使用`view`读取：
- 设计规范文档
- 设计系统文档
- 品牌指南
- 过往QA报告（如有）

使用`web_fetch`：
- 加载线上产品/预发布站点
- 分析HTML、CSS、交互效果
- 测试响应式表现
步骤2：理解设计规范 评审实现效果前：
  • 完整阅读设计规范
  • 记录所有指定的状态（hover、active、focus、disabled、loading、error）
  • 明确定义好的交互和动画效果
  • 梳理响应式断点
  • 检查可访问性要求
  • 列出所有未解决的问题或模糊点

Conducting Systematic Review

开展系统评审

Visual Design Review:
For each screen/component:
1. Layout & Spacing
   - Compare actual spacing to spec
   - Check alignment and grid adherence
   - Verify padding and margins

2. Typography
   - Font family, size, weight, line height
   - Text color and contrast
   - Hierarchy and consistency

3. Colors
   - Background colors match design tokens
   - Text colors meet contrast requirements
   - Interactive elements use correct states

4. Visual Elements
   - Icons correct size and style
   - Images display at correct resolution
   - Borders, shadows, radius match spec

5. Components
   - Match design system patterns
   - Consistent across screens
   - All variants implemented correctly
Interaction Review:
For each interactive element:
1. States
   - Default, hover, active, focus, disabled
   - Loading and success states
   - Error states and validation

2. Animations & Transitions
   - Duration matches spec
   - Easing function correct
   - Performance (no jank or lag)

3. Behavior
   - Click/tap responses correctly
   - Keyboard navigation works
   - Focus order logical
   - Modals/overlays function properly
Responsive Design Review:
Test at multiple breakpoints:
- Mobile (320px, 375px, 414px)
- Tablet (768px, 1024px)
- Desktop (1280px, 1440px, 1920px)

Check for:
- Layout adaptation matches spec
- Content reflow works properly
- Touch targets adequate on mobile (min 44x44 / 48x48)
- No horizontal scrolling (unless intentional)
- Images scale appropriately
Accessibility Review:
Keyboard Navigation:
- Tab order logical
- All interactive elements focusable
- Focus indicators visible
- Escape/Enter work as expected

Screen Reader:
- Alt text on images
- Form labels associated
- ARIA labels where needed
- Error messages announced

Color & Contrast:
- Text contrast 4.5:1 minimum
- UI elements 3:1 minimum
- Test with color blindness simulation
- Don't rely on color alone

Content:
- Headings hierarchical (h1, h2, h3)
- Links descriptive
- Button text meaningful
- Form errors clear
视觉设计评审：
针对每个页面/组件：
1. 布局与间距
   - 对比实际间距与规范要求
   - 检查对齐和网格遵循情况
   - 验证内边距和外边距

2. 排版
   - 字体家族、字号、字重、行高
   - 文字颜色和对比度
   - 层级和一致性

3. 颜色
   - 背景颜色匹配设计token
   - 文字颜色满足对比度要求
   - 交互元素使用正确的状态色

4. 视觉元素
   - 图标尺寸和样式正确
   - 图片以正确分辨率展示
   - 边框、阴影、圆角符合规范

5. 组件
   - 匹配设计系统模式
   - 跨页面保持一致
   - 所有变体都正确实现
交互评审：
针对每个交互元素：
1. 状态
   - 默认、hover、active、focus、disabled
   - loading和成功状态
   - 错误状态和校验逻辑

2. 动画与转场
   - 时长符合规范
   - 缓动函数正确
   - 性能流畅（无卡顿/延迟）

3. 行为
   - 点击/轻触响应正确
   - 键盘导航正常工作
   - 焦点顺序符合逻辑
   - 模态框/浮层功能正常
响应式设计评审：
在多个断点下测试：
- 移动端（320px、375px、414px）
- 平板（768px、1024px）
- 桌面端（1280px、1440px、1920px）

检查点：
- 布局适配符合规范
- 内容重排正常工作
- 移动端触摸目标足够大（最小44x44 / 48x48）
- 无横向滚动（除非是特意设计的）
- 图片适配缩放正常
可访问性评审：
键盘导航：
- Tab顺序符合逻辑
- 所有交互元素可获得焦点
- 焦点指示器可见
- Escape/Enter按键表现符合预期

屏幕阅读器：
- 图片有alt文本
- 表单标签已关联
- 必要时添加ARIA标签
- 错误消息可被播报

颜色与对比度：
- 文字对比度最低4.5:1
- UI元素对比度最低3:1
- 用色盲模拟测试
- 不单独依赖颜色传递信息

内容：
- 标题层级合理（h1、h2、h3）
- 链接描述清晰
- 按钮文字有实际意义
- 表单错误提示清晰

Issue Documentation

问题记录

Issue Report Structure:
markdown
undefined
问题报告结构:
markdown
undefined

[Issue Title] - [Severity]

[问题标题] - [严重程度]

Location: [Screen name / Component name / URL]
Expected (per spec): [What the design spec says should happen] [Include screenshot from Figma or design file]
Actual (implementation): [What actually appears/happens] [Include screenshot or video of implementation]
Discrepancy: [Specific difference, with measurements if applicable] Example: "Button padding is 8px instead of specified 12px"
Impact: [How this affects user experience or brand]
Recommendation: [Specific fix needed]
Severity: [Critical / High / Medium / Low]
Device/Browser: [Where issue was observed]
undefined
位置：[页面名称 / 组件名称 / URL]
预期效果（根据规范）： [设计规范要求的效果] [附上Figma或设计文件的截图]
实际效果（实现情况）： [实际展示/发生的情况] [附上实现效果的截图或视频]
差异点： [具体差异，如有必要附上测量值] 示例：「按钮内边距为8px，而非规范要求的12px」
影响：[该问题对用户体验或品牌的影响]
建议：[需要的具体修复方案]
严重程度：[严重 / 高优 / 中优 / 低优]
设备/浏览器：[问题出现的环境]
undefined

Severity Assessment

严重程度评估

Critical (Must fix before launch):
  • Broken functionality (buttons don't work, forms don't submit)
  • Accessibility violations preventing use (keyboard trap, missing alt text on critical images)
  • Major brand violations (wrong logo, off-brand colors prominently)
  • Data loss or security issues
High (Should fix before launch):
  • Significant visual discrepancies (wrong colors, incorrect spacing system-wide)
  • Inconsistent component usage (different button styles for same actions)
  • Accessibility issues affecting many users (poor contrast, confusing navigation)
  • Broken responsive behavior on common devices
Medium (Fix in next sprint):
  • Minor visual discrepancies (slightly off spacing on one screen)
  • Missing micro-interactions specified in design
  • Inconsistent hover states
  • Accessibility improvements (better focus indicators)
Low (Nice to have):
  • Very minor spacing tweaks
  • Animation polish
  • Edge case visual issues
  • Non-critical enhancement suggestions
严重（上线前必须修复）：
  • 功能损坏（按钮无法点击、表单无法提交）
  • 可访问性违规导致无法使用（键盘陷阱、关键图片缺失alt文本）
  • 严重品牌违规（错误logo、大面积使用不符合品牌的颜色）
  • 数据丢失或安全问题
高优（上线前应该修复）：
  • 明显的视觉差异（全系统范围的颜色错误、间距不符合要求）
  • 组件使用不一致（相同功能的按钮样式不同）
  • 影响大量用户的可访问性问题（对比度不足、导航混乱）
  • 常见设备上响应式表现损坏
中优（下个迭代修复）：
  • 轻微视觉差异（单个页面间距略微偏差）
  • 设计中指定的微交互缺失
  • hover状态不一致
  • 可访问性优化（更好的焦点指示器）
低优（锦上添花）：
  • 非常细微的间距调整
  • 动画优化
  • 边缘场景下的视觉问题
  • 非核心的增强建议

Quality Criteria

质量标准

Excellent Design QA Reports:

优秀的设计QA报告：

  • Systematic: Reviews all aspects (visual, interaction, responsive, accessibility)
  • Evidence-based: Screenshots, measurements, specific examples
  • Actionable: Clear recommendations, not just "doesn't match"
  • Prioritized: Severity levels help teams focus on what matters
  • Fair: Acknowledges spec gaps, doesn't blame implementation for unclear designs
  • Complete: Covers all specified screens and states
  • Constructive: Frames issues as opportunities to improve
  • 系统化：覆盖所有维度（视觉、交互、响应式、可访问性）
  • 基于证据：包含截图、测量值、具体示例
  • 可落地：清晰的建议，而非仅说「不符合要求」
  • 优先级明确：严重程度分级帮助团队聚焦核心问题
  • 客观：承认规范缺口，不因为设计不清晰指责实现方
  • 完整：覆盖所有指定的页面和状态
  • 有建设性：将问题表述为改进的机会

Excellent Issue Documentation:

优秀的问题记录：

  • Specific: "Padding 8px instead of 12px" not "spacing is wrong"
  • Visual: Screenshots showing expected vs. actual
  • Contextual: Explains why it matters, not just that it's different
  • Solution-oriented: Suggests fix, not just problem
  • Traceable: Links back to specific line in design spec
  • 具体：「内边距8px而非12px」而非「间距有问题」
  • 可视化：展示预期与实际效果的对比截图
  • 有上下文：解释问题的影响，而非仅说明存在差异
  • 面向解决方案：给出修复建议，而非仅提出问题
  • 可溯源：关联到设计规范的具体条目

Deliverable Formats

交付物格式

File Organization

文件组织

IMPORTANT: Organize all deliverables by feature/assignment in dated folders.
Each QA review project should be saved in its own folder with the feature name: 
docs/design/{feature-name}-qa-{MMDDYY}/
Feature Name Guidelines:
  • Use kebab-case (lowercase with hyphens)
  • Examples: 
    checkout-flow
    , 
    user-profile
    , 
    dashboard-redesign
    , 
    search-filters
  • Ask the user for the feature name if not provided
  • Suggest a name based on their description if needed
Examples:
  • Checkout flow QA review on Oct 24, 2025: 
    docs/design/checkout-flow-qa-102425/
  • Checkout flow post-fixes QA on Nov 1, 2025: 
    docs/design/checkout-flow-qa-110125/
  • User profile QA on Nov 10, 2025: 
    docs/design/user-profile-qa-111025/
Rationale:
  • Immediate clarity: Know what feature each QA review relates to
  • Version history: Same feature can have multiple dated QA reviews
  • No conflicts: Different features can have same-named files
  • Clear tracking: Which issues correspond to which feature/build
  • Organized: All QA artifacts for one feature stay together
Folder structure:
docs/design/{feature-name}-qa-{MMDDYY}/
├── {feature-name}-qa-report.md
├── {feature-name}-issues.csv
├── {feature-name}-spec-improvements.md
└── {feature-name}-screenshots/
    ├── issue-001-button-spacing.png
    ├── issue-002-color-contrast.png
    └── expected-vs-actual-comparison.png
重要提示：按功能/任务将所有交付物整理到带日期的文件夹中。
每个QA评审项目都应保存到独立的功能命名文件夹中： 
docs/design/{feature-name}-qa-{MMDDYY}/
功能名称规范：
  • 使用kebab-case（小写字母加连字符）
  • 示例：
    checkout-flow
    、
    user-profile
    、
    dashboard-redesign
    、
    search-filters
  • 如未提供功能名称可向用户询问
  • 必要时可根据用户描述建议名称
示例：
  • 2025年10月24日的结账流程QA评审：
    docs/design/checkout-flow-qa-102425/
  • 2025年11月1日的结账流程修复后QA：
    docs/design/checkout-flow-qa-110125/
  • 2025年11月10日的用户资料QA：
    docs/design/user-profile-qa-111025/
逻辑说明：
  • 直观清晰：可快速了解每个QA评审对应的功能
  • 版本历史：同一个功能可保留多个带日期的QA评审记录
  • 无冲突：不同功能可使用同名文件
  • 追踪清晰：明确问题对应的功能/构建版本
  • 规整有序：同一个功能的所有QA产物都保存在一起
文件夹结构：
docs/design/{feature-name}-qa-{MMDDYY}/
├── {feature-name}-qa-report.md
├── {feature-name}-issues.csv
├── {feature-name}-spec-improvements.md
└── {feature-name}-screenshots/
    ├── issue-001-button-spacing.png
    ├── issue-002-color-contrast.png
    └── expected-vs-actual-comparison.png

Design QA Report

设计QA报告

Location: 
docs/design/{feature-name}-qa-{MMDDYY}/
File: 
{feature-name}-qa-report.md
Format: Markdown with embedded screenshots Structure:
markdown
undefined
位置：
docs/design/{feature-name}-qa-{MMDDYY}/
文件：
{feature-name}-qa-report.md
格式：嵌入截图的Markdown文件 结构:
markdown
undefined

Design QA Report: [Feature Name]

设计QA报告：[功能名称]

Date: [Date] Reviewer: Claude (Design QA Skill) Scope: [What was reviewed]
日期：[日期] 评审人：Claude（设计QA技能） 范围：[评审覆盖的内容]

Executive Summary

执行摘要

  • Total issues found: [Number]
  • Critical: [Number]
  • High: [Number]
  • Medium: [Number]
  • Low: [Number]
  • Overall assessment: [Ready to ship / Needs work / Major issues]
  • 发现问题总数：[数量]
  • 严重问题：[数量]
  • 高优问题：[数量]
  • 中优问题：[数量]
  • 低优问题：[数量]
  • 整体评估：[可发布 / 需要优化 / 存在严重问题]

Key Findings

核心发现

  1. [Most important issue or pattern]
  2. [Second most important]
  3. [Third most important]
  1. [最重要的问题或共性问题]
  2. [第二重要的问题]
  3. [第三重要的问题]

Detailed Issues

详细问题

Critical Issues

严重问题

[List of critical issues with full documentation]
[完整记录所有严重问题]

High Priority Issues

高优问题

[List of high priority issues]
[列出所有高优问题]

Medium Priority Issues

中优问题

[List of medium priority issues]
[列出所有中优问题]

Low Priority Issues

低优问题

[List of low priority issues]
[列出所有低优问题]

Specification Gaps

规范缺口

[Issues caused by ambiguous or missing specs]
[由模糊或缺失的规范导致的问题]

Positive Observations

亮点观察

[Things that were implemented well]
[实现效果优秀的内容]

Recommendations

建议

  1. [Top recommendation]
  2. [Second recommendation]
  3. [Third recommendation]
  1. [首要建议]
  2. [第二建议]
  3. [第三建议]

Next Steps

下一步

  • Address critical issues
  • Review high priority fixes
  • Update design specs based on gaps found
  • Schedule follow-up QA review
undefined
  • 修复严重问题
  • 评审高优问题的修复效果
  • 根据发现的缺口更新设计规范
  • 安排后续QA评审
undefined

Issue Tracking Spreadsheet

问题跟踪表格

Location: 
docs/design/{feature-name}-qa-{MMDDYY}/
File: 
{feature-name}-issues.csv
Format: CSV for import to project management tools Columns:
  • Issue ID
  • Severity
  • Status (Open/In Progress/Fixed/Won't Fix)
  • Screen/Component
  • Issue Description
  • Expected Behavior
  • Actual Behavior
  • Assigned To
  • Date Found
  • Date Fixed
位置：
docs/design/{feature-name}-qa-{MMDDYY}/
文件：
{feature-name}-issues.csv
格式：可导入项目管理工具的CSV文件 列:
  • 问题ID
  • 严重程度
  • 状态（打开/处理中/已修复/不修复）
  • 页面/组件
  • 问题描述
  • 预期行为
  • 实际行为
  • 处理人
  • 发现日期
  • 修复日期

Design Specification Feedback

设计规范反馈

Location: 
docs/design/{feature-name}-qa-{MMDDYY}/
File: 
{feature-name}-spec-improvements.md
Format: Markdown with specific suggestions Purpose: Help improve design documentation for future projects
位置：
docs/design/{feature-name}-qa-{MMDDYY}/
文件：
{feature-name}-spec-improvements.md
格式：包含具体建议的Markdown文件 目的：帮助优化未来项目的设计文档

Examples

示例

Good vs. Poor Issue Documentation

优秀vs糟糕的问题记录

❌ Poor Issue:
The button is wrong
- Doesn't look right
- Fix it
✅ Good Issue:
markdown
undefined
❌ 糟糕的问题记录:
按钮有问题
- 看起来不对
- 修复一下
✅ 优秀的问题记录:
markdown
undefined

Primary CTA Button Padding Incorrect - High

主CTA按钮内边距错误 - 高优

Location: Checkout page, "Complete Purchase" button
Expected (per spec):
  • Padding: 12px vertical, 24px horizontal
  • Button height: 48px
Actual (implementation):
  • Padding: 8px vertical, 16px horizontal
  • Button height: 40px
Discrepancy: Button is 8px shorter and appears cramped. Touch target falls below recommended 44x44px minimum for mobile.
Impact:
  • Reduced tappability on mobile devices
  • Inconsistent with other primary CTAs
  • Less visual prominence for primary action
Recommendation: Update button CSS to use design token 
py-3 px-6
(12px/24px) to match specification and design system.
Severity: High (affects primary conversion action and mobile usability)
Device/Browser: All devices, Chrome 118
undefined
位置：结账页面，「完成购买」按钮
预期效果（根据规范）：
  • 内边距：垂直12px，水平24px
  • 按钮高度：48px
实际效果（实现情况）：
  • 内边距：垂直8px，水平16px
  • 按钮高度：40px
差异点： 按钮短了8px，看起来很拥挤。触摸目标小于移动端建议的最低44x44px要求。
影响：
  • 移动端可点击性降低
  • 与其他主CTA不一致
  • 核心操作的视觉突出性不足
建议： 更新按钮CSS使用设计token 
py-3 px-6
（12px/24px）以匹配规范和设计系统要求。
严重程度：高优（影响核心转化行为和移动端可用性）
设备/浏览器：所有设备，Chrome 118
undefined

Good Pattern Recognition Example

优秀模式识别示例

markdown
undefined
markdown
undefined

Pattern Found: Inconsistent Spacing System

发现模式：间距系统不一致

Observation: Multiple screens use spacing values outside the design system:
  • Profile page: 14px gap between fields (should be 12px or 16px)
  • Settings: 20px section margin (should be 16px or 24px)
  • Dashboard: 10px card padding (should be 12px or 16px)
Root Cause: Design specification didn't explicitly reference the 4px/8px spacing scale.
Impact: Visual inconsistency, harder to maintain, accessibility issues with unpredictable spacing.
Recommendation:
  1. Update all spacing to use design tokens (spacing scale)
  2. Add spacing scale reference to design spec
  3. Create CSS variables for spacing tokens
undefined
观察： 多个页面使用了设计系统外的间距值：
  • 个人资料页：字段间距14px（应为12px或16px）
  • 设置页：区块边距20px（应为16px或24px）
  • 看板页：卡片内边距10px（应为12px或16px）
根本原因： 设计规范未明确提及4px/8px间距刻度要求。
影响： 视觉不一致，维护成本更高，间距不可预测导致可访问性问题。
建议：
  1. 将所有间距更新为使用设计token（间距刻度）
  2. 在设计规范中添加间距刻度参考
  3. 为间距token创建CSS变量
undefined

Common Pitfalls to Avoid

需要避免的常见误区

❌ Nitpicking Minor Differences

❌ 纠结无意义的细微差异

Problem: Logging dozens of 1px differences that don't matter Instead: Focus on issues that affect user experience or brand consistency
问题：记录大量不影响体验的1px差异 正确做法：聚焦影响用户体验或品牌一致性的问题

❌ Blaming Without Context

❌ 脱离上下文指责

Problem: "Engineer did it wrong" without checking if spec was clear Instead: Ask "Was the spec clear?" and improve documentation
问题：不检查规范是否清晰就直接说「开发做错了」 正确做法：先问「规范是否清晰？」，同时优化文档

❌ Vague Issue Descriptions

❌ 模糊的问题描述

Problem: "Doesn't look right" or "spacing is off" Instead: Provide specific measurements and comparisons
问题：「看起来不对」或「间距有问题」 正确做法：提供具体的测量值和对比信息

❌ Missing Screenshots/Evidence

❌ 缺失截图/证据

Problem: Describing issues in text only Instead: Show expected vs. actual with visual evidence
问题：仅用文字描述问题 正确做法：用视觉证据展示预期与实际效果的差异

❌ Ignoring Accessibility

❌ 忽略可访问性

Problem: Only checking visual appearance Instead: Always review keyboard navigation, screen reader, and contrast
问题：仅检查视觉外观 正确做法：始终评审键盘导航、屏幕阅读器适配和对比度

❌ No Prioritization

❌ 无优先级区分

Problem: All issues treated equally, overwhelming dev team Instead: Use clear severity levels to guide prioritization
问题：所有问题同等对待，给开发团队造成过大压力 正确做法：使用清晰的严重程度分级引导优先级排序

❌ Reviewing in Only One Context

❌ 仅在单一环境下评审

Problem: Only testing on desktop Chrome Instead: Review across devices, browsers, and screen sizes
问题：仅在桌面端Chrome上测试 正确做法：跨设备、浏览器、屏幕尺寸评审

❌ Not Acknowledging Good Work

❌ 不认可优秀工作

Problem: Only pointing out problems Instead: Note what was implemented well, builds morale
问题：仅指出问题 正确做法：标注实现优秀的内容，提振团队士气

❌ Unrealistic Expectations

❌ 不切实际的预期

Problem: Expecting pixel-perfect match on all browsers/devices Instead: Understand technical constraints and browser differences
问题：要求所有浏览器/设备都完全像素级对齐 正确做法：理解技术约束和浏览器差异

Integration Points

集成要点

Inputs from Other Teams

其他团队的输入

  • Design Specs: Design specifications, Figma files, brand guidelines
  • Engineering: Staging/development URLs, build status, technical constraints
  • Product/PM: Feature requirements, business priorities, launch timeline
  • Design Research: User needs context (to assess impact of issues)
  • 设计团队：设计规范、Figma文件、品牌指南
  • 研发团队：预发布/开发环境URL、构建状态、技术约束
  • 产品/PM：功能需求、业务优先级、上线时间线
  • 设计研究团队：用户需求上下文（用于评估问题的影响）

Outputs for Other Teams

给其他团队的输出

  • Engineering: Prioritized issue list with specific fixes needed
  • Product/PM: Go/no-go recommendation based on issue severity
  • Leadership: Summary of quality status and risks
  • 研发团队：带优先级的问题列表和具体修复要求
  • 产品/PM：基于问题严重程度的是否可上线建议
  • 管理层：质量状态和风险总结

Related Skills

相关技能

  • May surface issues requiring design-concepts rethinking
  • Uses design-research insights to assess user impact of issues
  • 可能会发现需要重新思考design-concepts的问题
  • 使用design-research洞察评估问题的用户影响

Review Checklists

评审检查表

Pre-Review Checklist

评审前检查表

Before starting QA review:
  • Design specifications gathered and reviewed
  • Design system documentation available
  • Brand guidelines referenced
  • Access to product/staging environment confirmed
  • Review scope clearly defined
  • Previous QA reports reviewed (if any)
开始QA评审前：
  • 已收集并阅读设计规范
  • 可获取设计系统文档
  • 已参考品牌指南
  • 确认可访问产品/预发布环境
  • 明确评审范围
  • 已阅读过往QA报告（如有）

Visual Design Checklist

视觉设计检查表

For each screen:
  • Layout matches specification
  • Spacing uses design system scale
  • Typography correct (family, size, weight, line height)
  • Colors match design tokens
  • Alignment and grid adherence
  • Icons correct size and style
  • Images display correctly
  • Borders, shadows, radius match spec
  • Component consistency across screens
针对每个页面：
  • 布局符合规范
  • 间距使用设计系统刻度
  • 排版正确（字体、字号、字重、行高）
  • 颜色匹配设计token
  • 对齐和网格符合要求
  • 图标尺寸和样式正确
  • 图片展示正常
  • 边框、阴影、圆角符合规范
  • 跨页面组件保持一致

Interaction Checklist

交互检查表

For each interactive element:
  • Default state correct
  • Hover state works
  • Active/pressed state works
  • Focus state visible
  • Disabled state correct
  • Loading state implemented
  • Error state implemented
  • Success state implemented
  • Transitions/animations match spec
  • Performance smooth (no jank)
针对每个交互元素：
  • 默认状态正确
  • hover状态正常工作
  • active/按下状态正常工作
  • focus状态可见
  • disabled状态正确
  • 已实现loading状态
  • 已实现错误状态
  • 已实现成功状态
  • 转场/动画符合规范
  • 性能流畅（无卡顿）

Responsive Checklist

响应式检查表

At each breakpoint:
  • Layout adapts correctly
  • Content reflows properly
  • Touch targets adequate (mobile)
  • No horizontal scroll (unless intentional)
  • Images scale appropriately
  • Navigation works on mobile
  • Forms usable on small screens
  • Modals/overlays responsive
每个断点下：
  • 布局适配正确
  • 内容重排正常
  • 触摸目标足够大（移动端）
  • 无横向滚动（除非特意设计）
  • 图片缩放正常
  • 移动端导航正常工作
  • 小屏幕上表单单可正常使用
  • 模态框/浮层响应式正常

Accessibility Checklist

可访问性检查表

  • Keyboard navigation works
  • Tab order logical
  • Focus indicators visible
  • Escape/Enter function correctly
  • Alt text on images
  • Form labels associated
  • ARIA labels where needed
  • Error messages clear and announced
  • Text contrast 4.5:1 minimum
  • UI element contrast 3:1 minimum
  • Headings hierarchical
  • Links descriptive
  • No color-only information
  • 键盘导航正常工作
  • Tab顺序符合逻辑
  • 焦点指示器可见
  • Escape/Enter功能正常
  • 图片有alt文本
  • 表单标签已关联
  • 必要时添加ARIA标签
  • 错误消息清晰且可被播报
  • 文字对比度最低4.5:1
  • UI元素对比度最低3:1
  • 标题层级合理
  • 链接描述清晰
  • 无仅用颜色传递的信息

Browser/Device Testing Checklist

浏览器/设备测试检查表

Test on:
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile Safari (iOS)
  • Chrome Mobile (Android)
  • Common screen sizes (320px, 768px, 1440px)
在以下环境测试：
  • Chrome（最新版）
  • Firefox（最新版）
  • Safari（最新版）
  • Edge（最新版）
  • 移动端Safari（iOS）
  • Chrome移动端（Android）
  • 常见屏幕尺寸（320px、768px、1440px）

Tips for Best Results

最佳实践技巧

  1. Review with design specs open - Don't rely on memory
  2. Use browser dev tools - Measure actual spacing, check CSS
  3. Test all interactive states - Don't assume if you can't see it
  4. Check responsive behavior - Use dev tools device simulation
  5. Use accessibility testing tools - Lighthouse, WAVE, axe DevTools
  6. Take lots of screenshots - Visual evidence is compelling
  7. Be systematic - Follow checklist, don't skip screens
  8. Focus on user impact - Prioritize issues that matter most
  9. Be constructive - Frame issues as improvement opportunities
  10. Document spec gaps - Help improve design documentation
  1. 评审时打开设计规范 - 不要依赖记忆
  2. 使用浏览器开发者工具 - 测量实际间距、检查CSS
  3. 测试所有交互状态 - 不要假设看不到的状态没问题
  4. 检查响应式表现 - 使用开发者工具的设备模拟功能
  5. 使用可访问性测试工具 - Lighthouse、WAVE、axe DevTools
  6. 多截图 - 视觉证据更有说服力
  7. 系统化 - 遵循检查表，不要跳过页面
  8. 聚焦用户影响 - 优先处理最重要的问题
  9. 保持建设性 - 将问题表述为改进机会
  10. 记录规范缺口 - 帮助优化设计文档

Advanced Techniques

高级技巧

Automated Checks (when possible)

自动化检查（可行时）

bash
undefined
bash
undefined

Use Lighthouse for accessibility and performance

使用Lighthouse检查可访问性和性能

npm install -g lighthouse lighthouse [URL] --output=html --view
npm install -g lighthouse lighthouse [URL] --output=html --view

Use Percy or Chromatic for visual regression testing

使用Percy或Chromatic做视觉回归测试

(requires setup and integration)

（需要提前配置集成）

Check color contrast programmatically

程序化检查颜色对比度

Use tools like Colorable or Contrast Checker

使用Colorable或Contrast Checker等工具

undefined
undefined

Pattern Analysis

模式分析

Look for systemic issues:
  • Are all buttons inconsistent, or just one?
  • Is spacing wrong everywhere, or specific screens?
  • Are issues concentrated in one area (e.g., forms)?
This helps identify root causes vs. one-off bugs.
寻找系统性问题：
  • 是所有按钮都不一致，还是仅单个按钮？
  • 是所有地方间距都不对，还是特定页面？
  • 问题是否集中在某个领域（比如表单）？
这可以帮助定位根本原因，而非零散修复单个bug。

Comparative Review

对比评审

Compare against:
  • Design system examples
  • Previous versions of the product
  • Competitor implementations
  • Platform conventions (iOS HIG, Material Design)
和以下内容对比：
  • 设计系统示例
  • 产品的过往版本
  • 竞品实现
  • 平台规范（iOS HIG、Material Design）

Validation Checklist

确认检查表

Before submitting QA report:
  • All in-scope screens reviewed
  • All interactive elements tested
  • Responsive behavior checked
  • Accessibility reviewed
  • Issues documented with evidence
  • Severity levels assigned
  • Recommendations provided
  • Specification gaps noted
  • Positive observations included
  • Report is actionable and constructive
  • Files saved to project's 
    docs/design/
    directory
  • CSV issue tracker included (if requested)
提交QA报告前：
  • 所有范围内的页面都已评审
  • 所有交互元素都已测试
  • 已检查响应式表现
  • 已评审可访问性
  • 问题都附有证据记录
  • 已分配严重程度
  • 已提供建议
  • 已标注规范缺口
  • 已包含亮点观察
  • 报告可落地且有建设性
  • 文件已保存到项目的
    docs/design/
    目录
  • 已包含CSV问题跟踪表（如有要求）

Sample QA Report Excerpt

QA报告示例节选

markdown
undefined
markdown
undefined

Design QA Report: E-commerce Checkout Flow

设计QA报告：电商结账流程

Date: October 22, 2025 Reviewer: Claude (Design QA Skill) Scope: Complete checkout flow (cart → shipping → payment → confirmation)
日期：2025年10月22日 评审人：Claude（设计QA技能） 范围：完整结账流程（购物车 → 配送信息 → 支付 → 确认页）

Executive Summary

执行摘要

  • Total issues found: 23
  • Critical: 1
  • High: 4
  • Medium: 12
  • Low: 6
  • Overall assessment: Needs work - address critical and high issues before launch
  • 发现问题总数：23
  • 严重：1
  • 高优：4
  • 中优：12
  • 低优：6
  • 整体评估：需要优化 - 上线前先修复严重和高优问题

Key Findings

核心发现

  1. Payment form submit button non-functional on mobile Safari (Critical)
  2. Inconsistent spacing throughout flow - not using design system scale
  3. Missing error states for invalid payment info
  4. Color contrast issues on several form labels
  1. 移动端Safari上支付表单提交按钮无法使用（严重）
  2. 全流程间距不一致 - 未使用设计系统刻度
  3. 无效支付信息缺少错误状态
  4. 多个表单标签存在颜色对比度问题

Detailed Issues

详细问题

Critical Issues

严重问题

1. Payment Submit Button Non-Functional on Mobile Safari - CRITICAL

1. 移动端Safari上支付提交按钮无法使用 - 严重

Location: Payment page, "Complete Purchase" button (iOS Safari 17)
Expected: Button triggers payment processing when tapped
Actual: Button does not respond to tap on mobile Safari. Works on desktop and Chrome mobile.
Evidence: [Screenshot showing button]
Impact: Complete checkout flow blocker for iOS users (approximately 30% of mobile traffic).
Recommendation:
  • Check for JavaScript errors in Safari console
  • Verify touch event handlers attached correctly
  • Test with minimal CSS to isolate issue
  • May need 
    -webkit-appearance: none
    or explicit touch event handling
Severity: CRITICAL - breaks core functionality for large user segment
位置：支付页，「完成购买」按钮（iOS Safari 17）
预期效果：点击按钮后触发支付流程
实际效果：移动端Safari上点击按钮无响应。桌面端和Chrome移动端正常。
证据：[按钮截图]
影响：iOS用户无法完成结账流程（占移动端流量约30%）。
建议：
  • 检查Safari控制台的JavaScript错误
  • 确认触摸事件处理器已正确绑定
  • 使用最小CSS测试定位问题
  • 可能需要添加
    -webkit-appearance: none
    或显式的触摸事件处理
严重程度：严重 - 影响大量用户的核心功能

High Priority Issues

高优问题

2. Shipping Form Spacing Inconsistent - HIGH

2. 配送表单间距不一致 - 高优

Location: Shipping address form
Expected (per design spec):
  • Form field spacing: 16px vertical gap
  • Label to input: 4px gap
  • Section spacing: 24px
Actual:
  • Form field spacing: 14px, 18px, 12px (varies)
  • Label to input: 6px, 8px (inconsistent)
  • Section spacing: 20px
Evidence: [Screenshot with measurements]
Impact:
  • Visual inconsistency reduces polish
  • Harder to maintain (no systematic spacing)
  • Misalignment with design system used elsewhere
Recommendation: Update CSS to use design tokens:
  • space-y-4
    for form fields (16px)
  • space-y-1
    for label-to-input (4px)
  • space-y-6
    for sections (24px)
Severity: HIGH - affects visual consistency system-wide

---

End of Design - QA Skill Specification
位置：配送地址表单
预期效果（根据设计规范）：
  • 表单字段间距：垂直16px间距
  • 标签到输入框间距：4px
  • 区块间距：24px
实际效果：
  • 表单字段间距：14px、18px、12px（不一致）
  • 标签到输入框间距：6px、8px（不一致）
  • 区块间距：20px
证据：[带测量值的截图]
影响：
  • 视觉不一致降低精致感
  • 维护成本更高（无系统化间距）
  • 与其他地方使用的设计系统不一致
建议： 更新CSS使用设计token：
  • 表单字段使用
    space-y-4
    （16px）
  • 标签到输入框使用
    space-y-1
    （4px）
  • 区块使用
    space-y-6
    （24px）
严重程度：高优 - 影响全系统的视觉一致性

---

设计QA技能规范结束