Skill spotlight: design-review — a designer's eye for agentic QA

TL;DR. garrytan/gstack/design-review turns a Claude Code session into a designer doing live QA: it scores the interface on a 0–10 rubric across hierarchy, spacing, typography, and interaction, flags AI‑slop patterns most code‑first agents miss, then fixes each issue in source and proves it with a before/after screenshot. Author: Garry Tan (YC, ex‑designer). SkillHub auto‑review score: 86/100.

What is design-review?

design-review is a Claude Code skill that audits a live or local interface the way a senior designer would — checking visual hierarchy, spacing rhythm, typographic scale, color and contrast, motion, and interaction affordances — and then commits fixes one at a time, each backed by a before/after screenshot. It is the post‑build counterpart to plan-design-review, which runs in plan mode before code is written.

It ships inside gstack, a small toolkit Garry Tan released alongside companion skills for code review, challenge, and consultation. Tan is the president of Y Combinator and a former designer/founder (Posthaven, Initialized) — so this is a designer’s taste, encoded into an agent loop and made repeatable.

Why this skill scored 86.

Distinctive judgment. The rubric includes an explicit AI‑slop detector — generic gradients, default font stacks, dead‑center compositions, ChatGPT‑era purple — which no other reviewed design skill flags directly.
Atomic fixes. Each problem becomes one commit with a screenshot pair attached. Reviewers can revert any single change without unwinding a refactor.
Tool surface stays small. Bash, Read/Write/Edit, Glob/Grep, AskUserQuestion, WebSearch. No bespoke MCP server; runs on a stock Claude Code install.

When should you use it?

Reach for design-review whenever the interface is functionally done but visually unconvincing. Strong triggers:

“Polish this landing page.” — when an agent built the markup and styling correctly, but the result still reads like a template.
“Why does this look AI‑generated?” — the skill’s slop detector is built for exactly this question.
“Audit the design system drift.” — spacing tokens applied inconsistently, two heading scales fighting each other, three near‑identical greys.
“Tighten the interactions.” — slow transitions, missing hover affordances, scroll jank on a hero.
“Make it look like we shipped it on purpose.” — the catch‑all polish pass before a launch.

It is the wrong tool for net‑new design work or for accessibility audits in isolation — pair it with a planning skill or an a11y‑focused one for those.

How do you install it?

terminal

claude plugins install garrytan/gstack
claude /design-review

The plugin pulls the full gstack bundle. Source: github.com/garrytan/gstack. New to Claude Code skills? Start with our hook‑development spotlight — it covers the install surface and where skills live on disk.

What does it actually check?

Dimension	What it scores	Typical AI‑slop tell	Fix pattern
Hierarchy	Primary vs secondary emphasis	Three competing CTAs, all the same weight	Demote two, keep one solid
Spacing	Rhythm + token consistency	Six different gap values within a section	Snap to a 4/8 scale
Typography	Scale, line height, line length	System font fallbacks shipped to prod	Self‑host a defined display + body pair
Color	Contrast, palette discipline	Generic violet→pink gradient on a hero	Anchor to a brand pair + one accent
Composition	Alignment + negative space	Everything centered, nothing breathing	Asymmetry + intentional white space
Imagery	Original vs stock vs generated	Default Midjourney aesthetic	Crop, recolor, or replace with vector
Motion	Duration + easing	500ms linear on everything	150–250ms with proper easing curve
Affordance	Clickability cues	Buttons indistinguishable from text	Restore weight, padding, hover state
Slop signals	Composite — feels generated	All of the above at once	Triage the worst three, then re‑score

What is the fix-and-verify loop?

Each finding goes through the same loop. The skill captures a baseline screenshot, edits source, captures again, then opens a single‑purpose commit.

design-review session

{
  "finding": "Hero CTA competes with three secondary links",
  "score_before": 4,
  "fix": "Demote secondary links to text, raise CTA padding 12→16",
  "files": ["src/components/Hero.tsx", "src/styles/tokens.css"],
  "screenshots": ["before/hero-001.png", "after/hero-001.png"],
  "score_after": 8,
  "commit": "design: collapse hero into a single CTA"
}

Watch the token budget. Screenshot loops can be expensive — the skill encodes each capture into the conversation. On a long polish pass, instruct it to batch findings, fix three at a time, then resume. Otherwise you will burn context faster than fixes ship.

How does it pair with gstack?

gstack is a small suite — design-review, plan-design-review, plus codex‑flavored review/challenge/consult skills — sharing a session preamble at ~/.gstack/sessions/ and an update‑check binary. Installing one installs the kit. The pairing that matters most: run plan-design-review before implementation (catches problems while they’re still cheap), then design-review after the page is live (catches problems only visible at full fidelity).

What are the common pitfalls?

Treating the score as the goal. A 9/10 hierarchy score on a page nobody reads is wasted effort. Anchor the audit to the page’s job first.
Letting it touch the design system unchecked. If you have shared tokens, scope the audit to one surface and review token edits as a separate PR.
Skipping the screenshot diff. The whole loop falls apart if reviewers approve commits without looking at the before/after pair. Make the pair a required artifact in PR review.

garrytan/gstack/plan-design-review — its planning‑mode twin. Use it first.
anthropics/claude-plugins-official/hook-development — wire design-review into a Stop hook so visual QA runs automatically on UI‑touching turns. See the spotlight.
An accessibility skill of your choice. design-review notices contrast tells but is not an a11y auditor. Pair it.

Browse the full review backlog at skills.palebluedot.live or the running spotlight archive on PaleBlueDot.

FAQ

Does design-review work on a static screenshot, or does it need a live URL?
It prefers a live URL or a local dev server so it can re‑capture after each fix. Static input works for the initial scoring pass but breaks the verification loop.

Will it edit my design tokens?
Only if you let it. By default it edits component‑level styles; ask it explicitly to touch tokens, and review those edits as a separate commit.

Is the AI‑slop detector deterministic?
No — it is a judgment call expressed in the rubric. Treat its slop flags as a senior designer’s opinion you can argue with, not a linter.

How does it differ from a Lighthouse or axe run?
Those check measurable correctness (performance, a11y rules). design-review checks taste — hierarchy, rhythm, restraint — which no automated tool measures well.

Can I run it in CI?
Yes, on a preview deployment. Have it post the before/after pairs and the score delta as a PR comment, and gate merges on a minimum delta rather than an absolute score.

About this Skill Spotlight. Each spotlight is sourced from the SkillHub auto‑review pipeline — open, scored, and reproducible. Read more about how the rubric works on the about page.

Skill spotlight: design-review — a designer’s eye for agentic QA

On this page