# Impeccable: A Design Vocabulary for Coding Agents

Canonical: https://www.kartikaydhar.com/blog/impeccable-design-skill-coding-agents
Published: 2026-10-30T13:54:09.474+00:00
Updated: 2026-10-30T13:34:45.604041+00:00
Category: Tool Breakdowns

Impeccable is a free, open-source design skill for coding agents. Here is what its 24 commands and 62-rule detector do, and what they don't catch.

Impeccable is a free, open-source design skill for coding agents, made by Paul Bakaus. It gives your AI assistant named design moves like polish, bolder and quieter, review commands like critique and audit, and a rule-based detector that flags the generic "AI-made" look in UI code before it ships.

The repo, pbakaus/impeccable, had 95,515 GitHub stars and 5,631 forks when I checked on 30 Oct 2026 (08:06 IST). GitHub lists Rust as its main language, because the detector engine is a Rust binary; the CLI ships on npm. The license is Apache 2.0.

## What I tested

- Version and date: Impeccable Skill 4.8.0 and CLI 4.8.0 (engine 0.1.18), run on 30 Oct 2026
- Setup: MacBook Pro (Apple silicon), Claude Code on a paid plan, project install via npx impeccable install with the design hook turned on
- Task I ran: Ran /impeccable critique and then /impeccable polish on the hero and pricing sections of a vibe-coded SaaS landing page built with Next.js
- Time to first result: About 6 minutes from install to the first critique report, including /impeccable init writing PRODUCT.md
- What worked: The critique ranked fixes by priority, the polish pass replaced the purple-to-blue gradient and nested cards with a single clear hierarchy, and the design hook flagged an overused-font finding on the next edit
- What broke or surprised me: The source-file scan missed a low-contrast caption until I pointed npx impeccable detect at the local dev server URL, and one polish pass changed copy I had not asked it to touch
- Would I use it at work? Yes, for landing pages and demo UIs: I would run the CLI detector in CI and keep critique for one section at a time, but not as a substitute for a human design review

## What problem does Impeccable go after?

Ask a coding agent for a page with no other guidance and you tend to get the same page. The README names the pattern directly: Inter for everything, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, and a rounded-square icon tile above every heading. It says these show up "across models and projects".

Impeccable attacks that in three ways. It gives you words for what you want, so "make it pop" becomes /impeccable bolder the pricing cards, which loads a playbook for that one move. It gives the agent a reviewer: critique scores the design against usability heuristics, and audit checks accessibility, performance, theming and responsive behavior, ranking findings from P0 (blocking) to P3 (polish). And it ships a slop detector with 62 deterministic rules. No LLM, no API key.

The README's before-and-after uses one model (it names Fable 5.1) and one brief, a fourteen-room guesthouse on the Ligurian coast. Without Impeccable the agent builds a cream page with a thin serif and pill buttons. With it, the page is built around one picture of the house at night. That comparison comes from the maintainer, so treat it as a demo, not a benchmark.

## How do you install it?

From your project root:

npx impeccable install

Then reload your coding tool and run /impeccable init (on Codex, $impeccable init). The installer detects which coding tools you have, asks whether to install for this project or globally, and offers to set up the design hook where your tool supports one. The README tells you to accept the hook.

The README lists support for Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness and Veto. It's packaged as an agent skill, the same SKILL.md format I covered in the post on Agent Skills moving to the Agentic AI Foundation, so it lands in the skills folder your agent already reads.

A few setup details that are easy to miss:

- Node is only needed for npx. The skill runs a self-contained engine binary that ships with it or downloads once into ~/.impeccable/bin/.
- Codex, Grok Build and Hermes Agent need one extra step before the hook runs (approve it in /hooks, run /hooks-trust, or enable a plugin).
- Teams can pin a version as a git submodule. Linking that way installs skills, not hooks.
- There is a manual copy path with no Node at all, but it skips the hook and subagents.

## What do the 24 commands do?

init runs once per project. It reads your code, asks only what it can't infer (who the product is for, what it needs to do, the constraints) and writes a PRODUCT.md that every later command reads. document captures your existing visual system in DESIGN.md so changes stay on-brand. After that you name a command and a target:

/impeccable critique the onboarding flow
/impeccable quieter the landing page
/impeccable polish settings
/impeccable harden checkout

GroupCommandsSteerbolder, quieter, distill, colorize, typeset, layout, animate, delight, overdriveReviewcritique (scored UX review), audit (technical quality report)Finishpolish, harden, clarify, adapt, optimize, onboardIterate livelive, generatePlan and set upshape, init, document, extract

That's 23. The 24th, craft, is a deprecated alias for a plain build request. The README is upfront that Impeccable works best on interfaces that already exist, and that narrow targets beat whole pages: one section reviewed closely does better than a full page at a glance. It does build new pages too, but the docs call that the harder mode.

live opens your running dev server with an overlay. You pick an element, pick a direction, and it hot-swaps variants in place; accept one and it's written back to your source. The README lists Vite, Next, SvelteKit, Astro, Nuxt and plain HTML.

## Where does the detector run?

Image: Diagram with three panels: in your agent, a design hook scans each edited UI file; in CI or terminal, npx impeccable detect with json and github flags and exit codes; in your browser, a Chrome extension overlays findings on a live page

The detector is the part that doesn't depend on the model behaving. You can run it three ways:

- In your agent. The design hook scans every UI file the agent edits and hands findings back before the agent calls the work done. The README says this is where most slop gets caught. The hook is available on Claude Code, Cursor, Codex, GitHub Copilot, Grok Build and Hermes Agent.
- In CI or your terminal. npx impeccable detect src/ scans a folder, --json gives machine-readable output, and --github (new in CLI 4.8.0) turns each finding into a pull request annotation. Exit code 2 means findings, 1 means a target couldn't be scanned.
- In your browser. A Chrome extension overlays the same findings on any live page.

Source files like JSX and TSX get the pattern rules only. Checks that need a rendered page, such as low contrast and tiny text, only run when you point the CLI at a URL, so the README suggests scanning your dev server too:

npx impeccable detect http://localhost:5173

If a rule fights your brand (say your brand font is Inter), you can allow it project-wide with npx impeccable ignores add-value or switch a rule off for one file with a comment.

## What does it cost, and what doesn't it do?

The skill and CLI are free and open source under Apache 2.0. What you pay for is the coding agent that runs the commands, on whatever plan you already have. I didn't find a paid tier on the repo or the site.

Before you install, four things from the README:

- Hooks run outside model approval. In Claude Code, installed command hooks run even when you deny the model's own commands, so the first edit can download the engine. The README says to review installed hooks before unattended runs.
- Live mode is local only. Don't inject it into a deployed site or weaken a production CSP for it. Applying copy edits runs an optional script from your package.json with your permissions, so check that script in any repo you don't know.
- It fetches from the catalog even with telemetry off. When a new design starts, the skill fetches visual directions from the impeccable.style catalog. Turning telemetry off (npx impeccable telemetry off or DO_NOT_TRACK=1) stops the anonymous record of which direction you picked, not the fetch itself. The README says your project name, files, code and PRODUCT.md are never sent.
- Image-first builds need image generation. For new landing pages it can generate a full comp first and build to match, but that choice only appears when your agent can generate images.

And a clean scan is a narrow result. The docs say it means these checks found no reportable problem; critique is there for the wider design. It doesn't test whether your buttons work or your copy is accurate. That's where a loop that makes the agent prove its work, the kind of thing covered in Learn Harness Engineering, still matters.

## What this means for product and GTM teams

The part I find most useful for product and GTM work is the detector, more than the design commands. Marketing pages, landing pages for campaigns and internal demos are exactly the surfaces where someone asks an agent for "a page" with no design brief, and Impeccable's own README lists what comes back: Inter everywhere, purple-to-blue gradients, cards inside cards. A rule-based check that runs in CI and exits with code 2 on findings gives a team something to enforce, instead of a reviewer's taste.

What it costs is mostly time and agent usage. The repo is free under Apache 2.0, but every critique, polish or bolder pass runs on your coding agent, on your plan. The catch is that a clean scan only means these 62 rules found nothing. It says nothing about whether the page converts, whether the copy is true or whether the CTA goes anywhere. Those checks still belong to a person.

## Frequently asked questions

### Is Impeccable free?

Yes. It's open source under Apache 2.0, installed with npx impeccable install. You still pay for the coding agent that runs the design commands.

### Which coding agents does Impeccable support?

The README lists 19, including Claude Code, Cursor, Codex CLI, GitHub Copilot, Gemini CLI, Grok Build, OpenCode and Kiro. The automatic design hook is available on six of them: Claude Code, Cursor, Codex, GitHub Copilot, Grok Build and Hermes Agent.

### Does the detector use an LLM?

No. The README describes 62 deterministic rules with no LLM and no API key. The critique command runs through your agent, so the model does that review.

### Can I run Impeccable in CI without an agent?

Yes. npx impeccable detect runs without an agent, --json gives machine-readable output and --github adds pull request annotations. Exit code 2 means it found issues.

### Does Impeccable send my code anywhere?

The README and privacy page say project checks run locally and your project name, files, code and PRODUCT.md are not sent. New designs do fetch visual directions from the impeccable.style catalog, and anonymous choice data is sent unless you turn telemetry off.

## Sources

- pbakaus/impeccable on GitHub (README, stars and license checked 30 Oct 2026)
- Impeccable releases: Skill 4.8.0, CLI 4.8.0 and engine 0.1.18
- Impeccable docs
- Impeccable docs: Run a detector scan
- Impeccable docs: Automatic design checks
- Impeccable privacy policy (updated 21 Oct 2026)
- Anthropic's frontend-design skill, which Impeccable started from
- Nutlope/hallmark on GitHub
- Giorgi Dogadze on X, 29 Oct 2026