A Claude skill that de-AI-ifies your vibecoded UI

What it does

unslop is a Claude Code skill that takes the generic, obviously-AI-generated look of a vibecoded interface and gives it actual design character. It first audits the screen and lists every sign of slop — purple gradients, glows, emoji labels, shouty copy, uneven spacing — with where each one lives. Then it proposes a design direction derived from your product before touching anything, so you can steer it early. It works across Next.js, React, Vue, Svelte, Tailwind, or plain HTML/CSS, and can even operate on a live site given just a URL.

The interesting bit

The process mimics how a human designer works: audit, direction, then a fixed sequence of passes (spacing, color, icons, copy, type, layout, details, visuals, motion). It also knows when to stop — if the screen is already good, it says so and suggests small refinements instead of redesigning for the sake of it.

Key highlights

• Audit pass pinpoints every slop signal and its location before any edits
• Direction step defines character, world, and a signature detail from your product
• Can generate hero visuals via image services (fal, Replicate, OpenAI, Higgsfield) — and always shows the prompt and asks before any paid generation
• Produces a sub-10-second square “story video” of the screen unslopping itself (needs Playwright and ffmpeg)
• Ships with two vibecoded example screens to try it on

Caveats

• It’s a prompt/skill package, not code that redesigns anything on its own — the quality depends on Claude doing the work
• Story video and image generation require external dependencies or connected services
• CC BY 4.0 license: commercial use is fine, but attribution and a link back are mandatory

Verdict

Worth a look if you ship vibecoded UI and cringe at the sameness of it — it’s a cheap way to get a designer’s redline pass. If you already have a designer in the loop, you probably don’t need it.