AI-generated UI: the 6 signs that make it look like AI slop and how to fix them in a few minutes

You can spot an AI-generated UI by six details: default fonts, a purple gradient, three identical cards, all text centered, inconsistent text sizes and every word capitalized. Claude Code, Codex, Cursor and Lovable can generate great interfaces, but they often fall back on the same patterns. Fixing these six points takes a few minutes and makes the web app look more polished, recognizable and professional.

Why do AI-generated UIs all look the same?

Generative AI tools pick the most common solutions when they get no guidance. The result is web apps that all look alike: same fonts, same colors, same landing page structure. People immediately associate them with so-called AI slop, content mass-produced by AI with no deliberate choice behind it.

The problem is about how the product is perceived. A UI that looks auto-generated signals little care, even when the software underneath works well. I’ve seen the same effect with writing: I covered it in the article on AI slop on LinkedIn.

What are the 6 signs to fix?

1. Default fonts

Inter, Roboto and Open Sans are everywhere by now. They are the fonts AI picks when you don’t tell it anything. Changing the font is the fastest fix, and on its own it gives the web app a very different visual impact.

2. Purple gradient

The purple gradient has become a synonym for AI slop. The fix is simple: replace the purple with your brand color. The UI instantly looks more original and more consistent with the rest of your communication.

3. The usual three identical cards

Three side-by-side cards describing the features of a product or service are one of the most repeated patterns in AI-generated landing pages. Break that symmetry with components that differ from each other, even asymmetric ones. The features section stops looking like a template you’ve already seen.

4. All text centered

When a landing page is generated by AI, headlines, CTAs and every other piece of text almost always end up centered. Choose alignment deliberately: for each block, figure out where the text makes more sense, left or right, and center only where it really helps.

5. Inconsistent text sizes

Even small differences in font size get noticed. The fix is to define a consistent typographic style and always give it to Claude Code, so it follows it on every screen. Text will always have the same size for the same role. This detail makes the UI look much more professional.

6. Every word capitalized

Capitalizing every word is a typical habit of AI-generated headings. Use a capital letter only at the start of the sentence. The text becomes more readable and also more correct.

How do you apply these fixes with Claude Code?

The six signs share one cause: AI picks the default when it gets no rules. The most effective way to avoid them is to give Claude Code, Cursor or Codex your design choices before it generates the interface, instead of fixing them one screen at a time.

In practice, these are the instructions to prepare:

• the font to use instead of Inter, Roboto or Open Sans;
• your brand palette, with no purple gradient;
• a type scale with sizes for headings, subheadings and body text;
• rules for alignment and capitalization;
• an instruction to avoid sections made of identical cards.

This is the same principle as spec-driven development, applied to design: the clearer the spec, the less the agent has to make up.

Where should you start?

If you already have a web app generated with AI, look at it again with these six signs in mind. A few minutes are enough to completely change how your product is perceived, and your first step can be the font.