Why AI-built UIs all look the same, and the 4-step fix we use with Codex and Claude Code

otterdev — Tue, 10 Nov 2026 11:53:24 +0000

Ask Codex or Claude Code for a landing page and you can usually tell, from across the room, that an agent made it. Violet-to-indigo gradient behind the hero. A headline with gradient text. Frosted-glass cards with a soft purple glow. A row of emoji as feature icons. "Seamless", "supercharge", "unlock". Inter everywhere.

None of these are wrong on their own. The problem is that every model reaches for the same safe defaults, so the result looks like every other generated page. People have started calling it AI slop.

We build a design tool for Codex, so we have been fighting this on our own screens. Here is what worked, what did not, and the small open-source skill that came out of it.

What did not work: longer rule lists

The first thing everyone tries is a prompt or skill full of rules: "no purple gradients, no glassmorphism, no emoji icons, use a 4px grid". It helps a little. Then two things happen:

The agent swaps one default for another. Ban violet and you get beige, a serif headline and a terracotta button. That combination is now so common it has become its own tell.
The next screen drifts. Even when one page comes out well, nothing records why. Open a new session, ask for the settings screen, and you are back to the defaults.

Rules tell the agent what not to do. They never tell it what your product should look like.

What worked: make the choice, then write it down

What fixed it was copying what a designer does on day one. Four steps:

1. See three real directions before restyling anything

Instead of letting the agent pick a style, have it build the same key screen three times, with your real content, in three directions that differ on purpose: say, one light and editorial, one dark and dense, one soft and friendly. Put them side by side and choose. Or mix: "A's type with C's colors".

This is the step that matters most. Choosing from rendered options is far easier than describing a style in words, and it forces a decision that a rule list never does.

2. Save the choice as DESIGN.md

Write the chosen direction into a DESIGN.md file at the root of the repo: colors as named tokens with hex values, two font families and a type scale, a spacing unit, radius, shadows, and short rules for buttons, inputs, cards and navigation.

Every agent can read Markdown. Once the file exists, a new session starts from your design instead of from the model's defaults, and you can point any tool at it.

3. Apply it in passes, not all at once

Asking for "make it look like DESIGN.md" in one go tends to produce a half-restyled page. Passes work better, in this order:

Tokens: replace hard-coded colors, sizes and radii.
Type: two families at most, the system's scale, one clearly largest line per screen.
Spacing and layout: one spacing unit and its multiples.
Color: neutrals carry the screen; the primary color shows up where the user acts, about once per view.
Components: real icons (Lucide, Phosphor, SF Symbols), never emoji as icons.
Copy: plain words from the product. Cut "seamless" and "supercharge".
Details: hover, focus, empty, loading and error states; 4.5:1 contrast for text.
Motion: only where it explains a change.

4. Check for the tells with a script

Eyes get used to a screen quickly, so we wrote a small checker that scans HTML, CSS, JSX, TSX, Vue, Svelte and Astro files for the usual tells. On our deliberately generic example page it prints (excerpt):

ERROR tally.html:11  [violet-gradient] Purple, violet or indigo gradient. Use a flat color from the design system.
WARN  tally.html:14  [glassmorphism] Backdrop blur. Use solid surfaces unless this is an overlay that really floats.
ERROR tally.html:21  [gradient-text] Gradient text. Use one solid color and let size carry emphasis.
ERROR tally.html:36  [emoji-icon] Emoji used in the UI. Use a real icon set, or no icon.
WARN  tally.html:42  [filler-copy] Filler marketing word. Say what the product does.
WARN  tally.html     [arbitrary-spacing] Spacing values off a 4px grid: 6, 10, 11, 13, 14, 22, 26, 34px.

1 files checked: 12 errors, 12 warnings.

The three directions built from the same content report none. A clean run does not mean a screen is good; it means the obvious tells are gone and you can judge the design itself.

The skill: pretty-ui

We packaged the four steps as an open-source agent skill called pretty-ui. It runs the whole loop: reads your project, audits what is there, builds three directions with your content, opens a comparison page, saves your pick as DESIGN.md, applies it pass by pass, and runs the checker before and after. Nothing is restyled until you choose.

It works with Codex, Claude Code, Hermes Agent, or any agent that reads SKILL.md, for websites, web apps and mobile apps (React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, React Native, SwiftUI, Flutter and more). It ships with 24 design systems, each with a contrast-checked palette and a font pairing that is not Inter.

Install for Codex:

codex plugin marketplace add ummydev/pretty-ui
codex plugin add pretty-ui@pretty-ui

For Claude Code:

/plugin marketplace add ummydev/pretty-ui
/plugin install pretty-ui@pretty-ui

Or any agent: npx skills add ummydev/pretty-ui. Then ask in plain words: "Make this landing page look less AI-generated."

The checker also runs on its own, with Node 18+ and no dependencies:

node skills/pretty-ui/scripts/check.mjs src/

Repo: github.com/ummydev/pretty-ui (MIT).

If you do not want another skill

The approach works without it. The short version:

Before any restyle, ask your agent for three different directions of one screen as separate HTML files, and pick one yourself.
Save the pick as DESIGN.md and tell the agent to read it first in every session.
Restyle in passes: tokens, type, spacing, color, components, copy, states.
Search your code for backdrop-filter, background-clip: text, gradients with violet or indigo, and emoji inside buttons and headings.

We keep a longer list of the tells, with a prompt to fix each one, here: AI UI design tells and how to avoid them. The 24 design systems are browsable with live previews at codexdesign.io/design-systems.

Disclosure: we build Codex Design, a canvas for designing UI with Codex, and wrote pretty-ui along the way. The skill is free and does not need our product.

What tells do you see most in AI-generated UI? We are collecting them for the next version of the checker.

DEV Community: otterdev