Design QA and Visual Regression Testing

You are a design QA lead who has reduced visual bugs by 90% through systematic design quality assurance processes and visual regression testing.

Product: [WEB APP/MOBILE APP/WEBSITE]
Design tool: [FIGMA/SKETCH/ADOBE XD]
Frontend stack: [REACT/VUE/ANGULAR/SVELTE + CSS FRAMEWORK]
CI/CD: [GITHUB ACTIONS/GITLAB CI/JENKINS/CIRCLE CI/VERCEL]
Current QA problem: [NO DESIGN QA/MANUAL ONLY/INCONSISTENT/MISSING EDGE CASES]

Build a complete design QA system:

**1. Manual Design QA Checklist**
Per-component check:
- [ ] Matches Figma design (overlay comparison)
- [ ] Spacing matches design tokens (4px grid)
- [ ] Typography matches spec (font, size, weight, color, line-height)
- [ ] Colors match design system tokens
- [ ] Border radius, shadows match spec
- [ ] Icons correct size and color
- [ ] Images correct aspect ratio and quality

Per-page check:
- [ ] Layout matches at 1440px, 1024px, 768px, 375px
- [ ] Content alignment on grid
- [ ] Responsive breakpoint transitions smooth
- [ ] No horizontal scroll at any breakpoint
- [ ] All states rendered (empty, loading, populated, error)
- [ ] Dark mode appearance (if applicable)

**2. Cross-Browser Testing Matrix**
- Desktop: Chrome, Firefox, Safari, Edge (latest 2 versions)
- Mobile: iOS Safari, Chrome Android
- Tablet: iPad Safari, Android Chrome
- Priority: critical path first, edge cases second
- Known browser-specific issues to check

**3. Visual Regression Testing Setup**
- Tool recommendation: Chromatic, Percy, BackstopJS, or Playwright
- Baseline screenshot capture process
- Component-level vs page-level snapshots
- Viewport configurations for responsive testing
- Threshold settings (pixel diff tolerance)
- CI integration: run on every PR
- Review workflow: approve or reject diffs

**4. Storybook Integration (Component Testing)**
- Stories for every component variant
- Stories for every state (default, hover, focus, disabled, error)
- Stories for edge cases (long text, missing data, RTL)
- Accessibility addon checks in stories
- Visual snapshot per story

**5. Design-Dev Comparison Workflow**
- Figma overlay tools (PixelSnap, PerfectPixel extension)
- Design token validation (automated check against design system)
- Typography audit script
- Color audit script
- Spacing audit visualization (CSS outline debug mode)

**6. Performance Visual Checks**
- Layout shift measurement (CLS)
- Font loading flash (FOIT/FOUT)
- Image loading placeholder quality
- Animation jank detection (fps monitoring)
- Scrolling smoothness

**7. Bug Report Template**
- Screenshot with annotation
- Expected vs actual (side by side)
- Browser, viewport, OS
- Steps to reproduce
- Design file reference link
- Severity: cosmetic / minor / major / critical

**8. QA Review Cadence**
- Pre-PR: developer self-check using checklist
- PR review: design QA check by designer
- Staging: cross-browser spot check
- Post-deploy: automated visual regression results
- Monthly: full product design audit

Provide exact tool configurations, CI pipeline code snippets, and process documentation that a team can adopt immediately.