A Chrome extension and CLI tool that detects "AI slop" — generic, templated UI design patterns — on any webpage in real time. Built from scratch using vanilla JavaScript, Chrome Extension APIs (Manifest V3), and a rule-based detection engine, with an optional Claude-powered visual review layer for the patterns that can't be caught by pattern-matching alone.
AI page-builders and coding agents tend to converge on the same visual tells — purple gradients, glassmorphism cards, icon-in-a-box feature grids, em-dash-heavy copy — regardless of what the product actually is. This tool scans a page's real computed styles and DOM structure, flags every occurrence of these tells, visually outlines the offending elements, and produces a categorized report so a designer can see exactly what's making a page look generic.
User opens a page / provides an HTML file
|
v
content.js injects into the tab
(or engine.js parses the file, for CLI)
|
v
DOM walk + getComputedStyle() on every element
|
v
40 deterministic pattern detectors run
|
v
(optional) screenshot -> Claude API -> 6 AI-judged checks
|
v
Red outlines on page + categorized popup report
slop-detector/
├── rules.js # All 46 rule definitions, grouped by category
├── utils.js # CSS parsing + contrast-ratio helpers (CLI side)
├── engine.js # Runs rules.js against a parsed HTML file
├── cli.js # Terminal entry point (node cli.js detect <file>)
├── browser-rules.js # Puppeteer-based layout checks for the CLI --full mode
├── llm-rules.js # Claude API calls for the CLI --full mode
├── test-files/
│ └── slop.html # Sample file with intentional slop patterns
└── extension/
├── manifest.json # MV3 config + host permission for the Anthropic API
├── content.js # Injected scanner — runs all 40 deterministic rules live
├── background.js # Service worker — handles the 6 Claude-reviewed checks
├── popup.html # Extension UI
└── popup.js # Popup logic — scan orchestration + report rendering
46 rules across 8 categories. 40 run entirely offline (no network call, no API key). 6 require a screenshot + Claude API call because they're judgment calls a regex can't make.
| Category | Rules | Method |
|---|---|---|
| Visual Details | 4 | getComputedStyle on border-width, border-radius, box-shadow, background-image |
| Typography | 10 | Font-size ratios, font-family, letter-spacing, text-transform |
| Color & Contrast | 5 | RGB channel heuristics + WCAG relative-luminance contrast ratio |
| Layout & Space | 5 CLI + 3 browser-only | Padding/margin consistency, DOM nesting depth, getBoundingClientRect() |
| Motion | 3 | transition-timing-function, animated property inspection |
| Copy | 3 | Regex over document.body.innerText |
| Imagery | 1 | <img src> validation |
| General Quality | 6 CLI + 2 browser-only | Contrast ratio, heading hierarchy, line-height ratio |
| AI Review (Claude) | 6 | Screenshot sent to Claude with one targeted yes/no prompt per rule |
- Deterministic (35 rules): pure
getComputedStyle()checks — same result every time, no rendering ambiguity. - Browser-only (5 rules): need real layout (
getBoundingClientRect,scrollHeightvsclientHeight) to catch things like text overflow or content clipped byoverflow: hidden. The CLI needs Puppeteer for these; the extension gets them for free since it's already inside a real rendered page. - LLM-judged (6 rules): things like "does this look like a cheap hand-drawn mascot" or "do these three cards look identical" are subjective enough that pattern-matching produces too many false positives/negatives. These are sent to Claude as a screenshot + a single targeted question, and parsed back as
{flagged, reason}.
AI color palette checks whether background-color or color resolves to an RGB triple in the purple/violet band (b > 180, 100 < r < 200, g < 120) rather than matching a fixed list of hex codes, so it catches the pattern regardless of exact shade.
Low contrast text computes WCAG relative luminance for both the text color and background color of every leaf text node, then flags anything below the 4.5:1 AA threshold:
contrast = (L_lighter + 0.05) / (L_darker + 0.05)
Nested cards walks every element whose class name contains card, then checks whether a descendant also matches — catching the common AI pattern of wrapping a card inside another card's padding.
Side-tab accent border flags any element with a border-left/border-right ≥ 3px combined with a non-zero border-radius — the single most recognizable AI-generated UI tell, and the first rule this project implements.
Line length / content overflow / positioned-child-clipped (browser-only) use getBoundingClientRect() and scrollHeight/clientHeight comparisons — these only work with a real rendered layout, which is why the CLI needs Puppeteer to spin up headless Chrome for them, while the extension gets accurate results natively.
The popup reports a raw flag count rather than a single composite score, grouped by category so a designer can see which kind of slop dominates a page (e.g., mostly typography issues vs. mostly color issues) rather than a single opaque number.
| Flags | Read as |
|---|---|
| 0 | Clean |
| 1–8 | Minor — a few conventional patterns |
| 9+ | Heavily templated / likely AI-default styling |
- Live DOM scanning — the extension reads real
getComputedStyle()values, not regex-parsed CSS, so it's more accurate than static analysis - Visual overlay — flagged elements get outlined directly on the page, with a hover tooltip explaining which rule fired
- Categorized popup report — findings grouped by Visual Details / Typography / Color & Contrast / etc.
- Optional AI review — toggle on to run the 6 subjective checks via the Claude API (requires your own API key, billed per Anthropic's standard rates)
- CLI mode — scan static HTML files or CI pipelines without opening a browser
- On-device by default — the 40 core rules never leave your machine; nothing is sent anywhere unless you explicitly enable AI review
git clone https://github.com/hayattcodes/Slop-Detector.git
cd Slop-Detector
npm install
node cli.js detect test-files/slop.htmlOptional full scan (adds Puppeteer + Claude-reviewed rules):
node cli.js detect test-files/slop.html --fullRequires ANTHROPIC_API_KEY set as an environment variable for the LLM portion.
- Open Chrome and go to
chrome://extensions - Enable Developer mode (top-right toggle)
- Click Load unpacked
- Select the
extension/folder - Open any page, click the extension icon, and hit Scan this page
To include the 6 AI-reviewed checks, toggle "Include AI review" in the popup and paste an Anthropic API key (stored locally via chrome.storage, never transmitted anywhere except directly to api.anthropic.com).
test-files/slop.html bundles intentional violations across every category — purple gradients, a nested card, a skipped heading level, tiny justified text, a broken image, bounce easing, and buzzword-heavy copy — so the detector's output can be sanity-checked in one pass without needing a live website.
- The 6 LLM-judged rules require a funded Anthropic API account; they are not free like the rest of the tool
- Line-length and layout-overflow checks use heuristic character-width estimates rather than actual font-metrics measurement, so results are approximate on unusual fonts
- No DevTools-panel integration yet — findings currently surface only in the toolbar popup, not inline in the Elements panel
- No per-rule enable/disable toggle yet — AI review is an all-or-nothing switch
- Does not re-scan automatically on single-page-app route changes; each scan is manually triggered
- Bakaus, P. — Impeccable — the original 46-rule AI-slop catalog and CLI/extension/skill architecture this project was built to understand and re-implement independently
- Web Content Accessibility Guidelines (WCAG) 2.1 — relative luminance and contrast ratio formulas, §1.4.3
Hayatt Khan Computer Science and Engineering GitHub: github.com/hayattcodes