Score your site before and after running the unslop skill

unslop is a free skill for Claude Code and Codex that redesigns vibecoded UI. It's good at the fixing. This guide adds the measuring: a Slop Score before, the same scan after, and a short list of whatever is still giving you away.

Updated 2026-11-03 · 5 min read · by the Unslop Me team

If you've seen the unslop skill going around on X, you've seen the pitch: point it at a dashboard or landing page that looks vibe coded, and it turns it into something with its own character. It's made by Damir Sokolovsky (@heydamir), it's free, and it's licensed CC BY 4.0. Unslop Me is a separate website with a similar name. We're not affiliated with the skill or its author.

The two do different jobs, and they work well together. The skill changes your code. Unslop Me scans the live site in a real browser and gives it a number. If you run a scan before the skill and another one after, you can see how much it helped, and what's still left.

What the unslop skill does

According to its README, unslop is a skill for Claude Code (/unslop) and Codex ($unslop). It:

• Audits the screen and lists every sign of slop it finds, like purple gradients, glows, emoji labels, shouty copy and uneven spacing, along with where each one lives.
• Sets a direction from your product (character, colour moments, a signature detail) and proposes it before it edits anything, so you can steer.
• Fixes the screen in passes: spacing, colour, icons, copy, type, layout, details, visuals and motion, in that order.
• Works across Next.js, React, Vue, Svelte, Tailwind or plain HTML/CSS, and can work from a live link (it uses Playwright to snapshot a live site).
• Can optionally generate hero visuals through an image service and make a short "story" video of the screen unslopping itself.

If a screen is already good, the README says it will tell you so and suggest small refinements instead of a redesign. That's a sensible default.

What it doesn't give you: a number to compare

The skill's audit is a list written by your agent, inside your coding session. That's useful for deciding what to fix. It's harder to use for "did this get better, and by how much?", especially across several runs, several screens, or when someone else on your team asks.

That's the gap a Slop Score fills. Unslop Me opens your public URL in a headless browser at 1440px and 390px, reads the computed styles and DOM, and checks 13 AI design tells. It starts at 100 and subtracts points for each tell it finds on your first screen: up to −20 for a purple/indigo gradient, up to −16 for generic AI copy, −12 for an Inter-only type setup, and so on. The same checks run every time, so the before and after numbers can be compared.

• 60+: already looks designed.
• 35–59: a few giveaways are showing.
• Under 35: lots of room to improve.

The before/after workflow

1. Scan the live site first

Paste your deployed URL into the free scanner. Write down the score and the tells it lists, or take a screenshot. That's your baseline.

Get your free Slop Score → Free · no signup · about 20 seconds

2. Run unslop (or Impeccable, Hallmark, or your own rules)

Install the skill as its README describes, then run it on the screen you scanned:

/unslop the hero of https://your-app.lovable.app

A useful trick: paste the tells from your scan into the same chat, so the skill's audit starts from what a browser actually rendered. For example:

/unslop this landing page.
An external scan flagged these, fix them first:
- Purple/indigo gradient on the hero background
- Inter / system font for over 90% of text
- Uniform 3-card icon grid under the hero
Keep all copy, routes and functionality.

The same works with other design skills or a Cursor rules file. The scan doesn't care which tool made the change.

3. Deploy and re-scan

The score comes from the live page, so push your changes and scan the same URL again. Compare:

• The score. Did it move into the next band?
• Which tells are gone and which are still listed, each with the evidence the scanner found (the gradient, the stock colours, the font names, the exact AI phrases).
• Mobile. Redesigns often add a wide element; the scan checks for horizontal overflow at 390px.

Free scans are listed on the public Slop Leaderboard, one page per site, and the latest scan wins. So your public score page shows the "after" once you re-scan. (You can remove your page any time.)

4. Handle what's left

A good skill run usually clears the loud tells on the screen you pointed it at. What often remains is everything else: the pricing page, the dashboard, the settings screen, the copy on page three. You can run the skill again, screen by screen. Or, if you'd rather have one consistent system for the whole app, the $15 redesign pack crawls your home page plus up to 5 linked pages and gives you:

• A design-system.md with colour tokens, a font pairing, a type scale, spacing, radius and component rules.
• A redesign of each page as HTML, with before, after and mobile previews.
• Prompts in build order for Lovable, Cursor, Bolt and v0: one setup step, then one prompt per page.
• A Lovable Knowledge file and a Cursor rules file (.mdc). You can also hand the design-system.md to your agent as the direction before running a skill.

It's a one-time payment through Stripe, and it downloads as a .zip. Then re-scan once more to check.

How to check if your site looks vibe coded (without any tool)

If you'd rather eyeball it first, look for: a purple-to-blue gradient hero, the same default font for headings and body, a centered headline over three identical icon cards, emoji standing in for icons, frosted-glass navbars, and rounded corners on everything. Our 13-point checklist has a 30-second DevTools check for each one, and why AI-built apps look the same explains where those defaults come from.

Get your free Slop Score → Free · no signup · about 20 seconds

FAQ