Skip to main content
Impeccable provides 17 specialized commands that guide Claude toward exceptional frontend design. Each command has a specific purpose and can be used independently or as part of a design workflow.

​
Quick Reference

/teach-impeccable

One-time setup to gather design context

/audit

Run comprehensive quality checks

/critique

Get UX design review and feedback

/normalize

Align with design system standards

/polish

Final pass before shipping

/distill

Strip to essence and remove complexity

/clarify

Improve unclear UX copy

/optimize

Improve performance and speed

/harden

Handle errors and edge cases

/animate

Add purposeful motion

/colorize

Introduce strategic color

/bolder

Amplify boring designs

/quieter

Tone down overly bold designs

/delight

Add moments of joy

/extract

Pull into reusable components

/adapt

Adapt for different devices

/onboard

Design onboarding flows

​
Complete Command Reference

​
Setup & Planning

​
/teach-impeccable

Purpose: One-time setup that gathers design context for your project and saves it to your AI config file. When to use:
  • First time using Impeccable on a project
  • Starting a new project that needs design guidelines
  • Establishing persistent design context for all future sessions
What it does:
  1. Explores your codebase to understand existing design patterns
  2. Asks targeted questions about users, brand, and aesthetic preferences
  3. Creates a “Design Context” section in your config file
  4. Establishes design principles that guide all future work
Example: 
/teach-impeccable
Syntax: Codex CLI uses /prompts:teach-impeccable

​
Quality Assurance

​
/audit

Purpose: Run comprehensive quality checks across accessibility, performance, theming, and responsive design. When to use:
  • Before major releases or deployments
  • After implementing new features
  • When you suspect quality issues but aren’t sure what they are
  • As part of regular quality reviews
What it checks:
  • Accessibility: Contrast ratios, ARIA labels, keyboard navigation, semantic HTML
  • Performance: Layout thrashing, expensive animations, bundle size
  • Theming: Hard-coded colors, dark mode issues, token consistency
  • Responsive: Fixed widths, touch targets, horizontal scroll
  • Anti-patterns: AI slop detection, generic design patterns
Output: Detailed report with severity ratings, impact analysis, and suggested commands for fixes. Example: 
/audit              # Audit entire interface
/audit header       # Audit specific area
Syntax: Codex CLI uses /prompts:audit 
## Anti-Patterns Verdict
Pass/Fail with specific tells from AI slop detection

## Executive Summary
- Total issues: 23 (3 Critical, 8 High, 9 Medium, 3 Low)
- Most critical: Missing alt text on hero images
- Recommended: Run /normalize for theming issues

## Critical Issues
1. Hero image missing alt text (WCAG A violation)
   - Impact: Screen reader users can't access content
   - Fix: Add descriptive alt text
   - Command: /harden

​
/critique

Purpose: Evaluate design effectiveness from a UX perspective with actionable feedback. When to use:
  • After completing initial designs
  • When designs feel “off” but you can’t pinpoint why
  • Before presenting designs to stakeholders
  • When you want honest feedback on visual hierarchy and emotional resonance
What it evaluates:
  • AI slop detection (most important)
  • Visual hierarchy and information flow
  • Information architecture and navigation
  • Emotional resonance and brand alignment
  • Discoverability and affordance
  • Composition and balance
  • Typography as communication
  • Color with purpose
Output: Design director-style feedback with specific issues prioritized by impact. Example: 
/critique                    # Critique entire interface
/critique checkout-form      # Critique specific feature
Syntax: Codex CLI uses /prompts:critique

​
Consistency & Standards

​
/normalize

Purpose: Align designs with your design system standards and ensure consistency. When to use:
  • After adding new features that don’t match existing patterns
  • When migrating to a new design system
  • When designs have drifted from standards over time
  • After bringing in external code or components
What it normalizes:
  • Typography: Fonts, sizes, weights, line heights
  • Color & theme: Design tokens, palette consistency
  • Spacing & layout: Spacing scale, grid alignment
  • Components: Replace custom implementations with design system versions
  • Motion & interaction: Animation timing and patterns
  • Responsive behavior: Breakpoints and responsive patterns
Example: 
/normalize                  # Normalize entire interface
/normalize dashboard        # Normalize specific feature
Syntax: Codex CLI uses /prompts:normalize

​
/polish

Purpose: Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues. When to use:
  • Right before shipping or deploying
  • After all features are functionally complete
  • When designs are “good” but need to be “great”
  • As the last step in your workflow
What it polishes:
  • Visual alignment: Pixel-perfect alignment, consistent spacing
  • Typography: Hierarchy consistency, line length, kerning
  • Color & contrast: WCAG compliance, token usage, tinted neutrals
  • Interaction states: All states implemented (hover, focus, active, disabled, loading, error, success)
  • Micro-interactions: Smooth transitions, consistent easing
  • Content & copy: Consistent terminology and capitalization
  • Icons & images: Consistent style, proper alignment, alt text
  • Forms & inputs: Proper labels, validation, tab order
  • Edge cases: Loading, empty, error, and success states
  • Code quality: Remove console logs, unused imports, commented code
Example: 
/polish                    # Polish entire interface
/polish checkout-form      # Polish specific area
Syntax: Codex CLI uses /prompts:polish
The polish command works through a comprehensive checklist:
  • ☐ Visual alignment perfect at all breakpoints
  • ☐ Spacing uses design tokens consistently
  • ☐ Typography hierarchy consistent
  • ☐ All interactive states implemented
  • ☐ All transitions smooth (60fps)
  • ☐ Contrast ratios meet WCAG AA
  • ☐ Keyboard navigation works
  • ☐ No console errors or warnings
  • ☐ No layout shift on load

​
Simplification & Clarity

​
/distill

Purpose: Strip designs to their essence by removing unnecessary complexity. When to use:
  • When interfaces feel cluttered or overwhelming
  • After feature creep has added too much
  • When user feedback indicates confusion
  • When you want to reveal the essential elements
What it removes:
  • Unnecessary elements and visual noise
  • Excessive variation in colors, fonts, and styles
  • Redundant information and duplicate content
  • Unnecessary borders, shadows, and decorations
  • Confusing hierarchy and competing actions
Approach:
  • Identifies the ONE primary user goal
  • Removes or hides everything not essential
  • Uses progressive disclosure for complexity
  • Consolidates related actions and content
Example: 
/distill                  # Simplify entire interface
/distill settings-page    # Simplify specific area
Syntax: Codex CLI uses /prompts:distill
/distill requires understanding target audience and use cases. The command will ask clarifying questions if it can’t infer context from the codebase.

​
/clarify

Purpose: Improve unclear UX copy, error messages, microcopy, labels, and instructions. When to use:
  • When users report confusion about interface text
  • After support tickets reveal unclear messaging
  • When error messages aren’t helpful
  • During content audits
What it improves:
  • Error messages: Explain what went wrong and how to fix it
  • Form labels: Clear, specific labels and instructions
  • Button & CTA text: Specific action descriptions
  • Help text: Add value beyond repeating labels
  • Empty states: Guide users toward action
  • Success messages: Confirm what happened and what’s next
  • Loading states: Set expectations for wait times
  • Confirmation dialogs: State specific action and consequences
Principles:
  • Be specific, concise, and active
  • Write like explaining to a smart friend
  • No jargon without explanation
  • Don’t blame users for errors
Example: 
/clarify                  # Improve all copy
/clarify error-messages   # Focus on specific area
Syntax: Codex CLI uses /prompts:clarify

​
Performance & Resilience

​
/optimize

Purpose: Improve interface performance across loading speed, rendering, animations, and bundle size. When to use:
  • When Lighthouse scores are below targets
  • After user feedback about slow performance
  • Before major launches or traffic spikes
  • When adding heavy features or dependencies
What it optimizes:
  • Loading: Images, JavaScript bundles, CSS, fonts
  • Rendering: Layout thrashing, paint/composite, DOM size
  • Animations: GPU acceleration, 60fps performance
  • Network: Request count, API optimization, compression
  • Core Web Vitals: LCP, FID/INP, CLS improvements
Approach:
  • Measures before and after
  • Targets biggest bottlenecks first
  • Tests on real devices with real network conditions
Example: 
/optimize               # Optimize entire interface
/optimize dashboard     # Optimize specific area
Syntax: Codex CLI uses /prompts:optimize

​
/harden

Purpose: Improve interface resilience through error handling, i18n, text overflow, and edge case management. When to use:
  • Before production deployments
  • When preparing for international markets
  • After discovering edge case bugs
  • When designs only work with perfect data
What it hardens:
  • Text overflow: Long names, descriptions, titles
  • Internationalization: Translation expansion, RTL support, character sets
  • Error handling: Network failures, API errors, validation errors
  • Edge cases: Empty states, loading states, large datasets
  • Input validation: Client and server-side validation
  • Accessibility: Keyboard nav, screen readers, reduced motion
Example: 
/harden                 # Harden entire interface
/harden user-profile    # Harden specific feature
Syntax: Codex CLI uses /prompts:harden

​
Visual Enhancement

​
/animate

Purpose: Add purposeful animations, micro-interactions, and motion effects that improve usability. When to use:
  • When interfaces feel static or lifeless
  • To provide feedback for user actions
  • To guide attention and explain behavior
  • To add delight and personality
What it animates:
  • Entrance animations: Page load choreography, staggered reveals
  • Micro-interactions: Button feedback, form interactions, toggles
  • State transitions: Show/hide, expand/collapse, loading states
  • Navigation: Page transitions, tab switching, scroll effects
  • Feedback: Hover hints, drag & drop, copy confirmations
Technical approach:
  • Uses exponential easing (ease-out-quart/quint/expo)
  • GPU-accelerated with transform and opacity
  • Respects prefers-reduced-motion
  • Targets 60fps performance
Example: 
/animate              # Add animations throughout
/animate hero-section # Animate specific area
Syntax: Codex CLI uses /prompts:animate
Never use bounce or elastic easing - they feel dated. Always respect prefers-reduced-motion for accessibility.

​
/colorize

Purpose: Add strategic color to features that are too monochromatic or lack visual interest. When to use:
  • When interfaces are pure grayscale or lack warmth
  • To add personality and emotional tone
  • To improve hierarchy and wayfinding
  • To encode meaning through semantic color
What it colorizes:
  • Semantic color: Success, error, warning, info states
  • Accent colors: Primary actions, links, icons, headers
  • Backgrounds: Tinted neutrals, colored sections, gradients
  • Data visualization: Charts, graphs, heatmaps
  • Borders & accents: Colored borders, underlines, dividers
Principles:
  • Choose 2-4 colors max beyond neutrals
  • 60/30/10 rule (dominant/secondary/accent)
  • Maintain WCAG contrast ratios
  • Never use gray text on colored backgrounds
  • Always tint neutrals (no pure gray or pure black)
Example: 
/colorize               # Add color throughout
/colorize dashboard     # Colorize specific area
Syntax: Codex CLI uses /prompts:colorize

​
/bolder

Purpose: Amplify safe or boring designs to make them more visually interesting and memorable. When to use:
  • When designs are too safe or generic
  • When interfaces lack personality or impact
  • When you need to stand out from competitors
  • When brand allows for more creative expression
What it amplifies:
  • Typography: Replace generic fonts, extreme scale, weight contrast
  • Color: Increase saturation, bold palettes, sharp accents
  • Spatial drama: Extreme scale jumps, asymmetric layouts, generous space
  • Visual effects: Dramatic shadows, background treatments, custom elements
  • Motion: Entrance choreography, scroll effects, micro-interactions
Example: 
/bolder               # Make entire interface bolder
/bolder landing-page  # Amplify specific area
Syntax: Codex CLI uses /prompts:bolder
AI Slop Trap: When making things “bolder,” avoid cyan/purple gradients, glassmorphism, and neon accents on dark backgrounds. These are generic AI defaults. The command includes explicit anti-pattern checks.

​
/quieter

Purpose: Tone down overly bold or overwhelming designs while maintaining visual interest. When to use:
  • When designs are too loud or overwhelming
  • When user feedback indicates visual fatigue
  • When moving from marketing to product interface
  • When brand calls for more refined aesthetic
What it quiets:
  • Reduce color saturation and palette size
  • Simplify typography and reduce extreme scale
  • Remove excessive effects and decorations
  • Calm motion and reduce animation intensity
  • Increase whitespace and breathing room
Example: 
/quieter              # Tone down entire interface
/quieter hero-section # Quiet specific area
Syntax: Codex CLI uses /prompts:quieter

​
User Experience

​
/delight

Purpose: Add moments of joy, personality, and unexpected touches that make interfaces memorable. When to use:
  • When interfaces are functional but joyless
  • To differentiate from competitors
  • To improve user engagement and satisfaction
  • When brand personality allows for playfulness
What it adds:
  • Micro-interactions: Satisfying button presses, hover surprises
  • Personality in copy: Playful errors, encouraging empty states
  • Illustrations: Custom illustrations, animated icons
  • Satisfying interactions: Drag & drop, toggles, progress celebrations
  • Easter eggs: Hidden discoveries, seasonal touches
  • Celebration moments: Success animations, milestone recognition
Principles:
  • Delight amplifies, never blocks
  • Surprise and discovery over announcement
  • Appropriate to context and emotional moment
  • Remains fresh with repeated use
Example: 
/delight              # Add delight throughout
/delight onboarding   # Focus on specific area
Syntax: Codex CLI uses /prompts:delight

​
Component & Code

​
/extract

Purpose: Pull repeated patterns into reusable components, improving maintainability and consistency. When to use:
  • When you notice repeated UI patterns
  • During code reviews that flag duplication
  • When scaling design system
  • As part of refactoring efforts
What it extracts:
  • Repeated UI patterns into components
  • Common styles into shared utilities
  • Design tokens from hard-coded values
  • Layout patterns into reusable templates
Example: 
/extract              # Identify and extract patterns
/extract card-layouts # Focus on specific pattern
Syntax: Codex CLI uses /prompts:extract

​
Responsive & Adaptive

​
/adapt

Purpose: Adapt interfaces for different devices, screen sizes, and contexts. When to use:
  • When designs only work on desktop
  • Before mobile launch
  • When user analytics show poor mobile experience
  • When creating responsive layouts
What it adapts:
  • Mobile-first responsive layouts
  • Touch target sizes (44x44px minimum)
  • Navigation patterns for small screens
  • Content hierarchy for different viewports
  • Performance for mobile devices
  • Input methods (touch vs mouse)
Example: 
/adapt                # Adapt entire interface
/adapt navigation     # Adapt specific component
Syntax: Codex CLI uses /prompts:adapt

​
/onboard

Purpose: Design effective onboarding flows that help users get started and discover value. When to use:
  • When creating new product experiences
  • When user activation rates are low
  • When users don’t understand how to get started
  • When adding complex features that need explanation
What it designs:
  • First-time user experiences
  • Progressive disclosure of features
  • Empty states that teach
  • Tooltips and guided tours
  • Success moments and celebrations
Example: 
/onboard              # Design complete onboarding
/onboard dashboard    # Onboard specific feature
Syntax: Codex CLI uses /prompts:onboard

​
Command Combinations

Commands work well in sequence. Here are recommended workflows:

​
Quality Workflow

/audit          # Find all issues
/normalize      # Fix design system inconsistencies
/harden         # Handle edge cases
/polish         # Final pass before shipping

​
Design Enhancement Workflow

/critique       # Get design feedback
/distill        # Simplify complexity
/colorize       # Add strategic color
/animate        # Add purposeful motion
/polish         # Final refinement

​
Performance Workflow

/audit          # Identify performance issues
/optimize       # Fix bottlenecks
/harden         # Ensure resilience
/polish         # Final checks

​
New Project Workflow

/teach-impeccable  # Setup design context (one-time)
/critique          # Review initial designs
/normalize         # Ensure consistency
/animate           # Add interactions
/audit             # Quality check
/polish            # Final pass

​
Tips for Using Commands

Focus on specific areas: Most commands accept an optional argument to focus on a specific feature, component, or area. This provides more targeted results.Example: /audit checkout-form instead of just /audit
Run /teach-impeccable first: This one-time setup command establishes design context that makes all other commands more effective.
Don’t skip /audit: Running /audit before polishing helps you understand what needs fixing and prevents wasted effort.
Polish last: /polish should always be the final step after functionality is complete. Polishing incomplete features wastes time.
Combine complementary commands: Use /distill to simplify, then /polish to refine. Use /colorize and /animate together for visual enhancement.

​
Next Steps

Customization Guide

Learn how to customize commands and add project context

Best Practices

When to use which commands and workflow recommendations

Build docs developers (and LLMs) love

Get started for freeTalk to us