Impeccable vs Frontend Design Skill: Which Wins? (2026)

Ask an AI agent for a landing page with no design guidance and you can predict the result before it renders: Inter everywhere, a purple-to-blue gradient, cards nested inside cards, gray text on a colored panel. Two Claude Code skills exist to stop that. Anthropic's Frontend Design was the first one most people installed. Impeccable, by Paul Bakaus, openly started from it and grew into something much larger.

They solve the same problem at very different weights. Frontend Design is about 1,500 words of taste. Impeccable is a skill with 24 commands, a hook system, a downloadable engine and a lint-style detector you can run in CI. Which one belongs in your setup depends on whether you want guidance or enforcement.

Side-by-side comparison

Frontend Design: taste in a single file

Frontend Design lives in Anthropic's example skills plugin. The current SKILL.md describes itself as guidance for "distinctive, intentional visual design," and it reads like a senior designer's notes to a junior.

The structure is simple. Ground the design in the subject matter, so a bakery site and a security dashboard don't share a palette. Plan a small token system (color, type, layout) before writing code. Build, then critique your own work. And show restraint, summed up in one line from the file: "Spend your boldness in one place."

The most useful part is its list of what AI design currently clusters around, so the model can steer away. It names five looks to avoid, including warm cream backgrounds with serif headings and terracotta accents, near-black pages with acid-green highlights, and generic SaaS card kits with soft gray shadows. It also flags template tells like all-caps eyebrow labels, middle-dot metadata and 01/02/03 markers on content that isn't sequential.

That self-awareness is a smart move. A skill that only says "be distinctive" tends to produce its own house style. This one names the house styles so the model can avoid them.

Install:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

That plugin bundles a dozen skills (Frontend Design, Canvas Design, Skill Creator, Webapp Testing and more). If you only want this one, copy skills/frontend-design/ into ~/.claude/skills/. We walk through both routes in how to install the Frontend Design skill, and our earlier Frontend Design review has more on output quality.

Where it falls short: it has no memory. Every session starts from your prompt, so a brand voice you explained on Monday is gone on Tuesday unless it's in your CLAUDE.md. It also can't check anything. If Claude ignores the advice halfway through a long session, nothing catches it.

Impeccable: a design system with a linter attached

Impeccable's README states its lineage plainly: Frontend Design was the first widely used design skill for Claude, and Impeccable started from there. What it added falls into three buckets.

Durable context. Run /impeccable init and it inspects your project, asks only about real gaps, and writes PRODUCT.md: who the audience is, what the product does, voice and constraints. Visual decisions go separately into DESIGN.md. Every later command reads those files, which fixes the memory problem Frontend Design has.

A shared vocabulary of 24 commands. You call them as /impeccable <command> <target>. A sample:

• shape plans the UX before code exists
• critique gives a design review; audit checks accessibility, performance and responsiveness
• polish does a final pass; distill strips a page back to essentials
• bolder and quieter push a design up or down in intensity
• typeset, layout, colorize and animate fix one dimension at a time
• clarify rewrites unclear interface copy
• live and generate iterate on variants in a running browser

"Make it pop" is a bad prompt. /impeccable bolder the pricing table is a precise one, and that precision is the real product here.

A deterministic detector. This is the part that sets it furthest apart from Frontend Design. The CLI scans files, folders or live URLs for 61 known problems: side-tab borders, purple gradients, bounce easing, dark glows, long line lengths, cramped padding, small touch targets, skipped heading levels. It runs without an LLM or API key, returns exit code 2 when it finds issues, and outputs JSON for CI.

npx impeccable detect src/
npx impeccable detect https://example.com
npx impeccable detect --json .

You can whitelist exceptions, for example if your brand font happens to be Inter:

npx impeccable ignores add-value overused-font Inter --reason "Brand font"

Install (recommended route):

npx impeccable install

The installer detects your agent folders (~/.claude, ~/.codex, project .cursor and others), then asks whether to install per project or globally. Flags like --providers=claude,cursor --scope=project skip the prompts. On Claude Code you can also run /plugin marketplace add pbakaus/impeccable and then pick Impeccable from the /plugin menu.

Security: the difference that matters most

Frontend Design is markdown. There's nothing to execute, so the risk is close to zero.

Impeccable is different, and its README is upfront about it. Each skill copy ships a small launcher script that runs the Impeccable engine, a self-contained binary that either ships alongside it or downloads once into ~/.impeccable/bin/ on first run. The installer also adds a provider-native hook for the current project on Claude Code, Cursor, Codex, Copilot and Grok Build. Hooks run automatically on agent events, which is how Impeccable checks edits as they happen.

None of this is unusual for a tool of this scope, and the project is Apache-licensed and actively maintained (the last push was October 4, 2026). But you're trusting a downloaded binary and an auto-running hook, which is a different decision from trusting a text file. Before installing, open the hook manifest the installer writes and read what it triggers. Our skill audit checklist covers hooks and binaries specifically. On locked-down work machines, the Git submodule route lets your team pin a reviewed version:

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor

Can you run both?

You can, but you shouldn't, at least not in the same project. Both skills trigger on frontend work and both give the model style rules. Two sets of design opinions in context compete, and you'll get muddled output or wasted tokens. Pick one per project.

The one combination that does work: keep Frontend Design as your global skill and run only npx impeccable detect in CI. The detector doesn't touch your agent at all, so it acts as a neutral check on whatever the skill produced.

Which should you pick?

Choose Frontend Design if you build the occasional page, prototype or internal tool and just want Claude to stop producing the default look. It costs nothing, runs nothing, and the current version knows which clichés to avoid.

Choose Impeccable if you ship a real product, work on a team, or keep coming back to the same codebase. The PRODUCT.md memory and the command vocabulary pay off after the second or third session, and the detector turns "this looks AI-made" from a vibe into a failing check. I'd also pick it for anyone using several agents, since one install covers Claude Code, Cursor and Codex together.

My call for most readers of this site: start with Frontend Design today, and add the Impeccable detector to CI when you have something live. Move to the full Impeccable skill once you notice you're re-explaining your product to the agent every session. That's the exact problem it was built to solve.

For the wider picture, see our best agent skills for UX designers, the design-focused AI UI/UX tools roundup, and our full list of AI tools for UX designers.

FAQ

Is Impeccable based on Anthropic's frontend-design skill?

Yes. Impeccable's README says it started from Anthropic's frontend-design skill, then added project memory (PRODUCT.md and DESIGN.md), 24 commands, hooks and a deterministic detector with 61 rules.

Is Impeccable free?

Yes. It's open source under Apache 2.0. The detector runs locally with no LLM and no API key, so scans cost nothing beyond your own compute.

Does the Impeccable detector need Claude?

No. npx impeccable detect runs its deterministic rules without any AI model. You can point it at a folder, an HTML file or a live URL, and use --json for CI pipelines.

Is it safe to install Impeccable?

It's a reputable, actively maintained Apache-licensed project, but it runs code: a launcher, a downloaded engine binary and an auto-running hook. Read the hook manifest after installing, or vendor a reviewed version with the Git submodule method.

Should I use frontend-design and Impeccable together?

Not as two active skills in one project, since their style rules overlap and compete. A clean combination is Frontend Design as the skill plus Impeccable's standalone detector in CI.