AI coding agents are very good at making npm run build go green. They are much worse at noticing that the page they just built is broken in a real browser, or that it looks like every other AI-generated page on the internet.
I build and maintain three small open-source tools for this problem, so a disclosure first: everything below is about my own projects, and I wrote this with AI assistance. All three are MIT licensed and free.
tsc and npm run build answer one question: does this code compile and bundle? They say nothing about what happens when a browser runs it. In my experience, agent-written frontends fail in two ways that a compiler cannot see.
1. Runtime browser regressions.
500 while the UI renders an empty state, so nothing looks "broken" in the code.
2. Generic "AI slop" defaults.
Purple to indigo gradients, three centered feature cards, cards nested inside cards, arbitrary spacing values that break the scale, hardcoded colors instead of tokens, and marketing copy like "Unleash the power". None of it is a bug. All of it makes the product look interchangeable.
The agent says "done" because the only check it ran was the build. So I wanted to give it two more checks that it can run itself, plus a third one for security.
ghost-qa launches headless Playwright Chromium against your running dev server, crawls the internal routes, and records what actually happened. It checks every page at three viewports (Desktop 1440x900, Tablet 768x1024, Mobile 375x812) in both light and dark color schemes.
npm run dev
npx playwright install chromium # one-time
npx -y ghost-qa@latest test http://localhost:3000
The engine is organized as eight traps, each one watching a different failure class:
Each trap starts at 100 and loses points per finding, and the overall result is a QA Health Score with a letter grade. The part that matters for agents is the output: a structured report with exact selectors and bounding boxes, plus a patch prompt the agent can act on. ghost-qa compare before.json after.json then diffs two runs, so the agent can prove a fix worked without introducing regressions.
It also runs as an MCP server, so Claude Code, Cursor or Cline can call it as a tool instead of shelling out.
Some limits, because I would rather you know them: it is meant for localhost dev servers, its interaction runner only clicks ordinary controls and refuses destructive-looking ones (that is a word list, not magic), it is not a full WCAG audit, and it does not replace your own test suite.
The second failure mode is harder to test, because "looks generic" is a taste problem. unslop takes the position that a lot of that taste can be written down as rules and checked deterministically.
npx -y unslop-mcp audit .
npx -y unslop-mcp refactor-plan . --report UNSLOP-REPORT.md
It audits 72 rules across seven pillars: color and contrast, typography, layout and spatial rhythm, surface and elevation, copy, interaction and motion, and theme and token architecture. Every finding has a file:line:column location, and the result is a 0 to 100 craft score with a per-pillar scorecard. You can gate CI or an agent loop with --fail-under 95.
The refactor plan turns findings into concrete replacements, for example from-purple-500 via-pink-500 to-indigo-500 into a surface token, p-[13px] into a spacing token, and transition-all into transition-colors motion-reduce:transition-none.
It also installs one of ten built-in design archetypes (or extracts design DNA from CSS or a URL) and exports the tokens as a Tailwind v4 @theme block, a Tailwind v3 config fragment, plain CSS custom properties, or W3C design tokens JSON, so the agent builds on a token contract instead of inventing colors per component.
The honest limit: this is static analysis. It checks the source, not the rendered page, and the rules encode my own opinions about craft. A good score is not a good design, which is why the two tools are meant to be used together.
The third tool covers the part neither of the above looks at. vibe-shield is a static security scanner for AI-written code: server secrets behind NEXT_PUBLIC_ variables, mutation routes without a session check, IDOR shapes, tables without row level security, and poisoned MCP or skill configuration.
npx -y @vibefoundry/vibe-shield@latest scan .
It is heuristic, so a clean score is not a security guarantee, but it catches the exact shapes agents tend to produce.
The loop I use with an agent is simple: after it writes a feature, it runs the static checks (unslop audit, vibe-shield scan), starts the dev server, runs ghost-qa test, fixes what comes back, and only then reports completion. Each tool exits non-zero on blocking findings, so "done" becomes an exit code instead of an opinion. init for each tool installs the instructions and MCP config for Claude Code, Cursor, Codex, Windsurf, Copilot, Cline and Zed.
Autonomous headless browser QA & self-healing verification loop for coding agents. v2.1.1 — the 8-Trap Deep Browser Inspection Engine: 3 viewports × light/dark, QA Health Score (A+…F), interactive HTML dashboard, and regression diffing.
⭐ If this tool helps your AI coding workflow, please give this repository a Star! It helps more developers discover the project.
One command each — star all three and keep the whole suite free & maintained:
npx -y unslop-mcp@latest init) npx -y @vibefoundry/vibe-shield@latest scan .) npx -y ghost-qa@latest test http://localhost:3000)
npx -y ghost-qa@latest test http://localhost:3000
Coding agents (Claude Code, Codex, Cursor, Windsurf) write code blind — then declare victory while the actual browser has React hydration errors, broken buttons…
VibeFoundry Agent Suite: 🎨 unslop — UI Design DNA & Anti-Slop Engine (npx -y unslop-mcp@latest init) · 🛡️ vibe-shield — Security Scanner for AI Code (npx -y @vibefoundry/vibe-shield@latest scan .) · 👻 ghost-qa — Autonomous Headless Browser QA (npx -y ghost-qa@latest test http://localhost:3000)
npx -y unslop-mcp@latest init
Your agent can write the code. unslop gives it a measurable design engineering protocol.
unslop is a zero-runtime-dependency UI/UX Design Engineering CLI, native MCP Server, and AI Agent Skill. It audits 72 rules across seven design craft pillars, installs ten studio-grade archetypes, extracts Design DNA, exports four token formats, and turns every finding into an exact, prioritized transformation blueprint for JSX/TSX, HTML, Vue, Svelte, CSS, and Tailwind codebases.
Works natively with Claude…
The security gate for AI-written code. Find exposed secrets, unguarded routes and missing RLS before you ship.
npx -y @vibefoundry/vibe-shield@latest scan .
Illustrative two-file scan; fixes are applied manually. Results vary by project. A clean score is not a security guarantee.
vibe-shield is a static security scanner plus an Agent Skill that helps Claude Code, Codex, Cursor and Windsurf audit before they say “done”.
The v2 catalogue covers client exposure; auth and route protection; database/RLS; AI and…
If you try any of them on a real project, I would especially like to hear about false positives. Those are the most useful bug reports I can get.