pbakaus/impeccable · 31 Jul 2026 · Feature

Impeccable Treats Generic AI Frontend Design as a Sin to Confess

Anthony Marino
Anthony Marino
Contributing Editor

A cross-IDE design skill encodes typography, motion, and color theory into deterministic anti-patterns, trying to stop every AI coding assistant from building the same purple-gradient dashboard.

pbakaus/impeccable
53k stars Velocity · 7d +551 ★/day accelerating
star history

The Same Purple Gradient Everywhere

There is a specific visual language that large language models speak when left unsupervised. Inter for every heading. Purple-to-blue gradients behind every hero section. Cards nested inside cards inside cards. Gray text floating on colored backgrounds. The rounded-square icon tile hovering above every heading like a nervous tic. Paul Bakaus, the creator of Impeccable, diagnoses the problem plainly: every model has been trained on the same SaaS templates. Deprived of guidance, they reproduce the median, and the median is bland.

pbakaus/impeccable

This is frontend’s version of AI slop—not hallucinated logic bugs, but a collapse of visual taste into the safest, most over-represented patterns on the web. The phenomenon arrives at an awkward moment. According to Figma’s research, sixty-eight percent of developers already use AI to write code, yet only thirty-two percent say they trust the output. The gap between usage and trust is where design quality goes to die. Users tolerate functionally correct interfaces that look like they were assembled from the same five Dribbble shots because the tooling makes that assembly trivial. Impeccable enters this gap not as another component library, but as a vocabulary layer: a skill, in the emerging parlance of AI coding assistants, that attempts to teach models the difference between working code and good design.

A Catechism for the Context Window

Impeccable began as an expansion of Anthropic’s frontend-design skill, one of the first widely distributed design skills for Claude. Where the original provided a foundation, Bakaus added seven domain-specific reference files that load alongside every command. These cover typography, color and contrast, spatial design, motion, interaction, responsive behavior, and UX writing. The references are not casual tips. The typography file addresses modular scales, font pairing, and OpenType features. The color file insists on OKLCH, tinted neutrals, and dark-mode-aware accessibility. Motion covers easing curves, staggering, and reduced-motion respect. Together they form a compressed design system, a pocket edition of the kind of institutional knowledge that usually lives in hundred-page Figma libraries or PDF brand guidelines.

The references load on every command, meaning a request to animate a button does not float in a vacuum of generic CSS transitions. The motion file supplies easing logic; the interaction file supplies focus-state etiquette. Even the UX writing file shapes microcopy, ensuring error messages and empty states do not default to robotic boilerplate. This persistence is crucial. Most AI coding conversations suffer from context decay: the model remembers the current file but forgets the design philosophy. By binding the references to the skill itself, Impeccable makes the design system part of the agent’s working memory. A brand-versus-product register adjusts defaults, acknowledging that a marketing landing page and an internal dashboard should not share the same rigid rules.

Figma’s blog on design systems and MCP servers argues that design systems are becoming the lingua franca between human intent and AI generation. They provide the context that prevents an agent from producing merely functional output. Impeccable operationalizes this idea for developers who do not have a dedicated design system team. It is machine-readable doctrine, injected into the context window so the model cannot forget it between chat turns.

Determinism in a Stochastic World

The most technically interesting piece of Impeccable sits apart from the LLM entirely. The project ships twenty-seven deterministic anti-pattern rules and a twelve-rule LLM critique pass, but the former run through a standalone CLI and browser extension that require no API key and no model call. This is a deliberate architectural split. The deterministic scanner hunts for specific, verifiable sins: side-tab borders, purple gradients, bounce easing, dark glows, cramped padding, small touch targets, skipped heading levels, and line lengths that strain readability. It catches AI slop by regex and heuristic, not by asking a model to form an opinion.

This separation matters for workflow velocity. A developer can run the detector against a local directory, an individual HTML file, or a remote URL, receiving instant feedback without burning tokens or waiting on inference. The scanner even offers a fast regex-only mode with JSON output for integration into continuous integration pipelines. The README explicitly ties each deterministic rule to guidance in the skill files, so a violation is not merely flagged; it is mapped to a lesson. By hardening design constraints into fast, local linting, Impeccable borrows the pragmatism of traditional code quality tools and applies it to aesthetics. In an ecosystem where most AI design helpers are fully stochastic—every critique costs a prompt and a prayer—having a deterministic pre-filter is a genuinely unusual choice.

Twenty-Three Verbs for Taste

Beyond the reference files and the linter, Impeccable offers twenty-three commands accessed through a single skill namespace. The names are revealing. Audit and critique perform technical and UX reviews. Polish performs a final pass before shipping. But then the vocabulary shifts into subjective territory: bolder amplifies boring designs, while quieter tones down overly bold ones. Distill strips interfaces to their essence. Delight adds moments of joy. Overdrive adds technically extraordinary effects. Harden addresses error handling, internationalization, and text overflow.

Some commands are procedural. Document generates a root DESIGN.md from existing code; extract pulls reusable components into a design system. Others are operational, like adapt for different devices or optimize for performance. But the emotional register of the vocabulary reveals the project’s deeper ambition. It assumes that frontend development has become so automated that the remaining bottleneck is not implementation speed but aesthetic judgment. The commands are an attempt to externalize that judgment into a shared grammar, so a developer and an agent can argue about hierarchy and emotional resonance using the same words. Users can pin frequently used commands into standalone shortcuts, collapsing the namespace into personal habits.

The Harness Wars

Impeccable’s distribution strategy betrays an awareness that the AI coding assistant market is fragmenting. The skill supports more than a dozen tools—including Cursor, Claude Code, Gemini CLI, Codex CLI, GitHub Copilot, Trae, Rovo Dev, Qoder, OpenCode, Pi, and Kiro—and auto-detects the local harness to write the correct compiled build into the proper hidden directory. This is not mere packaging convenience. It is an acknowledgment that the frontend developer of 2025 may switch between three different AI-powered editors in a single week, and design consistency should not be hostage to any single vendor’s skill format.

The broader industry context supports this fragmentation anxiety. Figma’s push for MCP servers, Atlassian’s Rovo UI design system for AI experiences, and the growing chorus of design-systems-as-AI-infrastructure all point toward a future where context must be portable. Impeccable attempts to be a universal design conscience, traveling with the developer across editors. Whether that portability is sustainable depends on whether the skill formats themselves stabilize or continue to diverge.

Can Taste Be Packaged?

For all its structure, Impeccable remains a prompt-level intervention wrestling against the gravity of training data. The models it instructs have already ingested millions of generic dashboards. A few thousand tokens of reference material and twenty-seven anti-pattern rules are a thin membrane of taste wrapped around a vast ocean of mediocrity. The Figma blog notes that asking an AI agent to generate code without design system context is like asking a new engineer to ship before onboarding; it might technically work, but it will not align with how the team builds. Impeccable provides that onboarding packet, yet it cannot rewrite the base model weights.

The tension is visible in the project’s own framing. The anti-pattern list explicitly forbids Inter, purple gradients, and nested cards—precisely because those patterns are statistically dominant. Impeccable is essentially a counterweight, and counterweights require constant force. It also places the burden on the developer to install, invoke, and maintain the skill. The generic dashboard remains the default, and Impeccable is the opt-in exception.

Still, the project captures something important about this moment in AI-assisted development. As the AI and Design Systems course taught by Brad Frost, TJ Pitre, and Ian Frost explores, the intersection of systematic design and generative AI is where product quality will be won or lost. Impeccable is an early, pragmatic attempt to encode that intersection into a shareable artifact. It treats design not as a post-code luxury, but as a constraint layer that should ride alongside the agent from the first line of markup. Whether it succeeds in cleansing AI frontend design of its sins may matter less than the precedent it sets: that taste, like security or type safety, deserves its own linter.

Sources

  1. IMPECCABLE Definition & Meaning
  2. AI & Design Systems Course with Brad Frost, TJ Pitre, and Ian Frost
  3. Has anyone successfully used AI to help build a design ...
  4. Meaning of impeccable in English - Cambridge Dictionary
  5. AI and Design Systems: What Actually Works (and What Doesn't)
  6. IMPECCABLE Definition & Meaning
  7. How are you using AI tools alongside your own design system?
  8. Design Systems And AI: Why MCP Servers Are The Unlock
  9. Impeccable - Definition, Meaning & Synonyms
  10. The Role of AI in Design Systems For 2025
  11. English Word of the Day: IMPECCABLE
  12. Atlassian Design System

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.