Design QA Checklist

Demo

Click to play with sound.

---
name: Design QA Checklist
description: Reviews an implemented UI against design specs — spacing, states, typography, color, and responsiveness. Use during implementation review or before design sign-off.
---

# Design QA Checklist

A systematic review catches drift between design intent and shipped code before it compounds. Work through each section top-to-bottom; flag deviations with a file path or component name and the exact expected vs. actual value.

## Spacing and Layout

- Verify all margin, padding, and gap values match the design token or explicit spec (e.g. space-4 = 16px, not 15px or 18px).
- Check that grid columns, gutters, and container max-widths are correct at every breakpoint.
- Confirm that element alignment is pixel-accurate — use a grid overlay or browser devtools ruler, not eyeballing.
- Flag any 'magic number' hardcoded values that should reference a token.

## Typography

- Font family, weight, size, line-height, and letter-spacing must match the spec exactly.
- Check truncation behavior on long strings — does it ellipsize, wrap, or clip as designed?
- Verify heading hierarchy is semantically correct (H1 > H2 > H3) even if visual size differs.
- Confirm no system fallback fonts are rendering in place of the intended typeface.

## Color and Tokens
… install to load the full skill