How to use Impeccable in Codex and Claude Code.

Impeccable gives your coding agent a design vocabulary: commands like bolder, quieter, critique, and polish, plus a detector that flags AI-made patterns without calling a model. It works best on interfaces you already have. This tutorial covers installing it in Codex and Claude Code, setting it up for your project, the commands worth learning first, and the settings to check before you turn everything on.

Updated November 6, 2026 · 8 min read

What Impeccable is

Impeccable is an open-source design skill (Apache 2.0) by Paul Bakaus. It started from Anthropic’s frontend-design skill and grew into two things: 24 named commands, from design moves such as bolder and quieter to reviews such as critique and audit, and a deterministic detector with 62 rules for AI tells and quality problems. Version 4.8 works with Codex, Claude Code, Cursor, GitHub Copilot, Gemini CLI, and many other agents.

Install it

From your project’s root folder:

npx impeccable install

The installer finds your coding tools, asks whether to install for this project or for all projects, and offers a design hook that checks every UI file the agent edits. Reload your tool afterwards.

Codex: open /hooks and approve the project hook, or it won’t run. Do it again after an update that changes the hook. In Codex you call the skill with $impeccable (or from /skills) instead of a slash command.
Claude Code: the installer works here too. Or add the plugin with /plugin marketplace add pbakaus/impeccable, then install Impeccable from /plugin.

Node is only needed to run npx. The skill runs a small engine that downloads once into ~/.impeccable/bin/. Run npx impeccable update to update.

Set it up for your project

Run init once per project:

$impeccable init      # Codex
/impeccable init      # Claude Code and most other agents

It reads your code, asks only what it can’t work out (who the product is for, what it must do, and the constraints), and writes PRODUCT.md. Every later command reads that file. If your app already has a visual style, run document next to capture it in DESIGN.md, so later changes stay on-brand. Keep both files in your repository.

Start with one component

Impeccable works best on a narrow target: one section reviewed closely beats a whole page at a glance. Name a command and a target:

/impeccable critique the pricing cards
/impeccable quieter the landing page hero
/impeccable typeset the settings page
/impeccable polish checkout

In Codex, write $impeccable instead of /impeccable. You can also just describe what you want, such as “redo this hero section”.

The commands worth learning first

Group	Commands	Use them to
Steer	`bolder`, `quieter`, `distill`, `colorize`, `typeset`, `layout`, `animate`, `delight`, `overdrive`	Push one part of the design in a clear direction
Review	`critique`, `audit`	Get a scored UX review, or a technical report ranked from P0 to P3
Finish	`polish`, `harden`, `clarify`, `adapt`, `optimize`, `onboard`	Final pass, edge cases, copy, screen sizes, speed, first-run states
Iterate	`live`, `generate`	Try variants of an element in the browser
Set up	`shape`, `init`, `document`, `extract`	Plan UX, write the context files, pull repeated patterns into your system

A good first loop: critique a screen, fix the top issue with a steer command such as quieter or typeset, then polish. Type /impeccable on its own to see the full list in your agent, and pin one you use often with /impeccable pin audit.

Run the AI slop detector

The detector checks 62 rules, 31 for AI tells and 31 for quality, and needs no model or API key:

npx impeccable detect src/                   # scan your source files
npx impeccable detect http://localhost:5173  # scan a rendered page in Chrome or Edge
npx impeccable detect --github src/          # annotations for GitHub Actions
npx impeccable detect --list-rules           # list every rule

Source files get the pattern rules; rules that need a rendered page, such as low contrast and tiny text, only run when you scan a URL, so point it at your dev server too. It exits with code 2 when it finds problems, which makes it easy to fail a CI check. If your brand font is on its list of overused fonts, allow it with npx impeccable ignores add-value overused-font Inter --reason "Brand font".

Check these settings first

Hooks run outside model approval in Claude Code. An installed hook runs even when you deny the model’s commands, so the first edit can download the engine. Review hooks before unattended runs.
Live mode can run an agent without approvals. When you apply edits in live mode and no chat session is listening, it starts the codex or claude CLI with approvals and sandboxing turned off. Set IMPECCABLE_LIVE_COPY_AGENT=chat before starting live mode to keep it in your chat, or off to disable it.
Telemetry. New designs fetch 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 that request.
Something broken? /impeccable doctor finds stale context files and broken hooks.

Frequently asked questions

Is Impeccable free?

Yes. It’s open source under the Apache 2.0 license.

Does Impeccable work with Codex?

Yes. Run npx impeccable install, approve the project hook in /hooks, and call it with $impeccable.

Can Impeccable design mobile apps?

Yes. It covers app screens as well as websites, with references for iOS and Android. For a side-by-side look at other options, see Taste Skill vs Impeccable vs UI UX Pro Max.