Overview
Impeccable — Design Skill Overview
What it is
Impeccable is a Claude Code / cursor / Codex skill for frontend design quality by Philip Bakaus. It ships as a system prompt with 7 domain reference files and 23 named commands. Its core thesis: LLMs trained on the same SaaS templates produce the same handful of tells on every project unless given explicit design guidance. Impeccable provides that guidance.
Origin: Built on top of and extending Anthropic's official frontend-design skill.
The AI slop problem
Without explicit guidance, AI agents consistently default to:
- Inter for everything
- Purple-to-blue gradients
- Cards nested in cards
- Gray text on colored backgrounds
- Rounded-square icon tiles above every heading
- Medium blue primaries
- Near-white
#FAFAFAsurfaces - 6–8px uniform border radius across all components
These are not random errors — they are structural biases from training on a corpus dominated by generic SaaS templates. The problem is invisibility: the output is functionally correct and aesthetically unremarkable. It passes code review but fails design review.
7 domain reference files
The skill loads these reference files alongside every design command:
| Reference | Covers |
|---|---|
| typography | Type systems, font pairing, modular scales, OpenType features |
| color-and-contrast | OKLCH, tinted neutrals, dark mode, accessibility |
| spatial-design | Spacing systems, grids, visual hierarchy |
| motion-design | Easing curves, staggering, reduced motion |
| interaction-design | Forms, focus states, loading patterns |
| responsive-design | Mobile-first, fluid design, container queries |
| ux-writing | Button labels, error messages, empty states |
23 commands
The skill provides a shared design vocabulary via /impeccable [command]:
Planning: craft, teach, document, extract, shape
Review: critique, audit, polish
Adjustment: bolder, quieter, distill, harden, onboard
Specialized: animate, colorize, typeset, layout, delight, overdrive, clarify, adapt, optimize, live
Anti-pattern framework
Impeccable includes two layers of anti-pattern detection:
27 deterministic rules — Run without an LLM, catching specific measurable failures (use of a banned font, pure black as a surface token, opacity-derived container colors, etc.). Each rule is tied to specific design guidance.
12-rule LLM critique pass — Applied by the AI after generation, checking for second-order pattern failures (e.g., landing in a predictable aesthetic pocket even while technically avoiding first-order reflexes).
Key anti-patterns flagged
- Overused fonts: Arial, Inter, Roboto, system defaults
- Gray text on colored backgrounds
- Pure black or pure gray without tint
- Wrapping everything in cards or nesting cards inside cards
- Bounce/elastic easing (dated feel)
- Glassmorphism as a default rather than a deliberate choice
- Color-only state signaling (always pair with a second signal)
- Identical padding/radius/shadow across all card types
Register concept
Impeccable distinguishes two design registers:
- Brand register — Marketing, landing pages, campaigns. Design IS the product. Maximum expressive latitude.
- Product register — App UI, dashboards, tools. Design SERVES the product. Restraint and consistency over expression.
The active register is identified from the task context and determines which reference guidelines apply most strictly.
Relationship to Anthropic frontend-design
Impeccable explicitly extends Anthropic's frontend-design skill (adding 7 reference domains, 23 commands, and deterministic anti-pattern rules). Both share the core philosophy of anti-generic design and deliberate aesthetic direction, but Impeccable provides more scaffolding for ongoing projects via PRODUCT.md and DESIGN.md context files.