Quick Answer: The unslop Claude skill, created by Damir Sokolovsky, audits vibecoded UI for AI tells like purple gradients, glows, emoji labels, shouty copy, and uneven spacing. It then sets a visual direction from your product and fixes the screen pass by pass. Install it by copying the skill folder into
~/.claude/skills/, then type/unslopin Claude Code.
Most AI-generated interfaces look like they came from the same template. You know the look: a violet-to-pink gradient hero, a soft glow behind every card, a rocket emoji on the pricing tier, and headlines that shout in all caps. The unslop Claude skill exists to fix exactly that. It's a skill for Claude, built by Damir Sokolovsky (@heydamir), and it's aimed at the screens that vibecoding produces in a weekend.
What counts as "slop" in the first place
Before you can fix AI-looking UI, you need a shared vocabulary for what's wrong. unslop starts with an audit that lists every sign of slop and where it lives on the screen. The repo names the usual suspects: purple gradients, glows, emoji labels, shouty copy, and uneven spacing.
Those symptoms share a root cause. Each one is a default. The gradient is the model's favorite starting palette, the glow is a shortcut for "premium," and the emoji stands in for an icon system nobody set up. Individually they're harmless. Stacked together, they tell a visitor the product was generated, not designed.
Here's the counter-intuitive part. Most people try to fix this by prompting the model to "make it look more modern." That usually produces a different generic style, not a designed one. The skill works in the opposite order: it diagnoses first, then decides what the product should feel like, and only then edits. Restyling without a direction just swaps one template for another.
Setting a direction before any edits
After the audit, unslop proposes a direction and waits for you to steer. The direction covers four things: the character of the interface, its world, the one or two moments that carry the color, and a signature detail. All of these are drawn from your product rather than from a stock palette.
This matters because a finance dashboard and a kids' learning app should not share a color story. Setting direction first gives you a checkpoint. If the proposed character is wrong, you correct it before a single class name changes. That's far cheaper than reverting a full restyle.
The nine passes, in order
Once the direction is set, unslop fixes the screen in a fixed sequence: spacing, color, icons, copy, type, layout, details, visuals, and motion. The order is deliberate. Spacing and color come first because they affect everything downstream. Motion comes last because animating a broken layout just makes the breakage move.
Think of it like a designer's redline review, working top to bottom through one concern at a time. Here's the sequence:
- Fix spacing so the rhythm is consistent.
- Replace the default palette with one tied to the direction.
- Swap emoji labels for a deliberate icon set.
- Rewrite shouty copy in plainer language.
- Tighten type scale and hierarchy.
- Adjust layout and alignment.
- Add signature details.
- Show real product visuals where they help.
- Add restrained motion.
That said, the skill doesn't force a redesign on a screen that already works. If the screen is already good, it says so and suggests a few small refinements. That's a useful trust signal: a tool that always rebuilds your UI is a tool you'll stop trusting.
Where it works, and what it needs
unslop isn't tied to one framework. The repo says it works with Next.js, React, Vue, Svelte, Tailwind, and plain HTML and CSS. It applies to dashboards, apps, and landing pages. It can even work from a live link. Running /unslop the hero of https://example.com asks it to inspect a running site rather than your local code.
Installation is a copy operation, and you choose the scope. The two options look like this:
| Install scope | Command or path | Best for |
|---|---|---|
| Global (all projects) | cp -r unslop/skills/unslop ~/.claude/skills/ | Using the skill across many repos |
| Single project | Copy into .claude/skills/ inside that project | Keeping the skill scoped to one codebase |
| Story video | Requires Playwright and ffmpeg installed | Generating a square clip under 10 seconds |
Visuals are the one part that can cost money. When a hero needs a scene or object, unslop can generate one through an image service such as fal, Replicate, OpenAI images, or Higgsfield. If none is connected, it offers to set one up as an MCP server. It shows you the prompt and asks before every paid generation. Dashboards and apps rarely need generated imagery, so you'll often skip this step entirely.
Where people go wrong with the story video
The story video is a fun feature: a square clip of your own screen unslopping itself, ready to post. The catch is the dependencies. You need Playwright to capture the frames and ffmpeg to assemble them. If either is missing, the video step fails, but the audit and the redesign still work. Don't let a missing tool make you think the whole skill is broken.
This next part matters more than it looks. The video shows before and after frames from the same screen, so it's only as honest as the before state. If you clean up the "before" screen first, the transformation looks smaller than it really was. Keep the original, unpolished version for the video.
Quick questions before you install
A few things come up quickly. Does it edit files without asking? No. unslop audits the screen and proposes a direction before it edits anything, so you get a chance to steer. Can it handle a live site with no source code? Yes, it can work from a link, though fixing the code itself needs access to the repo.
Is it a shortcut to good design? Not really. It gives you a disciplined process and a sharper diagnosis. The direction still depends on knowing your product, and that judgment stays with you.
Frequently Asked Questions
What is the unslop Claude skill?
The unslop Claude skill is a skill for Claude that turns vibecoded, AI-looking UI into a designed interface with its own character. It audits the screen for slop like purple gradients, glows, emoji labels, and uneven spacing, proposes a direction based on your product, and then fixes the screen pass by pass. It was created by Damir Sokolovsky and published on GitHub under a CC BY 4.0 license.
How do I install the unslop skill in Claude Code?
Clone the repository, then copy the unslop/skills/unslop folder into ~/.claude/skills/ for global use. For a single project, copy it into .claude/skills/ inside that project. Once installed, type /unslop followed by what you want, such as /unslop this dashboard, or describe the task in your own words and Claude will pick the skill up.
Why does AI-generated UI look so generic?
AI tools default to common patterns because those patterns are statistically frequent in training examples. Purple gradients, glows, and emoji labels are the model's safe defaults. Fixing this means replacing defaults with decisions tied to your product, which is why unslop sets a direction before it touches the code.
Does unslop need image generation to work?
No. Image generation is optional and only used when a hero needs a scene or object. Dashboards and apps rarely need it. If you want generated visuals, unslop asks before each paid generation and shows you the prompt first.
Pass this to someone whose landing page looks like every other AI-built site this month. Better still, run /unslop on your own screen this week, read the audit it produces, and note which slop signs you missed. If you'd rather hand the job to a designer, Damir offers to unslop one key screen in 3 days, built in your stack, at heydamir.design/unslop. Either way, the unslop Claude skill gives you a clear starting point.