Generative coding agents are powerful, but left to their own devices, they default to visual clutter: predictable gradients, uncalibrated spacing, and bloated, outdated component structures. Impeccable is a design skill package, created by Paul Bakaus, that runs directly inside Claude Code, Gemini CLI, and Codex CLI (as well as Cursor and GitHub Copilot) to enforce strict aesthetic guardrails, with the same rule set recompiled for each harness.
By applying deliberate skill design, you can steer agents away from generic patterns and push them toward precise, high-craft web experiences.
What Is Skill Design, and Why Does It Matter for AI Agents?
Skill design is the practice of building deterministic rails for non-deterministic AI models. Instead of endlessly asking an agent to "make it look better" or "improve performance," you inject a compiled DESIGN.md and functional directive that the agent must follow on every iteration.
Impeccable builds on Anthropic's frontend-design skill and adds 23 commands that give you a shared design vocabulary with the model, plus 58 deterministic anti-pattern detection rules (default Inter font, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, rounded icon tiles above every heading, and more). It turns the AI from a junior developer guessing at your aesthetic into a strict implementer of the visual rules you actually define.
Implementing Impeccable's Constraints for Modern Web Apps
Precision is everything when you wire this workflow in. Impeccable respects your existing design system rather than overwriting it: when it runs, it scans your codebase (tokens, components, Tailwind config) and loads your brand rules from your own DESIGN.md, instead of imposing a generic aesthetic. So if your identity is built on a minimalist look, the right way to enforce it is to declare it yourself in that file — a limited green-and-pink palette, a dark base background at #0c1624, typography and tone of voice — so every subsequent command reads it before generating anything. Impeccable doesn't decide that aesthetic for you; it gives you the vocabulary and the mechanism to keep yours consistent across every iteration.
The Commands That Do the Heavy Lifting
Impeccable exposes 23 commands that act as a shared vocabulary with the agent — each one names a specific kind of design intervention. Three of the most useful for a production workflow:
-
/audit— a production-quality pass. Runs the deterministic anti-pattern detector (58 curated rules: generic gradients, default Inter font, nested cards, predictable shadows, etc.) against your current code and reports findings without changing anything yet. It's the diagnostic step before you touch code. -
/normalize— fixes inconsistencies within the system itself: spacing, border radii, type sizes, or color usage that drifted from the tokens defined in yourDESIGN.md. Useful when multiple agent sessions have introduced small divergences over time. -
/polish— the final quality pass. Applies fixes within your existing system (it doesn't invent a new one), removes detected "AI tells," and reruns the detector before handing the result back, until it reaches zero findings.
A typical flow in Claude Code or Cursor looks like this: /impeccable audit to diagnose, /impeccable normalize to align what already exists with your tokens, and /impeccable polish as a final pass before committing — each one reading the same DESIGN.md/PRODUCT.md so it never drifts from your brand.
These three are just the starting point: there are 20 more commands (/typeset, /distill, /colorize, /layout, /bolder, /quieter, /overdrive, among others) covering typography, color, layout, and motion. You can find the full command list, installation docs, and source code in the official repository README.
Implementation Example: Your Own Brand Rules
Impeccable doesn't impose frontend architecture — it doesn't decide whether you use zoneless Angular, Signals, or which animation engine to reach for; that stays in your hands. What it does do is consistently read the visual rules you define. A DESIGN.md with strict brand constraints might look like this, as an illustrative example:
# Illustrative example only — not Impeccable's actual schema,
# which uses DESIGN.md/PRODUCT.md in Markdown (Google Stitch spec)
brand:
background_base: "#0c1624"
allowed_accents: ["green", "pink"]
voice: "Calm, precise, no hype"
anti_references: "Avoid pure white. Don't generate generic gradients. Reject aggressive or weapon-related iconography, and avoid generating or showing hands in visual assets."
Any motion engine or architecture decision (GSAP, Lenis, Angular with Signals, etc.) is still your own technical stack choice — Impeccable simply keeps the agent from reintroducing generic visual patterns while you implement it.
Top comments (0)