Here's the thing nobody says out loud about AI coding agents: they're brilliant at building interfaces, and they build the same one every single time.
Open enough AI-generated pages and the tells jump out at you:
- gradient text on a dark background
- glass cards with a soft glow shadow
- Inter. Everywhere. Forever.
- three identical feature columns
- a call-to-action button at 2.3:1 contrast that technically exists but nobody can actually read
That's AI slop. Not broken, not even ugly — just the same. And the agent has no idea, because it never looked at the rendered page. It emitted some CSS and moved on.
So I built Pixelslop: an AI slop detector for design that opens your actual pages in a real browser and measures what is genuinely on the screen.
What is AI design slop?
AI design slop is the generic, interchangeable look that AI coding agents produce by default. Visually competent, technically fine, and completely indistinguishable from the last hundred AI-built pages. It's the design equivalent of the bland, hedge-everything prose an LLM writes when you don't push it.
It shows up as a small, predictable set of patterns:
- gradient text on a dark background
- glass-morphism cards with glow shadows
- Inter as the one and only typeface
- the identical three-column feature grid
- the same hero-then-subhead-then-three-cards-then-CTA skeleton on every page
- body text and CTAs sitting below the 4.5:1 WCAG contrast line
None of these are bugs. Each one is a safe default an agent reaches for, and on its own each is defensible. Stack them across every page and you get slop: a site that works and says nothing.
It measures pixels. It does not read your CSS and guess.
This is the whole point. Most design linters parse your stylesheet and infer what the page probably looks like. Pixelslop does the opposite. It launches Playwright, loads the real page at three viewports (desktop, tablet, mobile) and reads the computed styles the browser actually applied, after every cascade, media query, and override has fought it out.
Then it measures: contrast ratios against WCAG thresholds, spacing rhythm, type scale, hierarchy, and how the layout reflows when the screen shrinks. If your CTA lands at 2.3:1 in the real render, Pixelslop reports 2.3:1 — not the nice token you meant to use three stylesheets ago. It's closer to Playwright visual testing than to a static linter, except the thing under test is design quality, not a screenshot diff.
Scanning works on any URL with zero setup. Point it at localhost or a live site and it goes.
Five pillars, twenty-five patterns, eight personas
Every page gets scored on five pillars: Hierarchy, Typography, Color, Responsiveness, and Accessibility. It's design QA that runs like a test suite: repeatable, evidence-backed, and boring in the good way.
On top of the pillars, it checks 25 known AI slop patterns: the gradient-on-dark cliché, the glass-card glow, the Inter monoculture, the identical three-column grid, the unreadable CTA. It flags the ones it finds, with the evidence attached.
Then the part I haven't seen elsewhere: it evaluates each page from eight named user personas. Sam, Alex, Casey, Quinn and the rest each look at the same screen with different eyes: different priorities, different impairments, different patience. "Looks fine to me" stops being the only opinion in the room.
Everything lands in a self-contained HTML report you can open, share, or hand straight back to the agent that built the page.
Not a UI generator. Not a markup tool. A QA layer.
Two categories already own the words around this, and Pixelslop is neither. It's not a UI generator like Figma AI or Uizard. Those turn a prompt into a screen; Pixelslop judges the screen after something built it. And it's not a team-feedback or markup tool like Autodesk or Ruttl, where humans leave comments on a mockup.
Pixelslop is the automated QA layer that sits after generation: the agent builds the UI, Pixelslop measures whether it's any good.
That gap is exactly where AI-generated UI falls down. The generator's job ends at "plausible." Nobody's job was "check it's actually usable on a phone at 2.3:1 contrast." Until now.
It does not just scan. It fixes.
Finding slop is half the job. If you want it to, Pixelslop runs a fix loop with automatic checkpoints, so every change is isolated and reversible. It works best inside a git repo, where checkpoints become real commits you can roll back. If your project isn't in git yet, there's a no-git mode that uses file-based backups instead.
And when it fixes, it fixes toward your design tokens, not generic defaults, so the result comes out on-brand instead of just less broken. Nothing changes without a way back.
Built to live inside Claude Code and Codex CLI
Pixelslop installs as an agent skill, not a separate app you alt-tab to. One interactive command, npx pixelslop install, detects whether you're running Claude Code or Codex CLI and wires itself in. After that it's a command your agent already knows: scan this page, score it, fix what's broken. It ships with 850+ of its own tests and zero runtime dependencies beyond a browser engine.
Generate with taste, verify with evidence
Pixelslop is one half of a pair. I built stitch-kit to teach AI agents how to generate good UI in the first place, using Google Stitch. Pixelslop is the other side of that coin: it catches what slipped through. And slopbuster does the same job for written slop, stripping the AI tells out of prose and code.
Same philosophy, three domains: generate with taste, verify with evidence, fix what didn't make the cut.
Frequently Asked Questions
How do I detect AI-generated design?
Run a tool that measures the rendered page instead of trusting how it looks at a glance. Pixelslop opens the page in a real browser, checks it against 25 known AI slop patterns (gradient-on-dark, glass cards, the Inter monoculture, identical three-column grids, low-contrast CTAs) and scores five design pillars, so "this feels generic" turns into a list of specific, fixable findings.
Why does AI-generated design all look the same?
Because agents reach for the safest defaults every time: a dark gradient, glass-morphism cards, Inter, and the hero-then-three-columns skeleton. Each choice is individually fine, which is exactly why it survives. Stacked across a whole site they collapse into one interchangeable look — AI design slop.
How do I make AI-built UI not look generic?
Add a verification step. Let the agent generate, then measure the result against design-quality criteria and fix what fails (contrast, hierarchy, type scale, responsiveness) before it ships. Pixelslop runs that step automatically, including an optional fix loop with checkpoints so changes stay reversible.
Does my website look AI-generated?
If it leans on gradient-on-dark sections, glass cards with glow shadows, Inter for everything, and a row of three identical feature cards, it probably reads as AI-built. Pixelslop tells you which patterns it found and how far off the accessibility and hierarchy marks the page is.
Is Pixelslop a code review tool?
It's the design counterpart to one. Code review tools check whether your code is correct; Pixelslop checks whether the interface that code renders is actually good — measured in a browser, scored, and explained. Same instinct, applied to pixels instead of logic.
Is it free and open source?
Yes — Apache 2.0, on npm and GitHub. Install it with npx pixelslop install and point it at a page.
One more thing
If you're shipping UI with an AI agent in the loop and you're tired of finding out a page looks generic only after it's live, the repo's below. Happy to talk through where it fits if you're wrestling with the same problem — no pitch, just the actual problem.