You know the look the moment a page loads. A purple-to-blue gradient washes across the hero, every label carries an emoji, the copy shouts about unlocking magic, and the spacing looks like nobody ever measured it. That is the problem this guide solves: how to fix AI-generated UI with the unslop skill, without starting over.

Most AI-generated pages fail in the same predictable ways, not because the model lacks taste, but because it reaches for the same defaults every time: color spread across backgrounds, buttons, and labels; glow, gradient text, and badges such as "New ✨" whether the product needs them or not; and headlines that could belong to any product. A human designer would notice these tells at a glance; an unaided model usually does not, because nothing in the prompt told it what to look for.

What the unslop skill is

Unslop is a skill for Claude Code and Codex that turns vibecoded, AI-looking UI into a designed interface with its own character. It was created by Damir Sokolovsky, who started the Unslopping series on X, and it is licensed under CC BY 4.0. On the repository page checked on 2026-11-02, it showed 5,140 stars, 255 forks, and a creation date of 2026-10-29, which makes it a very new project with fast early attention rather than a long-established tool.

The skill does not begin by rewriting your page. It finds the slop first — purple gradients, glows, emoji labels, shouty copy, uneven spacing — then sets a direction from your product and fixes the screen pass by pass, like a designer doing a redline review. It works with Next.js, React, Vue, Svelte, Tailwind, or plain HTML and CSS, covers dashboards, apps, and landing pages, and can even start from a live-site link by snapshotting the page first.

The core idea separates this skill from a generic "make it prettier" prompt. Removing slop is only half the job: a screen that is clean but could belong to any product is just the next template. Every unslop run should end with a screen that only this product could have, its richness concentrated in one or two memorable moments — a rendered object, a beautiful chart, or an image from the product's world — while the surrounding chrome stays quiet.

Install and use

The commands below are quoted verbatim from the project's README. They were not executed in this run, so a successful install on your machine is unverified until you run them yourself.

For Claude Code, copy the skill into your skills folder:

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 .claude/skills/ inside that project instead. For Codex, ask it to install the skill straight from the repository:

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

Or copy it by hand into ~/.agents/skills/, or into .agents/skills/ inside a single project:

git clone https://github.com/heydamir/unslop

mkdir -p ~/.agents/skills && cp -r unslop/skills/unslop ~/.agents/skills/

Once installed, run it in Claude Code with /unslop plus what you want, or in Codex with $unslop the same way. For example:

/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 ask in your own words and the agent picks the skill up by itself. The skill audits the screen and proposes a direction before it edits anything, so you can steer it early; if the screen is already good, it says so and suggests only small refinements.

A typical run follows a fixed order. First it looks at the rendered screen, so it judges what people actually see rather than only the code. Then it audits every sign of slop, one line each, with where it lives. Then it writes a five-line direction — product, character, world, moments, and one signature detail — and shows the audit and direction to you before editing, unless you already told it to just do it. Only then does it fix the screen in nine passes, in order: spacing, color, icons, copy, type, layout, details, visuals, and motion. Finally it re-renders, checks the result against the audit list, and reports what changed.

Two optional extras need extra tooling. To snapshot a live site or create a story video, install Playwright and its Chromium browser from the project directory where you run the skill:

npm install -D playwright

npx playwright install chromium

Story videos also require ffmpeg installed and available on your PATH. The story video is a square video under 10 seconds of the screen unslopping itself, ready to post. For hero visuals, the skill can generate a real image through an image service such as fal, Replicate, OpenAI images, or Higgsfield when one is connected; if none is connected, it offers to connect one as an MCP server, and it shows the prompt and asks before every paid generation.

Where it fits, and where it does not

Unslop fits best when you already have a working screen that looks generic: a vibecoded dashboard, a landing page an agent drafted, a hero full of gradient blobs, or an internal tool whose labels all shout. It also fits when a page has a real brand underneath the slop, because the skill keeps a genuine logo, color, or typeface and builds the direction around it — while treating a violet-to-blue gradient, sparkles, and glow as slop even in the logo, unless you say otherwise.

It is not a substitute for product decisions. It keeps the features, content, and order of sections; what changes is that every size, color, word, and image becomes deliberate. It does not invent new facts for your copy, and unverifiable claims such as "Loved by 10,000+ teams" are removed unless you confirm they are real. If you only have a link to a live site, note the limit stated in the skill itself: the result is redesigned page code to hand to whoever owns the real site, not a direct edit of the live site.

A few cautions are worth keeping. This is a young repository, created on 2026-10-29, so check the README before relying on any single command. The CC BY 4.0 license requires credit to Damir Sokolovsky and a link back to the repository in any copy or adaptation. And heavy visual changes deserve a human review pass: compare the new screen against the audit list, check contrast on accent text, and confirm no real content or functionality was lost.

FAQ

What is AI slop in UI design? AI slop is the set of predictable tells that make a generated page look machine-made: purple gradients, glows, gradient text, emoji labels, glossy blobs, uppercase tracked labels, pulsing elements, uneven spacing, and shouty, hype-filled copy. Unslop treats these as a checklist to audit, not as a matter of taste.

How do I fix an AI-generated landing page that looks generic? Audit it first, set a direction from the product itself, then fix it in passes — spacing, color, icons, copy, type, layout, details, visuals, and motion, in that order. The unslop skill automates that sequence for Claude Code and Codex, and shows you the audit and direction before editing, so you can correct the direction early.

Does unslop work with Codex, or only Claude Code? Both. The README gives a Claude Code install (copy the skill into ~/.claude/skills/) and a Codex install ($skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop, or a manual copy into ~/.agents/skills/). You invoke it as /unslop in Claude Code and $unslop in Codex.

Can unslop redesign a live website from just a URL? Yes, with a limit. It snapshots the live page and works on a copy, and the output is redesigned page code to hand to the site owner. Animated backgrounds drawn by scripts do not survive the snapshot, so describe them in the audit from the live page. Snapshotting needs Playwright and Chromium; story videos also need ffmpeg.

Is unslop free to use? The skill itself is licensed CC BY 4.0, which allows use, change, and sharing, including commercially, as long as you credit Damir Sokolovsky and link back to the repository. Optional third-party image generation may be paid, and the skill shows the prompt and asks before every paid generation.

How is unslop different from other anti-slop design skills? Other skills on this site, such as hallmark and impeccable, focus on building new pages or giving agents a design vocabulary and detector. Unslop targets the screen you already have: it audits an existing vibecoded page, decides honestly whether it has heavy slop, light slop, or no slop, and then fixes it pass by pass — or stops, if the screen is already good.

See the skill's directory entry for install, platforms, and quick start: unslop on aiskills.one.