# Why AI-Generated UIs Look 'Off' — and the One Principle That Fixes It > Source: > Published: 2026-06-16 04:33:17+00:00 You've seen it. You ask an AI to build a dashboard, and it returns something that's… fine? Every component is individually competent. The button is a button. The card is a card. And yet the whole thing reads as *generated* — like a stock photo of a UI. For a long time I assumed the fix was "better components" or "more taste in the prompt." It isn't. After digging through the actual design literature — Refactoring UI, Material Design 3, Apple's HIG, IBM Carbon, WCAG, the Financial Times' visual vocabulary — the real culprit has a name: **Incoherence.** The parts don't agree with each other. And once you can see it, you can't unsee it. *I've written before about why your vibe-coded app looks ugly and what I did about it. This post goes underneath that — the actual mechanism behind the "off" feeling, and the one principle that fixes it.* Here's a UI with nothing "wrong" in it: Every one of those choices is defensible in isolation. Together, they signal "assembled from parts," because a human designer would never make all of them on the same screen. A designer picks *one* corner style, *one* accent, *one* icon set, *one* light source — and repeats those decisions everywhere. That repetition is what we read as "designed by one mind." Goran Paun (UX Collective) calls it visual coherence; Steve Schoger's whole *Refactoring UI* is, in a sense, a book about not introducing gratuitous variation. The principle is old. What's new is that **AI breaks it by default**, and understanding *why* tells you how to fix it. A language model generates UI **locally**. It writes the card, then the button, then the modal — each as a fresh, plausible snippet. It has no running memory that "the buttons 40 lines up were pill-shaped, so these must be too." Each component regresses to the mean of its training data, and the mean of "a button" and the mean of "a card" were never coordinated. Humans don't work this way. We carry a tiny set of decisions in our head — *this product is soft-cornered, blue-accented, 8px-grid* — and every new element inherits them. The decisions are sticky. So the fix isn't "make the model more tasteful." It's: **write the sticky decisions down, and tell the model to copy them instead of inventing new ones.** Here's the whole idea in one sentence: For each design axis, pick exactly onevalue or family, encode it as a token, and apply iteverywhere. Coherence is not "every screen is identical." It's that the same *decisions* recur. A settings page and a dashboard can look very different and still feel like one product — as long as they share a radius personality, a shadow language, an accent, and a spacing unit. These are the axes that have to stay unified: | Axis | Pick ONE, system-wide | Failure mode when mixed | |---|---|---| Corner / radius | sharp 0–4px · soft 8–12px · pill 9999px | sharp dialog + rounded buttons = "two products glued together" | Shadow | one scale, one light source (above-left), one tint | "a scene with two suns" | Accent color | one accent for emphasis (+ semantic red/green/amber) | nothing reads as the action | Spacing unit | one 8px grid (4px half-step) | off-grid 7/13/19px reads as "sloppy" | Icon style | one family, one fill mode, one stroke weight | mixing sets looks "out of place" | Type scale | one modular scale, ≤2 families | arbitrary sizes destroy rhythm | Motion | one duration set + one easing family | some snappy, some sluggish = different apps | Control height | shared height set (e.g. 40px) | a 44px input beside a 32px button breaks the baseline | The single best instinct I've heard a non-designer voice it as: "If the corners are sharp, everything should be sharp." Exactly right — and it generalizes to *every* row in that table. **Treat a mixed axis as a lint error, not a style choice.** Let's make four of these concrete. First, radius is a **token**, never a magic number. Define a small scale and reference it everywhere: ``` :root { --radius-sm: 8px; /* inputs, buttons */ --radius-md: 12px; /* cards, menus */ --radius-lg: 16px; /* modals, sheets */ --radius-full: 9999px; } ``` Then pick **one personality** — all sharp, all soft, or all pill — and apply it across card / button / input / modal / image. Don't let the model freestyle a `rounded-none` panel with `rounded-full` buttons. There's a subtle second rule most people miss: **nested radii must share a center.** When a rounded element sits inside a rounded container with padding, the inner radius should be *smaller*: ``` inner radius = outer radius − padding .card { --pad: 16px; border-radius: var(--radius-lg); /* 16px */ padding: var(--pad); } .card > .thumbnail { /* 16 − 16 = 0; clamp so it never goes negative */ border-radius: max(0px, calc(var(--radius-lg) - var(--pad))); } ``` If you give the inner element the *same* radius as the outer one, its corner visibly bulges past the container's arc. Apple's new "Liquid Glass" system formalizes exactly this concentric-corner math; Cloud Four has the canonical write-up. The fastest way to make depth look fake is one hard `box-shadow` . Real shadows are a gradient (a penumbra), so stack several low-opacity layers, and — critically — **tint them toward the surface hue** instead of using pure black, which goes muddy: ``` /* card — sits near the page */ --shadow-md: 0 1px 2px hsl(220 40% 20% / 0.08), 0 2px 4px hsl(220 40% 20% / 0.08), 0 4px 8px hsl(220 40% 20% / 0.08); /* modal — floats toward the user */ --shadow-xl: 0 2px 4px hsl(220 40% 20% / 0.06), 0 8px 16px hsl(220 40% 20% / 0.06), 0 16px 32px hsl(220 40% 20% / 0.06), 0 32px 64px hsl(220 40% 20% / 0.06); ``` The coherence rule: **one light direction for the whole page** (convention: above and slightly left), with vertical offset roughly 2× the horizontal. As elevation rises, offset and blur go up while opacity goes down. A card and a modal then read as the *same* light hitting objects at different heights — not two unrelated effects. (Josh Comeau and Tobias Ahlin both have excellent deep-dives on this.) In dark mode, shadows nearly vanish, so switch to **tonal elevation** — lighter surfaces for higher elevation — and never use pure `#000` as your base (Material recommends `#121212` with white overlays per level). Most "AI rainbow" UIs come from reaching for a new hue every time something needs emphasis. The discipline: ``` :root { --accent: #5b5bd6; /* greys tinted slightly toward the accent's hue, not 0-saturation */ --grey-50: hsl(240 20% 98%); --grey-200: hsl(240 14% 90%); --grey-500: hsl(240 8% 55%); --grey-900: hsl(240 12% 14%); /* body text — NOT #000 */ } ``` And one accessibility floor you don't get to negotiate (WCAG 2.2 AA): **4.5:1** contrast for body text, **3:1** for large text and UI components. Never convey information by color alone — pair it with an icon, text, or shape. A red border on an invalid field is not enough; add the icon and the message. Snap every margin, padding, and gap to a single scale — `4, 8, 12, 16, 24, 32, 48, 64` — and let **proximity** carry meaning. The rule from Gestalt (and Refactoring UI's "avoid ambiguous spacing"): the space *around* a group must be clearly larger than the space *within* it. A concrete ladder for forms: ``` label → input : 4–8px input → input : 12–16px group → group (section): 24–32px ``` When everything is evenly spaced, the eye can't tell what belongs together. The doubling at each level is what makes a label bind to *its* field and a section separate from the next. Writing the decisions down is half the battle; the other half is catching violations. This is where AI can actually help — if you give it the rubric. I bake all of the above into an open-source design engine ([StyleSeed](https://github.com/bitjaru/styleseed)) that Claude Code and Cursor read automatically, but the idea is tool-agnostic. The most useful piece turned out to be a **coherence grader**: a check that scores a file and flags *mixed axes* as real deductions. A trimmed example of what that output looks like: ``` ## Design Score: 70 / 100 (Dashboard.tsx) Color discipline 13/18 ▓▓▓░ #000 headings; 3 accent hues Cards & elevation 8/12 ▓▓░░ 1px borders doing separation Coherence 6/12 ▓▓░░ sharp cards (l.22) + pill buttons (l.48); 3 accents ### Fix first (highest score gain) 1. Unify radius (pick soft 8–12px) + collapse to one accent → +9 2. Add empty + loading states to the orders list → +7 3. Drop 1px borders, use tone + ≤8% shadow → +4 ``` The "Coherence" category is the one that most predicts "looks AI-generated," precisely because it measures *system-wide consistency* rather than per-component prettiness. A component can be beautiful and still wrong — if it disagrees with its neighbors. If you remember one thing: Beautiful parts don't make a beautiful UI. Agreeingparts do. Pick one value per axis — radius, shadow, accent, spacing, icons, type, motion — write it down as a token, and make every new element inherit it instead of inventing a fresh choice. That single discipline is the difference between "a robot made this" and "a designer made this," and it's the cheapest, highest-leverage thing you can do for an AI-built interface. The corners are sharp? Then everything is sharp. All the way down. *Want the practical side? I covered the one-file fix that makes your vibe-coded app stop looking ugly in a companion post. And the full research-backed version — concrete spacing numbers, a type recipe per app type, layered-shadow and nested-radius recipes, all grounded in Refactoring UI / Material 3 / Apple HIG / WCAG — is open source (MIT): github.com/bitjaru/styleseed. A ⭐ helps more devs (and more AI tools) find it.*