Impeccable Workflow: Words → Pictures → Code for Unique AI Sites
Impeccable in Claude Code uses teach-shape-visualize-craft to build branded landing pages with GPT Image 2 visuals, avoiding generic AI designs by prioritizing design before code.
Structured Workflow Prevents Generic AI Websites
AI-built sites look identical because builders jump to code without design anchors. Impeccable enforces a words-then-pictures-then-code sequence in Claude Code, producing unique, branded results like a Tokyo event page with custom tree motifs and repeating circles. The four-step arc—teach, shape, visualize, craft—anchors every output to a project-specific design context stored in Markdown, ensuring consistency. This yields hi-fi references before CSS, so code targets concrete visuals, not vague briefs. Trade-off: Requires upfront brand definition, but outputs shippable HTML with AI-generated illustrations in minutes.
Brand Definition via Teach and Shape Commands
Start with impeccable teach once per project: Answer prompts on audience (e.g., SREs reading fast in dark mode), voice (calm, no hype), anti-references (avoid purple gradients, glassmorphism), and rules (playful but not extra-large fonts). Impeccable synthesizes conflicts (e.g., playfulness vs. large fonts) and outputs a design context block for all future commands.
Follow with impeccable shape: Generates a full brand toolkit—identity, palette, type, icons—using GPT Image 2. Example: For a YouTube growth tool, it created 'Plot.so' with minimal black/white base, color highlights, editorial layout, and city vibe illustrations. Setup needs OpenAI API key and organization verification (scan ID/face; approved in 10 minutes), or it defaults to inferior GPT Image 1.
Visualize and Craft Turn Designs into Coded Pages
Impeccable visualize creates a high-fidelity landing page image from the brand toolkit and references (e.g., attach example layouts). Outputs hero with illustrations, founder sections with consistent styles, and custom shapes—tweak by removing/adding graphs or gradients.
Impeccable craft converts the image + Markdown context into coded HTML. It generates 9 editorial illustrations via GPT Image 2, swaps out inline SVGs, and builds responsive layouts. Initial output may have off layouts or AI-generic feel; reference the hi-fi image as source of truth for fidelity.
Polish Refinements Elevate Production Quality
Post-craft, use impeccable polish (or refine variants like colorize, delight, animate) to fix issues: Simplify hero text to two colors/one font, improve spacing, quiet sections. Impeccable has 23 commands total for ongoing iteration. Result: Branded site like Plot.so with hero image, consistent imagery, and non-generic details—ready to deploy from blank file.