How to Use unslop in Claude Code: Turn AI-Looking UI into a Designed Interface

Introduction

You know the look the moment a page loads. A purple gradient washes across the hero, a soft glow sits behind every card, an emoji stands in for an icon, the copy shouts in short bold lines, and the spacing feels slightly wrong everywhere without any one element being obviously broken. That is AI slop, and it survives because each piece is easy to accept alone. unslop treats the whole screen as the unit of work: it finds the slop first, sets a design direction taken from your product, and fixes the screen pass by pass, like a designer marking up a screen in a redline review. This tutorial installs the skill, then takes one vibecoded dashboard through that loop.

Quick answer

Clone heydamir/unslop, copy its skill folder into ~/.claude/skills/, then run /unslop on one dashboard and approve its proposed direction before it starts its ordered fix passes.

Evidence

unslop is very new, and the numbers say so plainly. The repository was created on October 29, 2026, and its GitHub page showed 1,225 stars, 56 forks, and only 4 commits as of October 31, 2026, two days later. The new-term radar report for the same day recorded about 892 stars per day. Read that velocity with care: a two-day-old repository with a striking demo attracts curiosity clicks as well as real adopters, so treat the star count as attention, not proof of maturity.

The project’s own framing is the clearest statement of how it is meant to be used. The unslop repository says: “It audits the screen and proposes a direction before it edits anything, so you can steer it early.” That rule separates unslop from a blind restyle prompt, which hands the agent your screen and hopes the output looks better. unslop also covers the opposite case: “If the screen is already good, it tells you so and suggests a few small refinements instead of redesigning it.” A tool that can say no to a redesign is more trustworthy than one that always finds something to change.

The scope is broad on frameworks and narrow on the job. The unslop repository states that it works in whatever your screen is built with, naming Next.js, React, Vue, Svelte, Tailwind, and plain HTML and CSS, and that it covers dashboards, apps, landing pages, and even a live site when all you have is a link. That breadth means you do not need to rebuild your screen in a specific stack to try the skill. The narrowness matters just as much: unslop is about the screen, not your data model, API, or tests.

Two more facts shape your planning. First, the skill is released under CC BY 4.0, so you may use, change, and share it, including commercially, as long as you credit Damir Sokolovsky and link back to the repository. Second, the optional story video, a square video under 10 seconds showing your screen unslopping itself, needs Playwright and ffmpeg.

Prerequisites

• Claude Code installed, with a terminal you can run git commands in.
• A real screen to fix, ideally a vibecoded dashboard or landing page in Next.js, React, Vue, Svelte, Tailwind, or plain HTML and CSS.
• git, for cloning the repository. No other account or API key is needed for the core audit and fix passes.
• Optional, only for the story video: Playwright and ffmpeg.
• Optional, only if a hero needs a generated scene or object: an image service such as fal, Replicate, OpenAI images, or Higgsfield, connected as an MCP server. Dashboards and apps rarely need one, according to the README.

Step 1: Install the skill in Claude Code

unslop is one skill folder, not a bundle, so installation is a clone and a copy. The README gives the Claude Code path directly:

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

Check the copy landed where Claude Code expects it: your skills directory should now contain an unslop folder with the skill file inside. For one project only, copy it into that project’s .claude/skills/ instead, which keeps the experiment inside that project.

The repository is only two days old with 4 commits, so treat your copy as a snapshot and re-read the live README when you return. That habit also applies to the tstack agent skills and the ub-mode agent skill, both installed the same way.

Step 2: Pick a screen and run the audit

Open Claude Code in the project that owns the screen:

/unslop this dashboard
/unslop the hero of https://example.com
/unslop my landing page and make the story video so I can post it

You can also describe the screen in your own words, and Claude picks the skill up by itself. For a first run, use the explicit form, which removes doubt about which skill is active. Point it at one screen, not your whole app: a dashboard has the densest mix of the slop signs the README names.

Read the audit before you do anything else. It should list every sign of slop with where it lives: this gradient on this hero, this emoji label on that card, this spacing break between these two sections. If the audit is vague, push back and ask it to point at the exact element. The audit is the cheapest place to catch a misunderstanding, because nothing has been edited yet.

Step 3: Approve the direction before any edits

After the audit, unslop proposes a direction before it edits anything: character, world, the one or two moments that carry the color, and a signature detail, all taken from your product. Character is what the product feels like, world is the visual setting that feeling lives in, the color moments are where color may speak loudly (so everywhere else it stays quiet), and the signature detail is the repeatable mark that makes the screen feel like yours rather than a template.

Steer the direction in plain words before the fix passes start. If the character feels wrong, say what it should feel like and name a reference screen. If the color moments are in the wrong place, move them: a dashboard should usually carry color in status and one primary action, not every card border. Skipping this decision point turns unslop back into a blind restyle.

Step 4: Let it work through the fix passes in order

Once you approve the direction, unslop fixes the screen pass by pass, in the README’s fixed order: spacing, color, icons, copy, type, layout, details, visuals, and motion. Spacing comes first because uneven spacing makes later judgments harder to see. Color comes second because it sets the hierarchy icons and copy must respect. Layout, details, visuals, and motion come last because they refine a structure that already holds together.

Review each pass on the screen itself. After spacing, check whether related elements group cleanly. After color, check whether your approved color moments are the loudest things on the screen. After icons, check whether emoji labels became real icons or plain text. After copy, check whether shouty copy was rewritten, not merely shortened. Do not wait until the end to look, because a wrong early pass compounds through later ones.

Step 5: Handle visuals honestly, and only pay for generation when you mean to

The visuals pass has its own rule. unslop shows your product instead of a glossy blob. When a hero needs a scene or an object, it can generate one through fal, Replicate, OpenAI images, or Higgsfield. If none is connected, it offers to connect one as an MCP server, and it shows the prompt and asks before every paid generation.

First, ask whether the hero actually needs a generated scene at all: a dashboard or app screen almost never does. A landing page hero sometimes does, when the product is hard to photograph or the scene is the story. Second, if generation is genuinely needed, read the prompt before approving it, and check it describes your product rather than a generic glossy scene. Third, judge the result against the direction from Step 3, not against whether it looks impressive alone.

If no image service is connected and unslop offers to connect one as an MCP server, treat that as a separate setup decision: connecting a service means credentials and billing, and it should not happen silently mid-redesign. For a first run, skip generation, finish the screen with real product visuals, and add a generated hero later only if the screen still needs one. The Claude Code MCP setup tutorial covers connecting an MCP server in Claude Code.

Step 6: Make the story video only if you have the tools

The story video is the most shareable part of unslop, and the easiest to overrate. It is a square video under 10 seconds of your screen unslopping itself, ready to post, and it needs Playwright and ffmpeg.

Treat the video as a record of the work, not proof that the work is good. Before you make one, finish the screen and review it at full size in the browser. If Playwright or ffmpeg is missing, skip the video: the core loop needs no video tooling.

Step 7: Try the worked examples before you trust it on a real screen

The repository ships two vibecoded screens in its examples directory. The unslop examples are the cheapest way to calibrate the skill, because they carry no stakes for your own product.

Run unslop on one example screen and compare its audit with your own reading. Do its slop signs match yours? Does its direction feel drawn from that screen, or like a generic design lecture? Does the fixed screen keep the original information, or trade clarity for style? A generic example run tells you to steer the direction harder on your real screen.

Troubleshooting

The skill does not activate when I describe the screen

Claude Code usually did not pick the skill up from a plain description. Use the explicit form, /unslop this dashboard, and check the skill folder is in the intended skills directory, global or project-local. A common mistake is copying the whole repository instead of the skill folder inside it: the README path is unslop/skills/unslop, copied into ~/.claude/skills/, so the result should be ~/.claude/skills/unslop, not a doubly nested folder.

The audit lists slop but the direction feels generic

The skill usually had too little product context. Tell it what the product does, who uses it, and what the screen is for, in one or two sentences, and name one reference screen. Then ask it to propose the direction again before any edits. If it is still generic, decide the character yourself first, then hand it back as the direction.

A fix pass breaks layout or removes information

Stop the loop at that pass. Name the element, the pass, and what was lost: a status column, an explanatory label, a section grouping two controls. Ask for that pass to be redone with the lost information preserved. If the same pass keeps breaking the same kind of element, finish that element by hand and continue from the next pass.

The story video fails or never appears

Check Playwright and ffmpeg first: the README names both as needs for the story video, so a missing one is the likeliest cause. Install the missing tool rather than retrying. If both are present and the video still fails, skip it: a failed video says nothing about the audit or fix passes.

Image generation is offered when the screen does not need it

Decline it. The README says dashboards and apps rarely need a generated image, and unslop shows the prompt and asks before every paid generation, so declining is a supported answer. If the offer keeps coming back, put it in the direction itself: this screen uses real product visuals only, no generated scenes.

FAQ

What exactly is unslop?

unslop is a single skill for Claude Code, not a bundle or a separate app. Copy its skill folder into Claude Code’s skills directory, invoke it with /unslop or describe the screen in plain words, and it audits the screen, proposes a direction taken from your product, then fixes it pass by pass instead of restyling everything at once.

Does unslop work outside Claude Code?

Not according to the README as of October 31, 2026: installation covers Claude Code only, with global and per-project paths, and the examples are Claude Code commands. Do not assume a Codex or Cursor path works until the live README adds one.

Will unslop rewrite my whole screen without asking?

No, that is the opposite of its stated flow: it audits and proposes a direction before editing anything, so you can steer it early, and if the screen is already good it says so and suggests small refinements instead of redesigning it.

Does unslop need paid image generation?

Only sometimes, and only with your consent. Dashboards and apps rarely need a generated image. When a hero needs a scene or object, unslop can generate one through fal, Replicate, OpenAI images, or Higgsfield; if none is connected, it offers to connect one as an MCP server, and it shows the prompt and asks before every paid generation.

Can I point unslop at a live site from just a link?

Yes, that is documented: the README gives /unslop the hero of https://example.com as an example, and says the skill works on a live site when all you have is a link. Use it for an audit and direction on a page you do not have locally, and keep actual edits in a codebase you control.

How is unslop different from tstack and ub-mode?

It works on a different layer. tstack covers the pull request loop, ub-mode disciplines how a change is written and tested, and unslop works on what the user sees: the screen, its spacing, color, type, copy, and layout. The three complement each other.

Conclusion

unslop earns its place by inserting judgment where a restyle prompt usually has none: the audit names the slop, the direction gives the fix a product to serve, the passes run in a reviewable order, and the visuals rule shows the prompt and asks before you pay. The skill is only two days old, with 4 commits behind it, so treat your copy as a snapshot and judge every run on the screen it produces.

For the next step, put unslop next to the other skills in this pattern. The tstack agent skills tutorial shows the same copy-a-folder installation applied to the pull request loop, and the ub-mode agent skill tutorial shows it applied to code quality gates. If the screen you need is a slide deck or a document rather than an app UI, our guide to generating design slides and docs with Claude Code Artifacts covers that format. If you want to place a redesigned screen inside automated work, the complete n8n guide collects the surrounding workflow automation tutorials. Start with one screen, approve the direction, and let the passes earn your trust one at a time.

Frequently asked questions