Impeccable is a design skill for AI coding agents. It started from Anthropic's frontend-design skill and extends it with three things:
-
A single setup step.
/impeccable initinspects your project and writes aPRODUCT.mdfile with your audience, purpose, constraints, and voice. Later commands use it as context. - 24 commands that give you and the agent a shared design vocabulary.
- 61 deterministic detector rules that flag common AI design mistakes. They run without an LLM or an API key.
It works with Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, and a long list of other tools.
Install in two commands
From your project root:
npx impeccable install
The installer detects which AI tools you use and asks whether to install for the project or globally. Reload your tool, then run:
/impeccable init
If you use Claude Code, you can also install it as a plugin with /plugin marketplace add pbakaus/impeccable.
The commands worth knowing
You do not need all 24. These cover most daily use:
| Command | What it does |
|---|---|
/impeccable craft |
Plan, then build a new surface with visual iteration |
/impeccable critique |
UX review of hierarchy, clarity, and tone |
/impeccable audit |
Technical checks for accessibility, performance, and responsiveness |
/impeccable polish |
Final pass before shipping |
/impeccable distill |
Strip a design down to what matters |
/impeccable harden |
Error states, text overflow, i18n, edge cases |
Each command takes a target, so you stay in control of scope:
/impeccable audit the header
/impeccable polish the checkout form
/impeccable harden checkout
You can also describe what you want in plain language, for example /impeccable redo this hero section. If you use one command a lot, /impeccable pin audit turns it into a standalone /audit.
The part that works without AI: the detector
This is the feature I would try first. The CLI can scan your code, or a live URL, for design problems with no model involved:
npx impeccable detect src/
npx impeccable detect https://example.com
npx impeccable detect --json .
It catches things like purple gradients, bounce easing, tiny touch targets, skipped headings, and cramped padding. The --json flag and exit codes make it easy to add to CI. Because the rules are deterministic, the results are repeatable, which is hard to get from asking an AI to review the design.
The README is honest about the limits too: a clean run is evidence, not proof, and it does not replace looking at the page on real viewports.
The design hook
On Claude Code, Cursor, Codex, GitHub Copilot, and Grok Build, the installer can add a hook that runs the detector whenever the agent edits a UI file. The agent sees the findings and can fix them in the same session. On Cursor it can block a bad write before it lands. This catches problems while the code is being written, instead of in review.
Things to check before adopting
-
Hooks run on their own. In Claude Code, installed hooks run independently of tool approval, and the first run may download a binary into
~/.impeccable/bin/. Review the hook before using it in unattended runs. - Live mode is for local development only. Do not inject it into a deployed production site.
-
Ignore the right files. The repo provides a
.gitignoreblock for the.impeccable/folder, so screenshots and caches do not get committed. Keep the shared config and design files tracked. - Opinionated by design. It discourages fonts like Inter and Arial and warns against nested cards. If your brand uses Inter, you can add an ignore rule with a reason:
npx impeccable ignores add-value overused-font Inter --reason "Brand font"
Is it worth trying?
Yes, for most developers who build UI with AI tools. The setup takes a couple of minutes, nothing locks you in, and you can try the detector alone without letting an AI touch your code.
It is most useful if you:
- ship side projects or MVPs and do not have a designer
- are tired of every AI-generated page looking the same
- want automated design checks in CI
Top comments (0)