claude-design-critic

# Claude Design Critic

Some sites are technically fine and still scream "an AI made this in one shot." This skill names exactly why and tells you what to change. It reviews the design *and* the copy, because generated-looking text gives a build away as fast as a centered hero and a purple gradient.

Use it as the finishing pass on `claude-landing-composer` output, on any vibe-coded frontend, or on a live site that feels generic. It pairs with the design tokens from `claude-design-system-architect` (audit against them when they exist).

## Step 1 — Take in the target

A URL (WebFetch + screenshot), a local project (read the components/styles), or pasted code. Establish: what is this page for, who's the audience, and what's the one action it wants? A critique without the goal is just opinion.

## Step 2 — Audit across dimensions

Go dimension by dimension and flag concrete instances, not vibes:

**Layout & composition**
- Every section a centered stack? Three-identical-cards reflex? Predictable hero → cards → CTA with no rhythm? Symmetry where asymmetry would feel crafted? Cramped or uniform whitespace?

**Color**
- Purple or default-AI gradients (the dead giveaway). Too many competing accents. Off-brand or arbitrary hexes not mapped to tokens. Contrast failures (check AA).

**Type**
- Default system sans at 2–3 sizes. No real modular scale. Weak hierarchy. Generic pairing. Line length / line-height that reads like a default.

**Spacing & detail**
- Uniform padding everywhere. No optical adjustments. Borders/shadows that are all identical or all heavy.

**Motion**
- The same fade-up on every element. Motion that decorates instead of directs. `prefers-reduced-motion` ignored.

**Iconography & assets**
- Emoji used as UI (replace with Lucide/Heroicons). Generic stock imagery. Placeholder logos left in.

**Copy (review this as hard as the design)**
- AI tells: "elevate", "unlock", "seamless", "empower", "in today's fast-paced world", "we're thrilled to", "the power of", relentless em-dashes, every sentence a tricolon.
- Generic value props ("the best way to X"), hedged language, "Learn More" buttons, "Welcome to {Product}" heroes, filler microcopy.
- Flag the exact lines and rewrite the worst offenders.

**Accessibility & semantics**
- Heading order, alt text, focus states, semantic landmarks, tap-target sizes.

## Step 3 — Report with prioritized, specific fixes

```markdown
# Design Critique — {target}
Generated: {timestamp} · Goal: {…} · Verdict: {SHIP / FIX FIRST / REBUILD SECTION}

## The 30-second read
The 2–3 things making this look generated, in plain language.

## Findings (prioritized: High → Low)
| # | Dimension | What | Where (selector/line/section) | Why it reads as AI | Fix |

## Copy rewrites
"{exact current line}" → "{rewritten line}"

## Quick wins (under 30 min, high impact)
## Bigger moves (worth the time)
## What's already good (keep it)
```

Be specific enough that someone could apply every fix without asking a question. Point to the file/section/line. Where tokens exist, cite the token that should have been used.

## Step 4 — Offer to apply
Offer to implement the high-priority fixes directly (edit the components/copy) and re-audit, or hand a rebuild to `claude-landing-composer`.

## House standard
Premium = intentional layout rhythm, restrained palette, real type scale, generous whitespace, motion with purpose, human copy. Generated = centered everything, rainbow/purple gradients, default sans, uniform padding, fade-up-on-all, and "elevate your workflow." Push every target from the second toward the first. Never purple, never emoji-as-UI.

## Guardrails recap
Critique design AND copy · every finding is specific and located · cite tokens where they exist · prioritize by impact · offer to apply, then re-audit.