Design Review

This reviews the proposal, before dev: the implementation-review skill checks what actually shipped. A review that only checks visuals approves broken products, so walk all seven lenses; AI-tells are the deep dive at the end, not the whole review.

The seven lenses

1. Product: does the screen serve one named problem for a named audience, traceable to the frame? Exactly one primary action? Anything on screen serving nobody?
2. UX: is the state matrix declared and every applicable state designed? Does every failure name its recovery? Does navigation match the users' object model?
3. Content: does each action keep one label through its lifecycle? Do errors state the problem and the way out? Does every sentence survive the filler test?
4. Visual: does the hierarchy have one voice? Does the palette derive from one hue? Is spacing on a rhythm? Does every decision trace to the thesis? (Full catalog below.)
5. System: are existing tokens and components reused? Hardcoded values duplicating a token? A new abstraction with no current caller? A primitive that knows the domain?
6. Accessibility: contrast in both themes, keyboard reachability, visible focus, reduced motion. The accessibility skill has the gates.
7. Implementation risk: will this survive real content? Long strings, empty lists, 10x the data, slow networks, small viewports. A design that only works with the demo data is not done.

How to run it

1. Look at the rendered proposal, not the source. Screenshot it if you can.
2. Walk the lenses in order. Product first: a beautiful screen solving the wrong problem is a lens-1 finding that makes lenses 2-7 moot.
3. On the visual and content lenses, run the AI-tells catalog below: for every pattern present, name it, name the surface, apply the decision rule.
4. Report each finding as: lens, what, where, why it fails, the concrete fix. No finding without a fix.

The constitution

Ten rules every review enforces. A finding that cites one is stronger than a finding that cites taste.

1. Evidence before invention.
2. Structure before styling.
3. Content before decoration.
4. States before screenshots.
5. Hierarchy before color.
6. Systems before exceptions.
7. Accessibility is a constraint, not cleanup.
8. Familiarity where usability matters; distinctiveness where identity matters.
9. Every visual decision needs a reason.
10. Generic competence does not pass review. Beautiful is not the same as good.

Creator ≠ critic

The context that produced a design cannot honestly attack it. On hosts with subagents (Claude Code), dispatch the critic agents shipped with this plugin — ux-critic, art-director, slop-detector, system-critic — with fresh context and let them report back. Findings come formatted as severity — P0 broken, P1 blocks the user or breaches a boundary, P2 structural (hierarchy, direction, debt), P3 consistency, P4 craft — observation, why it matters, principle violated, RETURN_TO the owning skill, DO_NOT_CHANGE. Route each finding to its owner instead of restarting the work.

The reduction pass

Run after the lenses, before the verdict. For every element on the surface, ask which function it performs: orient, communicate, enable, or differentiate. None of the four: candidate for deletion. Usual suspects: dividers doing what spacing should, cards around single facts, redundant labels, decorative icons, helper text stating the obvious, colors with no semantic role, containers inside containers, animations that inform nothing. Premium is subtraction the generator won't do on its own; aim to remove until removing more would lose meaning.

The signature pass

Avoiding the bad only yields generic-good. After reduction, ask: what makes this unmistakably this product? Name 1-3 signature moves at most — an interaction, a typographic decision, a spatial rhythm, a motion behavior, a voice — each derived from the thesis and executed systematically. Zero signatures on an identity-bearing surface is a finding. Five is decoration; cut to the strongest.

The ship gate

The verdict is a word, not a score:

• REJECT: a P0 or a failed product-slop test stands. Name the lens and the RETURN_TO.
• REVISE: P1s stand; the list of findings is the work order.
• PASS: good enough to ship. Level 3 below is the floor.
• EXCEPTIONAL: attacked and survived; there's a point of view you failed to attribute to any other product.

The quality ladder behind it: 0 broken, 1 usable, 2 coherent (works as a system), 3 crafted (details withstand scrutiny), 4 distinctive (defensible point of view), 5 inevitable (adding, removing, or moving anything makes it worse). Ship at 3, aim at 4; "pretty" is not a level.

The AI-tells deep dive — why things feel cheap

LLMs produce cheap-feeling designs not because they use bad components, but because they miss the reasons things work. The question is never "is this on the forbidden list?" — it's "does this decision reflect craft knowledge of why it works?"

The real diagnosis — ask these questions

Does the grid breathe? Mechanical 12-column equal-gutter grids feel safe and institutional. A designed grid has intentional offset — a large column reserved for primary content, a narrow column for metadata, deliberate tension between the two. If breaking the grid would improve nothing, the grid has no design logic.

Does the hierarchy have a voice? If you squint at the page and all text resolves to the same visual weight, the type system is decorative rather than communicative. A hierarchy with voice has exactly one element that speaks first.

Does the color palette have logic? AI palettes are assembled from defaults — corporate blue, gray neutrals, green for success. A designed palette has a single hue from which the entire palette is derived. Neutrals are not pure gray — they are desaturated versions of the brand hue. Success green is not #22C55E; it is a hue-rotated neighbor of the brand accent, desaturated to status weight.

Does the whitespace earn its place? Random padding values (padding: 11px 14px) have no spatial logic. Spacing from the system has meaning: --spacing-sm for internal padding, --spacing-md for item gaps, --spacing-xl for section breathing, --spacing-3xl for section separation. The rhythm is architectural.

Does every rounded corner communicate the same material? Large radius (2rem+) signals marketing, softness, consumer. Small radius (4–6px) signals precision, data, professional tool. When both appear on the same surface, the material signal is incoherent.

Patterns to avoid — and the question to ask instead

For each pattern, the issue is not that it exists — it's that it was chosen without asking why. A why answered by the product, the user, the content, or the system holds; "it looks premium" is not an answer.

Hero → Features → Testimonials → CTA stack Ask: what is the hierarchy of trust-building for this specific audience? The SaaS stack assumes everyone needs the same sequence. Most don't.

Every section on the same skeleton Eyebrow → big heading → description → row of cards, repeated down the page with perfect spacing. Ask: what does this section's content want structurally? Perfect rhythm with no tension is layout without composition — a succession of correctly spaced components.

• Decision rule: at least one section breaks the cadence because its content demands it — a full-bleed, an asymmetric split, a table, a single sentence alone. If every section survives the same template, none was composed.

The dark-SaaS genre kit Near-black #09090B, electric violet + cyan, glass navbar capsule, gradient text on the hero's key word, product screenshot in a floating device frame with a glow behind it, a bento grid, NEW / AI-POWERED badge pills, 1px solid rgba(255,255,255,.08) borders, huge diffuse shadows. Ask each element: which part of this brand's hue and thesis does it derive from?

• Decision rule: the kit is one genre's uniform, not a palette — any element that survives must survive alone, by deriving from this product's hue, density, and audience. Glassmorphism needs a functional layer beneath it; gradient text needs a reason this word carries the gradient; a device frame needs the device to matter.

The genre dashboard Sidebar (Overview, Analytics, Projects, Team, Settings), "Good morning, Alex 👋", four KPI tiles with green deltas, a line chart going up and to the right, a donut, Recent activity, stacked avatars, "+ Create new". It is the dashboard of every product and of none. Ask: which decision does the user open this screen to make?

• Decision rule: the home surface shows this product's own objects and the user's next action. A metric whose meaning you cannot state in one sentence is filler for a fourth tile — cut the tile, not the sentence.

Purple-to-blue diagonal gradient on hero or CTA Ask: what is the brand hue this derives from? If the answer is "it looked good," the palette has no logic. A gradient is a relationship between two hues. It should derive from the same palette root.

The right version: Gradients that work are monochromatic or analogous — two stops from the same hue family, separated by 10-30 degrees on the color wheel, with the lighter stop at 5-10% opacity over the surface.

/* Brand hue is oklch(55% 0.18 250). Gradient stays in-family. */
.hero-surface {
  background: linear-gradient(
    165deg,
    oklch(55% 0.18 250) 0%,   /* brand primary */
    oklch(45% 0.16 265) 100%  /* +15° rotation, deeper */
  );
}
/* For subtle surface gradients — not hero: */
.card-surface {
  background: linear-gradient(
    180deg,
    oklch(97% 0.005 250) 0%,
    oklch(94% 0.008 250) 100%
  );
}

• Decision rule: Hero gradient? Both stops derive from brand hue (rotate max 30°, shift lightness). Surface gradient? Same hue at whisper chroma (C ≤ 0.01). If the two stops have no shared parent hue — it's decoration, not design.

Pill buttons (border-radius: 9999px) on every interactive element Ask: what material does this surface communicate? Softness, playfulness. Appropriate on consumer onboarding; incoherent on destructive actions, data controls, or dense toolbars.

The right version: Radius is a material signal. Match it to the surface's purpose, not a global default.

/* The radius scale from the design-system tokens reference — one source */
:root {
  --radius-sm: 4px;      /* inputs, data controls, dense UI */
  --radius-md: 6px;      /* standard buttons */
  --radius-lg: 8px;      /* cards, dialogs */
  --radius-xl: 12px;     /* marketing sections, hero CTAs */
  --radius-full: 9999px; /* tags, badges, avatar frames ONLY */
}
/* Application */
.btn-primary    { border-radius: var(--radius-md); }
.btn-destructive { border-radius: var(--radius-sm); }  /* sharp = serious */
.data-filter    { border-radius: var(--radius-sm); }
.tag            { border-radius: var(--radius-full); }  /* pill earned here */

• Decision rule: Pill radius is reserved for elements with no internal hierarchy (tags, chips, status badges). Anything with a label + icon, or that triggers a destructive/transactional action, gets --radius-sm or --radius-md. In dense data UI, pill radius is banned entirely.

Pastel gray (#F8F9FA, #E9ECEF) as all surfaces Ask: what temperature signal does the page have? Pure gray has none. The surface palette should be tinted toward the brand hue — barely, but perceptibly.

The right version: Every neutral surface carries a whisper of the brand hue. The tint is below conscious perception but creates cohesion. The color skill's neutrals and surface tables are the source; the rule in OKLCH: keep the brand H, C 0.003–0.015, L 92–99%.

• Decision rule: Never a pure gray (C=0). The tint should be invisible in isolation but obvious next to a pure gray swatch.

Dark mode #1a1a2e or #0f0f23 Ask: where does this dark derive from? If it doesn't come from the brand hue darkened and desaturated, it's arbitrary. Dark mode is a surface decision, not a CSS variable swap.

The right version: Dark surfaces derive from the brand hue via the color skill's dark-mode transform — never from a random "cool dark" hex. That transform is the single source: hue unchanged, surface L lifted to 10–18% OKLCH (no true blacks), chroma boosted 1.5–2× against chroma hunger.

• Decision rule: If you can't identify which brand the dark mode belongs to by its tint, it's wrong. Dark mode is a palette transformation, not a separate palette.

scale(1.05) on card hover Ask: what physical model does this represent? Real surfaces don't magnify — they rise, illuminate, or cast shadow. translateY(-2px) with a shadow increase is physically grounded. Scale is not.

The right version: Hover states simulate physical material — elevation change, light response, or border emphasis. Pick one per surface type and use it consistently. The motion skill carries the three models with their CSS.

• Decision rule: dense data UI? Border emphasis or background shift only — no elevation. Standard app density? Elevation hover. Sparse gallery or marketing? Elevation with larger travel (translateY(-4px)). Never use scale() — objects in physical space do not grow when you point at them.

fade-in-up (translateY 20px, opacity 0→1) on every scroll entry Ask: does this animation communicate information, or is it decoration? Became the default around 2018. Now reads as a template signal. Scroll-triggered reveals earn their place only when they sequence information deliberately.

The right version: Scroll-triggered animation earns its place only when it sequences information — revealing items in reading order with staggered timing to guide the eye. The motion skill carries the reveal CSS.

• Decision rule: near-static product? No scroll animation at all — content is simply present. Moderate motion? Opacity-only fade, or 4-8px translateY max, staggered in groups of 3-5 items. Motion-led brand? Choreographed reveals with spring physics, but still staggered by information hierarchy, not uniform. The uniform fade-in-up on every element is always wrong — it says nothing about what to read first.

Count-up numbers, mouse-following gradients, micro-glow on hover Ask: what state change does this communicate? A number counting up on viewport entry, a gradient tracking the cursor, a glow on every button — none carries information about the product. Motion as makeup. The motion skill's density budget decides what survives.

All caps tracking for section labels and nav items Ask: is this label short enough to benefit from tracking, or is it a sentence? All caps at high tracking works for 2–4 character abbreviations. At full words, it reads as institutional shouting.

Copy: "Supercharge your workflow" / "Seamless" / "Next-Gen" / "Unleash" Ask: if you removed every adjective and adverb from this sentence, would any information remain? If not, it's filler. LLMs generate these at maximum frequency. The banned-word list lives in the content-design skill.

Fake round numbers: 99.99%, 50%, 1000 users Organic data has texture. 47.2%, 1,847 users reads as measured. Round numbers read as invented. If you don't have the real number, say "thousands" — don't invent a tidy decimal.

Placeholder names: "John Doe", "Sarah Chan", "Acme Corp" These signal template, not product. Use names that match the actual distribution of your user base — specific, believable, consistent with industry and geography.