baekenough/impeccable-design

Purpose

Impeccable is a design language for producing intentional, production-grade UI. It defines a vocabulary of steering commands that guide an AI toward specific design dimensions — typography, color, motion, layout, and UX writing — while actively avoiding the generic patterns associated with AI-generated interfaces.

Commands

10 Selected Commands

| Command | Trigger phrases | Description | |---------|----------------|-------------| | critique | "review design", "UX feedback" | UX design review: hierarchy, clarity, emotional resonance, and intentionality across the interface | | audit | "design audit", "quality check" | Systematic quality checks across all design dimensions simultaneously | | typeset | "fix fonts", "typography" | Fix font choices, weight contrast, scale, line-height, tracking, and type pairing | | colorize | "add color", "color palette" | Introduce strategic color using OKLCH; construct tinted neutral palettes, avoid pure black/white | | animate | "add motion", "animation" | Add purposeful motion using the 100ms/300ms/500ms rule; eliminate decorative or distracting animation | | normalize | "align design system" | Align output with design system standards: spacing scales, token usage, component consistency | | polish | "final pass", "ship ready" | Pre-ship quality sweep across all design dimensions, including AI slop test | | clarify | "improve copy", "UX writing" | Improve UX copy: labels, microcopy, empty states, error messages, button specificity | | arrange | "fix layout", "spacing" | Fix layout structure, whitespace, alignment, and visual rhythm | | adapt | "responsive", "mobile" | Adapt design decisions for different devices, screen sizes, and input modes |

Command Detail

critique

Holistic UX review. Evaluates information hierarchy, interaction clarity, emotional resonance, and whether design decisions feel intentional. Surfaces both friction points and missed opportunities. Output: prioritized list of issues with impact level (critical / moderate / minor).

audit

Systematic multi-dimension check. Runs all other command lenses in sequence and produces a structured report. Use when you need a full picture before starting work. Output: dimension-by-dimension audit with specific findings.

typeset

Typography repair. Evaluates and fixes:

• Font family selection (avoid default Inter/Roboto/Arial without rationale)
• Type scale (use modular scale, not arbitrary pixel sizes)
• Weight contrast (body vs. heading vs. label differentiation)
• Line-height and measure (optimal reading width 60-75 chars)
• Letter-spacing for display vs. body contexts
• Font pairing coherence

colorize

Color strategy and implementation using OKLCH. Key principles:

• Build tinted neutrals (never pure gray — always a 5-10% hue push)
• Use OKLCH for perceptually uniform lightness steps
• Establish semantic color roles (primary, surface, on-surface, accent, destructive)
• Avoid pure black backgrounds; tint with brand hue at low chroma
• Check color relationships for harmony, not just individual values

animate

Motion design with purpose. Core rule — 100/300/500ms:

• 100ms: micro-interactions, state transitions (hover, focus, active)
• 300ms: element entrances, panel transitions, drawer opens
• 500ms: page transitions, complex sequence animations Avoid: bounce/elastic easing as decoration, animation on load without user trigger, looping animations in primary content areas. Use: ease-out for entrances, ease-in for exits, linear for progress/loading.

normalize

Design system alignment. Enforces:

• Spacing scale usage (4/8/12/16/24/32/48/64 or 4pt grid)
• Border radius consistency (choose a base radius, derive multiples)
• Shadow scale (0-3 elevation levels, not arbitrary per-component)
• Color token usage vs. hardcoded values
• Component variant consistency

polish

Pre-ship quality sweep. Runs: typeset + colorize + arrange + AI slop test + final coherence check. Output includes a ship-readiness verdict (ship / ship with minor fixes / needs work).

clarify

UX writing improvement. Targets:

• Button labels: specific verbs over generic ("Save changes" not "Submit")
• Empty states: explain what goes here + clear action to fill it
• Error messages: say what happened + what to do (not "An error occurred")
• Tooltips and help text: answer the user's actual question
• Confirmation dialogs: describe the consequence, not the action

arrange

Layout and spatial design. Fixes:

• Visual hierarchy via size, weight, and position
• Negative space: increase breathing room between unrelated groups
• Alignment: establish a clear grid baseline
• Proximity: group related elements, separate unrelated ones
• Visual rhythm: consistent incremental spacing within components

adapt

Responsive and cross-device adaptation:

• Mobile-first breakpoint strategy
• Touch target sizing (minimum 44x44px)
• Content reflow for narrow viewports
• Progressive disclosure for complex interfaces on mobile
• Pointer vs. touch interaction mode awareness

AI Slop Test

The AI Slop Test is a critical checkpoint embedded in every audit and polish command. It must also be run manually on any design output before declaring it complete.

The question: Would someone immediately identify this as AI-generated?

Patterns to Flag as AI Slop

Typography slop

• Inter, Roboto, or Arial as the default font with no intentional reason stated
• All text the same weight except headings
• Line-height exactly 1.5 applied universally regardless of font size

Color slop

• Pure black (#000000 or #0d0d0d) or pure gray (#f5f5f5, #e5e5e5) backgrounds without tinting
• One brand color on an otherwise completely neutral palette
• Blue-purple or coral-orange gradients with no contextual rationale

Layout slop

• Centered-everything layout that avoids making spatial decisions
• Identical card components with same border-radius, same shadow, and same padding stacked vertically
• Hero section: gradient blob behind centered heading + subheading + two buttons

Motion slop

• Bounce or elastic easing used as "delight" with no functional purpose
• Every element animates on page load with staggered delays
• Hover states that scale to 1.05 on every interactive element

Copy slop

• Empty states: "[Icon] No [items] yet. [Create button]"
• Error messages: "Something went wrong. Please try again."
• Buttons: "Submit", "Confirm", "OK"
• Tooltips: restate the label they're attached to

Slop Test Verdict

After running the test, assign one of:

• Clean: No slop patterns detected
• Mild slop: 1-2 patterns present, easy to fix
• Heavy slop: 3+ patterns, requires deliberate design work before ship

Role Separation

This skill operates in the aesthetic/creative layer. It does not replace technical compliance tooling.

| Design Aspect | impeccable-design (this skill) | web-design-guidelines | |---------------|-------------------------------|----------------------| | Typography | Font selection, pairing, type scale, expressive hierarchy | Minimum font sizes (16px body), contrast ratios | | Color | Palette building, OKLCH, tinted neutrals, emotional resonance | WCAG 2.1 AA/AAA contrast compliance | | Motion | Purposeful animation, easing curves, timing strategy, felt quality | prefers-reduced-motion compliance, no-animation-on-load | | Layout | Visual rhythm, spatial design, negative space, hierarchy | Accessibility, semantic HTML structure, ARIA landmarks | | Copy | Tone, clarity, specificity, label quality | (no overlap) |

When both apply: Run impeccable-design for aesthetic quality, then web-design-guidelines for compliance. They are complementary, not competing.

Reference Guides

• guides/impeccable-design/typography.md — type scale construction, font pairing strategy, hierarchy patterns
• guides/impeccable-design/color-and-contrast.md — OKLCH primer, tinted neutral construction, palette strategy
• guides/impeccable-design/motion-design.md — 100/300/500ms rule, easing reference, purposeful vs. decorative motion
• guides/impeccable-design/ux-writing.md — microcopy patterns, empty state templates, error message formulas

Execution Flow

1. Identify active command(s) from trigger phrase or explicit instruction
2. Read target component/page files
3. Consult relevant reference guides for the active command
4. Apply changes with explicit rationale for each decision
5. Run AI Slop Test on output
6. Report: changes made + slop test verdict + any deferred items