How to Fix AI-Looking UI With unslop in Claude Code

If your app looks like it was built by an AI, that's because it probably was, and unslop is the first tool that actually fixes it instead of just naming the problem. It's a free Claude Code skill from designer Damir Sokolovsky (@heydamir) that audits your interface for the tells of vibecoded design, purple gradients, glowing cards, emoji in every label, then rewrites the screen in a sequence of design passes until it stops looking like a template. You type /unslop, point it at a component or a live URL, and it does the redline review a designer would normally charge you for.

The repo went up on GitHub on October 29, 2026, and crossed 3,500 stars within three days. By the end of the first week it was past 5,600 stars and 300+ forks, which is a fast climb even by "new Claude skill" standards. The reason is obvious the second you see the before/after shots: it's one of the few AI design tools that isn't just adding more AI-generated gradients on top of the problem.

What Does "Vibecoded UI" Actually Look Like?

It's the dashboard you've seen a hundred times this year. A hero section with a violet-to-blue gradient blob floating behind the headline. Buttons with a soft glow. A "New ✨" badge next to a feature nobody asked about. Every heading in uppercase with tracked letter spacing, every icon a slightly different weight, spacing that's "close enough" instead of consistent.

None of this is wrong, exactly. It's just generic. Claude, GPT, and every other model trained on millions of SaaS landing pages all converge on the same visual shorthand for "modern app," and once you've seen it a few times you can't stop seeing it everywhere. unslop exists because Sokolovsky got tired of looking at his own vibecoded output and started writing down, screen by screen, what specifically made it look fake.

How Do You Install unslop in Claude Code?

Installation is two commands, no package manager, no MCP server:

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

That drops the skill folder into Claude Code's skills directory, where it's picked up automatically the next time you start a session. If you're on Codex instead, the install path is ~/.agents/skills/ via the skill-installer command the repo documents.

Two optional extras unlock the fancier features:

• npm install -D playwright && npx playwright install chromium — lets unslop snapshot a live site instead of just local code
• ffmpeg — needed if you want it to render the before/after "story" video for sharing

Both are optional. The core skill runs on nothing but Claude Code itself.

What Does Typing /unslop Actually Do?

Once it's installed, you invoke it with /unslop plus whatever you're pointing at: "/unslop this dashboard," "/unslop the hero of my landing page," or just a plain-English ask that Claude routes to the skill on its own. From there it runs three stages.

First, it audits. The skill checks your screen against a reference list of AI tells baked into the skill folder: purple gradients, glow effects, gradient text, glossy blobs, pulsing animations, emoji-as-icon, exclamation-heavy copy. It calls these out specifically, not with a vague "this could be cleaner."

Second, it proposes a design direction. This is the part I actually like. Instead of jumping straight to CSS, it writes five short lines: what the product is, two or three character words that aren't "clean" or "modern," what physical world the product should feel like it belongs to, where it's allowed to get visually loud, and one small detail that repeats throughout. It shows you that direction before touching code, so you can veto a weird choice before it's baked into forty components.

Third, it fixes the screen in nine ordered passes. Each pass has a narrow job:

That's a genuinely different approach than "make it look nicer." Nine scoped passes means Claude isn't trying to solve typography and color and motion in one giant diff, which is usually where AI-generated redesigns fall apart.

What Stack Does It Work With?

unslop isn't tied to one framework. It works on Next.js, React, Vue, Svelte, Tailwind, and plain HTML/CSS, and it's stack-agnostic by design since the passes operate on visual rules (spacing, contrast, radius), not framework-specific syntax. Within days of launch, people were already forking it for other surfaces, Ashish Jha adapted it for mobile app UI and shared the fork on X.

If you don't have local access to the code, the optional Playwright snapshot script lets the skill screenshot a live URL and work from that instead, which is handy if you're trying to fix a deployed prototype before you've pulled it into your editor.

Is unslop Actually Free?

Yes. The repo is licensed CC BY 4.0, which means you can use it, modify it, and ship it commercially as long as you credit Damir Sokolovsky and link back to the repository. No subscription, no API key beyond whatever you're already paying Anthropic for Claude Code itself.

Is It Actually Worth Using?

Honestly, yes, with one caveat. The nine-pass structure is the smartest part of this skill, and it's the part most "make my UI better" prompts skip entirely. Asking Claude to "make this look more professional" in one shot tends to produce a different flavor of generic. Forcing it through spacing, then color, then icons, one constrained pass at a time, gets you something that actually holds together.

The caveat: it's still Claude making subjective design calls, and the "design direction" step only works if you actually read it and push back when it picks something generic. If you let it auto-approve its own direction, you can still end up with a different kind of sameness, just with fewer purple gradients. Treat the direction step as a real checkpoint, not a formality, and the output is noticeably better than anything I've gotten from a plain redesign prompt.

I also wouldn't hand this a production app with a real design system and let it run wild. It's built for the vibecoded prototype stage, the thing you threw together over a weekend that now needs to not embarrass you in a demo. For that job, it's the best free tool I've seen this year.

If you're building out a broader skills setup in Claude Code beyond just UI fixes, it's worth reading up on how Claude Code skills work in practice and where proactive agent behavior fits alongside skill-based workflows like this one.

Watch