Impeccable: AI Skills for Pro Website Redesigns in Claude Code
Install Impeccable skills in Claude Code to teach AI your design context via /teach, then craft/redesign pages, polish fixes, critique with Nielsen scores (e.g., 23/40 to near-perfect), and animate for smooth motion—all using existing site images and branding.
Scan and Install Impeccable to Fix Common Anti-Patterns
Impeccable identifies 26+ anti-patterns like low-contrast text, all-caps body text, Inter font overuse, skipped headings (H2 to H4/H5), cramped padding, purple gradients, and overused animations. Use its Chrome extension to scan any page—it highlights issues in real-time, such as AI color palettes or generic layouts. To start, ensure you have Claude Code (or Cursor, Gemini, Codex CLI) and an HTML/component file. Run npx @impeccable-dev/cli@latest install from your project root; it auto-detects the harness, installs 17 skills, and adds them to agent skills. Restart Claude Code or start a new session—skills appear as slash commands like /impeccable, /polish, /critique.
This setup turns Claude into a design-aware agent that avoids slop: before Impeccable, Claude's redesigns reuse site images but suffer mid-tier results (e.g., unpolished hero sections); after, you get modern cards, thematic fonts, and bilingual support (English/Spanish).
Teach Context for Targeted, Brand-Aligned Redesigns
Run /impeccable teach to input: audience (e.g., Spanish-speaking Miami dentists), brand voice (modern, approachable, warm), interface feel, visual references/anti-references, theme (light mode), and language. Note pain points like "looks like WordPress template, no hero CTA." Impeccable summarizes your brief, ensuring redesigns preserve green/blue gradients, real photos, and business context while fixing issues.
Follow with /impeccable craft homepage—it generates a full redesign: ticker under hero, service grids, staggered team layouts, avoiding cards-on-cards or generic copy. Retain 100% of original images; output feels custom, not templated, boosting approachability for local niches.
Iterate with Polish, Critique, and Animate for 40/40 Scores
After crafting, hero text often needs tweaks (e.g., mismatched colors, oversized elements). Run /polish to refine: unifies colors, resizes text, removes dots/lines, yielding cohesive sections. For objectivity, /critique simulates a senior design director: scores via Nielsen's 10 heuristics (visibility of status, match with real world, etc.) out of 40, plus AI slop verdict and persona tests. Example: initial 23/40 (mid) due to low user control (2/4); post-fixes hit 4/4 on most, noting dev work needed for edge cases.
Prompt Claude to "implement critique changes"—it revises tables showing before/after scores (e.g., system status 2→4). Finish with /animate for purposeful motion: headers pop first, then subheads/elements on scroll with natural delays, working on desktop/mobile. Trade-off: adds choreographed entrances without decorative bloat, making static sites feel premium.
Unlock 20+ More Commands for Delightful Polish
Beyond basics, use /delight for personality (e.g., milestone counters from boring to engaging), /quieter for restraint, /typeset for typography mastery, /overdrive for intensity. Full list in Impeccable docs covers edge cases—type any in slash autocomplete. Result: sites rival pro work (e.g., pink headers, custom cards) in <5 iterations, reusing scraped business data for niches like dentists in specific ZIPs. Start from Claude's baseline redesign (solid but unrefined) to production-ready in minutes.