Why AI-built apps all look the same (the 13 tells, explained)
The specific visual patterns that make Lovable, Bolt, v0 and Cursor sites look generated, where each comes from, and what to do instead.
If you've browsed a few launch directories lately, you've seen it: different products, same website. A soft gradient, a centered headline that says something about "your workflow", three rounded cards with icons, a frosted navbar. This isn't a coincidence and it isn't laziness. It's what you get when every tool starts from the same parts and nobody overrides the defaults.
We built the Slop Score scanner around 13 specific tells. Here's what each one is, why it happens, and the fix.
Where the sameness comes from
Most AI builders generate React + Tailwind CSS, usually with shadcn/ui components and Lucide icons. Those are good tools. But they ship with defaults (Tailwind's indigo-500, shadcn's radius, Lucide's 24px stroke-2 icons, Inter as the font everyone pairs them with), and language models were trained on thousands of sites that kept those defaults. Ask for "a modern SaaS landing page" and the most statistically likely answer is the average of all of them.
So the fix is never "use a different builder". It's "make decisions the model can't guess", and write them into your prompt.
The tells
1. Purple and indigo gradients
from-indigo-500 to-purple-600 is probably the most generated CSS class string on the internet. Gradients aren't banned, but a gradient as your whole brand is a tell. Instead: commit to one flat accent color and use a gradient once, if at all.
2. The default Tailwind palette
Even without gradients, sites built on stock slate-900, gray-50, indigo-600 and emerald-500 feel familiar because they are. Instead: define five custom hex tokens. See color palettes that don't look AI.
3. Inter (or system fonts) for everything
Inter is a great text face. When it's the only face, with headings just set bolder, there's no voice. Geist, Poppins, DM Sans, Manrope and Plus Jakarta Sans have become the same signal. Instead: pair a characterful display face with a readable text face (pairings here).
4. Emoji as icons
🚀 Fast. ⚡ Powerful. 🔒 Secure. Emoji render differently on every OS and read as placeholder. Instead: no icons, or one consistent icon set.
5. Glassmorphism
backdrop-blur on navbars and cards. It costs performance, often hurts contrast, and has become shorthand for "template". Instead: solid surfaces with a clear border.
6. The uniform icon-card grid
Three (or six) identical cards, each with an icon in a tinted circle, a two-word heading and a sentence. This layout says "I had features and didn't know which mattered". Instead: lead with your most important feature, give it a screenshot, and list the rest.
7. rounded-2xl on everything
Buttons are pills, cards are 16-24px rounded, inputs are rounded, images are rounded. When everything is soft, nothing has edges, and the page looks inflated. Instead: pick one small radius (0-6px) and use it consistently.
8. The centered-everything hero
Badge, headline, subhead, two buttons, all centered. Instead: left-align, use two columns, and show the product.
9. Generic AI copy
"Unlock", "supercharge", "seamless", "elevate", "empower", "effortless", "all-in-one", "in seconds", "take your X to the next level". These words describe nothing. Instead: say what it does and for whom. More on copy.
10. Default Lucide icons everywhere
Lucide is lovely, but 30 stroke-2 icons on a landing page is a fingerprint. Instead: use far fewer icons, or a set with a different personality (Phosphor, Tabler at a different weight, or custom glyphs).
11. The builder badge
"Edit with Lovable", "Made with Bolt", "Built with v0". It's free advertising for the builder and a cue to the visitor to look for the other tells. Instead: remove it before launch.
12. Flat type scale
A 40px headline over 18px body text is a 2.2x ratio, which looks timid. Designed sites usually go 3.5x or more on the hero. Instead: make the display size dramatic and the body size comfortable.
13. Mobile horizontal overflow
Something on the page is wider than a phone and the whole page wiggles sideways. Builders preview on desktop. Instead: test at 390px and fix anything that overflows.
What the data says
We scanned public showcase apps built with Lovable, Bolt and v0 for the Slop Leaderboard. The most common tells there are typography and layout defaults rather than colour. That's useful, because fonts and layout are cheap to change with one prompt each. Purple gradients get the attention, but the type stack is the quieter tell that turns up nearly everywhere.
How to fix it in an afternoon
- Write down fonts, five hex colours and a radius before prompting. Our Lovable guide walks through the exact prompts.
- Apply those tokens in one styling-only prompt.
- Rework the hero and the feature grid.
- Rewrite the headline, subhead and buttons yourself.
- Remove emoji, glass and the badge.
- Check mobile at 390px.
- Scan it and compare scores.
If you use Cursor or Claude Code, add a rules file so the model stops reintroducing defaults: see Cursor rules for UI design.
FAQ
Why do AI app builders all produce similar designs?
They share the same building blocks (Tailwind, shadcn/ui, Lucide, Inter) and they were trained on a web full of SaaS templates built from those blocks. With a vague prompt, the model picks the most common answer, which is the same answer for everyone.
Is looking AI-generated actually a problem?
It depends on your audience. For an internal tool, not really. For anything where trust or taste matters (paid products, agencies, consumer apps), visitors increasingly read the default look as low effort.
What's the single biggest tell?
In our scans, Inter/system-font-only typography and the uniform icon-card grid show up most often. A purple or indigo gradient is the one people notice fastest.