design-review

1# Design Review
2 
3Review a web app or page for visual design quality. This is not a UX audit (usability, workflow, friction) — this checks whether the design is **professional, consistent, and polished**.
4 
5The goal: would a design-conscious person look at this and think "this is well made" or "this looks like a developer designed it"?
6 
7## When to Use
8 
9- Before showing something to a client or team
10- When something "looks off" but you can't pinpoint why
11- After building a feature, before calling it done
12- Periodic quality check on a shipped product
13- After a UX audit — this is the visual companion
14 
15## Browser Tool Detection
16 
17Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.
18 
19## URL Resolution
20 
21Same as ux-audit — prefer deployed/live over localhost.
22 
23## What to Check
24 
25### 1. Layout and Spacing
26 
27| Check | Good | Bad |
28|-------|------|-----|
29| **Consistent spacing** | Same gap between all cards in a grid, same padding in all sections | Some cards have 16px gap, others 24px. Header padding differs from body |
30| **Alignment** | Left edges of content align vertically across sections | Heading starts at one indent, body text at another, cards at a third |
31| **Breathing room** | Generous whitespace around content, elements don't feel cramped | Text touching container edges, buttons crowded against inputs |
32| **Grid discipline** | Content follows a clear column grid | Elements placed freely, no underlying structure |
33…