# Design Review

Review a web app or page for visual design quality, layout, typography, spacing...

- Repository: https://github.com/jezweb/claude-skills (1094 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-09
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jezweb/claude-skills --skill design-review -g -a claude-code -y`
Codex: `npx skills add jezweb/claude-skills --skill design-review -g -a codex -y`
Cursor: `npx skills add jezweb/claude-skills --skill design-review -g -a cursor -y`
Gemini CLI: `npx skills add jezweb/claude-skills --skill design-review -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jezweb/claude-skills`

## Description

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'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 |

### 2. Typography

The rest: https://github.com/jezweb/claude-skills/blob/HEAD/plugins/frontend/skills/design-review/SKILL.md