A "De-AI" Design Skill for Frontend Built by AI: Impeccable
One skill, 23 commands, an anti-pattern cheat sheet, and a slop detector that runs in CI. The main site explains the how; /slop catalogs every UI cliché that screams "generated."
Build frontends with Cursor, Claude Code, Codex, or similar and the results blur together: purple gradients, Inter, icon-tile headings, the same three-column card grid every time. Impeccable doesn't try to make the model "more creative." It clears out those default reflexes and hands you a vocabulary of design commands you can call directly.
First, unlearn the generator's default muscle memory
Purple-and-teal gradients, dark glow, the full Inter / Geist house style.
Feature cards are always "small rounded icon + title + three lines."
Copy is all streamline / empower / supercharge.
Slop reflexes are cleaned first, then you target type, color, layout, and motion by name.
Respects your project's tokens and components instead of imposing a new default system.
npx impeccable detect catches regressions in PRs.
The main site calls it Desloppification: stripping the "generated" defaults out of typography, color, layout, responsive behavior, interaction states, motion, and copy. Its own boundaries are stated plainly too: a skill won't make the model a better designer, but it can kill the reflexes that make the output look generated.
Same family of "AI-looking UI" problems, different route—an ~80,000-word rulebook you can curl into Claude / Cursor / Codex as config. No 23 commands, no CI detect. Stick with Impeccable for command flows and PR checks; read the other piece if you just want an overall rulebook, or want to layer one on top.
23 commands: a shared design vocabulary between you and the AI
Each command maps to a design task, so you don't re-explain yourself from scratch. Roughly five groups:
Think before doing: surface the need, write a brief, then design and ship it whole.
Design reviews with scoring and automated checks; five technical dimensions with P0–P3 severities.
Type, layout, color. Also /animate, /delight, /bolder, /quieter, /overdrive.
Cut hard, rewrite copy, adapt across breakpoints.
Final pass on craft, performance, production edge cases, i18n.
Deterministic checks that don't need a model—scan files, dirs, stdin, or a rendered URL.
Eight product features, ordered as they'd land in your repo
The main site lists eight areas; here they are in the order they'd actually come in:
- Learns your design system: scans tokens, components, and conventions—new work follows your system, not a fresh default.
- Product context, written once: drop it in
PRODUCT.md; subsequent commands read it before designing (who the users are, tone, anti-references). - Exports DESIGN.md: optionally in Google Stitch format, readable by other DESIGN.md tools.
- Built per-agent: the same skill recompiles for different harnesses/models, with bans for known bad habits (one model loves hover-zoom on images).
- Landing page vs product UI, two rule sets: marketing pages and dashboards are not the same aesthetic.
- Block slop before ship: 46 deterministic rules with exit codes for CI.
- Live Mode (Beta): click elements on a running dev server, leave notes, generate hot-swappable variants.
- Writes back to source: variants land in real files as normal diffs—commit or revert.
/slop page: what "AI-look" actually is
impeccable.style/slop lays out the common anti-patterns, sorted into AI slop / Quality, each flagged for CLI or browser detection. A few you'll run into almost daily:
Purple-teal gradients with a dark glow—the ID card of generated UI.
Color gradients on headings and metrics, basically a generator signature.
Equal-size cards + icon + title + body, repeated to infinity. The default homepage.
Small rounded icon always sitting above the heading. The universal feature-card template.
Inter, Geist, Space Grotesk, and now Instrument Serif—once they're everywhere, it stops looking like a choice.
Warm off-white as the "tasteful" default, rather than something grown from a palette.
String after string of em dashes in body copy is a tell-tale model tic.
Fails WCAG AA, hard to read, and has nothing to do with looking premium.
Run /impeccable critique inside the harness and the browser evaluation layers in deterministic findings. For CI or a local terminal, use npx impeccable detect. Or grab the Chrome extension to scan any page at a glance.
One command installs the build matched to your harness
Needs Node 22.12+. GitHub Copilot already ships it in the app—just turn on Experimental in settings and skip the install.
# Install the build matched to your current harness & model npx impeccable install # First time /impeccable init # Update npx impeccable update # Deterministic detection (CI-ready) npx impeccable detect src/
- Run
npx impeccable installin Cursor / Claude Code / Codex - Run
/impeccable initto set up project conventions and PRODUCT context - New page: start with
/impeccable shapeor/craft; existing page:/critique, then polish / typeset - Wire
npx impeccable detectinto the PR to stop purple gradients and cookie-cutter cards before merge - Full docs: docs · Getting started: getting started
Primary sources
Main site: Impeccable: Design skills for AI harnesses
Anti-pattern field guide: AI Slop / Quality patterns
An anti-cliché kit for AI-built frontends: 23 commands + 46 CI-ready detection rules
Impeccable gives AI-built frontends a design skill that clears default reflexes, 23 commands, and 46 hard rules that can sit in CI. All of it, one illustrated page.
↓ One page, one moving diagram
Use Cursor, Claude Code, Codex, and the frontend starts to look the same everywhere: purple-teal gradients, Inter everywhere, icon-on-title cards. Impeccable strips those defaults first, then lets you command type, color, and layout precisely.
Purple-teal gradients, dark glow, all Inter / Geist.
Feature cards are always icon + title + three lines, repeating forever.
Copy loves streamline / empower.
Default reflexes cleared first; follows your design conventions.
Commands target type, color, layout by name—no re-explaining.
detect plugs into CI (auto-checks before merge) and blocks the bad stuff.
The 23 commands split across five kinds of design work: create to set direction, critique to score, refine for type/layout/motion, simplify to cut fluff, and harden to polish edge cases. No re-explaining what you want every time.
Eight capabilities on the main site: learn the design conventions already in your project instead of imposing a new default; write product tone and user personas into one doc that commands read before designing; changes land in real files as readable diffs you can revert. Live Mode (Beta) lets you click elements on a dev page, leave notes, and get replaceable variants on the spot.
impeccable.style/slop the common clichés: purple-teal gradients, gradient text on headings, icon-on-title feature cards, overused Inter / Geist / Instrument Serif, warm-beige backgrounds, and strings of em dashes. There's also a pure-quality category—like contrast so low it fails the WCAG AA accessibility bar.
✔ 46 rules don't rely on a model, can sit in CI and block before merge
✘ Live Mode (click-to-generate variants) is still Beta, not stable
Members can copy or download the full Markdown, and let their AI subscribe and ask.
Found this useful? Leave your email — every new explainer, the moment it's out. Unsubscribe anytime.