Designing with Impeccable
Shipping a real interface is a loop. Four phases, each with one place to begin.
From a blank file to a designed feature.
Three commands, one arc. /impeccable teach writes the brief, once per project. /impeccable shape drafts a reference you can look at. /impeccable craft codes toward what you can see. Words, then pictures, then code.
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 drafts a brand toolkit you can review at a glance, and craft codes toward a hi-fi mock instead of a paragraph.
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.
Plates generated by OpenAI GPT Image 2. 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.
Pick any element in the browser, draw, type, hit Go. Three production-quality variants. Accept one and it writes 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 in sequence before anything ships. They don't redesign; they find what still needs to change.
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.
Consolidate drift.
Find patterns used three or more times with the same intent. Propose tokens and primitives.
Re-capture the system.
Scans tokens, components, and rendered output. Writes a spec-compliant DESIGN.md.
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.
Design IS the product. Marketing, landing, editorial, long-form, portfolio.
Design serves the task. App UI, admin, dashboards, tools.
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
teachCommands still run without PRODUCT.md and DESIGN.md. They default to generic SaaS patterns. The floor is meaningfully higher with context. Run teach 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.