Design Anti Slop Auditor

Give your AI agent a research-first design workflow and a 13-rule audit script that fails the build on known AI design signatures.

The Problem

Ask an AI agent for a landing page and you get the same page every time: a blue-to-violet gradient, Inter, tiny uppercase labels, pill buttons, glass cards. Visitors spot it in about two seconds, and it tells them nobody made a decision.

The cause is structural. Agents have no rendering pipeline. They write source text, read it back, and declare victory without ever seeing the page. Without a reason to leave the defaults, they reproduce the training average. In the Design2Code study (NAACL 2025), human annotators judged 49% of AI-generated webpages interchangeable with the reference page, and 64% considered them better designed. Agents are good at matching the typical page and have no instinct to depart from it.

Accessibility fails the same way. In an AudioEye study reported by VentureBeat on 2026-09-30, five AI tools built 15 sites to WCAG AA. All 15 failed WCAG Level A, averaging 55 accessibility issues per page. Meanwhile 81% of developers believe AI code already meets accessibility standards.

You find out when a user does. This skill moves that discovery to before the commit.

What You Get

• A category-research protocol that runs before any code: the agent names the subject world of the page and extracts real fonts, colors, and shapes from it.
• A design-contract step that fixes typefaces, palette tokens, and corner radius before the first line of markup.
• A deterministic 13-rule audit script (5 blocking FAILs, 8 reviewer WARNs) that runs offline, in stdlib Python, with no API cost.
• A render-verify loop with an edge-case state checklist: empty, loading, error, overflow, narrow, and reduced-motion.
• A signature database of 12 named AI design patterns, each with a detection rule, a concrete fix, and the reason it reads as AI.
• A worked before/after case: a slop page, its audit FAILs, the fixed page, and the PASS.

Why This Beats Prompting It Yourself

"Make it not look like AI" is not an instruction an agent can check. This skill replaces it with ordered steps and a gate that returns an exit code.

• Order of work. Research the category, commit to tokens, then build. A prompt that says "be original" does not change the order, so the agent still starts from the average.
• Enforcement, not advice. The audit exits 1 on a missing viewport meta, a missing lang, a banned default font, the signature gradient, or three uppercase tracked labels. An agent cannot talk its way past an exit code.
• Reproducible. The same file gives the same report on every run, on every machine, with no model call in the loop. You can wire it into CI or a pre-commit hook.
• Honest about gaps. The skill tells the agent to report "audited, not render-verified" when it could not open a browser, instead of describing a page it never saw.

Example Session

You: Build a landing page for a tide-table site and run the design audit before you say it's done.

Agent: I researched the category first (Admiralty tables, harbor notice boards, paper chart margins) and wrote the palette into :root. My first draft failed the audit, so I fixed it and re-ran. PASS lines are trimmed from the first run.

$ python3 scripts/slop_audit.py index.html FAIL 1 viewport-meta — no <meta name="viewport"> found; mobile layout will break FAIL 2 html-lang — <html> has no lang attribute FAIL 4 signature-gradient — signature gradient: css linear-gradient blue-to-violet FAIL 5 uppercase-tracked-labels — 3 uppercase tracked micro-labels (3+ is the AI signature) WARN 13 focus-styles — <button>/<a> present but no :focus/:focus-visible styles RESULT: FAIL (4 fail, 1 warn)

fixes: added viewport + lang, replaced the gradient with the chart-paper palette,

deleted two labels and set the third in sentence case, added a :focus-visible outline

$ python3 scripts/slop_audit.py index.html RESULT: PASS (0 fail, 0 warn)

Use Cases

• Landing pages and marketing sites an agent builds from a one-line brief, where no brand guide exists yet.
• A pre-merge check on agent-written HTML/CSS in CI, blocking on a non-zero exit.
• Reviewing a template or page you did not write, to find the default-stack habits quickly.
• Teaching a team's agents a shared design bar by pasting the audit step into the project's build instructions.
• Baseline accessibility hygiene on generated pages: viewport, language, alt text, focus styles, reduced motion, and input sizing.

Known Limitations

The audit detects patterns in one HTML file's inline CSS and markup. It cannot judge taste, hierarchy, or copy, does not compute color contrast, and does not follow linked stylesheets. A PASS means no known AI signature was found, not that the page is good. Render-verify still needs a real browser.