Why AI websites all look the same

Open any landing page an AI built this year and you can play bingo. A purple-to-blue gradient behind the headline. The headline itself: "Unlock your potential." Three cards in a row, each with a tiny icon and two lines that say nothing. A rounded button, a rounded font, a strip of testimonials nobody believes.

You spot it in half a second, and so does everyone you send it to. If you're building a site for your business with Claude Code, that is the one thing you can't afford.

Why they all look the same

Ask a model for a landing page and give it no direction, and it has to pick a look from somewhere. It picks the one it has met most often. Thousands of sites, blended into one. Nothing is wrong with that design, which is exactly the problem: it is the average of the web, and the average is what people have started calling slop.

So a smarter model doesn't fix it. A model that is told where to aim does.

What the same page looks like after

Take a bookkeeping firm for freelancers. This is the page you get with no direction.

The headline reads "Unlock your financial potential." Under it, a gradient and a stock illustration of a laptop. Then three cards: Fast, Secure, Reliable, each with an icon. Then a button that says "Get started."

And this is the same page after a design pass.

The headline says what the firm does: "Your VAT report, ready before you remember it's due." One line underneath explains how. There is one strong photograph, of a real desk with a real receipt pile, instead of three icons. The three cards become a short, plain description of what happens in your first month. The button says "Send us last month's receipts."

Nothing about the second page is fancier. It has a hierarchy (you know what to read first), one image that carries weight, and copy that could only belong to this business. That is the whole gap between a template and a site.

The toolkit

Design skills are packages of instructions that Claude Code loads when it builds an interface. Here are the five kinds I'd actually reach for, and when.

Taste Skill, for art direction

It gives the page a direction before a line of code is written. It picks one of 20 researched directions, uses real, openly licensed photographs with credits, then opens the page in a real browser at three widths, looks at its own screenshots and fixes the top three problems. It repeats that for up to three rounds. Reach for it when you are starting a page from nothing. It needs Node 22 or newer and Chrome, Edge or Chromium, and no API keys.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Impeccable, for the anti-slop audit

One skill, 24 commands, live iteration in the browser, and 62 deterministic detector rules aimed at the patterns that make AI front ends look generic. Reach for it when you already have a page and it feels off but you can't say why. Run /impeccable audit to find the problems, /impeccable critique for a design opinion, /impeccable polish for the final pass.

npx impeccable install

Or, inside Claude Code, add it with /plugin marketplace add pbakaus/impeccable and install it from /plugin. Either way, run /impeccable init once afterwards.

Animated component libraries, for personality

A library of animated components gives a hero section or a pricing table some life. Reach for them last, once the page is right, and ask for fewer effects than you think you want.

GSAP-based motion skills, for polish

They teach Claude how to add motion so it looks professional and not tacky: what to animate, how long it should take, what should stay still. Same rule as above. Motion polishes a good page and cannot rescue a weak one.

Playwright, for testing like a visitor

It lets Claude drive real browsers the way a visitor would: fill the contact form, submit it with a missing field, click every menu link, and do it in several browsers at once without a window ever opening on your screen. Reach for it the moment the page has a form, a checkout or any button that has to do something.

The part that actually moves quality

Look at that list again and notice which ones keep their eyes open. Taste Skill reviews its own screenshots. Impeccable iterates live in the browser. Playwright clicks through the result. The animation packages, useful as they are, mostly give Claude better instructions and trust it to follow them.

That difference is bigger than it looks. A style instruction without a check is a wish: you asked for restraint, you got something, and nobody confirmed the two match. When the tool opens the page, looks at what it built, and goes back to fix it, the instruction becomes a result. Build, look, fix. That loop is what separates a skill that improves your page from a prompt in a nicer wrapper.

What they won't do for you

They don't know your customers. Detector rules catch generic patterns; they can't tell whether the page sounds like you. The headline about the VAT report above only works because someone who knows the business wrote it. Give Claude your real wording, your real photos, your real offer, and let the skill handle the rest.

They also run code and commands on your machine. Read what you install, and try it on a branch first.

Try this week

Pick one page you already have. Run Impeccable's audit or Taste Skill on it, and ask Claude for screenshots before and after. Judge the screenshots, not the promise. If the tool never opens your page in a browser, it is a style prompt in a different package.