Impeccable's Workflow Makes AI Sites Look Custom, Not Generic
Impeccable equips AI like Claude with design expertise via teach-shape-craft-iterate commands, spotting 37 anti-patterns to avoid generic gradients and safe typography, building a full Astro/Tailwind landing page in 5 minutes.
Teach and Shape: Define Product Identity to Guide Custom Designs
Start with impeccable teach to create product.md by answering questions on purpose, brand identity (product style: sans-serif, bold hierarchy for utilities vs. brand style: serif display for editorial), personality, references, and audience. This grounds AI in specifics, preventing cookie-cutter outputs. Follow with impeccable shape for a design brief: specify color style, page layout, tech stack (e.g., Astro + Tailwind), and generate probes via image models like GPT-4o (DALL·E). Select the best probe (e.g., option A over B/C) to produce a feature summary, user actions, and layout plan, ensuring designs match your vision like a cinematic tool's homepage.
Craft: Generate Production-Ready Sites in Minutes
Run impeccable craft to build the full site automatically after shaping. It outputs Astro pages, Tailwind config, interactive elements (e.g., draggable before/after effects, accordions, fake video players), and install commands in ~5 minutes. Also run impeccable document post-craft for design.md detailing colors, typography, CSS—reusable across sessions. This delivers functional, impressive pages without manual coding, but expect minor issues like small close buttons or odd layouts for iteration.
Iterate Live: Human-AI Tweaks via Browser Overlays
Use impeccable live (alpha) to enable browser-based edits: it spins up a server on port 8000, adds pink overlays on sections, and offers subcommands like bolder (increases weight site-wide), animate, polish, or custom prompts (e.g., "make text bigger" or "improve code readability"). Changes propagate instantly to Claude, updating code and applying consistently (e.g., better code fonts everywhere). Combine with refine tools for variance levels, achieving precise control without deep design dives.
Trade-offs: Token Costs and Harness Choices
Impeccable checks 37 anti-patterns for unique looks but consumes heavy tokens via repeated design.md reads—Claude Code + Claude models get expensive for large projects; switch to CodeX CLI/GUI for built-in image gen and generous GPT limits. Ideal for quick beauty without pixel-perfect control (use Pencil for precise positioning/radius); model/harness-agnostic but shines with image-capable setups.