{"slug": "why-ai-generated-uis-look-off-and-the-one-principle-that-fixes-it", "title": "Why AI-Generated UIs Look 'Off' — and the One Principle That Fixes It", "summary": "A developer identified that AI-generated user interfaces often look 'off' due to incoherence—components designed in isolation without consistent design decisions. The fix is to define and reuse a single set of design tokens (e.g., corner radius, shadow, accent color) across all components, treating mixed axes as lint errors.", "body_md": "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.\n\nFor 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:\n\n**Incoherence.**\n\nThe parts don't agree with each other. And once you can see it, you can't unsee it.\n\n*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.*\n\nHere's a UI with nothing \"wrong\" in it:\n\nEvery 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.\n\nThat 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.\n\nA 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.\n\nHumans 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.\n\nSo 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.**\n\nHere's the whole idea in one sentence:\n\nFor each design axis, pick exactly\n\nonevalue or family, encode it as a token, and apply iteverywhere.\n\nCoherence 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.\n\nThese are the axes that have to stay unified:\n\n| Axis | Pick ONE, system-wide | Failure mode when mixed |\n|---|---|---|\nCorner / radius |\nsharp 0–4px · soft 8–12px · pill 9999px | sharp dialog + rounded buttons = \"two products glued together\" |\nShadow |\none scale, one light source (above-left), one tint | \"a scene with two suns\" |\nAccent color |\none accent for emphasis (+ semantic red/green/amber) | nothing reads as the action |\nSpacing unit |\none 8px grid (4px half-step) | off-grid 7/13/19px reads as \"sloppy\" |\nIcon style |\none family, one fill mode, one stroke weight | mixing sets looks \"out of place\" |\nType scale |\none modular scale, ≤2 families | arbitrary sizes destroy rhythm |\nMotion |\none duration set + one easing family | some snappy, some sluggish = different apps |\nControl height |\nshared height set (e.g. 40px) | a 44px input beside a 32px button breaks the baseline |\n\nThe single best instinct I've heard a non-designer voice it as:\n\n\"If the corners are sharp, everything should be sharp.\"\n\nExactly right — and it generalizes to *every* row in that table. **Treat a mixed axis as a lint error, not a style choice.**\n\nLet's make four of these concrete.\n\nFirst, radius is a **token**, never a magic number. Define a small scale and reference it everywhere:\n\n```\n:root {\n  --radius-sm: 8px;   /* inputs, buttons   */\n  --radius-md: 12px;  /* cards, menus      */\n  --radius-lg: 16px;  /* modals, sheets    */\n  --radius-full: 9999px;\n}\n```\n\nThen 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`\n\npanel with `rounded-full`\n\nbuttons.\n\nThere'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*:\n\n```\ninner radius = outer radius − padding\n.card {\n  --pad: 16px;\n  border-radius: var(--radius-lg);          /* 16px */\n  padding: var(--pad);\n}\n.card > .thumbnail {\n  /* 16 − 16 = 0; clamp so it never goes negative */\n  border-radius: max(0px, calc(var(--radius-lg) - var(--pad)));\n}\n```\n\nIf 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.\n\nThe fastest way to make depth look fake is one hard `box-shadow`\n\n. 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:\n\n```\n/* card — sits near the page */\n--shadow-md:\n  0 1px 2px  hsl(220 40% 20% / 0.08),\n  0 2px 4px  hsl(220 40% 20% / 0.08),\n  0 4px 8px  hsl(220 40% 20% / 0.08);\n\n/* modal — floats toward the user */\n--shadow-xl:\n  0 2px 4px   hsl(220 40% 20% / 0.06),\n  0 8px 16px  hsl(220 40% 20% / 0.06),\n  0 16px 32px hsl(220 40% 20% / 0.06),\n  0 32px 64px hsl(220 40% 20% / 0.06);\n```\n\nThe 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.)\n\nIn dark mode, shadows nearly vanish, so switch to **tonal elevation** — lighter surfaces for higher elevation — and never use pure `#000`\n\nas your base (Material recommends `#121212`\n\nwith white overlays per level).\n\nMost \"AI rainbow\" UIs come from reaching for a new hue every time something needs emphasis. The discipline:\n\n```\n:root {\n  --accent: #5b5bd6;\n  /* greys tinted slightly toward the accent's hue, not 0-saturation */\n  --grey-50:  hsl(240 20% 98%);\n  --grey-200: hsl(240 14% 90%);\n  --grey-500: hsl(240 8%  55%);\n  --grey-900: hsl(240 12% 14%);  /* body text — NOT #000 */\n}\n```\n\nAnd 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.\n\nSnap every margin, padding, and gap to a single scale — `4, 8, 12, 16, 24, 32, 48, 64`\n\n— 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.\n\nA concrete ladder for forms:\n\n```\nlabel → input        : 4–8px\ninput → input         : 12–16px\ngroup → group (section): 24–32px\n```\n\nWhen 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.\n\nWriting 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.\n\nI 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.\n\nA trimmed example of what that output looks like:\n\n```\n## Design Score: 70 / 100   (Dashboard.tsx)\n\nColor discipline   13/18  ▓▓▓░  #000 headings; 3 accent hues\nCards & elevation   8/12  ▓▓░░  1px borders doing separation\nCoherence           6/12  ▓▓░░  sharp cards (l.22) + pill buttons (l.48); 3 accents\n\n### Fix first (highest score gain)\n1. Unify radius (pick soft 8–12px) + collapse to one accent  → +9\n2. Add empty + loading states to the orders list            → +7\n3. Drop 1px borders, use tone + ≤8% shadow                  → +4\n```\n\nThe \"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.\n\nIf you remember one thing:\n\nBeautiful parts don't make a beautiful UI.\n\nAgreeingparts do.\n\nPick 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.\n\nThe corners are sharp? Then everything is sharp. All the way down.\n\n*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.*", "url": "https://wpnews.pro/news/why-ai-generated-uis-look-off-and-the-one-principle-that-fixes-it", "canonical_source": "https://dev.to/kiwibreaksme/why-ai-generated-uis-look-off-and-the-one-principle-that-fixes-it-4j20", "published_at": "2026-06-16 04:33:17+00:00", "updated_at": "2026-06-16 04:47:10.182620+00:00", "lang": "en", "topics": ["artificial-intelligence", "generative-ai", "ai-tools", "developer-tools"], "entities": ["Refactoring UI", "Material Design 3", "Apple HIG", "IBM Carbon", "WCAG", "Financial Times", "Goran Paun", "Steve Schoger"], "alternates": {"html": "https://wpnews.pro/news/why-ai-generated-uis-look-off-and-the-one-principle-that-fixes-it", "markdown": "https://wpnews.pro/news/why-ai-generated-uis-look-off-and-the-one-principle-that-fixes-it.md", "text": "https://wpnews.pro/news/why-ai-generated-uis-look-off-and-the-one-principle-that-fixes-it.txt", "jsonld": "https://wpnews.pro/news/why-ai-generated-uis-look-off-and-the-one-principle-that-fixes-it.jsonld"}}