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