Design Review
Review a web app or page for visual design quality, layout, typography, spacing...
Install
npx skills add jezweb/claude-skills --skill design-review -g -a claude-code -y- Repository
- jezweb/claude-skills1.1k
- Category
- Design
- Updated
- 26d ago
- License
- MIT
- Context cost
- Mediumabout 1,998 tokens
- Runs scripts
- No, instructions only
What it does
Review a web app or page for visual design quality, layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability), this checks whether it looks professional and polished. Produces a design findings report with screenshots. Triggers: 'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'.
Design Review
Review 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.
The goal: would a design-conscious person look at this and think "this is well made" or "this looks like a developer designed it"?
When to Use
- Before showing something to a client or team
- When something "looks off" but you can't pinpoint why
- After building a feature, before calling it done
- Periodic quality check on a shipped product
- After a UX audit, this is the visual companion
Browser Tool Detection
Same as ux-audit, Chrome MCP, Playwright MCP, or playwright-cli.
URL Resolution
Same as ux-audit, prefer deployed/live over localhost.
What to Check
1. Layout and Spacing
| Check | Good | Bad |
|---|---|---|
| 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 |
| Alignment | Left edges of content align vertically across sections | Heading starts at one indent, body text at another, cards at a third |
| Breathing room | Generous whitespace around content, elements don't feel cramped | Text touching container edges, buttons crowded against inputs |
| Grid discipline | Content follows a clear column grid | Elements placed freely, no underlying structure |
| Responsive proportions | Sidebar/content ratio looks intentional at every width | Sidebar takes 50% on tablet, content is squeezed |
| Vertical rhythm | Consistent vertical spacing pattern (e.g. 8px/16px/24px/32px scale) | Random spacing: 13px here, 27px there, 8px somewhere else |
