design-review

Design Review

You are performing a comprehensive design review of frontend code. This is the quality gate that catches generic AI output, design system violations, accessibility failures, and production issues before they ship.

Process

Step 1: Gather Context

1. Read the design system: Check for design-system.md, DESIGN-BRIEF.md, CLAUDE.md, tailwind.config.*, globals.css
2. Identify files to review: The user specifies, or check git diff for recent changes
3. Understand the framework: React, Next.js, Astro, HTML — check package.json

Step 2: Anti-Slop Audit

Check every file against these patterns. Flag ALL violations:

Pattern	Violation	Fix
Inter/Roboto/Arial as sole font	Typography slop	Choose distinctive display font
Purple gradient on white	Color slop	Commit to intentional palette
Symmetric 3-card grid	Layout slop	Add asymmetry, vary card sizes
transition: all	Motion slop	Specify exact properties
Default shadcn with no customization	Component slop	Apply project's design tokens
Spinner for loading	Motion slop	Use shimmer/skeleton
Uniform border-radius everywhere	Component slop	Vary or remove per context
Generic hero → features → CTA	Layout slop	Differentiate the flow

Step 3: Design System Compliance

If a design system exists, verify:

• Colors: All colors use tokens/variables, no hardcoded hex values
• Typography: Font sizes, weights, tracking match the system
• Spacing: Uses the project's spacing scale (4px/8px grid)
• Components: Match established patterns (button variants, card styles)
• Icons: Correct library, correct size, correct stroke width
• Borders: Use opacity-based borders from the system, no arbitrary grays

Step 4: Accessibility Check

Quick audit (not a full accessibility audit, but catches common issues):

• Contrast: Text meets 4.5:1 (normal) / 3:1 (large)
• Keyboard: Interactive elements focusable, visible focus indicators
• Semantics: Proper heading hierarchy, landmarks, button vs div
• Images: All <img> have appropriate alt text
• Labels: All form inputs have associated labels
• Motion: prefers-reduced-motion respected
• Touch targets: 44×44px minimum for interactive elements

Step 5: Production Quality

• No placeholder content: No "Lorem ipsum", no TODO comments in UI text
• All states handled: Loading, empty, error, success
• Responsive: Tested at mobile, tablet, desktop breakpoints
• Performance: No layout thrashing, images optimized, lazy loading
• Type safety: No any types, proper interfaces for props

Step 6: Output Report

Generate a structured report:

# Design Review: [Component/Page Name]

## Score: [A/B/C/D/F]

## Anti-Slop
- [PASS/FAIL] Typography: [details]
- [PASS/FAIL] Color: [details]
- [PASS/FAIL] Layout: [details]
- [PASS/FAIL] Motion: [details]

## Design System Compliance
- [PASS/FAIL] Colors: [details]
- [PASS/FAIL] Typography: [details]
- [PASS/FAIL] Spacing: [details]
- [N/A] No design system found

## Accessibility
- [PASS/FAIL] Contrast: [details]
- [PASS/FAIL] Keyboard: [details]
- [PASS/FAIL] Semantics: [details]

## Issues Found
1. **[CRITICAL/HIGH/MEDIUM/LOW]**: [description] → [fix]
2. ...

## Recommendations
- [Specific improvement suggestions]

Scoring

• A: No issues. Production-ready. Distinctive design.
• B: Minor issues. Shippable with noted improvements.
• C: Design system violations or accessibility gaps. Fix before shipping.
• D: Anti-slop violations. Generic AI output. Needs redesign.
• F: Critical accessibility or production issues. Not shippable.