Refactoring UI Breakdown: AI Keeps Making Gradients Weirder Because Design Sense Is Constraint, Not Decoration

A scene that happens every day: you ask AI to build a page. The functionality works in minutes, but the UI is always slightly off — oversized bold text, red/green/blue buttons crammed together, forms stretched across the entire screen. You say "make it look more polished," and it swaps in a gradient — which keeps getting weirder. The mechanism behind this loop can be dissected: your "polished" is a high-dimensional judgment hiding in hierarchy, spacing rhythm, and lightness structure; "add a gradient" is a low-dimensional decorative operation. The AI isn't slacking — it just doesn't have a map.

At the end of 2018, a book drew that map: *Refactoring UI*, co-written by Adam Wathan and Steve Schoger. Wathan is the author of Tailwind CSS — an identity that matters later; Schoger is a designer who built hundreds of thousands of followers by posting UI fix tips on Twitter. The book starts from Wathan's own admission: "I know this looks bad, but I can't say why" — a self-described non-designer full-stack developer who, after years of working with designers, found that most of those "unsayable whys" can be written as explicit rules. The book's manifesto is one line: Design with tactics, not talent.

The Rules

Fifty chapters, two hundred-plus pages, nearly every chapter one rule plus before/after screenshots. A few examples:

• Hierarchy — "Size isn't everything": don't rely on bigger fonts; adjusting weight and lightness is much quieter than size.
• "Don't use grey text on colored backgrounds": grey on color always looks dirty; use a brighter step of the same hue family instead.
• Layout — "You don't have to fill the whole screen": a full-screen form isn't grand, it's neglected. Give content a max width; let whitespace accumulate, then tighten.
• Color — "Ditch hex for HSL": organize palettes by hue, saturation, lightness — not hex codes.
• "Define your shades up front": set 9–10 lightness steps per color before starting; improvising colors always ends dirty.
• "Don't let lightness kill your saturation": when lightening a color, compensate saturation, or buttons become garish red/green/blue.
• Depth — "Use fewer borders": the first tool for separating two elements isn't a border — it's shadows, background contrast, or simply spacing.

Individually these look like common-sense fragments, but the book did one thing right: it pulled design entirely out of the "aesthetic talent" narrative and turned it into an executable checklist. That's why it sold so well — ~30,000+ copies per the official site, 4.68 on Goodreads, a self-published ebook at $99–$149 with no publisher and no discounts.

The Sequel: From Book to Tool

The really interesting part is what came after. Wathan took these rules and built Tailwind CSS, so the tactics didn't stay on paper — they were written line by line into a tool's defaults. Comparing Tailwind's current theme file against the book is nearly one-to-one:

• "Establish a spacing and sizing system" → --spacing: 0.25rem — a 4px base; every spacing value is an integer multiple.
• "Define your shades up front" → 288 color variables, each shipping with eleven lightness levels from 50 to 950.
• "Line-height is proportional" → every font-size tier carries its own line-height — 12px text at 1x, base size at 1.5x, tighter as text grows.
• "Greys don't have to be grey" → Tailwind's slate-900 in oklch: 20.8% lightness, 4.2% chroma — a blue-tinted grey, the literal implementation of that rule.
• Even "Ditch hex for HSL" has evolved: newer Tailwind moved from HSL to the perceptually more uniform oklch.

The AI Connection

Applied to today's AI-writes-your-frontend scenario, this chain is the answer itself: in raw CSS, the model has unlimited freedom, so it dares to make gradients ever weirder. Tailwind locks spacing, type, and color into enumerated tokens — the AI can only pick from preset ladders. The design-quality floor isn't raised by making the model smarter; it's sealed by deleting degrees of freedom. Same structure as my earlier piece on Fast Browser Use: another fix for hallucination isn't training, it's interfaces that remove the domain.

The book teaches humans, the tool guards the engineering, and AI inherits both for free — a checklist written for people in 2018 became the factory default of every AI-generated page in 2026.

Practical Takeaways

Next time the UI looks off, two moves beat "make it more polished":

1. Write the rules into constraints: put a dozen tactics into the system prompt or your project's design spec, so the AI executes a checklist instead of perturbing randomly. 2. Use Tailwind directly: let the tokens block most wrong options for you.

My favorite chapter title: "Don't design too much." In the AI context, add a footnote: don't give it too much freedom either.

---

*Notes: the 30,000-copy sales figure and 4.68 rating are official-site self-reported numbers; the book was self-published in late 2018 at $99 (Essentials) / $149 (Complete bundle), team licensing extra. All quoted chapter titles were checked against the official table of contents; the Tailwind token comparison was verified against its current theme file.*