Unslop: a Claude skill for AI-looking interfaces

Purple gradients, glowing cards, an emoji on every label: Unslop hunts for those and replaces them with choices taken from your product. Damir Sokolovsky publishes it on GitHub, and it handles Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS, on dashboards, apps and landing pages. Anthropic doesn't publish it. If skills are new to you, start with Claude Code skills.

How a run works

1. Look. It finds the files that render the screen and screenshots it if the app can run. With only a link, a bundled script saves the live page as a local copy. With only a screenshot, it rebuilds the screen as one HTML file first.
2. Audit. One line per sign of slop, with where it lives.
3. Decide how much to change. Heavy slop gets the full process. A mostly designed screen gets a polish that keeps its palette, type and layout. A clean screen gets two or three small suggestions, applied only if you agree.
4. Set a direction and stop. Five lines: the product, its character in two or three words, the "world" it belongs to, where the color goes, and one signature detail. Clean, modern, sleek, minimal and premium are banned as character words. Then it waits for your answer before it edits anything.
5. Nine passes, in order: spacing, color, icons, copy, type, layout, details, visuals, motion. Each pass covers the whole screen before the next one starts.
6. Check and report against a closing checklist. It renders the screen at most three times per run.

Spacing snaps to a 4px grid. Emoji icons turn into line icons from the project's own set, or from lucide when the project has none, and a claim like "10x faster" stays on the page only if you confirm it's true. Pulsing badges go.

Hero images and the story video

For a landing page hero, it can generate a scene through an image service such as fal, Replicate, OpenAI images or Higgsfield. It shows the prompt and asks before every paid generation, and if no service is connected it offers to add one as an MCP server.

Ask for it and you also get a story video: a square clip under 10 seconds of the screen fixing itself step by step, with red redlines on the problems. Each video carries a small "unslop by @heydamir" credit.

How to install it

In 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 it into that project's .claude/skills/ instead. In Codex:

$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop

Live-site snapshots and story videos need Playwright with Chromium in the project where you run the skill (npm install -D playwright, then npx playwright install chromium). The video also needs ffmpeg on your PATH.

Example request

/unslop this dashboard. The product is [what it does] for [who uses it]. Show me the audit and your direction before you change anything.

In Codex, type $unslop instead. A live page works too: /unslop the hero of https://example.com.

Limits

• A link gets you a copy. From a URL you get a redesigned page in code to hand to whoever owns the real site. Backgrounds animated by scripts don't survive the snapshot.
• Credit is part of the license. It's CC BY 4.0, so a copy or adaptation of the skill has to credit Damir Sokolovsky and link the repository.
• The README sells a service. It links to a paid offer to have the author redesign one screen by hand. That offer isn't in the instructions Claude follows.

When to use it

• A vibecoded prototype that now has to look like a product.
• An admin dashboard full of glows, gradients and emoji.

For a page you haven't built yet, use Taste Skill, which sets the direction before any code exists. For design commands with automated checks, use Impeccable. If you only install skills Anthropic publishes, or work in Claude.ai rather than a coding agent, use Anthropic's frontend-design.