Anti AI slop design: the skill that strips the AI look from your interfaces
Your AI-generated interfaces all look the same and smell like a template. Here is a free skill that teaches Claude Code the 11 micro-details of design that separate an amateur interface from a pro one. Install once, keep it for life.
June 27, 2026 · 5 min read
You ask your AI to code an interface. It hands you something functional, but generic: random border radii, gray borders everywhere, text that breaks awkwardly at the end of a line, numbers that jump on every update, and either zero animation or animations that make you dizzy. It works, but it screams "generated by an AI." That is AI slop: design by default, without intention.
The problem is almost never the layout. Your AI puts the blocks in the right place. What is missing is the finishing layer, the small details that real interface designers apply without even thinking about them.
Those details, you can teach your AI once and for all.A developer, Jakub Krehel, packaged the 11 details that matter into an open-source skill. You install it with one command, and from then on your agent applies them automatically every time it builds a UI. Here is how to use it.
The Claude AI Lab is my Skool community where I share my Claude systems and the more advanced modules. Entry is free.
Join the Lab →npx command.Understand where the AI look comes from
When an interface "smells like AI," it is not because the structure is bad. It is because a dozen design engineering reflexes are missing, the ones nobody teaches you but that your eye catches instantly.
A few examples of what is off by default:
Install the skill
The skill is called make-interfaces-feel-better. It is an Agent Skill based on Jakub Krehel's reference article on the topic. One single command:
npx skills add jakubkrehel/make-interfaces-feel-better
Once installed, you have nothing left to do: your agent applies it on its own whenever it builds a component, reviews frontend code, or implements an animation. You can also trigger it manually when you want to force the move:
/make-interfaces-feel-better
What it actually injects
The 11 details fall into three families. That is what your AI will now apply by default.
text-wrap: balance, paragraphs without orphan words using pretty, crisper text on Mac with font smoothing, and fixed-width digits with tabular-nums so they stop jumping.Two concrete examples of what it changes. For depth, you replace the gray border with a stack of shadows:
box-shadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.06),
0px 1px 2px -1px rgba(0, 0, 0, 0.06),
0px 2px 4px 0px rgba(0, 0, 0, 0.04);
And for titles that never break clumsily across two lopsided lines:
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
font-variant-numeric: tabular-nums on all your counters, prices and timers, and your interface instantly looks more serious.Use it well
The skill works in the background, but you get more out of it by being a little directive.
Pro tips
Want to go further?
In the Lab, I share my Claude skills, how I build them and how I stack them to automate my day-to-day.
A dedicated session or program, tailored to your tools and use cases.
And day-to-day, I post one reel a day on Instagram: @quentin_iamarketing