Jonathon's AI Wiki

Impeccable v3 — Open-Source Design Toolkit + 37 AI-Slop Pattern Catalog (Jay Yang / Robo Nuggets)

5 min read

Source: raw/Claude_Web_Design_just_got_a_MAJOR_upgrade_Impeccable_v3.md (Jay Yang / Robo Nuggets, YouTube hicdJVLnp-Q, 2026-05-10) — impeccable.style open-source toolkit at v3, ~25,000 GitHub stars at fetch.

Impeccable is the open-source toolkit behind the Claude Code design skills cluster covered in design-skills-overview. Its mission: “give design fluency to AI harnesses” by teaching the agent design vocabulary before any command runs, then giving it 23 narrow commands to steer the result. The v3 release adds a 37-pattern AI-slop catalog, a Chrome extension that flags slop on any live URL, and a bake/tweak workflow for last-mile manual control. Free, MIT, runs inside Claude Code (and any other AI harness that reads SKILL.md files).

Key Takeaways

  • Knowledge base over command memorization. Impeccable’s foundation is seven reference files — typography, color/contrast, spatial design, responsiveness, interaction, motion, UX writing — that the agent loads before any command runs. The 23 commands operate against this shared vocabulary, so an agent given a vague “improve this design” prompt picks the right commands without the user memorizing the catalog.
  • The 37 AI-slop pattern catalog is v3’s load-bearing artifact. It codifies the visual tells of vibe-coded design: purple gradients, single-font lockups, overused Inter, sit-tab accent borders, headline-overuse-of-display-font, monotone hierarchy, every-card-same-size, etc. Catalog browsable at impeccable.style. Acts as the falsifiable target the toolkit’s commands move designs away from.
  • Chrome extension flags slop on any URL. Install once, click “scan” on any website, and the extension highlights elements matching slop patterns. Works on production sites, not just Claude Code outputs — useful for auditing client work, competitor sites, or your own pre-Impeccable designs.
  • 23 commands organized as a pipeline. Diagnose (critique, audit) → fix (clarify, distill, layout, quieter) → harden (harden, polish). The agent picks the subset; the user only chooses the goal. The Tier-3 enhancement skills (arrange, typeset, colorize, animate, bolder/distill, delight, polish) are most effective in that order, mirroring the Tier-3 ordering documented from the wider Claude Code design skills system.
  • Bake/tweak workflow closes the last-mile gap. Once Claude produces design candidates, a separate tweak skill (Jay’s own — not part of impeccable.style itself) injects a sidebar with sliders for title size, body size, density, accent glow intensity, kerning, button roundness, saturation. Adjust visually, click “bake,” paste the patch back into Claude Code, and the agent applies the changes. Removes the iterate-via-prompt-loop friction for design-by-feel.
  • Variation-first prompting beats single-shot. Jay’s recommended invocation: ask Claude for multiple lightweight variants (3 designs side-by-side, minimal element count) rather than one final output. The brand-color constraint anchors the variations; the user picks the winner by reaction, then deepens that one. Same pattern as beautiful-html-templates AGENTS.md: 3-preview shortlist before committing.
  • Workflow integrates with frontend-design and the broader skill cluster. The full pipeline (per design-skills-overview): setup teach-impeccable (one-time .impeccable.md baseline) → direction (Tier 1) → build → evaluate (Tier 4) → refine (Tier 3 in order) → ship (Tier 5). Impeccable v3 is the canonical entity behind that cluster — the wiki had per-skill coverage before this article; v3 adds the open-source repo provenance + Chrome extension + 37-pattern catalog as primary facts.
  • Robo Nuggets is the host community. Jay’s AI Mentic Master Class for paid members covers building agents end-to-end; the Impeccable tutorial is a free piece of that. Same content style as Nate Herk’s AIOS masterclass — practitioner channel teaching production patterns through specific tool walkthroughs.

Implementation

Tool/Service: Impeccable open-source toolkit + Chrome extension Setup:

  • Point any AI harness at the Impeccable repo URL → it builds a personalized skill (or invoke the canned teach-impeccable skill if installed).
  • Install the Chrome extension to flag slop on live URLs.
  • Optional: install Jay’s separate tweak skill for the bake-back patch workflow. Cost: Free / MIT. Integration notes:
  • Don’t memorize the 23 commands. Hand the agent the goal (“improve this website using impeccable principles”) + the brand constraints (color palette, voice). Let it pick commands.
  • Variation-first: ask for 3 lightweight design candidates, pick by feel, then iterate on the chosen one.
  • Pairs naturally with Open Design (local-first runtime alternative to Claude Design) for full open-source web-design pipeline.

Try It

  1. Audit an existing site. Install the Chrome extension, scan your own landing page or a client’s site, screenshot the flagged slop patterns. Use the report as input to a “fix this” prompt to Claude Code.
  2. Variation prompt template. “Use the Impeccable knowledge base to redesign this page. Give me 3 lightweight variants (minimal elements, just enough to see the design direction). Keep the brand colors <list>. Show them side-by-side so I can pick by reaction.”
  3. Skip the slop checklist before publishing. Run the 37-pattern audit on every AI-generated site before it goes live — purple gradient, single-font, monotone hierarchy, sit-tab accent borders are the cheapest tells to catch.
  • design-skills-overview — the per-skill breakdown of the 23 commands; this article is the canonical entity for the framework they come from.
  • frontend-design-deep-dive — the master skill that orchestrates the others.
  • taste-skill-deep-dive — taste-skill operates within frontend-design’s frame; its anti-slop rules complement Impeccable’s 37-pattern catalog.
  • soft-skill-creative-direction — soft-skill’s Absolute Zero directive (instant failure for banned patterns) is a stricter sibling to Impeccable’s slop-catalog approach.
  • open-design — local-first runtime that consumes the same DESIGN.md payloads and design-skill ecosystem.
  • beautiful-html-templates — sister project sharing Impeccable’s “show 3 variants, pick by reaction” UX pattern.
  • refero-styles — DESIGN.md catalog that pairs with Impeccable for typography and color reference layers.

Open Questions

  • What’s actually new between v2 and v3? Transcript names the Chrome extension and the 37-pattern catalog as v3 additions but doesn’t fully enumerate the v2-to-v3 delta. Worth a check against the GitHub release notes the next time the Anthropic-watch / GitHub-stars puller sees an Impeccable release.
  • Is tweak going to land upstream into Impeccable? Jay describes it as “a skill I made” — separate from impeccable.style proper. If it’s contributed back, the bake-back patch workflow becomes a default Impeccable feature.

Graph View

Backlinks