QA an implemented UI against the design spec — spacing, interactive states, typography, color tokens, and responsiveness. Use during implementation review or before sign-off.
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 skillSign in to rate and review this skill.
No reviews yet. Be the first to review this skill.