| name | unslop-ui |
| description | Detects and removes the visual patterns that make a website look AI-generated or "vibe-coded": the default shadcn/Tailwind look, AI-purple gradients, Inter/Geist fonts, unprompted neon glow, emoji used as icons, the centered hero + three feature cards + CTA layout, and more. Every rule is grounded in a 47-subreddit, 3.2M-post Reddit analysis of what people actually flag as "AI slop." Use this whenever building, designing, styling, reviewing, refactoring, or auditing any website, landing page, marketing page, web app UI, dashboard, or front-end component, and ESPECIALLY when the user wants a site to look custom, human, or professional rather than AI-generated, or mentions "AI slop," "looks AI-made," "generic," "vibe-coded," Tailwind, or shadcn. Trigger even if the user never says "vibe-coded" outright; if they are producing or cleaning up front-end UI and care how it looks, this skill applies. |
unslop-ui
Make a site stop looking like it was generated by an AI. The patterns below are not
matters of taste pulled from nowhere. They are the specific things real people name,
over and over, when they say a site "screams AI." They come from mining ~3.2 million
posts across 47 AI and SaaS subreddits (2020 to 2026) plus 3,033 comments from 125
threads that exist only to answer "why do all these AI sites look the same." The full
catalog with evidence, code-level detection, and fixes is in
references/tells.md. Good replacement defaults are in
references/good-defaults.md.
The one idea behind all of it
AI build tools ship the median of their training data. Left unspecified, every model
reaches for the same stack (Next.js, Tailwind, shadcn/ui), the same starter layout,
and the same palette, so everyone's output converges on an identical look. As one
commenter put it: "they're just giving you the average of their training data. So what
you get is a sort of homogenized, rounded off version of web design."
So the fix is almost always the same move: do not let the model freestyle the design.
Make a specific, non-default choice, ideally anchored to a real reference. A tell is
just a default that nobody overrode.
Two modes
Build mode (you are generating or editing UI). Before writing styles, make
deliberate choices for the high-signal axes below so you never emit the defaults in the
first place. This is cheaper than fixing it later and is the whole point of the skill.
Audit mode (you are reviewing or cleaning up existing code, or the user says things
like "does this look AI," "de-AI this," "make it not look vibe-coded"). Run the scanner,
then walk the findings and fix them in priority order.
Audit mode: run the scanner first
scripts/devibe_scan.py greps a codebase for the tell patterns and prints a ranked
report with file, line, the matched snippet, and the fix. It is plain Python, standard
library only, no install.
python3 scripts/devibe_scan.py <path-to-project>
python3 scripts/devibe_scan.py <path> --severity high
python3 scripts/devibe_scan.py <path> --json
It scans .html .css .scss .js .jsx .ts .tsx .vue .svelte .astro and reports a "vibe
score." Treat the scanner as a first pass that catches the mechanical tells (colors,
fonts, classes, gradients). The layout and motion tells still need your eyes, so after
the scan, read the catalog and check the things a regex cannot see.
The tells, in priority order
Priority follows how often each is actually named in the on-topic data (comment share,
the cleanest signal). Spend your effort top-down. The first three account for most of
the "this looks AI" reaction.
| # | Tell | Named in | Fix in one line |
|---|
| 1 | Default shadcn/Tailwind look (slate-gray cards, default accent, default radius and spacing) | 2.5% of comments, top concrete cause | Override the theme tokens. Stock defaults are the giveaway, not shadcn itself. |
| 2 | "AI purple" / violet / indigo as the primary color | 2.3% | Pick a non-purple brand color. Indigo/violet is Tailwind's default, so it reads as "untouched." |
| 3 | Gradients everywhere, especially purple-to-blue and gradient heading text | 2.0% | Solid colors. At most one restrained gradient, never on body headings. |
| 4 | Too many animations: fade-in-on-scroll, grow-on-hover, parallax, scrolljacking | 1.1% (minor, noisier signal) | Motion only when it communicates something. Respect prefers-reduced-motion. |
| 5 | Rounded corners and pill buttons on everything | 0.8% | A real radius scale, not one max-rounded value on every element. |
| 6 | Dark mode with neon glow added unprompted | 0.7% | Drop glow you did not ask for. Glow needs a reason. |
| 7 | Emoji used as icons or section bullets | 0.5% (real specifically as emoji-as-icons) | Use a real icon set, or nothing. Emoji-as-UI signals low effort. |
| 8 | Generic sans fonts (Inter, Geist, Roboto, system default) | 0.4% (understated; people also just say "generic font") | Choose a typeface with a point of view; pair a display and a body face. |
| 9 | The centered hero + three feature cards + CTA skeleton | 0.4% comments, 1.6% of posts | Break the grid. Asymmetric hero, varied section shapes, real screenshots over icon-cards. |
Two umbrella complaints sit above all of these and are what the specific tells add up
to: "it all looks the same / cookie-cutter" (named in 6.1% of comments, negative 91% of
the time) and "it screams AI / soulless / slop" (6.4%). If you fix the nine tells, you
fix the umbrellas.
Do not waste effort on these
The data is also useful for what it clears. These get repeated as memes but barely
register as real complaints, so do not contort a design to avoid them:
- Mesh / blob / aurora backgrounds: rejected as a keyword artifact. Effectively a
non-complaint in the actual threads.
- Bento grids (0.1%, dead last) and glassmorphism (0.2%): low, and actively
defended by some people ("leave Bento grids alone, I love Bento grids"). Use them if
they fit. They are not what gives a site away.
Honesty about this matters: a skill that flags everything trains the user to ignore it.
Flag what the data supports, at the weight the data supports.
Full detail
Read references/tells.md before doing an audit or a from-scratch
build. For each tell it gives the data evidence, a representative real quote, the exact
code-level signatures (Tailwind classes, CSS, hex values, copy patterns) the scanner
keys on, and the specific fix. references/good-defaults.md
is the substitution sheet: concrete non-AI choices for color, type, radius, motion, and
layout you can reach for so "make a deliberate choice" is not extra work.
How to report an audit
Lead with the verdict and the single highest-impact change, not a wall of findings.
Then list findings grouped by tell, highest priority first, each with file:line and the
fix. End with the vibe score from the scanner and the top three things to change. Keep
the tone plain and specific. The goal is a site that looks like a person made a choice,
not a site that passes a checklist.
