Why does my UI look AI-generated?
Patterns that commonly make an interface read as generic or generated: why AI tends to produce each one, why it can be a problem, and what to try instead.
How to read this
These are heuristic signals, not proof of anything, and none is wrong in itself. One or two on a screen means little. Several together, with no reason behind them, is what reviewers notice.
Craft guidanceReviewing AI-generated UI
Containers
Everything sits inside a card
- Why AI often does this
- Cards are the easiest way to create separation, so generated layouts reach for them by default.
- Why it can be a problem
- Every piece of information gets the same container treatment, so the page loses hierarchy.
- Try instead
- A section heading, spacing and at most one meaningful container.
Pattern
One direction
Not every group needs a container. Spacing and a divider can do the same job. Rounded containers nested inside rounded containers
- Why AI often does this
- Each layer was added to separate things the layer above already separated.
- Why it can be a problem
- Each layer adds padding, a border and a radius, and the content ends up small inside a stack of frames.
- Try instead
- Flatten to one level. Use dividers or spacing inside it.
The same card layout repeated for unlike content
- Why AI often does this
- A template was applied to the content, not designed from it.
- Why it can be a problem
- Unlike things look alike, so people cannot tell at a glance what kind of thing each one is.
- Try instead
- Let different content take different shapes: a table, a list, a sentence.
A row of generic KPI tiles
- Why AI often does this
- Three or four big-number tiles are the stock opening of a generated dashboard.
- Why it can be a problem
- Numbers without context or comparison cannot be acted on, and they push the real work below the fold.
- Try instead
- Lead with the one number people act on, in context, with what changed.
Pattern
One direction
Lead with what the person needs to do next. A row of big numbers is only useful if someone acts on them.
Shape
16–24 px radii on most things
- Why AI often does this
- Large radii read as friendly and modern, so they get applied everywhere.
- Why it can be a problem
- Small controls turn into pills and the whole product takes on one soft, anonymous tone.
- Try instead
- Two or three radius values tied to component size. 6–8 px is a safe default.
Pattern
One direction
A small set of radii, sized to the element. Large radii on everything flatten the difference between a card and a button. Pill buttons, pill tabs and pill badges throughout
- Why AI often does this
- Fully rounded shapes are a quick way to look polished.
- Why it can be a problem
- When buttons, tabs and badges share a shape, people cannot tell what is clickable.
- Try instead
- Keep pills for chips and status. Give buttons the same radius as fields.
Pattern
One direction
Tabs, buttons and badges are different things. Giving each its own shape says which is which. Badges and status pills on most items
- Why AI often does this
- Labels are added to look informative, without a status system behind them.
- Why it can be a problem
- A status shown on everything distinguishes nothing.
- Try instead
- Show status only where it differs from the norm.
Colour and effects
Gradient backgrounds with no brand reason
- Why AI often does this
- A gradient fills empty space and signals effort.
- Why it can be a problem
- It competes with content for attention and makes text contrast unpredictable.
- Try instead
- A flat colour. Use the space for content or remove it.
Pattern
One direction
A flat surface lets the content carry the page. Keep a gradient for when the brand actually has one. Purple-to-blue gradients
- Why AI often does this
- This palette has become the default look of AI products.
- Why it can be a problem
- It signals a generic AI product before anyone has read a word.
- Try instead
- Colours drawn from the actual brand or subject.
Glassmorphism with no functional purpose
- Why AI often does this
- Blur and translucency look advanced but rarely help legibility.
- Why it can be a problem
- Text over a blurred, changing background is hard to keep legible.
- Try instead
- An opaque surface with a border. Keep blur for content that genuinely scrolls beneath.
Floating blobs or abstract decorative shapes
- Why AI often does this
- Decoration stands in for a point of view.
- Why it can be a problem
- They take space and attention and tell the reader nothing about the product.
- Try instead
- Nothing, or imagery that shows the product or subject.
Soft shadows under everything
- Why AI often does this
- A uniform shadow is a default style, not a statement about height.
- Why it can be a problem
- With everything lifted, nothing reads as above anything else.
- Try instead
- Shadows only on surfaces that overlap others.
Glowing buttons and outlines
- Why AI often does this
- A glow makes a control look important without any decision about hierarchy.
- Why it can be a problem
- When several things glow, the emphasis cancels out, and the effect rarely passes for a clear focus state.
- Try instead
- One solid primary button, and a plain, high-contrast focus ring.
Content
Random floating illustrations
- Why AI often does this
- Stock-style illustration fills space where content was never specified.
- Why it can be a problem
- It adds visual weight with no information, and dates the product quickly.
- Try instead
- A real screenshot, real data, or nothing.
Emoji used as icons or decoration
- Why AI often does this
- Emoji add colour quickly without an icon system.
- Why it can be a problem
- They render differently on each platform and are read aloud by screen readers.
- Try instead
- One icon family, used where an icon aids recognition.
An icon beside every heading
- Why AI often does this
- Icons are added for rhythm, not meaning.
- Why it can be a problem
- Icons that mean nothing teach people to ignore the ones that do.
- Try instead
- Icons only where people would recognise them faster than the word.
Generic microcopy
- Why AI often does this
- Placeholder-grade text such as Welcome back or Get started could belong to any product.
- Why it can be a problem
- It could belong to any product, so it tells the user nothing about this one.
- Try instead
- Copy that names this product's real objects and actions.
Charts or analytics with no product purpose
- Why AI often does this
- Charts make a screen look data-rich.
- Why it can be a problem
- Made-up data hides whether the design works with real data.
- Try instead
- Only the data someone would act on, with real labels and units.
Layout
Huge marketing headings inside a product screen
- Why AI often does this
- Landing-page patterns are carried into tools, where they push the work down.
- Why it can be a problem
- In a tool, a large heading costs the space people need for their work.
- Try instead
- A page title of 24–32 px and the content straight after.
Every section centred
- Why AI often does this
- Centring avoids deciding on a structure.
- Why it can be a problem
- Centred blocks share no edge, so the eye has no line to follow down the page.
- Try instead
- A strong left edge, with centring kept for short, single-purpose moments.
Pattern
One direction
A shared left edge gives the eye a line to follow. Centre the things that deserve it. Large empty space with no structural reason
- Why AI often does this
- Whitespace is used to look expensive, not to group.
- Why it can be a problem
- People scroll further to see less, and related things drift apart.
- Try instead
- Spacing that follows the hierarchy: tight inside groups, wide between them.
Pattern
One direction
Space should show what belongs together. Related things sit close; the gap goes between groups. Few shared alignment lines
- Why AI often does this
- Blocks were composed one at a time, not on a grid.
- Why it can be a problem
- The screen looks assembled, and small misalignments read as carelessness.
- Try instead
- One or two vertical lines that everything hangs from.
An oversized search bar as the centrepiece
- Why AI often does this
- A big input is an easy hero when there is no real content to lead with.
- Why it can be a problem
- It promises that search is the main task when it may not be.
- Try instead
- Search sized to its importance in the task.
Dense and spacious areas mixed without reason
- Why AI often does this
- Sections were generated separately with different assumptions.
- Why it can be a problem
- The product feels like several products, and people must readjust on every screen.
- Try instead
- One density for the screen, chosen for how it is used.