How to Stop Claude Code from Building Generic AI Frontends

You can spot an AI-built landing page from across the room. The code works. It is responsive. And it looks exactly like the last hundred pages built the same way. The problem is rarely the model's ability. It is that nobody gave it a point of view, so it falls back to the safest average it knows.

This guide is the process I use to get frontends out of Claude Code that look designed. It has four parts: know the tells, set a direction, give Claude eyes, and review before you ship.

Learn to see the tells

Before you fix anything, get good at spotting the defaults. These show up again and again:

• A purple or blue to violet gradient behind the hero
• Frosted glass cards floating over a blurred background
• Three identical cards in a row, each with an icon, a bold title and two lines of text
• One sans serif everywhere, usually at the same two or three sizes
• The same large corner radius on every element
• Gray text on a colored background with weak contrast
• Everything centered, every section the same height and rhythm
• Headlines that promise to transform or supercharge something

None of these is wrong on its own. The problem is when they appear together because nobody made a decision. Once you can name them, you can ban them.

Decide the direction yourself

Most slop comes from vague prompts. "Build a modern landing page" gives Claude no constraints, so it picks the most common answer. Write a short direction file in your project root and point Claude at it. I call mine DESIGN.md, but the name does not matter:

# Direction
Product: a budgeting app for couples.
Feeling: warm, personal, a little handmade. Think printed
stationery, not fintech dashboard.

# Type
Headings: a serif with character. Body: a quiet humanist sans.
Use a clear scale with real contrast between levels.

# Color
Off white background, near black text, one accent (terracotta).
No gradients. No glass effects. No purple.

# Layout
Asymmetric. Vary section rhythm. Left aligned text by default.
Use real content, never lorem ipsum or placeholder testimonials.

# Banned
Three equal feature cards. Emoji as icons. Stock hero blobs.

Then import it from your CLAUDE.md. The @ syntax pulls the file into context at the start of every session:

Follow the design direction in @DESIGN.md for all UI work.
If a request conflicts with it, ask me first.

Add one taste skill, not five

Design skills help because they give Claude opinions it would not have on its own. Anthropic's frontend-design skill is the safest start. It asks Claude to commit to a clear aesthetic before writing code.

/plugin install frontend-design@claude-plugins-official

There are good community options too. ui-ux-pro-max brings a searchable library of styles, palettes and font pairings. taste-skill focuses on layout, typography and spacing choices that avoid the generic look. Emil Kowalski's skills cover motion and interaction detail.

Here is my strong opinion: pick one. Each of these skills has its own taste, and several in the same session give Claude conflicting rules. You get a page that follows a bit of everything, which looks like no one designed it. Try each on the same page if you want to compare, then keep the one whose output you like and remove the others.

Give Claude eyes

Claude writes CSS blind unless it can see the result. That is where most layout bugs slip through: overlapping text at mobile widths, a button that wraps, a section that collapses. The Playwright plugin gives Claude a real browser:

/plugin install playwright@claude-plugins-official

Now make looking part of every visual task:

After each UI change:
1. Open the page at 390px, 768px and 1440px wide.
2. Take a screenshot at each width.
3. Check it against DESIGN.md and list problems, worst first.
4. Fix the top three and screenshot again.
Stop after two rounds and show me the final screenshots.

The two round limit matters. Without it, Claude can keep nudging pixels for a long time without getting much better.

Audit before you ship

A final pass with fresh eyes catches what slipped through. impeccable is built for exactly this. It adds audit, critique and polish commands and includes checks for common AI design patterns. Follow its README to install; for Claude Code it offers a plugin marketplace:

/plugin marketplace add pbakaus/impeccable

Then open /plugin and install it from that marketplace. I prefer running this kind of review on demand, at the end of a piece of work, rather than wiring it to run after every edit. You want a critic at the right moment, not constant background noise.

If you would rather not add another tool, a prompt works too:

Review this page as a senior product designer who hates
generic AI design. Check it against DESIGN.md.
For each issue: what it is, where it is, why it looks
templated, and the specific CSS change that fixes it.
Do not change any code yet.

What I check myself

Tools catch patterns. You still need to judge the whole. Before anything ships I look at three things with my own eyes: does the type hierarchy make the page scannable in five seconds, does the one accent color point at the one action that matters, and would I recognize this page as ours if the logo were removed. If the answer to the last one is no, the page is not done, no matter how clean the code is.

Start with your next page. Write the direction file first, install one taste skill, and add Playwright. The first result will already look different. The second, after you tighten DESIGN.md based on what you did not like, will look like yours.