Impeccable Repo Fixes Claude Code's Frontend Design Flaws
Install Impeccable's open-source skill into Claude Code to teach it 7 design pillars via 23 commands, generate variant layouts, audit sites for slop, and edit live in browser for polished results without mediocre prompts.
Impeccable Teaches Claude Code Real Design Language
Claude Code produces mediocre frontend designs due to poor prompts lacking designer terminology. Impeccable, an open-source GitHub repo (github.com/pbakaus/impeccable), solves this with a single installable skill featuring 23 commands across 7 pillars: typography, color, spatial design, responsiveness, interactions, motion, and UX writing. It includes 7 domain-specific reference files, anti-pattern avoidance (e.g., clipart mockups, glassmorphism, unused fonts), and browser-based editing. Install via one terminal command: copy-paste from repo. Use Claude Code to auto-select commands, or reference impeccable.style for before/after demos of each (e.g., 'bolder' pushes safe designs toward impact without chaos). Ignore Chrome extension/CLI—skill delivers 99% value. Outcome: Professional designs that avoid AI slop like cream colors/Serif fonts overuse or bento grids.
Greenfield Builds Start with Impeccable Craft
For scratch builds, run 'impeccable craft' to trigger planning: it interviews via 13+ questions on product (customer, mindset, CTA), voice/look, scope (hero-only/full-scroll, assets). Generates product.md and design.md files (industry-standard like Google Stitch), then builds landing page. Prompt for 3+ macro variants side-by-side with fullscreen tabs (e.g., editorial, drenched/colorful, brutalist/grayscale offset boxes)—pick one to iterate. No reference image? Gets non-slop results like unique dashboards/quotes/pricing. With mood board image? Matches vibe but may underperform without multi-asset prompts (e.g., struggled on single Lighthouse analytics SaaS image vs. repo case study). Always generate variants first: boosts decision-making, inspired by Stitch's easy comparisons.
Audit and Refine Existing Sites with Critique Commands
On live sites, run 'impeccable document' to reverse-engineer design.md, identifying wins/north star plus violations (e.g., 7 issues like blue sphere clipart, glassmorphism hate, strategic gaps like missing founder presence). 'Critique' scores design health out of 40 across 10 metrics (max 3/4 each; 25/40 = acceptable, borderline slop). Flags cognitive load fails (e.g., competing background motion, equal CTAs, 4 visual schemas in services). Suggests paths like 'decoration discipline' (subdues to 2-3 colors: terracotta/white/gray, removes haze/glows). Post-critique, apply targeted fixes for subtle polishes. Run 'polish' for final design pass, 'harden' for edge cases—turns acceptable into standout.
Live Mode Enables Micro-Iterations and Slop Detection
Activate 'impeccable live' on any page: opens localhost with highlights, right sidebar (design/raw views), per-component options (freeform prompt or 12+ commands like bolder/quieter/distill/polish/adapt). Generate 2-4 variants (tune offset/wildness/colors), accept to apply/reload. 'Detect' scans for anti-patterns (none on Impeccable-built pages). Alpha-stage but transformative: micro-tweaks (e.g., bolder + 'add color' x3) yield flashier text without chaos, outperforming static gens. Use post-build: elevates first-pass variants to production-ready, setting Impeccable apart from prior skills.