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 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.
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.