unslop Turns AI-Looking UI Into a Checklist Your Coding Agent Can Fix

The open-source skill for Claude Code and Codex audits the "vibecoded" look before it touches a line, then repairs it in nine passes.

You can spot an AI-built interface from across the room. A purple gradient behind the hero. A soft glow on every card. An emoji in front of every label. A headline that sounds like it is shouting. Spacing that is almost even, which is somehow worse than uneven.

None of these choices is wrong on its own. Together they read as "nobody decided anything," and users notice, even if they could not name what bothers them. Because the mistakes repeat, the fix can be a checklist.

If AI-made screens all go wrong the same way, then fixing them should take a checklist, not a talent. That is the bet behind unslop, an open-source skill (a packaged set of instructions a coding agent loads on demand) for Claude Code and Codex. On the afternoon of November 1 it sat at #6 on Trendshift's daily GitHub board, with roughly 4.6k to 4.7k stars depending on where you looked.

The useful idea is not "make it prettier." It is an order of operations: look, list what is wrong, agree on a direction, then fix one layer at a time across the whole screen. You can borrow that order even if you never install the skill.

What unslop is

unslop is a folder of markdown files written by Damir Sokolovsky. The README describes it as a skill that turns vibecoded, AI-looking UI into a designed interface, and lists the stacks it works with: Next.js, React, Vue, Svelte, Tailwind and plain HTML/CSS, on dashboards, apps and landing pages, including live sites you hand it as a link.

You call it from your agent like a command. In Claude Code that is /unslop; in Codex it is $unslop. The README's examples read like plain requests:

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

There is no app, server or account. The agent reads the skill's instructions and its reference files, then edits your code the way it normally would.

The mechanism: audit, stop, then fix in order

The core of the skill lives in skills/unslop/SKILL.md. It lays out a workflow that a careful designer would recognize.

First, look at the real screen. The agent renders the page in a browser where it can. For a live URL with no code, it saves a snapshot and works on a copy. Given only a screenshot, it rebuilds the screen as static HTML first. Starting from pixels instead of guessing from code matters, because slop is a visual problem.

Second, audit. It lists every sign of slop it finds, one line each, with where it appears. The signs come from a reference file in the repo, references/signs.md. The README's short version is purple gradients, glows, emoji labels, shouty copy and uneven spacing.

Third, pick a scope. Heavy slop gets the full treatment. Light slop gets a polish of only what the audit found, keeping the existing brand. If the screen is already good, the skill says so and suggests two or three small refinements at most, applied only if you agree.

Fourth, set a direction and stop. Before editing, the agent writes five short lines (Product, Character, World, Moments, Signature) describing what the interface should feel like, shows you the audit and the direction, and waits. It skips the wait only if you already told it to go ahead.

That pause is the most valuable line in the whole skill. Most AI redesigns fail because the agent picks a new style on its own and applies it everywhere. Making it show its plan first turns a coin flip into a review you can steer in thirty seconds.

Then, nine passes, in order. Each pass finishes across the whole screen before the next one starts.

The nine passes, in plain words

Here is what each pass does, condensed from SKILL.md. The exact values (sizes, weights, radii) live in references/tokens.md.

1. Spacing. Snap everything to a 4px grid, give equal things equal sizes, group related items with space instead of boxes, and remove one-off values.
2. Color. One tinted neutral range, three roles for text, one accent used rarely. No hue gradients, no glows, no colored shadows.
3. Icons. One line-icon set at one size and stroke. No decorative emoji.
4. Copy. Plain, specific headlines. No exclamation marks, no greetings, no hype words, no claims nobody verified.
5. Type. A typeface picked for the product's character, weights between 400 and 600, sentence case, and tabular numbers (digits that line up in columns).
6. Layout. Keep the section order, use real app proportions, and keep navigation calm.
7. Details. Nested corner radii that match, quiet secondary text, charts with a single accent, and cards that are not all the same size.
8. Visuals. Remove decorative filler and build a real product preview instead. Generate images only where they fit.
9. Motion. Remove looping and bouncy animation, use one easing curve, and allow at most one entrance animation.

Why this order? Each pass sets up the next. Spacing first means color decisions land on a stable layout. Color before icons and type means the quieter palette is already in place when you judge whether an icon or a weight is too loud. Motion comes last because animation on a messy screen just makes the mess move.

The insight: quiet chrome, rich moments

The skill states its design philosophy in one contrast. Slop spreads color and effects across the chrome, meaning the frame of the app: navigation, buttons, borders, card backgrounds. Craft keeps the chrome quiet and puts the richness into one or two memorable moments of content.

This is the clearest way I have seen to explain why AI interfaces look samey. A language model asked to make something "modern" adds effects everywhere, because every individual effect is a plausible guess. Nothing is the focal point because everything is.

unslop flips that: strip the frame down, then spend your visual budget on the one thing the product exists to show, like a chart, a preview or a hero scene.

The skill also has a short list of things it refuses to do. It will not rename your product, even if the name contains "AI." It will not change what the product is or invent features, claims or data. It will not swap one trend for another (glass, grain, neon or bento grids). And it will not change a good screen just to make it different. That last rule matters more than it looks. Agents love to do something, and "this is fine, here are two small tweaks" is a hard answer to get out of them.

Put this into practice

Install for Claude Code (from the README):

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

Install for Codex (this line is a prompt you type into Codex, not a shell command):

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

Optional, for live sites and the story video:

npm install -D playwright
npx playwright install chromium

The story video also needs ffmpeg on your PATH.

Your first run. Pick one screen, not the whole app. A settings page or a dashboard home is ideal. Run /unslop this dashboard in Claude Code and expect, before any edit, a list of slop signs with locations and a five-line direction. Read the direction like a design brief. If the "Character" line is wrong for your product, say so now. This is where your thirty seconds of judgment pays off.

Then review it pass by pass. Because the skill reports a few lines per pass, you can check the diff the same way: spacing changes, then color, then icons. If one pass goes wrong, you know exactly which layer to ask about.

No install? Steal the order. Even without the skill, you can prompt your agent with the same sequence: render the screen, list what looks generic, propose a direction and wait, then fix spacing, color, icons, copy, type, layout, details, visuals and motion, one at a time across the whole screen. The order is the part that does the work.

Commit before you start. A full run touches a lot of files. A clean commit gives you one command back to where you were.

Honest limitations

It is a set of instructions, not a design tool. The results depend on the model running it and on how well it can see your screen. Without a browser render, the skill falls back to working from code or a screenshot, which is weaker for a visual problem.

Its taste is one person's taste. "One accent, weights 400 to 600, no italics, no glass" is a defensible house style. It is still a house style. If your brand is loud on purpose, expect to push back on the direction step.

Visuals can cost money. For generated images the skill can use an image service such as fal, Replicate, OpenAI images or Higgsfield, per the README; if none is connected, it offers to set one up as an MCP server (MCP is the standard plug-in format coding agents use to reach outside tools). It shows the prompt and asks before every paid generation, and notes that dashboards and apps rarely need generated visuals at all.

Read the license. unslop is CC BY 4.0, a content license rather than a typical software license. Commercial reuse is allowed, but if you share copies or adapted versions you need to credit Damir Sokolovsky, link to the repo and the license, and say what you changed. The README also promotes the author's paid design service.

No releases yet. The repo had no GitHub Releases as of November 1, and the documented install points at main, so you get whatever is there that day. Copying the folder into your skills directory pins it until you copy again, which is a feature here.

The real lesson is the order

The most common advice for AI-generated UI is "add a design system" or "write a better prompt." unslop's answer is smaller and more useful: the failures are predictable, so check for them first, agree on one direction, and fix them in an order where each step makes the next one easier.

You can install the skill and let your agent run it. Or you can take the sequence, the pause and the "quiet chrome, rich moments" rule and use them on the next screen your agent hands you. Either way, the next time a purple gradient shows up, you will know which pass removes it.

Sources: heydamir/unslop README, skills/unslop/SKILL.md, LICENSE, Trendshift daily board. Reviewed on main as of November 1, 2026; the repo has no GitHub Releases. Star count from shields.io, rounded.