unslop is a free Claude skill that takes a vibecoded screen, the kind with purple gradients, glowing cards and emoji in every label, and rebuilds it into something that looks designed. It was created by designer Damir Sokolovsky (@heydamir) and sits in the heydamir/unslop repository, which showed about 1,900 stars two days after it was created on October 29, 2026.
The pitch is simple: AI coding tools produce UI that fails in the same predictable ways, and a skill can encode the fixes. If you already ship interfaces with Claude Code or a similar agent, this is a ready-made design-review pass you can install in a minute. Our earlier coverage of vibecoding explains why those defaults appear in the first place.
TL;DR: questions people ask first
| Question | Short answer |
|---|---|
| What does it do? | Audits a screen for AI tells, proposes a direction, then fixes it in nine passes |
| Who made it? | Damir Sokolovsky (@heydamir), who started the "Unslopping" series on X |
| How do I install it? | Copy skills/unslop into ~/.claude/skills or a project's .claude/skills |
| How do I run it? | Type /unslop plus your request, or describe the task |
| Which stacks? | Next.js, React, Vue, Svelte, Tailwind, plain HTML and CSS |
| License? | CC BY 4.0: free, including commercial use, with credit and a link back |
| Cost? | The skill is free; image generation through third-party services is paid and gated by your approval |
| Maturity? | Days old. The repo showed 1 open issue and 4 open pull requests when we read it |
What counts as "slop" in this skill?
The skill's own description lists the tells: purple gradients, glows, gradient text, emoji labels, "New ✨" badges, glossy blobs, uppercase tracked labels, pulsing elements and uneven spacing. Its opening argument is that vibecoded UI fails in a few repeatable ways: every surface glows, every label has an emoji, spacing is whatever the model typed that day, and the copy shouts.
A key idea in the SKILL.md file is that removing slop is only half the job. A clean screen that could belong to any product is simply the next template. So every run is supposed to end with a screen only this product could have. The author describes the difference as where the richness goes: slop spreads color and effects over buttons, borders and backgrounds, while craft keeps the chrome quiet and puts richness into one or two memorable moments of content, such as a rendered object, a good chart or an image from the product's world.
How does unslop work, step by step?
The README and skill file describe a deliberate workflow rather than a one-shot restyle.
- Audit. It goes through a reference list of signs of slop and writes one line per finding, with where it lives in the code.
- Decide how much to change. Heavy slop gets the full process. Light slop gets a polish mode that keeps the existing palette, type and layout. A screen with no slop gets a plain statement to that effect and at most two or three small suggestions.
- Set the direction and stop. It writes five short lines: product, character, world, moments and signature. Character words like "clean", "modern" and "premium" are explicitly not allowed because they describe every template. It then waits for your reaction before editing, unless you said to just do it.
- Fix in nine passes, in order. Spacing, color, icons, copy, type, layout, details, visuals, motion.
- Check and report. It runs a checklist, re-renders and compares against the audit list.
The ordering is the interesting part. Spacing comes first because everything reads differently once the rhythm is right. Copy comes before type and layout because the length of a headline decides its size and position. Visuals and motion come last, because they should fit a screen that already works without them.
What do the nine passes actually change?
The skill gives concrete rules, which is what makes it more useful than a prompt like "make it look less AI". These are drawn from the SKILL.md text.
| Pass | Examples of what it enforces |
|---|---|
| Spacing | A 4px grid, equal sizes for equal things, smaller space inside groups than between them, removal of one-off values like mt-[13px] |
| Color | One tinted neutral ramp, three text roles, one accent used rarely, no hue-to-hue gradients, glows or colored shadows |
| Icons | Emoji become line icons from one set (the project's own, otherwise lucide), one size and stroke |
| Copy | No exclamation marks, no greeting headlines, short labels, changes that say what they compare to, no hype words, no unverifiable claims |
| Type | Two weights (400 and 500, 600 at most), sentence case, no wide-tracked uppercase labels, tabular numbers |
| Layout | Keep sections and order, real app proportions for dashboards, asymmetric heroes, one primary action |
| Details | Nested radii, keycaps for shortcuts, one accent per chart, stat cards that are just numbers |
| Visuals | Remove blobs and orbs, show the real product, generate imagery only for landing heroes or when asked |
| Motion | Remove pointless loops and transition-all, keep motion that explains something, one easing curve |
Two rules stand out. First, "claims that cannot be checked", such as "Loved by 10,000+ teams" or "10x faster", are either made quiet and specific if you confirm they are true, or removed. The skill asks you and lists them in its report. Second, it is told not to rename the product, invent features, claims or data, or swap one trend for another (glass, grain, neon, bento grids).
How do I install and run it?
The README gives three steps for Claude Code:
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills
cp -r unslop/skills/unslop ~/.claude/skills/
For a single project, copy the folder into .claude/skills/ inside that project instead. Then call it:
/unslop this dashboard
/unslop the hero of https://your-site.example
You can also describe the task in your own words and Claude can pick up the skill automatically, because the skill's description tells it when to trigger. If you are new to this mechanism, our guide to agent skills covers how skills are discovered and loaded, and the Claude Code commands reference lists the slash commands around it.
If you only have a live URL, the skill file says to save the page with a snapshot script and work on a copy. If you only have a screenshot, it rebuilds the screen as one static HTML file first and treats that as the original. In both cases the output is a redesigned page in code that you hand to whoever owns the real site. Those helper scripts are referenced in the skill; we have not run them, so check that they are present in the repository before relying on that path.
Can it generate images, and what does that cost?
For landing heroes, the skill prefers a generated scene: one wide image behind the hero with calm empty space where the headline sits, and a product preview rising from the bottom edge. The README says it can use services like fal, Replicate, OpenAI images or Higgsfield. Two safeguards are stated: it shows the prompt and asks before every paid generation, and it says dashboards and apps rarely need generated images, with their richness coming from charts, figures and real content built in code.
If no image tool is available, the skill builds what it can in code, writes the prompts for the rest and leaves empty slots of the right size. That is a sensible fallback, and it means you are never forced to pay a third party to use the skill.
What is the story video?
On request, unslop can produce a square video of under 10 seconds showing the screen unslopping itself, with red redlines marking spacing and corner values as they tween. It needs Playwright and ffmpeg. The skill describes the technique: one page where each step changes only CSS, so values morph in place rather than swapping, with a wave of changes from top left downward. Every video carries a small "unslop by @heydamir" credit, as the license asks. This is optional and adds a few minutes, so skip it unless you want something to share.
How is this different from DESIGN.md and other design skills?
unslop is a review-and-repair skill: it starts from a finished, ugly screen and edits it. By contrast, specification approaches such as DESIGN.md templates tell an agent what to build before it builds, and tools like Figma's markdown design rules feed a design system into the agent's context. We also covered another trending landing-page design skill. The approaches stack: use a spec to prevent slop, and unslop to clean up what slipped through.
A related example from our archive is pstack, a workflow bundle that also lists an unslop skill, though that one is described as cleaning up machine-sounding output, so do not assume the two are the same project.
Limitations and risks to know about
- Very new. The repository was created on October 29, 2026. Star count is a popularity signal, not a quality test, and we have not run the skill on a production codebase.
- Opinionated. The rules encode one designer's taste: quiet chrome, a single accent, no gradients between hues. Teams with a real brand system may disagree, and the skill says to keep a real brand color, logo or typeface that is not itself slop.
- It edits your code. Like any agent that rewrites files, review the diff and run it on a branch. It is told to keep features, content and section order, but you are the final check.
- Pre-edit pause. It stops after proposing a direction and waits, which is good practice but means it is not a fully hands-off tool unless you tell it to proceed.
- Attribution. CC BY 4.0 means you must credit the author in copies or adaptations.
- Commercial upsell. The author also offers a paid service to unslop one key screen in three days, per the README. That is separate from the free skill.
What this means for what you build
If you ship with agents, the practical takeaway is that design quality can now be a repeatable step, not a taste argument. Run the audit on any screen before it reaches a customer, and treat the written direction (product, character, world, moments, signature) as a mini design brief you can reuse. Even if you never install the skill, its nine-pass order, spacing before copy before type before visuals, is a good checklist for reviewing agent-generated front ends yourself.
Bottom line
unslop is a small, well-specified skill that packages a designer's redline process for Claude. It is free, easy to install and honest about when not to change anything. Try it on one screen in a branch, judge the diff, and keep the passes that match your taste.
Details reflect the repository README and SKILL.md as read on October 31, 2026 and may change.
Related reading
- Vibecoding explained: the "Who is JSON" moment
- What are agent skills? Complete guide
- DESIGN.md templates for professional UI with AI agents
- Landing page design skill for Claude Code, Cursor and Codex
- Figma specs as markdown design rules for AI agents
- Claude Code commands reference
- Official: unslop on GitHub · heydamir.design/unslop