Skip to content

12 signs a screen was made by AI, and how to fix each one

A stipple ink drawing of a magnifying glass lying across a smartphone, the lens enlarging a few icons on the screen, on warm off-white paper

AI tools build screens fast now. Claude Code, Lovable, v0, Figma Make. You describe a page and you get a page. The strange part is that the pages look alike. Different products, different prompts, the same screen.

I spend a good part of my week looking at these screens. Some are mine, most come from people around me: founders, marketers, developers who built a landing page or a dashboard without a designer. The same problems come up in most of them. This is the list I check against, in the order I check it, with a fix for each sign. Once you see a sign, the fix takes about five minutes.

1. The purple-to-blue gradient

The hero has gradient text. Behind it sit two or three blurred colour blobs. The buttons glow. This is the strongest tell of all. It comes from the tools' training data, and a tool reaches for it as soon as the prompt says "modern".

Fix. One accent colour, taken from your logo or your product. A flat background. The headline in plain ink. If you miss the gradient after that, you miss a decoration.

2. Three cards in a row, each with an icon

"Fast. Secure. Scalable." Three equal boxes, a rounded icon on top of each, two lines of text under it. The structure says "features" without saying what the product does.

Fix. Write down the three things a real customer asked you about. Those are your blocks. If one of them needs a screenshot to be understood, give it a screenshot and the full width. Equal cards suit equal things, and your three things are rarely equal.

3. The same big radius on every corner

Cards, buttons, inputs, images, badges, all rounded by the same 16 or 24 pixels. The screen looks cut out of soft plastic.

Fix. Pick two values. One for controls (buttons, inputs, chips), one for surfaces (cards, images, panels). On this site controls are full circles and surfaces are square. You can pick anything, as long as the two groups read as different kinds of things.

4. The copy says nothing

"Unlock the power of seamless collaboration." "Transform the way you work." Each sentence is true for any product and tells the reader nothing about yours. The AI wrote it because you did not give it the words.

Fix. Say the sentence you would say to a friend who asked what you built, and write that down. One claim per block. One adjective per sentence at most, and swap each adjective you can for a number or an example. "Invoices out in 40 seconds" beats "lightning-fast invoicing".

5. The whole page is centred

The headline is centred. The paragraph under it is centred. So are the list and the footer. Centred text is hard to read past two lines, and when the whole page is centred nothing has a place.

Fix. Left-align each text block longer than one line. Centre only short things: a one-line headline, a single button. The page gets a left edge, and the eye gets a place to come back to.

6. Fake social proof

"Trusted by 10,000+ teams." Five-star quotes from "Sarah K., CEO". A row of grey logos the tool invented. The reader cannot check any of it, so they assume none of it is true, and they are right.

Fix. Delete all of it. Then put back only what is real, even if it is small. One quote from a named person with a link beats five from no one. If you have no proof yet, a page without proof is honest. A page with fake proof is a page that lies.

7. Each button looks primary

Three solid buttons in the hero. A solid button in each card. The reader has to work out which one you want them to press.

Fix. One filled button per screen, the action you want. The other buttons become outlines, ghosts or plain text links. The hierarchy does the selling, and the colour follows.

8. Icons and emoji on each line

An emoji in each heading. An icon before each list item. Icons from three different sets, with three different stroke weights. The page looks busy and reads slower, because each icon is one more thing to work out.

Fix. Remove each icon that carries no meaning the text does not. Keep the ones that do, in one set, one size, one stroke weight. No emoji in headings; a heading is already a heading.

9. The spacing has no rhythm

Twelve pixels here, eighteen there, twenty-seven between sections. Cards padded differently from each other. Nothing is wildly wrong and the page feels slightly off.

Fix. A spacing scale: 4, 8, 16, 24, 32, 48, 64, and only those. Give the agent that rule in writing, in its instructions file, and ask it to walk the page once and snap each gap to the scale. This fix alone makes a page look designed.

10. Borders, shadows and hover lifts all at once

Each card has a border, a drop shadow, and lifts two pixels when you hover it. The card is a static block of text, and nothing happens when you click it.

Fix. One way to separate a surface from the ground: a hairline border or a soft shadow. Hover effects only on things that react to a click. A card that is not a link stays still.

11. No states

The form has no error message. The table has no empty state. The button has no loading state and no focus ring. The page works in the one happy path the agent tested and falls apart in the others.

Fix. List the states before you ask for the screen: empty, loading, error, success, disabled, focused. Ask the agent for each one by name. Then press Tab through the whole page. If you cannot see where you are, neither can anyone who uses a keyboard.

12. Dark mode is inverted light mode

A pure black background, pure white text, the same gradient from sign one, borders that vanish. Someone flipped the colours instead of designing a second theme.

Fix. Tokens instead of colours. The ground is near-black. The text is off-white. Borders sit one step above the ground. If your colours have names like background, foreground, border and muted, dark mode is a second set of values for the same names, and the agent can keep both in sync. I wrote the whole setup down in a design system your coding agent can use.

Why they all look the same

The tools were trained on the same few thousand templates. When your prompt leaves a gap, the model fills it with the most common thing it has seen, and the most common thing is the list above. "Modern, clean, professional" maps to a purple gradient and three cards. The tool is doing what those words mean on the internet.

The next prompt needs fewer gaps. Say the colours, the corners, the spacing, the one action, the real words. I put the whole brief in how to brief Claude Code, Lovable or v0 for a landing page.

The order I check in

Copy first. If the words are generic, no amount of spacing will save the page. Then hierarchy: one action, one headline, one thing per block. Then rhythm: the spacing scale and the corners. Colour last. Most people start with colour, because it is the most visible, and it changes the least.

Pick one screen you shipped this month and count the signs. Most pages I see score six or seven. Which ones did yours get?

Get my next post by email

One email when a post goes up. Nothing else.