slop-detect

Score any landing page against the versioned design-slop fingerprint, copy axis, DESIGN.md system compliance, craft floor, and AEO readiness — then keep it clean. Audit live pages in real headless Chromium, verify rendered tokens against your own DESIGN.md, check if AI answer engines can read and cite your site, and generate a copy-paste remediation prompt for your coding agent. Monitor a domain and get alerted when it drifts.

$ npx slop-detect https://bolt.new https://www.aura.build https://news.ycombinator.com

https://bolt.new
What will you build today?
  🟡 Mild  ·  score 24/100  ·  5 patterns triggered
  ✗ AI-default font stack (Inter / Geist / Space Grotesk)       (+8)
  ✗ Gradient-heavy backgrounds (5+ elements)                    (+4)
  ✗ Big colored box-shadow glows (purple/blue/pink)             (+4)
  ✗ Centered hero in generic sans (Inter-style)                 (+4)
  ✗ Perma dark mode + medium-grey body text                     (+4)

https://www.aura.build
Create beautiful designs
  🟡 Mild  ·  score 20/100  ·  4 patterns triggered
  ✗ AI-default font stack (Inter / Geist / Space Grotesk)       (+8)
  ✗ Glassmorphism (backdrop-filter blur on translucent layers)  (+4)
  ✗ Big colored box-shadow glows (purple/blue/pink)             (+4)
  ✗ Centered hero in generic sans (Inter-style)                 (+4)

https://news.ycombinator.com
  🟢 Clean  ·  score 3/100  ·  1 pattern triggered

1. Why this exists

By April 2026, default-template landing pages had collapsed onto a measurable visual and prose fingerprint: Inter/Geist font stacks, purple-to-blue gradient heroes, "Now in Beta" pill badges, gradient-letter testimonial avatars, identical icon-topped feature cards, and formulaic antithesis copy. Adrian Krebs's study scored ~1,400 Show HN submissions with Playwright and found 67% carried detectable default-template fingerprints.

slop-detect reproduces Krebs's methodology, adds the signals from Meng To's May 2026 Aura study, integrates typography and contrast checks from Impeccable, and packages the deterministic engine (definitions@2026.11) across six developer surfaces:

All surfaces run the exact same engine (45 design patterns, 26 copy patterns, 9 DESIGN.md checks, 11 craft floor checks, and 16 AEO checks), so a Heavy tier in the CLI is identical in CI, MCP, and the hosted API. Weight 0 review rules are reported for visibility and add no points.

2. Quickstart (Try it now)

# 1. Web UI (fastest interactive X-Ray workbench)
open https://slop-detect.com

# 2. Terminal CLI (runs real headless Chromium locally)
npx slop-detect https://your-site.com
npx slop-detect https://your-site.com --copy --craft --aeo --design-md auto

# 3. Terminal CLI without a local browser (delegates to the hosted API — zero Playwright install)
npx slop-detect https://your-site.com --copy --remote

# 4. One-command project bootstrap (writes MCP config + Agent Skill + optional PostToolUse hooks)
npx slop-detect init

# 5. Public HTTP REST API (zero auth required)
curl -s -X POST https://slop-detect.com/api/scan \
  -H 'Content-Type: application/json' \
  -d '{"url":"https://your-site.com","axes":["design","copy"],"designMd":true}' | jq

3. The five-axis scoring model

Notice the score polarity: for Design and Copy slop, lower is better (0 = cleanest); for System, Craft, and AEO, higher is better (100 = best).

Axis 1: The 45 patterns (Design Slop)

definitions@2026.11 evaluates computed styles and DOM geometry in a 1280×800 headless Chromium viewport after document.fonts.ready. Every result carries definitionsVersion so scores from a given definition version are directly comparable. Browse all rules interactively at slop-detect.com/docs, spec/patterns.md, or GET /api/patterns.

Scoring presets (--preset)

Score against a curated subset instead of the full fingerprint:

slop-detect https://example.com --preset marketing   # Brand-surface tells only
slop-detect https://example.com --preset strict      # High-signal tells (weight >= 5, lowest false positives)
slop-detect https://example.com --preset minimal     # The 3 signature giveaways
slop-detect https://example.com --preset editorial   # Editorial & publication layout focus
slop-detect https://example.com --preset devtool     # Developer tool & documentation focus

The API accepts { "url": "...", "preset": "strict" }. New patterns can be added declaratively; see CONTRIBUTING.md.

Axis 2: Multi-axis slop (Design + Copy)

Slop isn't only visual. A page wearing a default CSS template frequently ships with default LLM prose. Pass --copy (or --axes all) to score 26 copy patterns on the page's extracted text at near-zero marginal cost (one text extraction, no extra page load), or audit static HTML files directly on disk with --copy-dir:

slop-detect https://example.com --copy          # Live URL: design + copy
slop-detect https://example.com --axes all      # Same thing
slop-detect --copy-dir ./dist                   # Built HTML directory on disk (zero browser startup)

  🟡 Mild  ·  B-  ·  unified 22/100  (2 axes)

  🟢 design  Clean   A-   score   8/100   2 flagged
  🟡 copy    Mild    B-   score  18/100   4 flagged

Copy slop:
  ✗ AI buzzword density (leverage / seamless / robust …)  (+7)
  ✗ Em-dash overload                                       (+2)
  ✗ "It's not just X — it's Y" antithesis                  (+6)
  ✗ Generic filler openers ("In today's fast-paced world") (+5)

• Scored copy tells include buzzword density (leverage/seamless/robust/elevate), em-dash overload, "not just X, it's Y" antithesis, filler openers, formulaic closers, rule-of-three tricolons, "whether you're X or Y", emoji bullet headers, and fake-bold Unicode math characters (fake_bold_math_alnum).
• Review copy rules (weight: 0) flag leaked chatbot citation markup (oaicite, turn0search1, [cite: 1], <grok-card>), utm_source=chatgpt.com links, unfilled [Insert ...] placeholders, and Monroe et al. Fightin' Words log-odds vocabulary.
• Backward compatibility: Top-level score, grade, and patterns remain design-only. Multi-axis adds axes.{design,copy} plus unifiedScore and unifiedTier.

Axis 3: The system axis (DESIGN.md & W3C DTCG 2025.10 compliance)

The absolute slop score measures how many default-template patterns a page matches. The system axis asks the durable question: "Does this page honor its own declared design system?"

Declare your tokens in a Google Labs DESIGN.md or W3C DTCG 2025.10 tokens.json, and slop-detect reports named token drift: undeclared fonts in use, CTA/surface colors outside perceptual OKLab $\Delta E_{\text{OK}} \le 0.03$, and corner radii or spacing off your scale. When your DESIGN.md intentionally declares a token (such as Space Grotesk or a violet brand primary), slop-detect automatically records a waivedByDesignMd waiver so intentional brand choices are never penalized as slop.

# Check live DOM compliance against <origin>/DESIGN.md or a local file
slop-detect https://your-site.com --design-md auto
slop-detect https://your-site.com --design-md ./DESIGN.md

# Bootstrap a W3C DTCG 2025.10 tokens.json from any live URL
slop-detect https://your-site.com --init-tokens > tokens.json

# Static lint DESIGN.md (WCAG contrast >= 4.5:1, broken refs, orphaned tokens) & diff in CI
slop-detect --lint-design-md ./DESIGN.md
slop-detect --diff-design-md main-DESIGN.md pr-DESIGN.md

# Via REST API
curl -s -X POST https://slop-detect.com/api/scan \
  -H 'Content-Type: application/json' \
  -d '{"url":"https://your-site.com","designMd":true}' | jq .system

See docs/DESIGN_SYSTEMS.md for the complete authoring and waiver guide.

Axis 4: The craft floor (11 rendering & accessibility hygiene checks)

Pass --craft to run 11 orthogonal engineering and accessibility hygiene checks alongside your scan:

slop-detect https://your-site.com --craft

The craft floor checks WCAG contrast minimums (craft.contrastMinimum), interactive tap target sizes (craft.tapTargetSize), prefers-reduced-motion media query coverage (craft.reducedMotionRespect), tabular numerals on numeric tables/tickers (craft.tabularNumerals), intrinsic width/height on images (craft.imageDimensions), focus-ring preservation (craft.focusRingVisible), heading hierarchy (craft.headingHierarchy), body line length (45–85ch), and dark-mode color-scheme declaration.

Orthogonality guarantee: Craft floor findings are reported in result.craft (0–100, higher is better) and never add points to your Design or Copy slop score or alter Clean / Mild / Heavy tiers.

Axis 5: The AEO axis — Answer Engine Optimization (16 checks)

Can AI answer engines (OAI-SearchBot, ChatGPT-User, Claude-SearchBot, PerplexityBot, Applebot) fetch, parse, and cite your page without a headless browser?

The AEO axis runs 16 HTTP, HTML, and discovery checks using the transparent SlopDetector-AEO/1.0 (+https://slop-detect.com/bot) user-agent (never spoofing Googlebot, GPTBot, or any vendor crawler):

# Audit AEO readiness via CLI or REST API
npx slop-detect https://your-site.com --aeo
curl -s -X POST https://slop-detect.com/api/aeo -H 'Content-Type: application/json' -d '{"url":"https://your-site.com"}' | jq

# Auto-generate starter RFC 9309 robots.txt and /llms.txt files
npx slop-detect --emit-aeo-fixes ./public --origin https://your-site.com

See docs/AEO_GUIDE.md for copy-paste robots.txt, /llms.txt, and Markdown twin recipes.

4. The "fix prompt" & creative brief generator

After scanning, slop-detect generates a structured Markdown prompt you can paste directly into Claude Code, Cursor, Windsurf, or v0 to remediate every triggered pattern:

# CLI: generate a remediation prompt or a token-direction creative brief
npx slop-detect https://your-site.com --copy --fix-prompt > fix.md
npx slop-detect https://your-site.com --brief > brief.md

# REST API
curl -s -X POST https://slop-detect.com/api/fix-prompt \
  -H 'Content-Type: application/json' \
  -d '{"url":"https://your-site.com"}' > fix.md

Each triggered pattern comes back with:

• Why this reads as AI-slop (the specific DOM/CSS tell, e.g. Tailwind indigo-600, background-clip: text, or repeated antithesis copy)
• Fix recipe (the senior designer's prescription)
• Better alternatives (3–5 concrete directions with real brand references)
• Hard rule (a testable constraint the coding agent self-checks against)

Plus cross-cutting guidance ("don't replace one slop pattern with another", "empty is better than fake") and a built-in acceptance criterion: rescan and target score < 10 (Clean tier).

5. AI coding agents (MCP, Skills & IDE Plugins)

slop-detect-mcp is a Model Context Protocol server that lets coding agents scan a page before shipping and pull the fix prompt back into the editing loop.

{
  "mcpServers": {
    "slop-detect": { "command": "npx", "args": ["-y", "slop-detect-mcp"] }
  }
}

7 MCP Tools: scan_page, check_aeo, check_design_system, fix_prompt, lint_design_md, diff_design_md, and extract_design_system.

See docs/AGENT_INTEGRATIONS.md, docs/GENERATOR_RECIPES.md, and docs/BUILDER_RECIPES.md.

6. CI/CD gates, GitHub Action & build plugins

ravidsrk/slop-detect scans a deploy-preview URL (mode: api) or a local static build (mode: local), posts a sticky PR comment with the grade and triggered patterns, uploads SARIF 2.1.0 findings to GitHub Code Scanning, and fails the check when slop creeps above your threshold:

- uses: ravidsrk/slop-detect@v0.9.0
  with:
    url: ${{ steps.preview.outputs.url }} # Vercel / Netlify / Cloudflare preview URL
    axes: 'design,copy'
    design-md: 'auto'
    aeo: 'true'
    fail-under: 'B' # Letter grade ('B') or max numeric slop score ('27')
    upload-sarif: 'true'

See docs/CI_AND_DEPLOY_GATES.md and docs/DEPLOY_GATES.md.

7. Programmatic SDK (slop-detect-core) & REST API

Embed the pure, zero-dependency engine inside your own Playwright, Puppeteer, Browserless, or Cloudflare Browser Rendering pipeline:

// npm install slop-detect-core   (the monorepo workspace name is @slop-detect/core)
import { PATTERNS, buildPageEvaluateScript, assembleScanResult } from 'slop-detect-core';

// 1) Execute the page-evaluate script inside your browser runner
//    (copy-axis text is always extracted; pass includeSystem for DESIGN.md):
const script = buildPageEvaluateScript(PATTERNS, { includeSystem: true });
const raw = await page.evaluate(script);

// 2) Score it — design summary, optional copy axis + craft floor + unified score:
const result = assembleScanResult(raw, {
  url: 'https://example.com',
  finalUrl: page.url(),
  axes: ['design', 'copy'],
  includeCraft: true,
  patterns: PATTERNS,
});
console.log(
  result.blocked ? result.error : `${result.score}/100 ${result.tier} (${result.grade})`
);

See docs/SDK_AND_API.md and apps/web/API.md for custom declarative rules (compileRule), JSON Schema v1 (schemas/scan-result.v1.json), and full REST API documentation.

8. Share badges, directory & domain monitoring

Every scan gets a shareable permalink with an auto-generated social card, a canonical domain score hub, and a live SVG badge you can drop into a README or site footer:

<!-- Live slop badge — re-scans periodically, colored by tier -->
[![slop](https://slop-detect.com/badge/your-site.com.svg)](https://slop-detect.com/score/your-site.com)

Continuity monitoring, directory & leaderboard

Detection is free and stateless. The optional continuity layer remembers a domain and alerts you when it regresses between redesigns or drifts off its DESIGN.md:

# Start monitoring (double opt-in: you confirm via an emailed link)
curl -s -X POST https://slop-detect.com/api/watch \
  -H 'Content-Type: application/json' \
  -d '{"domain":"your-site.com","email":"you@example.com","list":true,"system":true}'

• Honest rollout status: Sign-ups are open and every baseline is recorded, while regression alert emails and the daily sweep are in waitlist mode (alertsActive: false). Nothing is emailed before you confirm.
• Agency Dashboard & Directory: View all monitored domains at slop-detect.com/dashboard (magic-link sign-in with self-serve JSON export and erasure), browse verified sites in the public Directory, or inspect The State of AI Design Slop Leaderboard. See the privacy policy and pricing details.

9. Developer documentation hub

All developer guides live in docs/:

10. Architecture, repository layout, roadmap & contributing

slop-detect/
├── packages/
│   ├── core/                            ← pure 5-axis detection engine (npm: slop-detect-core)
│   ├── cli/                             ← Playwright runner, static auditor & reporters (npm: slop-detect)
│   ├── mcp/                             ← Model Context Protocol server (npm: slop-detect-mcp)
│   ├── action/                          ← Composite GitHub Action (api + local Chromium + SARIF)
│   ├── netlify-plugin-slop-detect/      ← Netlify onPostBuild deploy gate plugin
│   └── lighthouse-plugin-slop-copy/     ← Lighthouse copy + HTML AEO plugin
├── apps/
│   └── web/                             ← Cloudflare Pages app, REST API (/api/*) & remote MCP (/mcp)
├── docs/                                ← Developer guides, generator/builder recipes & ops runbooks
├── skills/slop-detect/                  ← Portable agentskills.io skill for 20+ coding agents
├── plugins/slop-detect/                 ← Claude Code & Cursor marketplace plugin manifests
├── styles/SlopDetect/                   ← Vale prose linter rules exported from COPY_PATTERNS
├── examples/
│   ├── astro-blog/                      ← Astro 5 reference integration
│   └── nextjs-app-router/               ← Next 15 reference integration
├── schemas/                             ← JSON Schema v1 (scan-result.v1.json)
└── spec/                                ← Versioned pattern, copy, system, AEO & conformance specs

Quickstart: contributing

git clone https://github.com/ravidsrk/slop-detect.git
cd slop-detect
bun install                              # Installs all workspaces
bun run build                            # Builds @slop-detect/core, cli, and mcp
bun run test                             # Runs Vitest suite across all packages

# Run the CLI or local Cloudflare Pages workbench
bun run --filter slop-detect demo        # Scans 3 example sites
bun run web:dev                          # Starts local web app + API at http://localhost:8788

# End-to-end verification (see docs/operations/REHEARSAL.md)
S4_SEED_URL=https://slop-detect.com/ bun run s4 -- --target http://localhost:8788

See CONTRIBUTING.md for how to propose a new pattern or improve a fix recipe.

Roadmap

See ROADMAP.md and CALIBRATION.md for the full strategic plan and empirical calibration protocol. The engine ships definitions@2026.11 (45 design, 26 copy, 16 AEO, 9 system checks, and an 11-check craft floor). Published leaderboard and calibration deltas remain anchored to the measured 2026.10 corpus; v1.0.0 is gated on the held-out human-control threshold (≥1,520 human controls, Heavy FPR ≤2% at 95% CI).

• 5-Axis Engine (definitions@2026.11): Design (45 rules) + Copy (26 rules) + System DESIGN.md & W3C DTCG 2025.10 (9 checks) + Craft Floor (11 checks) + AEO (16 checks)
• Local & Remote MCP (slop-detect-mcp + /mcp): 7 tools + MCP App scorecards (ui://slop-detect/scorecard.html) + portable agentskills.io skill
• CI & Build Gates: GitHub Action (api + local + SARIF 2.1.0), Netlify Build Plugin, Lighthouse Plugin, and Vale prose style exporter
• Shareable Permalinks, Domain Hubs & Badges: /r/<id>, /score/<domain>, /report/<domain>, /og/<id>.png, /badge/<domain>.svg, and /dashboard
• v1.0 Calibration Gate: Expand held-out human control stratum to ≥1,520 domains (Heavy FPR ≤2% at 95% CI) and promote 2026.11 review rules via K-04
• Community Rule Registry + interactive web rule authoring UI

Acknowledgments, support & license

• Acknowledgments: Adrian Krebs (original AI-design-slop study #1–14), Meng To (May 2026 Aura study), and Paul Bakaus / Impeccable (typography, hierarchy & contrast rules #20–27).
• Support & Security: GitHub issues only (docs/SUPPORT.md). Report security vulnerabilities privately per docs/SECURITY.md.
• License: MIT © Ravindra Kumar

"Empty is better than fake. Show the product, don't decorate around it."