Consolidate drift.
Find patterns used three or more times with the same intent. Propose tokens and primitives.
Designing with Impeccable
Most of the work isn't the blank page. It's everything after: refine, polish, pay down the drift. Four phases, one place to begin in each.
Net-new is the hard mode.
From a blank file is where coding agents are weakest, Impeccable included. It can start cold, but it works better reacting to something real, so start from a picture, not a paragraph. Bring a direction from Figma, a phone photo of a sketch, or Google Stitch, or let /impeccable craft generate the mock with GPT Image 2 (sharpest in Codex). /impeccable init writes the brief first either way.
PRODUCT.md Written by init
Register Product. Design serves the task.
Users SREs on call, reading fast, often in the dark.
Voice Calm, clinical, no hype.
Anti-references Purple gradients. Glassmorphism. Hype.
Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes PRODUCT.md and, if there's code to scan, a DESIGN.md. Every later command reads both files before generating.
Since image generation crossed the reference-quality threshold, shape can draft a brand toolkit you review at a glance, and craft can code toward a hi-fi mock instead of a paragraph. Neo Mirai is the full loop: generated direction, implemented page, browser iteration.
Brand toolkit. Identity, palette, type, icon language, applications, social tiles, UI direction. One plate, reviewable at a glance. Approved decisions get written into DESIGN.md.
Hi-fi reference. The destination, before the first line of CSS. Craft codes toward a concrete image, not an abstract brief. That is the step change.
Live build. The mock became semantic markup, regenerated assets, responsive fixes, nav state, speaker carousel behavior, and browser-verified polish. Open the live site.
The first two plates were generated by OpenAI GPT Image 2. The third is the implemented Neo Mirai page. Gemini Nano Banana Pro, Imagen 4 Ultra, and Grok Imagen work the same way, via Codex, Gemini CLI, and compatible harnesses.
Refine what's there.
Once something exists, you're iterating. There are two paths: specific commands for named dimensions, or Live Mode for visual exploration.
When the edit has a name.
Type a command and let the skill encode a specific discipline. Best when you know the word: typography, layout, color, motion.
When the edit is easier to point at.
Run /impeccable live in your AI tool and it drops this picker onto your running dev server. Point at any element, draw or type what you want, hit Go. Three production-quality variants; accept one and it writes back to source.
| Fix something "off" that you can't name | /impeccable live |
|---|---|
| Apply a specific discipline: type, layout, color, motion | /typeset · /layout · /colorize · /animate |
| Explore three directions side by side | /impeccable live |
| Ask "is this any good?" | /impeccable critique |
| Bring a safe design to life, or tone a shouting one down | /bolder · /quieter |
The pre-ship gauntlet.
Three commands before anything ships. They don't redesign, they find what's left to fix. Point them at a narrow target: one section reviewed closely beats a whole page reviewed at a glance, the way a lens sharpens as it tightens.
Score it.
Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.
Rewrite the copy.
Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.
Stress-test reality.
60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.
Design debt is real. Pay it down.
Features ship, drift happens. Two commands close the gap before it solidifies.
Re-capture the system.
Scans your tokens, components, and rendered routes, then writes a DESIGN.md in the Stitch format. The more it points at your real components and live routes, the closer Impeccable reads your design language instead of guessing at it.
Mostly, you're in the skill.
The 23 commands run inside your AI coding tool: Cursor, Claude Code, Codex, Gemini CLI, Copilot. That's where everything on this page happens. The same anti-pattern detector also runs in two places outside the chat.
In CI, as a gate.
$ npx impeccable detect src/
Point it at a directory, a file, or a URL. Deterministic rules and JSON output, with an exit code that fails the build when slop slips into a pull request.
On any page, live.
a-competitor.com
The same checks as a browser overlay, on anything live: your staging build, a competitor, a page you'll never get into an editor.
Brand, or product.
Two defaults with different vocabularies. Impeccable picks the lane from your task cue and PRODUCT.md before every command, so typeset, animate, colorize, and friends adjust their output to match. You rarely need to set it by hand.
Brand. Design is the deliverable: landing pages, campaigns, editorial, portfolios. Distinctive type, committed palette, image-led heroes. The impression is the product.
Product. Design serves the task: app UI, admin, dashboards, tools. Fluent density, semantic states, repeatable components. Users are here to finish something.
What to avoid.
An anti-patterns list, for using the anti-patterns tool.
- Running both Impeccable and Anthropic's frontend-design skill
Anthropic still promotes their skill in Claude Code, but it's been unmaintained and is now behind on recommended patterns. Run both and they collide on vocabulary, cancelling each other out. Pick one.
- Pinning every command
Pinning brings back
/audit,/polish,/critiqueas shortcuts. Pin everything and you've re-exploded the/menu the v3.0 consolidation cleaned up. Pin the two or three you reach for daily. - Skipping
initCommands still run without PRODUCT.md and DESIGN.md. They default to generic SaaS patterns. The floor is meaningfully higher with context. Run init once; every later command benefits.
- Treating it like a linter
Impeccable is an opinionated design partner, not a validator. It has a point of view. Push back with a reason and it'll work with you. Ignore the opinion without a reason and output gets worse, not better.