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

Mar 20, 2026

The AI-generated UI looked fine at first glance. Clean typography. Modern gradient. Subtle shadows. Then I saw the fifth project in a row using the exact same aesthetic—Inter font, purple-to-blue gradient, glassmorphism cards, and that distinctive gray-on-colored-background text.

This is the “AI slop” problem. And it’s frustrating.

The Problem: AI Has a Design Signature

LLMs learned frontend design from the same training data. They converge on similar visual patterns because those patterns dominate modern web design:

Common AI Design Tells:
├── Typography: Inter font (the default)
├── Colors: Purple-to-blue gradients
├── Effects: Glassmorphism, nested cards
├── Text: Gray text on colored backgrounds
└── Layout: Centered hero + card grid

I’ve seen it in Claude-generated interfaces. Cursor outputs. Even production apps shipped with these tells.

The real issue? Most developers don’t notice until they compare multiple AI-generated projects side by side. Then it becomes obvious.

What Impeccable Does

Impeccable is a design skill library that works across AI coding tools. It provides explicit design guidance to break the AI out of its default patterns.

Impeccable Components:
├── 1 Design Skill: frontend-design
│   └── 7 Reference Files
│       ├── typography.md
│       ├── color.md
│       ├── spatial.md
│       ├── motion.md
│       ├── interaction.md
│       ├── responsive.md
│       └── ux-writing.md
├── 20 Steering Commands
│   ├── audit, critique, normalize
│   ├── polish, distill, animate
│   ├── optimize, harden, bolder
│   ├── quieter, delight, ...
│   └── (and more)
└── Curated Anti-Patterns

The skill installs into your AI tool’s context, giving it access to domain-specific design knowledge that overrides default behavior.

Cross-Provider Support

This is what makes Impeccable different from tool-specific extensions:

Supported AI Tools:
├── Claude Code
├── Cursor
├── Gemini CLI
├── Codex CLI
├── OpenCode
├── Pi
├── Kiro
└── VS Code Copilot

Write the skill once, use it everywhere.

The Steering Commands

This is where Impeccable gets practical. Instead of vaguely asking the AI to “make it look better,” you have specific commands:

Audit Commands:

/audit - Scan for anti-patterns
/critique - Get detailed feedback on design choices

Transformation Commands:

/normalize - Standardize design tokens
/polish - Refine visual details
/distill - Reduce visual complexity
/animate - Add purposeful motion

Directional Commands:

/bolder - Increase visual impact
/quieter - Reduce visual noise
/delight - Add subtle interactions

I tested /audit on a recent Claude-generated dashboard:

Before /audit:
├── Found: Inter font (anti-pattern)
├── Found: Purple-blue gradient (anti-pattern)
├── Found: Gray text on purple (contrast issue)
└── Found: Generic card layout

After /polish /bolder:
├── Replaced Inter with system font stack
├── Shifted to warm neutrals + single accent
├── Fixed contrast ratios
└── Added visual hierarchy with size/space

The commands work as a vocabulary for steering the AI toward better design decisions.

Anti-Patterns: The “Don’t” List

Impeccable includes explicit guidance on what NOT to do. This matters because LLMs often need negative examples to avoid patterns:

Common Anti-Patterns:
├── Using Inter as the default font
├── Purple-to-blue gradients everywhere
├── Glassmorphism without purpose
├── Nested card containers
├── Gray text on colored backgrounds
├── Overusing rounded corners
└── Generic hero + card grid layouts

Knowing what to avoid is half the battle.

How It Works

When you install Impeccable, it adds design knowledge to your AI tool’s context:

Skill Definition - The frontend-design skill with its reference files
Reference Files - Domain-specific knowledge for typography, color, spatial, motion, interaction, responsive, and UX writing
Commands - The 20 steering commands you can invoke
Anti-Patterns - The curated list of common AI design mistakes

The AI then has explicit guidance to reference when generating or reviewing code.

When to Use It

Impeccable helps in three scenarios:

Before Generation - Load the skill, get better first drafts
During Review - Use /audit to catch AI tells
After Production - /polish and /critique for refinement

I’ve found it most useful during code review. Running /audit on AI-generated UI catches problems I might miss on first glance.

The Bigger Picture

This is part of a larger trend: skills and context as the new interface for AI coding tools. Instead of prompting from scratch each time, you install capabilities that persist across sessions.

Impeccable demonstrates how domain expertise (design) can be packaged and shared across AI tools. The same pattern could apply to security, performance, accessibility—any domain where AI tools have predictable weaknesses.

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:

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