Quality Checklist
A systematic pass through every dimension of design quality.
How to use
/quality-checklistRun a quality evaluation on any design in this conversation.
Constraints
Hierarchy
- Clear primary element on every screen
- Visual weight matches content priority
- No unintentional competing elements at the same hierarchy level
- Eye path follows the intended reading order
Typography
- Type scale uses a consistent ratio
- Weight usage is systematic with named purposes
- Line height varies appropriately (tighter headlines, looser body)
- No more than 4-6 sizes per screen with clear justification
- Typeface matches product voice
Color
- Every color has a clear, non-overlapping role
- Semantic colors are consistent everywhere
- Neutrals do 80-90% of the heavy lifting
- Sufficient contrast for accessibility (WCAG AA minimum)
Space
- Spacing follows a consistent scale
- Proximity signals correct relationships
- Density matches the use case
- Margins create appropriate breathing room
Craft
- Border radii consistent across element types
- Alignment pixel-perfect where intended
- All states covered: loading, empty, error, success, overflow
- Transitions purposeful and consistently timed
System
- Design could scale to 10 more screens without breaking
- Another designer could extend this without asking questions
- Components are reusable, not one-offs
- System breaks are intentional, not accidental
Anti-Patterns
- Checking only visual polish and ignoring information architecture
- Treating the checklist as pass/fail instead of diagnostic
- Running the checklist once and never revisiting