Impeccable Docs

Appearance

/impeccable live ​

Fresh 🌱

Interactive live variant mode. Select elements in the browser, pick a design action, and get AI-generated HTML+CSS variants hot-swapped via HMR. Requires a running dev server. Use when you want to visually experiment with design alternatives in real time.

When to use it ​

Reach for /impeccable live when you want to iterate on something visually the way you would in a design tool, but keep production code as the output. The canvas-like flow of Figma without the round trip to an implementation step.

Use it for:

  • Exploring directions on a real element. A hero section, a newsletter card, a pricing tier. Three genuinely different takes, side by side, on the actual page with the actual context.
  • Polishing a piece of UI that is almost right. You know what feels off but cannot quite say it. Pick the element, scribble “more playful” or draw a stroke through the bit that bugs you, hit Go.
  • A quick A/B between two directions your team is debating. Generate variants, accept nothing, walk away. The point was the comparison.

It is not for new greenfield features or whole-page redesigns. Describe those directly to /impeccable, or use a specialized refinement command.

How it works ​

One command brings up a picker overlay on top of your running dev server. You pick any element. A small context bar appears next to it. Type a freeform description or pick one of the action chips (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Optionally drop comment pins or draw strokes directly on the element first, and the skill reads those as intent.

Hit Go. Three production-quality variants get generated, each anchored to a genuinely different design archetype (not three riffs on color) and hot-swapped into the page via your framework’s HMR. Cycle through them with arrow keys. Accept one and the variant is written back to source. Discard all three and the original stays.

It supports Vite, Next.js (including monorepos), SvelteKit, Astro, Nuxt, and plain static HTML. If your dev server has a strict Content Security Policy, the first-run setup detects it and offers a one-time, dev-only patch so the picker can load. DESIGN.md wins on visual decisions, PRODUCT.md wins on voice: if you have both, variants stay on-brand without being told.

Try it ​

/impeccable live

Open your dev server URL, pick the newsletter signup card, click the delight chip, hit Go. You will get three variants that vary across personality dimensions (a stamp-and-postcard feel, a typographic-surprise version, an illustrated-accent one), not three riffs on the same treatment.

Or pick a hero, type “more editorial, less SaaS”, hit Go. The three variants anchor to different editorial archetypes (broadsheet masthead, catalog-style spec rows, oversized-glyph poster) rather than three shades of the same idea.

Stop live mode when you are done: say “stop live mode”, close the tab, or hit the exit button on the picker bar.

Pitfalls ​

  • Running it on a page that is still half-written. Live variant generation needs context. If the element has placeholder copy, generic Lorem ipsum, or pre-stylesheet default formatting, variants will reflect that. Fill the content first.
  • Expecting it to make macro decisions. Live mode iterates on a picked element. For “redo the entire pricing page”, make a direct /impeccable request instead.
  • Ignoring the fallback messages. If the element lives in a generated file (a compiled template, a build output), the picker says so explicitly and offers to route the accept into true source. Do not force the accept into the generated file: the next build will wipe it.
  • Running it without PRODUCT.md or DESIGN.md when you care about brand fit. Live will still generate, but the variants will lean toward generic defaults. Run /impeccable init and /impeccable document first if the result needs to sound like your product.