← Blog

Why Claude Code Keeps Making Slop (and What You Can Actually Do About It)

Your AI-generated UI looks like every other AI-generated UI. Here is what is actually going on, and how designers can break the pattern with better context, not better prompts.

By VibeLab · September 16, 2026

Claude Code can spin up a polished-looking interface in seconds. The problem is that "polished" increasingly means "identical to everything else" and your users are starting to notice.

That is the uncomfortable observation at the center of a recent hands-on article by Nick Babich on UX Planet. He spent time trying to wrestle Claude Code away from its default aesthetic gravity, and his findings are worth sitting with. The core argument is not that Claude is bad at design. It is that Claude, left to its own devices, produces the statistical average of thousands of modern products. He calls this AI slop, and it is a real problem for anyone trying to build something with a recognizable identity.

The Real Culprit Is Not the AI. It Is the Context You Give It.

Babich's clearest point is this: AI slop is not primarily a capability problem. It is a context problem. When you give an AI tool a vague prompt, it fills the gaps with whatever patterns dominate its training data. And what dominates? Clean cards, Inter or similar sans-serif fonts, muted grays, rounded corners, and a hero section that looks like it was cloned from a SaaS landing page circa 2022.

The AI is not being lazy. It is being statistically sensible. It is giving you the most probable design given the least possible information.

This is actually good news for designers. It means the lever you have is not "find a better AI tool." The lever is becoming more deliberate about the context you create before you ask the AI to produce anything.

What "Context" Actually Means in Practice

For designers who are new to vibe-coding (using AI tools to build real, working interfaces without writing traditional code)"context" can sound abstract. Babich's article makes it concrete.

Think of context as everything you would show a junior designer before asking them to open Figma. That includes:

Visual references. Not mood boards in the loose sense, but specific examples of the exact aesthetic you want. The more specific and unusual the reference, the further the AI moves from its default center of gravity. Referencing a niche editorial magazine or a particular era of Swiss graphic design will push Claude further than referencing "modern" or "clean."

Brand constraints stated as rules. Instead of describing a vibe, state it as a constraint. Something like "never use a drop shadow" "the primary color must appear on fewer than 30 percent of any screen" or "no stock-photo-style imagery" gives the AI something to obey rather than something to interpret.

Negative examples. Telling Claude what you do not want is just as powerful as telling it what you do. If the default card layout it produces is exactly what you are trying to avoid, say so explicitly and describe why.

The underlying principle is that Claude Code is filling a blank canvas with averages until you replace that blank canvas with a well-defined brief. The more you pre-fill the brief, the less room there is for slop.

A Practical Starting Workflow for Designers

If you are building your first vibe-coded project, here is how to apply this thinking from the start rather than trying to fix slop after it has already appeared.

Before you write a single prompt to Claude Code, create a short design brief document. Keep it plain text. Include three to five visual references with a one-sentence note on what specifically you are borrowing from each. Add five to ten hard rules about what the interface must not do. Describe the emotional feeling of using the product in one sentence, not the visual style.

Then, paste that document at the top of every conversation you start with Claude Code, or use the project-level system prompt feature (Claude's way of letting you set standing instructions that persist across a session) to keep it always in view. Treat it as the constraint layer that sits underneath every individual request.

When Claude produces something that still feels generic, do not just say "make it more unique." Point to a specific element, name what pattern it is defaulting to, and give it a concrete alternative direction. Vague feedback produces average revisions.

The Limit Worth Naming

This approach requires design judgment you already have. That is both the good news and the catch. Claude Code can execute a strong brief with impressive speed and fidelity, but it cannot write the brief for itself. If you do not have a clear point of view on what makes your product visually distinct, the AI will happily borrow one from the median of the internet.

There is also an open question about how far context alone can take you. Babich's experiments show real improvement, but the article is one designer's experience, not a controlled study. Your mileage will vary depending on the project, the visual direction, and how much specificity you can bring.

The honest takeaway is this: Claude Code is a powerful building partner, but it defaults to the middle. Your job, as the designer in the room, is to make the middle an unacceptable answer before the work begins.

claudeai slopvibe-codingux designprompt craft

Sources