Your UI Looks Like AI Made It: One Skill Fixes It

A friend of mine keeps building apps with AI. They work. They also all look exactly the same, and not in a good way.

You know the look. Purple background, glowing buttons, a rocket emoji on every second line. I call it sade hue UI. Rotten UI. So I went looking for something they could use without learning design first, and found one skill that does the job.

If you commented “UI” on the reel, this is the link. Here is what AI-made UI looks like, why it happens, and how the skill fixes it.

What AI-made UI looks like

Once you see these, you can’t stop seeing them:

• Purple to pink gradients on the background, the buttons, the cards, sometimes the headline itself.
• Glow on everything. Buttons glow, cards glow, the pills glow.
• Emoji as icons. A brain for planning, a lightning bolt for speed, a rocket for “Get started”.
• A sparkle for anything AI. The logo, the headline, the badge.
• Pills and badges everywhere. NEW, HOT, PRO, AI, all in little glowing capsules.
• The same rounded card, over and over, with the same padding and the same see-through glass look.
• Everything centered and stacked. Badge, headline, text, two buttons, a list, three stat boxes.
• A font nobody picked. Big, heavy, bold headings in whatever the default was.
• Copy that could sell anything. “Supercharge your productivity.” “Unlock the power of next-gen AI.” “Loved by 10,000+ users.”

Here is a page built in exactly that style:

Before

After one run of unslop

Why it happens

When you ask an AI to “make it look good” and give it nothing else, it picks the safest average of everything it has seen. Thousands of landing pages and templates, all mixed together. The average of all of them is a purple gradient, a big bold headline, emoji and centered cards.

It isn’t ugly because the AI can’t design. It’s ugly because nobody told it what to design. It doesn’t know your product, who uses it, or what it should feel like. So it falls back to the default. And when everyone gets the same default, every app looks the same.

A designer would start by asking what the product is and who it’s for, and build the look from that. That’s exactly what this skill makes the AI do.

The skill: unslop

It’s called unslop, made by Damir Sokolovsky (@heydamir). It’s free, and it works in Claude Code and Codex.

It doesn’t just recolour your page. It works the way a designer does a review:

1. It finds the slop. It goes through your screen and lists every sign, like the gradient on the hero button or the emoji in the nav, and where each one lives.
2. It sets a direction from your product. What the product does and for whom, two or three words for how it should feel, and the place it belongs to. A notes app lives near paper and ink. A monitoring tool lives near instruments and night shifts.
3. It asks you first. It shows you the list and the direction and waits for your OK before it touches anything. Tell it to just go if you don’t want to be asked.
4. It fixes the screen in passes, in this order: spacing, color, icons, copy, type, layout, details, visuals, motion. Each pass runs across the whole screen before the next one starts.

Your features, content and order of sections stay. What changes is that every size, color and word is picked on purpose. And if your screen is already good, it says so and suggests a few small fixes instead of redoing it.

It works with whatever your app is built in: Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS. Dashboards, apps and landing pages. If all you have is a link to a live site, it can save the page and redesign a copy.

What changed in the before and after

That page went through the skill once. Nothing was fixed by hand afterwards. Here is what it did:

• The purple is gone. One warm, quiet background, with one dark button that stands out because nothing else is shouting.
• The headline says what the app does. “Supercharge Your Productivity with AI ✨” became “Your tasks, planned into your day”.
• The emoji became plain line icons, all one size, all one color.
• The NEW, HOT and PRO pills are gone.
• The made-up numbers are gone. No more “10x faster” or “Loved by 10,000+ users”, since nothing on the page backed them up.
• The list of features became the product itself. Instead of four glowing rows, you see a real day plan: tasks at set times, a line for the current time, and how many hours of focus you got this week.

The second one is the bit I like most. You look at it and know what the app does in two seconds. The first one could be selling anything.

How to use it

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/

Then open your project in Claude Code and type:

/unslop this dashboard

Codex

Ask Codex to install it straight from the repo:

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

Then type $unslop with what you want fixed, the same way.

A live site

To work from a link instead of code, install Playwright in the folder you run it from:

npm install -D playwright
npx playwright install chromium

Then:

/unslop the hero of https://your-site.com

You get back a redesigned page in code that you can hand to whoever runs the real site.

The skill is free to use and change, even for paid work, as long as you credit Damir and link back to the repo.

If your friend also makes UI like this, send them this page.