Design Guidance & Visual Architecture for AI Coding Agents
Standard LLMs default to generic SaaS clichés: Inter typography everywhere, monotonous purple-to-blue gradients, cards arbitrarily nested inside cards, and gray text with illegal contrast. Impeccable equips your AI coding agent with a shared 24-command design vocabulary, durable context preservation (`PRODUCT.md`), and 61 deterministic design detectors that run at 0 LLM API token cost.
Eliminating The "AI Slop" Tells
Without Impeccable, AI agents rely on average web scraped training data. With Impeccable, agents follow strict typographic, spatial, and color laws.
- Default Font: Always Inter, Arial, or browser sans-serif with no brand personality.
- Color Palette: Monotonous purple-to-blue linear gradients on buttons and hero text.
- Layout Clutter: Cards arbitrarily nested inside outer cards, creating box inception.
- Contrast Violations: Low-contrast gray text on tinted cards (fails WCAG AA 4.5:1).
- Icon Cliché: A rounded-square icon tile positioned redundantly above every heading.
- Elastic Easing: Bouncy, jittery CSS transitions that feel dated and sluggish.
- Blacks & Shadows: Pure pitch black (#000000) surfaces without natural ambient light tinting.
- Curated Typography: Expressive pairings (e.g. Outfit, Fraunces, Space Grotesk) with 1.25 modular scale.
- Strategic Color: Single calibrated hero accent, warm/cool tinted surfaces, zero pure gray.
- Clean Space: Strict 8pt spatial grid rhythm (8px, 16px, 24px, 32px) without unnecessary card wrappers.
- 100% WCAG 2.1 AA: Computed mathematical contrast verification (minimum 4.5:1 for body copy).
- Touch & A11y Targets: Minimum 44x44px interactive tap area with visible focus-visible rings.
- Purposeful Motion: Physics-based micro-interactions with cubic-bezier ease-out timing.
- Durable Truth: Architectural direction locked into `PRODUCT.md` and `DESIGN.md`.
🧠 The Two Durable Anchors: How Impeccable Stops Drift
AI agents forget context between sessions or overwrite established designs when generating new pages. Impeccable solves this by splitting product purpose from visual direction into two durable Markdown files:
Gathers durable product reality: target audience, core job-to-be-done, operating constraints, voice & tone, and customer evidence. Prevents the AI from asking redundant questions or misunderstanding who the software is built for.
Records your visual design system: designated font families, fluid typography scales, spatial spacing tokens (4px/8px), color palette hex codes, surface elevations, and motion curves.
Harness Setup & Installation Hub
Select your coding harness below to view exact CLI commands, config files, trust steps, and quick slash commands.
/impeccable init.claude/skills/impeccable & hooks manifest/plugin marketplace add pbakaus/impeccable # Then open /plugin and install Impeccable # Or via direct CLI: npx impeccable install --providers=claude --scope=project
The 24 Design Slash Commands
/impeccable pin <cmd> to create standalone shortcuts (e.g. /audit)61 Deterministic Design Detectors (0 API Token Cost)
Traditional AI code reviews call expensive LLM APIs that hallucinate and take 15 seconds. Impeccable includes a compiled, self-contained binary running 61 deterministic math checks in sub-milliseconds without calling an LLM:
In-Browser Prototyping: /impeccable live & generate
Instead of modifying raw source files blindly, Impeccable can spin up a live browser iteration session. Use /impeccable live to test styling variants on live elements, or /impeccable generate to spawn 4-6 fully formed design variations (e.g. Minimal, High-Contrast, Glassmorphic, Dense) directly on your running dev server.
/impeccable generate pricing-card
# Open real-time visual adjustment session:
/impeccable live navbar