Claude Code Website Design: Why It Looks AI-Generated, and How to Fix It

October 14, 2026

6 min readIncludes a live before/after and a self-check

Searches for Claude Code website design have gone nearly vertical this year, and the reason is easy to find. Claude Code will build a working website from one sentence. The problem people then search for is the next one: it looks like every other website Claude Code has built.

This post is about that second problem: where the “AI look” comes from, how to check whether your site has it, and the four fixes that make the biggest difference, in the order we would apply them.

Where the AI look comes from

A language model writes the most likely next thing. Ask it for a landing page with no other direction and the most likely landing page is the average of every landing page it has seen. Centred hero. Gradient. A headline that starts with “Unlock”. Three feature cards with an emoji each. None of those choices is wrong on its own. Together they are the visual equivalent of a stock photo.

The fix is not a cleverer prompt. It is giving the model something more specific than the average to aim at. Toggle the demo below to see the same hero built from defaults and from a real reference.

Look at what changed. It is not more code or more effects. The type scale got steeper, the palette got smaller, the layout stopped centring everything, and the copy said something specific. Every one of those is a decision. The AI version is what you get when nobody makes them.

Does your site look AI-generated? A self-check

Tick every sign that applies to the site you are building. The heavier signs count for more, because visitors notice them first.

Fix 1: write down the rules in CLAUDE.md

Claude Code reads CLAUDE.md at the start of every session, so it is the cheapest place to remove defaults for good. Be blunt and specific. “Make it look premium” does nothing. “No gradients” does a lot.

## Design rules
- Never use purple/blue gradients, emoji icons, or "Unlock/Supercharge/Elevate".
- Headings use the display font; body uses the text font. Never one font for both.
- Type scale ratio at least 1.333. The h1 is at least 4x body size on desktop.
- Left-align by default. Centre only when there is a reason.
- One accent colour. It appears on at most two elements per screen.
- Use only values from tokens.css. If a value is missing, ask; do not invent one.
- Every animation must explain itself: what it reveals, and why at that moment.

This will not make a site good on its own. It does stop the worst defaults coming back each time you open a new session.

Fix 2: add a design skill

Skills are instruction packs that Claude Code loads when a task matches. Several are built specifically to push front-end work away from generic output.

A skill improves taste. It still cannot tell Claude which exact shade, font or spacing your site should use. That is what the next fix is for.

Fix 3: give it a real reference (the biggest change)

Designers rarely start from a blank page. They start from references: sites they admire, a brand book, a moodboard. Claude Code works the same way, with one catch. A screenshot is a weak reference because Claude has to estimate every number from pixels. A measured reference gives it the numbers.

The workflow is short. Connect a capture tool (how to add an MCP server to Claude Code), then:

Use https://reference-site.com as the design reference.
1. Extract its design system: palette, type scale, spacing, radii, easings.
2. Write tokens.css from those values. Rename them to our brand, keep the ratios.
3. Build our hero using our copy, in the reference's typographic style.
4. List any value you could not find in the capture.

Note what this does not do: copy the reference. It borrows its system, the ratios and rhythm, and applies your brand, copy and content. That is how designers use references, and it stays well clear of the problems covered in is it legal to copy a website design. For pulling the system out in detail, see how to extract design tokens from a live website.

Fix 4: close the loop with screenshots

Claude Code writes CSS without seeing the result unless you show it. Give it a browser (Playwright MCP, Claude in Chrome, or a screenshot tool) and make comparing screenshots part of every pass:

Screenshot localhost:3000 at 1440px and 390px. Compare against the reference
at the same widths. List the three biggest visual differences, fix the first,
then screenshot again.

Fixing one difference at a time sounds slow. It is faster than asking for “make it match” and getting twenty small changes, half of which undo each other.

What each fix changes

A design prompt you can copy

Build the landing page for [product], for [audience].
Reference: https://reference-site.com (capture it; use its system, not its content).
Voice: [three adjectives]. One specific claim: [what you do that others don't].
Constraints:
- Only values from tokens.css (create it from the reference first).
- Display font for headings, text font for body; h1 ≥ 4× body on desktop.
- Left-aligned grid, max one accent colour, no gradients, no emoji icons.
- Motion only where it reveals something; reuse the reference's easing.
Work section by section. After each, screenshot at 1440 and 390 and compare.

Every line closes a gap Claude would otherwise fill with its average. The reference line closes the most. If you want to rebuild one specific effect from that reference rather than borrow its system, the workflow in how to clone a website with Claude Code covers that end to end.

FAQ