<- all tokdocs

Impeccable: The Open Source Design Skill That Makes Claude Code Build Beautiful UIs

Watch on TikTok

View on TikTok ->

If you are using Claude Code for front-end work and your UI output looks mediocre, you need Impeccable. It is an open-source GitHub repo that gives Claude Code a single skill containing 23 commands across 7 design domains -- typography, spatial design, color and contrast, motion design, interaction design, responsive design, and UX writing. The result is dramatically better web page output without switching tools or learning a design system manually.

What Impeccable Does

Impeccable is a comprehensive design skill that teaches Claude Code how to make good web pages. Instead of relying on Claude's general knowledge of CSS and layout, the skill provides specific, domain-expert-level commands that can nail down individual components of your design. It covers everything from type systems and font pairing to spatial hierarchy, OKLCH color management, and button label copy.

The Impeccable repo page on GitHub showing the skill structure with 7 domain-specific references and 23 commands

Seven Design Domains

The skill breaks design expertise into seven distinct domains, each with its own set of commands:

  • Typography: Type systems, font pairing, modular scales, OpenType features
  • Color and Contrast: OKLCH color space, tinted neutrals, dark mode, accessibility
  • Spatial Design: Spacing systems, grids, visual hierarchy
  • Motion Design: Easing curves, staggering, reduced motion preferences
  • Interaction Design: Forms, focus states, loading patterns
  • Responsive Design: Mobile-first approaches, fluid design, container queries
  • UX Writing: Button labels, error messages, empty states

Before and After

The Impeccable website includes a companion site that shows exactly what each command does, with before-and-after graphics comparing standard Claude Code output to Impeccable-enhanced output. The difference is visible and significant -- the kind of gap between a developer prototype and a design-reviewed production page.

The Impeccable website showing performance optimization metrics and before-after design comparisons

Key Takeaways

  • Impeccable is a single Claude Code skill that contains 23 design commands across 7 domains
  • It transforms Claude Code's front-end output from developer-grade to design-grade
  • The skill covers the full spectrum from typography to UX writing to responsive design
  • A companion website shows before-and-after comparisons for each command
  • It is open source and free to use

Resources

Published May 12, 2026. Writeup generated from a favorited TikTok.