What Is AI Slop? Building a Website That Doesn’t Look AI-Generated

Most AI-generated websites give themselves away at first glance: same gradient, same three cards, same typeface, same headline formula. People call this AI slop. In this article I go through the symptoms, the reason behind them, and how to break the pattern on four separate layers — from picking a design reference all the way to writing the copy.

This article summarizes and expands on Jack Roberts's video Claude Design Now Builds Beautiful $10,000 Websites (NO AI Slop). The hero-section problems, the copy review checklist and the line between inspiration and copying are additions of this post.

What is AI slop, and how do you spot it?

AI slop is what generative models produce on their default settings: output you cannot tell apart from anyone else's. On websites the symptoms are painfully obvious:

• The indigo-to-purple gradient. It has practically become a signature.
• Exactly three feature cards. Not two, not four — always three.
• Frosted glass effects and the same corner radius on every single element.
• The same typeface. Font is the most decisive element in a design and the least discussed one.
• Formula headlines. "Build tomorrow, today" — sentences that say nothing.
• Untouched copy. Most people edit the visuals and never lay a finger on the text the model wrote.

Treat that list as a checklist: if you can tick three items on your own site, your visitors notice them too.

Why does everything come out identical?

The reason is simple: everyone gives the same prompt. And the model reliably produces the same output for the same input. There is no incompetence here — quite the opposite, this is extremely consistent behavior.

The real issue is this: the model does not know on its own what good design is. If you never give it a standard, it produces the average of the distribution it was trained on. And that average is exactly what you are looking at.

Which is where the solution comes from: stop handing out prompts and start handing over a system. I walk through building that system level by level in the seven levels of AI design.

Layer 1: Choosing the right reference

The first step is finding sites in your own niche that genuinely look good. Award-winning site collections, design galleries and industry roundups exist for exactly this. If picking from hundreds of sites feels like too much, hand the job to the model: "look at this list and find the three examples closest to what I do" gets you an answer in minutes.

Once you supply a reference, the work becomes concrete. The model is no longer aiming at something vague like "a nice-looking education site" — it is working against a specific standard. Putting the reference and your own page side by side and listing the differences one by one is a separate job; I spelled that out in the design audit.

One warning: do not work from a single reference. If you take one site as your model, the result is a washed-out copy of it. Combining elements from several different sources is what produces a language that is actually yours.

Layer 2: An original visual language

The second layer is breaking the stock-image feel. The moment you have your own characters, your own illustration style, your own animations, the site separates itself instantly.

The video states a principle worth underlining: AI's job is not to take over your creativity, it is to take over the repetition inside the creative process. You decide what the character is and what the brand looks like; producing thirty variations of it is the machine's work. The moment you lose that distinction, you fall back to the average.

The workflow that works in practice is this: come up with the character or visual motif yourself, have the model generate variations, pick the ones you like and turn them into an asset inventory. Once the inventory exists, you can produce the same character in different scenes over and over — that is where consistency comes from. The same inventory logic works for icons and data visuals; motion graphics and icon automation is about exactly that.

Layer 3: Typography

Typeface is the single change that raises perceived quality the most. And it is still the most neglected part of the job.

A few practical notes:

• Get off the default system fonts. There are plenty of free typefaces that are genuinely good.
• Look at a font in real use. Not on specimen pages — see how it holds up on actual websites. The video recommends sites like Fonts In Use, which show typefaces in real-world use.
• Always check the license. Many fonts are free for personal use and not for commercial use. On client work that is a serious problem.
• Paying for a good font is a sensible investment. One line item changes how the whole design is perceived.

Choose based on what your brand is trying to say: a corporate product that needs to feel trustworthy and a playful learning app cannot use the same typeface.

Layer 4: Copy — where it really gives you away

Do the best design you can, generate the most beautiful images you can; if the copy is bad, nobody buys. The text is what gives away a site as AI-made more than anything else.

The copy-editing system shown in the video rests on these principles:

1. Don't make me think. Named after Steve Krug's book Don't Make Me Think: a visitor should not have to spend mental effort understanding the page. The moment a sentence gets complicated, you have lost them.
2. Name the pain first. The video credits this to Daniel Priestley's marketing approach. In your first sentence, say which problem of the reader's you solve — not what your product does.
3. One ask per screen. One screen, one idea, one call to action. Put two buttons of equal weight on the page and neither gets clicked.
4. Be concrete. "Fast and easy" says nothing. "Setup takes 4 minutes" says something.
5. Keep a banned-words list. Build your own; models tend to circle back to the same stock words.

In the video's example, the copy of a made-up Duolingo-style app that teaches AI runs through this system. A few of the suggested rewrites:

• "Get started now" → "Start your first lesson"
• "5 minutes wherever you are" → "The 5 minutes on your commute count too"
• "The easy way to learn AI" → "Everyone uses AI, very few use it well"

The same thing changes in all three: the abstract promise is gone, and a concrete scene the reader can picture in their own life takes its place.

If you are having the model write your copy, run the output through a second pass and ask for this specifically: strip the clichés, make every sentence concrete, make the calls to action specific. Good copy rarely comes out in one pass. To turn that second pass into a regular habit, a critic loop can do the job for you.

The hero section: the most commonly botched area

Most of the visitor's decision gets made on the first screen, and that is exactly where AI slop piles up thickest. Four problems keep coming back in hero sections:

• The visual competes with the message. A big, moving image pulls attention but drowns out the headline. The visual should support the message, not race it.
• Two buttons of equal weight. If "Try it free" and "Request a demo" carry the same visual weight, the visitor is forced to choose — and usually chooses neither. Make one of them primary.
• The headline describes the product, not the problem. "The next-generation project management platform" is a definition; "If your team doesn't know who's working on what" is a hook.
• A crowded subhead. Three lines of explanation crammed under the headline do less work than one clear sentence.

A simple test: open the page for three seconds, close it, then write down in one sentence what you understood. If you cannot write that sentence, the hero section is not working. Having someone else run the test is even more useful — you already know your own page.

A copy review checklist

Run the model's text through this list before anything goes live:

1. Does the reader's problem appear in the first sentence?
2. Does each section carry exactly one idea?
3. Is there a concrete number, duration or example, or is it all adjectives?
4. Are the calls to action specific ("Start your first lesson") or generic ("Get started")?
5. How many words from your own banned list slipped through?
6. Is there a sentence you stumble over when you read it out loud?

The sixth one sounds trivial but it catches a lot. AI copy can look fine on the page and sound artificial the moment you read it aloud; the only way to notice that is by reading it.

The line between inspiration and copying

There is one place where this method can easily go wrong. Using a brand's site as a reference is one thing; reproducing its visual identity one-to-one is another.

The standard I recommend: what you take from a reference should be a principle, not an asset. You can take its spacing rhythm, its approach to contrast, its sense of motion. The moment you take its character, its palette and its typography together, you are no longer building your own brand — you are diluting someone else's. Beyond the legal risk, it does not work commercially either: nobody remembers the second version. The video makes the same point: Duolingo is used only as a demonstration reference, and a real project should blend several designs.

In short

AI slop is not a talent problem, it is an input problem. The model produces the average because you gave it an average request. Once you have worked through all four layers — reference, visual language, typography and copy — the result stops looking like AI output and starts looking like your work.

Frequently Asked Questions

Is AI slop only a visual problem?

No. The most visible part is visual, but the most expensive part is the copy. A site with average design and good copy can still sell; a site with perfect design and formula copy cannot.

Does building a design system fix AI slop on its own?

Largely, yes, because a system replaces the defaults with your decisions. But if you build the system out of generic output, you have made the genericness permanent. Get to output you actually like before you freeze it into a system.

How do I pick a typeface?

Start from the brand's tone, not from the font. Describe your product in three adjectives, then look at typefaces that match those three. And always test with your real copy — a font that looks great in a specimen sentence can look terrible in your headline.

Can free fonts be used in commercial work?

Some can, some cannot. Never put a font into client work without reading the license text. This is one of the most expensive mistakes to fix after the fact.

Source

• Jack Roberts, Claude Design Now Builds Beautiful $10,000 Websites (NO AI Slop) (YouTube, August 2026). The AI slop symptoms, the four-layer approach, the copy principles and the example rewrites are based on this video; the hero-section problems, the copy review checklist and the FAQ are additions of this article.