What is Impeccable? Design Skills for AI-Powered Development Tools

Mar 20, 2026

Problem

I kept seeing the same patterns in AI-generated frontend code. Every time I asked Claude or Cursor to build a UI, I got the same predictable output:

Inter font everywhere
Purple-to-blue gradients
Cards nested inside cards
Glassmorphism effects
Gray text on colored backgrounds

It didn’t matter which AI tool I used. Claude, Cursor, Gemini CLI - they all produced the same generic “AI slop” aesthetics.

The problem wasn’t the AI. The problem was I didn’t have the vocabulary to tell it what I actually wanted. I’d say “make it look modern” or “add some polish,” and the AI would apply the same default patterns it learned from thousands of generic templates.

What happened?

I found Impeccable, a cross-provider design skill library that gives you explicit commands to steer AI tools away from their default design choices.

The repository describes itself as “the vocabulary you didn’t know you needed.” That clicked for me. I had been trying to guide AI designs with vague adjectives. Impeccable gives you specific commands that produce specific outcomes.

1 design skill (frontend-design)
7 domain-specific reference files
20 steering commands
Curated anti-patterns

The key insight: every LLM learned from the same training data. Without explicit guidance, they produce the same predictable mistakes. Impeccable builds on Anthropic’s frontend-design skill with deeper expertise and more control.

How to use it

Impeccable works across multiple AI tools:

Cursor
Claude Code
Gemini CLI
Codex CLI
OpenCode
Pi
Kiro
VS Code Copilot

The core is the frontend-design skill with 7 reference files covering different design domains:

Typography
Color
Spatial
Motion
Interaction
Responsive
UX Writing

But the real power comes from the 20 steering commands. Instead of saying “make it better,” you use specific commands that tell the AI exactly what to fix.

The steering commands that changed my workflow

I tested the commands on a generic AI-generated dashboard. Here’s what each command does:

Audit - Reviews the entire design for anti-patterns:

Checking for anti-patterns:
[!] Inter font detected - suggest alternative
[!] Purple gradient on hero section
[!] Nested cards (3 levels deep)
[!] Gray text (#6b7280) on blue background - contrast issue

Critique - Provides specific improvement suggestions:

1. The gradient is too aggressive - soften to 10% opacity
2. Card shadows are inconsistent - standardize to 0 4px 6px
3. Line height is tight at 1.4 - bump to 1.6 for readability
4. Border radius varies between 4px and 12px - pick one

Normalize - Makes inconsistent choices consistent:

Standardizing design tokens:
- Border radius: 8px (was 4px/12px mixed)
- Shadows: single elevation system
- Spacing: 4px base unit throughout
- Font weights: 400/500/700 only

Polish - Adds finishing touches:

Applying polish:
+ Added hover transitions (150ms ease)
+ Improved focus states for accessibility
+ Refined spacing on mobile breakpoints
+ Added subtle loading skeletons

Distill - Simplifies complex layouts:

Reduced visual complexity:
- Removed 2 decorative elements
- Collapsed 3 card variants to 1
- Simplified color palette from 12 to 6 colors

The other commands follow the same pattern - specific, actionable, and targeted:

Animate - Add purposeful motion
Optimize - Improve performance
Harden - Increase reliability
Bolder - Strengthen visual hierarchy
Quieter - Reduce visual noise
Delight - Add memorable moments

Why anti-patterns matter more than patterns

Impeccable doesn’t just tell you what to do. It explicitly lists what NOT to do.

The anti-patterns list is specific and brutal:

Inter font as default
Purple-to-blue gradients
Glassmorphism
Cards in cards in cards
Gray text on colored backgrounds
Oversized hero sections
Unnecessary decorative blobs
Generic "tech" illustrations

These anti-patterns exist because AI tools default to them. They’re not wrong choices individually. But when every AI-generated interface uses the same patterns, your product looks like every other AI-generated product.

I think the key reason this works is that negative constraints are easier to follow than positive suggestions. Telling an AI “make it distinctive” produces unpredictable results. Telling it “no purple gradients, no Inter font, no glassmorphism” forces it to find alternatives.

A real example

I asked Cursor to build a settings page. Without Impeccable:

<div className="bg-gradient-to-br from-purple-500 to-blue-600 p-8">
  <Card className="bg-white/10 backdrop-blur-lg">
    <Card className="p-6">
      <p className="text-gray-500">Account Settings</p>
      {/* ... */}
    </Card>
  </Card>
</div>

Purple gradient. Glassmorphism. Nested cards. Gray text.

With the audit and normalize commands applied:

<div className="bg-slate-50 p-8">
  <div className="bg-white rounded-lg shadow-sm p-6 border border-slate-200">
    <h1 className="text-slate-900 font-medium">Account Settings</h1>
    {/* ... */}
  </div>
</div>

Subtle background. Single card. Proper contrast. The design feels intentional instead of generated.

Why this matters

As AI-assisted development becomes standard, the difference between generic AI output and distinctive design becomes a competitive advantage.

Think about it this way: if everyone uses the same AI tools with the same defaults, everyone gets the same output. Impeccable gives you the vocabulary to break out of that homogeneity.

The 20 steering commands let you iterate on AI-generated designs with precision. Instead of asking the AI to “try again” and hoping for better results, you apply specific fixes to specific problems.

Getting started

To use Impeccable:

Clone or download the repository
Copy the frontend-design skill to your AI tool’s skills directory
Reference the skill in your prompts or CLAUDE.md file

For Claude Code specifically:

When building UIs, use the frontend-design skill.
Before finalizing any design, run audit and critique commands.
Avoid anti-patterns: Inter font, purple gradients, glassmorphism, nested cards.

The cross-provider support means you can use the same vocabulary whether you’re in Cursor, Claude Code, or VS Code Copilot. Your design vocabulary becomes portable across tools.

Summary

Impeccable gives developers the vocabulary to guide AI tools toward distinctive, production-grade designs instead of generic AI aesthetics. The 20 steering commands (audit, critique, normalize, polish, distill, animate, optimize, harden, bolder, quieter, delight, and more) let you make targeted improvements instead of hoping for better random output.

The explicit anti-patterns list matters more than positive suggestions. Negative constraints force AI tools to find alternatives rather than defaulting to the same patterns everyone else gets.

I now run audit and critique on every AI-generated UI before shipping. The extra 30 seconds of iteration turns generic output into something that feels designed, not generated.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

👨‍💻 Impeccable GitHub Repository
👨‍💻 Anthropic Frontend Design Skill

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!