3 Free Tools That Stop Claude Code Building the Same AI-Slop Website

You have seen it. You ask an AI coding agent for a landing page and out comes the same website every time: a purple-to-blue gradient, a centered hero, three feature cards with rounded corners, an emoji in each one, and a font nobody chose. It works. It also looks like every other thing an agent has ever made. That sameness has a name now — AI slop — and it is a taste problem, not a code problem.

The good news: the fix is free, and it is not “prompt harder.” It is giving the agent a source of real design decisions instead of letting it fall back to its defaults. Here are three tools that do exactly that.

1. impeccable — a skill that redesigns the UI in place

impeccable is an open-source Claude Code skill focused on one job: taking a working-but-bland interface and making it genuinely good. Instead of a vague “make it prettier,” it runs a structured design pass — visual hierarchy, spacing, typography, color, motion, the anti-patterns to remove — and rewrites your components against that.

You invoke it as a slash command:

/impeccable

Point it at the page or component you want lifted and it iterates on the real thing: hierarchy first, then type and spacing, then color and micro-interactions. The value is that it has an opinion. It will quiet a loud design or add boldness to a flat one, rather than reaching for the default gradient.

2. ui-ux-pro-max — a design database you query for real tokens

The reason agents produce slop is that when they are unsure, they guess — and the guess is the average of everything. ui-ux-pro-max removes the guessing by being a searchable local design database: on the order of 84 styles, 192 color palettes, and 74 font pairings, plus product-type patterns, UX guidelines, and motion presets.

Instead of “pick a nice color,” your agent queries the database and comes back with an actual palette and an actual font pairing that were designed to go together — real design tokens, not vibes. You get a named style direction and the hex values and type stack to match it, which you can drop straight into Tailwind config or CSS variables.

3. Extract a design system into a DESIGN.md your agent follows

The third tool is a technique, and it is the one that changes the most. Find a site whose design you genuinely admire — a product, a portfolio, a docs page — and have your agent extract its design system into a DESIGN.md: the color roles, the type scale, the spacing grid, the border-radius and shadow language, how it uses motion, the components it repeats.

Then you tell the agent, up front, every session:

Read references/DESIGN.md before writing any CSS or JSX. Follow its tokens exactly.

Now the agent is not inventing a look — it is applying one, consistently, across every page. This is the same discipline behind the design-system skills you may have seen (linear-design, vercel-design, monolog-design): a single tokens file that every component obeys. Write it once and the sameness disappears, because now everything matches your chosen system instead of the model’s default one.

The honest part

Let me be straight about what these are: free skills and open tools, not products. There is no signup, no paid tier, nothing to buy here. impeccable and ui-ux-pro-max are skills you install; the DESIGN.md is a file you write. They give your agent taste it does not have on its own — but they do not replace your judgment. You still have to look at the result and say “yes, that’s it” or “no, tighter.”

And two real limits worth naming:

• A database of palettes is not a brand. ui-ux-pro-max gives you a coherent starting point; making it yours — the one detail that says who you are — is still on you.
• Extracting a design system means learning to see one. The DESIGN.md trick works best once you can name why a site looks good. That skill compounds; the tools just accelerate it.

Put together, these three turn “the agent made a website” into “the agent made your website.” Same speed. None of the slop.