Reading up on Impeccable
4 deep · digging since apr 16
- Skill engineering and the case against one-shot AI design
Paul Bakaus argues AI agents need “skill engineering” to give designers precise control, rejecting full automation in favor of human judgment steering the final 20% of creative work.
Takes
great time to run “/impeccable live” on it! if you use impeccable and have never tried it, i encourage you to give it a try. will post video soon
@pbakaus
Introducing Impeccable 3.5, the best way to design in production: iterate on real UI with your AI agent, in the codebase you actually ship. Turns out many popular design skills, including Impeccable and Anthropic's frontend-design, weren't actually very good at...design (the workflow was valuable, but the output didn't magically make LLMs like GPT great designers). We measured it across thousands of generations: 74% of pages used the cream AI-default background, 76% reached for extreme letter-spacing, 90%+ failed the contrast floor. So we started fixing slop systematically, specific to each model. The skill now compiles rules for the exact defects each model makes, instead of shipping one generic file to everyone. The biggest jump is in GPT-5.5 and Codex. Also new: ◆ It now knows the difference between a new project and an existing one. Existing codebase, it reads your design system and preserves your identity. Greenfield, it seeds a fresh palette from 129 hand-curated anchors so every cold start doesn't drift to the same safe colors. ◆ Live Mode is now in beta, and works at two scales. Type a direction into the new Steer bar, or speak it, and the agent reads the whole page and edits it in place. Or pick a single element, steer it with a sub-command, live-edit any copy, and accept the variant straight back to source. Insert mode scaffolds brand-new elements between the ones already there. Recovery survives HMR, hidden heroes, and dev-tool overlays. ◆ A rebuilt anti-pattern detector. Torn off jsdom and onto a real CSS cascade resolver: roughly 20x faster, dependency-free, and now small enough to run inline inside the skill, not just the CLI and extension. 14 new rules, 41 total. ◆ The skill keeps itself current, checking once a day and offering to update. Plus /impeccable init and a bare /impeccable that reads your repo and tells you the next move. Free, open source. Claude Code, Codex, Cursor, and more.
@pbakaus
Impeccable 2 (my take on the most effective way to make your AI harness better at design) dropped last week. But I was so busy working on the next iteration that I buried the lede a bit. So here's a detailed post on what's new and improved: 1. CLI: npx impeccable detect. Scans your code *without need for an LLM* for 25 anti-patterns across typography, color, layout, motion, and quality. Works on HTML, CSS, JSX/TSX, Vue, Svelte, and CSS-in-JS. Framework detection, multi-file import tracking, Puppeteer-backed live URL scanning, CI-ready JSON output,--fast regex mode for huge codebases. Yes, you can built automatic PR anti-slop detection with this in a few lines of code! 2. Chrome extension. One-click detection on any page (yours, staging, production, or someone else's). DevTools panel. Live computed styles, interactive panel, on-page highlights. 3. Dramatically upgraded /critique. LLM + real time detection sub-agents run in parallel, score against Nielsen's heuristics, auto-run the detector, and open a live browser overlay so you can walk each finding in place. 4. Data-driven design performance improvements, driven by an internal eval framework that runs the same brief through frontier models with and without the skill loaded, then measures how much the output collapses into monoculture. The biggest unlock: an anti-attractor procedure that forces the model to enumerate and reject its reflex defaults before picking. Validated on gpt-5.4 and Qwen 3.6 Plus across 15 niches. Result: much more font and color diversity, sharper quality, stronger Codex support. 5. Design before code. /shape runs a structured discovery interview and produces a design brief before any code is written. /impeccable craft chains that brief into the full implementation flow. You ship a designed feature instead of a reflex card grid. 6. One name, one namespace, and 18 commands (down from 21). The skill used to be called frontend-design, it's now called impeccable. /teach-impeccable became /impeccable teach, /extract became /impeccable extract. /arrange became /layout. /normalize merged into /polish. /onboard merged into /harden. Auto-cleanup handles leftover files on first load after updating. 7. A real docs site. 18 per-skill pages with before/after demos, canonical SKILL.md inline, two tutorials, 38 rule cards with inline visual examples. Give it a try:
@pbakaus