How Impeccable Turns AI‑Generated UI from Generic to Professional

Problem: Homogeneous AI‑generated UI

When prompting an AI to create a login page, the output often repeats the same pattern: Inter or system font, purple gradient background, gray text, nested cards, and bounce‑easing animations. The model defaults to the most frequent patterns in its training data, which are usually mediocre examples rather than vetted best practices.

What is Impeccable

Impeccable is a front‑end design‑focused Agent Skill that can be loaded into AI coding assistants such as Cursor, Claude Code, Gemini CLI, and others. It supplies a curated set of design references and anti‑pattern detection to raise the baseline quality of AI‑generated interfaces.

Core composition

├── 1 core skill (Agent Skill)
├── Full set of slash commands (init, audit, normalize, etc.)
├── 7 domain reference files
└── Anti‑pattern detection guide

Design domains

1️⃣ Typography

Provides font‑pairing guidance, a modular scale (e.g., 1.333 ratio), and OpenType feature recommendations. Example variables:

// Impeccable‑recommended fonts
--font-display: "Playfair Display", serif;
--font-body: "Source Sans Pro", sans-serif;
--scale-ratio: 1.333;

2️⃣ Color & Contrast

Advocates the OKLCH color space, chromatic neutrals, proper dark‑mode handling, and WCAG contrast compliance. Example variables:

// Impeccable‑recommended neutrals
--gray-500: oklch(55% 0.02 260); /* bluish gray */
--black: oklch(15% 0.02 260);   /* bluish black */

3️⃣ Spatial design

Defines a spacing system from 4 px to 64 px and a flexible grid. Example variables:

--space-1: 0.25rem;   /* 4 px */
--space-2: 0.5rem;    /* 8 px */
--space-3: 0.75rem;   /* 12 px */
--space-4: 1rem;      /* 16 px */
--space-5: 1.5rem;    /* 24 px */
--space-6: 2rem;      /* 32 px */
--space-7: 3rem;      /* 48 px */
--space-8: 4rem;      /* 64 px */

4️⃣ Motion design

Uses purposeful easing curves and staggered animations while respecting prefers-reduced-motion. Example:

--ease-out-expo: cubic-bezier(0.16,1,0.3,1);
.item { animation: fade-in 0.4s var(--ease-out-expo) backwards; }
.item:nth-child(1) { animation-delay: 0.05s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.15s; }

5️⃣ Interaction design

Covers form labeling, visible focus states, and loading patterns such as skeleton screens, progress bars, and optimistic UI.

6️⃣ Responsive design

Promotes fluid typography with clamp(), container queries, and content‑driven breakpoints. Example:

--font-size-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
@container (min-width: 400px) { .card { display: flex; } }

7️⃣ UX writing

Guidelines for button labels (verb‑first), error messages (problem + solution), and empty‑state copy (guiding next action).

Slash commands

/impeccable teach

– one‑time setup that collects design context; run on first use. /impeccable craft – full component construction flow from scratch. /impeccable extract – extracts reusable components and design tokens for a design system. /audit – technical quality check (accessibility, performance, responsiveness). /critique – UX design review. /normalize – aligns styles to a design system, consolidates tokens and component patterns. /polish – final review before release. /distill – removes redundant code. /clarify – improves unclear UX copy. /optimize – performance optimization. /harden – adds robust error handling and boundary checks. /animate – adds purposeful motion. /colorize – introduces strategic color choices. /bolder – amplifies a bland design. /quieter – tones down an overly bold design. /delight – adds micro‑interactions for pleasant moments. /adapt – adapts layout for different devices. /typeset – fixes typography hierarchy. /layout – repairs layout and visual rhythm. /overdrive – adds technically advanced effects.

Installation

Two methods:

Download the ZIP from https://impeccable.style (recommended).

Copy the appropriate dist/ folder from the GitHub repository https://github.com/pbakaus/impeccable into the tool’s configuration directory.

Example for Cursor: cp -r dist/cursor/.cursor your-project/ Example for Claude Code (project‑level): cp -r dist/claude-code/.claude your-project/ Example for Gemini CLI:

cp -r dist/gemini/.gemini your-project/

CLI anti‑pattern detector

Install and run with: npx impeccable detect <target> Typical usage:

# Scan a directory
npx impeccable detect src/
# Scan a single file
npx impeccable detect index.html
# Scan a live URL
npx impeccable detect https://example.com
# Fast JSON mode (suitable for CI)
npx impeccable detect --fast --json .

Detected anti‑patterns include:

Overused fonts such as Inter, Arial, or system defaults.

Low‑contrast gray text on colored backgrounds.

Pure black or pure gray without hue.

Excessive card nesting.

Bounce‑easing animations that feel outdated.

Practical cases

Case 1: Audit & optimize a blog page

# Run audit
/audit blog
# AI reports issues (contrast, missing focus, missing alt attributes)
# Apply fixes generated by AI
/polish blog

Case 2: Design an e‑commerce checkout flow

# UX review
/critique checkout flow
# Harden error handling
/harden checkout
# Add micro‑interactions
/delight checkout

Case 3: Full workflow for a project

/audit /normalize /polish blog
/critique /harden checkout

Case 4: Rescue a bland design

/bolder landing-page
/colorize landing-page
/animate landing-page
# To revert:
/quieter landing-page
/distill landing-page

Best‑practice workflow

Run /impeccable teach at project start to feed design preferences.

Integrate /audit into the development pipeline, followed by /normalize and /polish before release.

Combine commands into pipelines, e.g., /critique /clarify /delight checkout or /audit /optimize /harden dashboard.

Run the CLI detector in CI with npx impeccable detect --fast --json src/ to catch design debt early.

Resources

GitHub repository: https://github.com/pbakaus/impeccable Official website: https://impeccable.style Documentation:

https://impeccable.style/docs