LockerGnomeTech news and nostalgia for today's technology professionals
Subscribe

Search

AIai-codingweb-designclaude-codecursorcodexopen-sourcedesign-tools

Impeccable, a Free Design Add-On for AI Coding Agents, Flags 62 Tells of AI-Made Web Pages, From Purple Gradients to Cards Inside Cards, With No AI Model

Paul Bakaus's open-source Impeccable gives Claude Code, Cursor, Codex and other coding agents a design vocabulary, a reviewer and a slop detector whose 62 fixed rules catch the habits AI page builders repeat, with no LLM and no API key.

Chris at a laptop plucks a purple-to-blue gradient swatch out of a fan of color swatches with tweezers, drawn as a designer's swatchbook.
Illustration: LockerGnome

The project’s README opens with a list you’ve probably seen this week without noticing: “Inter for everything. Purple-to-blue gradients. Cards nested in cards, gray text on colored backgrounds, a rounded-square icon tile above every heading.” Ask an agent for a page with nothing else to go on, it says, and “these show up again and again, across models and projects.”

Paul Bakaus (@pbakaus) built Impeccable to name those habits and catch them. The README calls it “a slop detector” with “62 deterministic rules” that “flag the tells above, plus quality problems like cramped padding and skipped headings. No LLM, no API key.” The project’s detector docs say it scans “without starting an AI conversation,” and one rule, gradient-text, exists just to flag gradient-filled headline text.

The demo is the same assignment done twice. “Same model (Fable 5.1), same brief: a fourteen-room family guesthouse on the Ligurian coast.” Without Impeccable, the model builds what the README calls “the tasteful default: cream page, thin serif, italic accent, pill buttons.” With it, the page is built around “the house at night, seen from the water.”

There’s more in the box than the scanner. Impeccable ships 24 commands, including critique, which scores a design against usability heuristics, and audit, which ranks accessibility, performance and responsive problems from P0 to P3. Commands like bolder and quieter turn “make it pop” into one specific move aimed at one component. The README says the work is “strongest on interfaces that already exist.”

The detector runs three ways: inside your agent through a design hook, from the terminal as npx impeccable detect src/, or against a live URL, which is where contrast and tiny-text rules kick in. The hook works on Claude Code, Cursor, Codex, GitHub Copilot, Grok Build and Hermes Agent. On GitHub, the repo has passed 96,000 stars, and its latest release, cli-v4.8.0, landed October 26.

Two lines near the bottom of the README are worth reading before you say yes to everything. “In Claude Code, installed command hooks run even when you deny the model’s own commands.” And on telemetry: when a new design starts, the skill fetches visual directions from the impeccable.style catalog, and “Turning telemetry off doesn’t stop that request.” What the catalog learns from the picks people make, and whose taste that turns into, is still an open question.

A fixed list like this one will need replacing. Once enough agents read the same list, they’ll stop reaching for purple-to-blue gradients and nested cards, and a new default will form around whatever the rules don’t name yet. A tool like this has to keep finding the next tell, and Bakaus’s README already asks people to follow him “for release notes and new rules.” The open question is whether the next default comes from the models, or from the catalog of directions these tools hand out.

More AI

Every AI story →