Claude Code skill

A senior design
critique, in your terminal.

Point it at a URL, a screenshot, or a component. Get ranked, specific findings, then let it apply the fixes. 
Craft standards, not vibes.

What it does

Reviews like a design lead would.

Fix what matters first

Every finding ranked blocking → important → polish, so you ship the critical stuff and skip the bikeshedding.

Receipts, not opinions

Real numbers behind every call: WCAG contrast, 45–75ch line length, 44px tap targets. Never "make it pop."

Reviews anything you've got

A live URL, a screenshot, or a raw component. It reads the code and cites the exact line.

It flags. It fixes.

Run --apply and watch it rewrite contrast, focus states, alt text and motion, in place.

Accessibility, every pass

Contrast, semantics, focus order, labels, and reduced-motion. Caught automatically, not bolted on later.

Tells you what's working

Closes every review with your strengths and the one change that moves the needle most.

What it reviews

Ten dimensions, every pass.

01

Hierarchy & layout

Clear focal point, sensible scan path, grouping, alignment to a grid, whitespace as structure.

02

Typography

Limited type scale, line-height, 45–75ch measure, font pairing, no widows or orphans.

03

Spacing & rhythm

Consistent 4/8px scale, even vertical rhythm, symmetric padding. No arbitrary gaps.

04

Color & contrast

WCAG AA (4.5:1 text, 3:1 large/UI), restrained palette, never color alone for meaning.

05

Motion

Purposeful, fast timings, natural easing, and a prefers-reduced-motion variant.

06

Component states

Hover, focus-visible, active, disabled, loading, empty, error, plus ≥44px tap targets.

07

Accessibility

Semantic HTML, labels, alt text, logical focus order, full keyboard operability.

08

Responsiveness

Fluid type and spacing, no overflow or clipping from 320px up, touch-appropriate.

09

Content & copy

Clear headlines, scannable structure, descriptive CTAs, human microcopy and errors.

10

Consistency & brand

Reused design tokens, consistent radii, shadows, and icon style across screens.

See it work

Watch a real critique and apply the fixes.

Install

Up and running in 30 seconds.

1

Add the marketplace and install the plugin:

# in Claude Code
/plugin marketplace add Superfuture/design-review
/plugin install design-review@superfuture

# …or drop the folder in manually
git clone https://github.com/Superfuture/design-review /tmp/dr
cp -r /tmp/dr/design-review/skills/design-review ~/.claude/skills/
2

Then just ask: "design review officialjp.com" or "critique this paywall screenshot."

Pricing

Free to try. Pay if it earns its place.

Free

$0
forever
  • The full skill + rubric
  • URL, image & code review
  • Community updates
Install free
Recommended

Pro

$12
one-time
  • Everything in Free
  • Expanded mobile & SwiftUI rubric
  • Brand-token consistency checks
  • Priority updates
Get Pro →

Team

$49
per team
  • Everything in Pro
  • Shareable team config
  • Custom rubric tuning
  • Email support
Get Team
FAQ

Questions, answered.

What is design-review?

A Claude Code skill that runs a senior-level design critique of any URL, screenshot, or component, ranked from blocking to polish, each finding with a specific fix you can auto-apply.

What's the difference between Free and Pro?

Free is the full skill and rubric, run locally in your terminal. Pro adds depth the free tier doesn't cover: an expanded mobile & SwiftUI rubric and brand-token consistency checks, generated server-side so it stays current.

How do I activate Pro?

After checkout you get a license key on the activation page. In Claude Code run /design-review:activate <your-key>, or paste the key when Crit first asks on a Pro review. Your Pro reviews then include the extra depth.

Is it a subscription?

No. Pro is a one-time $12 unlock. Team is a separate plan, currently by waitlist.

I lost my key.

It's tied to your email. Get in touch and we'll resend it.

Refunds?

If Pro isn't earning its place, contact us within 14 days for a refund.