iamneilroberts 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> # scan a directory or file
python3 scripts/devibe_scan.py <path> --severity high # only the high-signal tells
python3 scripts/devibe_scan.py <path> --json # machine-readable, for CI
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.