Design Judgment · Claude Code & Alex

Taste, made checkable.

AI design defaults to the statistical mean — which reads as slop. This is the judgment layer that strips the cheap tells and forces the deliberate choices that signal craft. Load it before any deck, dashboard audit, or build.

Taste is the ability to notice what is wrong — and the restraint to remove it. Not adding flourish. Subtracting the generic.
The only ship test that matters: would a senior design engineer nod, or wince? If you can't tell, you haven't looked hard enough.
01

The slop detector

Two or more of these = reads as AI-generated. Run it first.
Purple→blue gradients as the "techy" default
→
One restrained palette; flat fills
Everything centered into vertical soup
→
Left-aligned grid; center only short hero text
Emoji as bullets / section icons
→
Real icons or nothing — Lucide, Heroicons
Equal-weight card grids — all shout
→
One hero; suppress the rest
Pure black on pure white, borders on all
→
Tinted off-black; spacing > borders
Three accent colors competing
→
One accent; rest is greyscale
02

The five levers

Where taste actually lives — concrete, not vibes.

Spacing — the highest-leverage lever

  • Start with too much whitespace, then remove. Cramped = amateur.
  • Use a scale (4·8·12·16·24·32·48·64·96), never arbitrary values. Close values (15 vs 16) look like bugs.
  • Whitespace encodes relationships — related items close, unrelated apart. Wrong-looking label? Fix the spacing, not the words.

Color

  • Greyscale first. If hierarchy fails without color, color is hiding a structural problem.
  • No pure black/grey/white — tint everything warm or cool. Think in HSL.
  • One accent for the single most important action. AA contrast, always.

Typography

  • One intentional pairing; two weights do most of the work.
  • Hierarchy = size + weight + color, not size alone.
  • Body 1.5, headings tight; balance headings, tabular nums for changing numbers.

Depth

  • One light source from above; layer 2–3 soft low-opacity shadows.
  • Borders are a last resort — bg-shade, spacing, or shadow first.

Hierarchy

  • One focal point per view. Most "no hierarchy" is failure to suppress, not to emphasize.
  • Design every state — empty, sparse, dense, error. Not just the perfect screenshot.
03

The ship gate

Run before saying "done."
✓
Passes the slop detector — zero gradient / emoji / centered / border tells
✓
Spacing on a scale, generous, encodes grouping
✓
Greyscale hierarchy holds; one accent; tinted off-black; AA contrast
✓
One focal point; secondary info suppressed; soft layered shadows
✓
(live UI) hover/focus/disabled states, reduced-motion, 44px targets
✓
Real content; empty/error states designed; no layout shift
✓
The senior-design-engineer test: nod, or wince?

Sources — vetted signal, not bots

Refactoring UI (Wathan & Schoger) — the canonical "taste as concrete numbers" reference. Most AI taste prompts are this, distilled.
Web Interface Guidelines (Rauno Freiberg · interfaces.rauno.me) — the living checklist of interaction/motion/forms details senior design engineers enforce.
AI-slop tells — the design-engineering consensus on the gradient/emoji/centered/border failure modes, used here as a negative checklist.
Anthropic prompting guidance — be specific, give constraints, explicitly reject generic defaults; reference real systems, not "modern/clean."