Describe your product and get a complete design QA process - visual testing setup, pixel-level checks, cross-browser matrix, and automated regression tools.
Paste into any LLM. Use the output to establish a design QA process that catches visual bugs before users do.
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.
What separates "Design QA and Visual Regression Testing" from an off-the-cuff AI question is precision. It applies success criteria and depth requirements and structured enumeration, which gives the model enough direction to produce user-centered design specifications with component details, interaction states, and accessibility considerations. You can expect user-centered design specifications with component details, interaction states, and accessibility considerations - the kind of result that normally requires several rounds of prompt refinement.
These ui/ux design tips will help you get stronger results when using "Design QA and Visual Regression Testing" and similar prompts in this category.
"Design QA and Visual Regression Testing" is particularly useful in these situations. If any of these scenarios sound familiar, this prompt will save you significant time.
When you use "Design QA and Visual Regression Testing" with ChatGPT, Claude, or Gemini, here is what to expect in the AI output.
Adapt "Design QA and Visual Regression Testing" to your specific situation by modifying these key areas. The more context you add, the better the results.