Why AI-made sites all look the same
If you don’t choose the taste, Claude Code chooses it — and it picks the one it’s already picked for everyone else:
-
Inter, and a blue-to-purple gradient. 12px rounded corners on everything.
-
Soft shadows under every card, cards inside other cards.
-
Identical spacing everywhere, generic headings, stock Lucide icons.
It’s the look you can spot from across the room as «made with AI», and it doesn’t only catch people with no taste: as long as your reasons stay in your head, the agent can’t read them and puts in its own. Taste has to be written down — that’s the point Emil Kowalski, design engineer at Linear, makes on his site: it’s not magic, it’s reasons you can put in writing.
Point 7 of docs/ux-ui.md deliberately left this open — «the visual style is NOT chosen in this document», and four tests in its place. It gets closed now.
Eight directions with a name
You don’t invent one: you pick a direction that already exists and has a name. These are the eight we come back to most often in practice.
Open a card to see its details.
Each card holds five things together — color, typeface, corners, shadows, motion: a direction isn’t a color. And each has its own way of breaking, in the last line: neo-brutalism turns into noise, luxury falls apart on a phone, claymorphism slips into childish.
The choice for PawSoul
The direction isn’t chosen by taste: it’s chosen from what the client has already said. Part 1’s brief has a whole group about this — visual style, palette, references, emotions to convey, elements to avoid — and for PawSoul it says: fun but not childish, Duolingo for the tone, Tinder only for how it works; avoid banking apps, grays, small text.
Then the four tests from point 7 cut the list down. They’re there to rule out, not to confirm: claymorphism falls on the second one (pastels plus puppies = a kids’ app), swiss falls on the same one from the other side (adult, never fun), luxury falls on the third (it lives on heavily treated photos, and here we have dogs photographed with a phone), modern dark falls on the first (it’s half the internet’s outfit). One is left.
Neo-brutalism
Cream instead of white, solid black for text and borders, red and yellow as action colors, hard shadows with no blur, sharp corners, heavy typography. It’s not Tinder at a glance, it’s fun without being childish, it frames the photos instead of treating them, and at 390px it stays itself — border, shadow, and solid color take up the same space on every screen.
From direction to instructions: docs/ui.md
The direction’s name alone isn’t enough for the agent. It becomes a file, like part 1’s document: docs/ui.md, made of checkable values instead of adjectives. «Modern and clean» gets translated by the agent into its own default; «background #FFFDF5, black 4px border, 8px shadow with no blur» can be checked by looking at the screen.
# Aesthetic direction — PawSoul
Direction chosen: neo-brutalism.
The loudness lives on the surface, never in the system: regular grid,
constant spacing, one single primary button per screen.
## Color
- Background: #FFFDF5 (cream, never pure white).
- Ink: #000000 for text, borders, and shadows. No grays: never #333, never #666.
- Action: #FF6B6B. Secondary: #FFD93D. Third: #C4B5FD for alternating sections.
- Every text passes AA contrast against its own background.
## Typography
- One typeface only: Space Grotesk. Weights 700 and 900; nothing under 500.
- Headings uppercase, body lowercase, body at 18px and never under 16px.
## Shape
- 0 radius everywhere. One exception: full pill for filters and labels.
- 4px black border on every element: cards, buttons, fields, the bar.
- No gradients, no transparency, no frosted glass.
## Depth
- Hard shadow, black, no blur: 4px on buttons, 8px on cards, always
bottom-right. On press the element drops 4px and the shadow disappears.
## Motion
- Transitions from 100 to 200ms, ease-out. No long fades.
- The card's swipe follows the finger 1:1.
## The pet photos
- Never touched: no filter, no overlay, no circular crop.
- Framed with a black border and hard shadow, at least half the card.
## Forbidden
- Grays, gradients, blurs, soft shadows.
- Intermediate rounded corners (8-16px): either sharp, or a full pill.
- Text under 16px and lines wider than 70 characters.
- Emoji instead of icons.The last section, «forbidden», is the shortest and the most useful: those are the AI-look tells from the beginning — grays, soft shadows, 12px corners — written as bans. Without that section they creep back in one screen at a time, and nobody notices until all ten have them.
Now the three files say it all: what you’re building (docs/ux-ui.md, part 1), what with (Next.js and shadcn/ui, parts 2 and 3), and what it looks like (docs/ui.md, this one). In part 5 they go into a single prompt and the ten screens get generated.