Design-vocabulary agent workflow for shipping a guesthouse site with Impeccable

What they did

They started from a project root and ran `npx impeccable install`, reloaded their coding tool, and ran `/impeccable init` so the agent read the codebase and wrote a PRODUCT.md capturing audience, goals, and constraints. They followed with `/impeccable document` to record the existing visual system in DESIGN.md so later changes stayed on-brand. With context in place, they pointed narrow commands at single targets rather than whole pages: `/impeccable critique the pricing cards` for a scored UX review, `/impeccable bolder the pricing cards` to amplify a too-safe section, `/impeccable quieter the landing page` to tone down an over-loud hero, and `/impeccable polish settings` as a final pass. They used `audit` to check accessibility, performance, theming, and responsive behavior with findings ranked P0 to P3, and `harden` on checkout to cover errors, i18n, overflow, and edge cases. They also tried live mode against a local Vite dev server, selecting elements in the browser overlay and cycling variants that were written back to source.

How it went

The result was a page built around one strong image instead of the default cream-and-serif template the same model produced without guidance. The slop detector's 62 deterministic rules flagged generic tells and quality issues like cramped padding and skipped headings before shipping. Critique and audit gave ranked fix lists, so the team worked P0 items first. Polish level was high on existing interfaces; new-page generation needed more steering.

Worth knowing

Impeccable is strongest on interfaces that already exist; building new pages is the harder mode and needs narrower targets. Live mode edits a local checkout only and should not be injected into a deployed site or used by weakening a production CSP. Applying copy edits runs package.json scripts, so review what those do. On Codex the invocation is `$impeccable` or `/skills` rather than the slash command, and `craft` is a deprecated alias.

Wiring

Install from the project root with `npx impeccable install`, reload the coding tool, then run `/impeccable init` once per project to generate PRODUCT.md; every later command reads it. Run `/impeccable document` to write DESIGN.md from the existing visual system. Commands take the form `/impeccable <command> <target>`, e.g. `critique the onboarding flow` or `polish settings`; pin frequent ones with `/impeccable pin audit` to get `/audit`. The slop detector runs 62 deterministic rules with no LLM or API key. Live mode attaches an overlay to a running dev server (Vite, Next, SvelteKit, Astro, Nuxt, plain HTML), hot-swaps variants, and writes accepted changes back to source; it requires a local checkout. On Codex, use `$impeccable` or `/skills`.

Try it yourself

Install Impeccable in this repo with `npx impeccable install`, then run `/impeccable init` to write PRODUCT.md from the code and ask me only what you cannot infer. Next run `/impeccable document` to capture the current visual system in DESIGN.md. Then critique the pricing cards and the onboarding flow separately, rank findings P0 to P3, and fix only the P0 and P1 items. Finish with `/impeccable polish` on the settings page and `/impeccable harden` on checkout, covering errors, i18n, overflow, and edge cases. Do not touch the deployed site or change any CSP.