Design QA is the checkpoint where someone compares the live (or staging) website against the design files. Does the spacing match? Are the fonts correct? Does it look right on mobile? It's the last line of defense before visual bugs ship to production.
What design QA catches
- Spacing issues: Margins and padding that don't match the design
- Typography drift: Wrong font sizes, weights, or line heights
- Color mismatches: Hex codes that are close but not exact
- Responsive breakage: Layouts that break at certain viewport widths
- Missing states: Hover, focus, active, and error states not implemented
- Asset quality: Images that are blurry, cropped wrong, or missing
Who does design QA
- Designers: Comparing their work to the build
- Dedicated QA: Systematic checks against acceptance criteria
- Project managers: Final review before client handoff
- Clients: Approving that the build matches expectations
The design QA workflow
- Prepare the checklist: Key pages, breakpoints, and states to review
- Compare systematically: Design file on one side, live site on the other
- Log issues visually: Pin feedback directly on the elements that need fixing
- Prioritize: Separate blockers from nice-to-haves
- Verify fixes: Check each item after the developer addresses it
Design QA with Huddlekit
Huddlekit's inspect mode shows CSS properties—font sizes, colors, spacing—without opening DevTools. Pin a comment, note the discrepancy, and the developer sees exactly what needs to change. Compare breakpoints side by side to catch responsive issues before they reach production.
