Impeccable Skill Turns Claude Code into Design Pro
Install Impeccable skill in Claude Code to access /teach, /craft, /polish, /critique, and /animate commands, upgrading generic redesigns to polished sites scoring up to 40/40 on Nielsen's heuristics.
Default Claude Code Designs Miss the Mark
Claude Code produces functional redesigns using existing site images and context, like matching a dentist site's green-blue gradients and real photos. However, scans reveal 26 anti-patterns: low-contrast text, all-caps body text, overused Inter font, skipped heading levels (H2 to H4/H5), cramped padding, AI color palettes (purple gradients), and decorative animations. These result in mid-tier sites that feel generic, like WordPress templates, lacking clear CTAs and conversion focus. Impeccable counters this by training against 17 anti-patterns in visual details, typography, color contrast, and layout, delivering modern, approachable designs that convert.
Core Impeccable Commands Unlock Design Fluency
Install via one command from https://impeccable.style/ in Claude Code (or Cursor/Gemini/Codex CLI) projects with HTML/components—it auto-detects and adds 17 skills, reload to access /impeccable slash commands (<2 minutes). Start with /impeccable teach: input client context (real engagement, issues like 'looks like WordPress, no hero CTA'), brand voice (e.g., modern, approachable, warm), references/anti-references, theme (light mode, bilingual English/Spanish). This generates a design brief. Then /craft builds: hero with orange highlights, service grids, staggered team layouts, tickers—far superior to baseline Claude. /Polish refines (e.g., fixes oversized hero text, multi-color mismatches). /Critique acts as senior design director: scores against Nielsen's 10 heuristics (visibility of status, match real world, etc.) out of 40—baseline 23/40 ('mid'), auto-fixes boost to near-perfect (e.g., visibility 2→4, match 3→4). /Animate adds scroll-triggered, choreographed motion (header first, then subheads/sections with delays)—smooth, state-conveying, mobile-responsive, not decorative.
Production Workflow for Client Sites
From scraped local business (e.g., Miami dentist via zip code/niche search), teach context, craft homepage, polish hero/services, critique/fix for 40/40, animate for natural flow—yields conversion-ready sites with personality (e.g., /delight for memorable milestones, /quieter for subtlety, /typeset, /overdrive). Works for agencies: understands branding, adds blogs/CTAs, avoids slop. Chrome extension scans live sites for anti-patterns (e.g., gradient text, glowing dark mode). Trade-off: requires restart for skills; deeper commands (20% shown) in docs expand to full fluency, turning AI into client-grade designer.