Design System¶

impeccable is a suite of 21 design steering commands that give your AI agent production-grade UI standards. It prevents generic AI aesthetics: the kind of interface that screams "AI made this": by providing specific, actionable design direction at every level.

Based on @pbakaus/impeccable.

The AI slop test¶

Before using any impeccable command, apply this test:

If you showed this interface to someone and said "AI made this": would they believe you immediately?

If the answer is yes, that's the problem. /critique finds out exactly where. /polish fixes it.

Setup¶

Run this once per project before any UI work:

/teach-impeccable

This gathers your project's design context: brand, target audience, existing UI patterns: and saves persistent guidelines. All subsequent impeccable commands read these guidelines so advice is tailored to your project, not generic.

All 21 commands¶

Audit & Assessment¶

Quality & Polish¶

Visual Direction¶

Content & Copy¶

Performance & Resilience¶

Experience & Delight¶

Systems & Architecture¶

Typical usage flow¶

/teach-impeccable          # once per project

# During development
/audit                     # find issues
/colorize                  # add visual hierarchy
/clarify                   # fix the copy

# Before shipping
/harden                    # edge cases and resilience
/polish                    # final alignment and consistency
/critique                  # honest UX assessment

learnship integration¶

Automatic UI standards during execute-phase¶

When you run execute-phase on a phase that involves UI work, learnship automatically detects it and activates @impeccable frontend-design principles as execution guidance — before a single line of code is written.

UI detection triggers on plan keywords like component, page, layout, css, tailwind, design, theme, and frontend file patterns (.tsx, .jsx, .vue, .svelte).

You'll see this banner:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 learnship ► UI PHASE DETECTED — applying impeccable standards
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The agent then carries the frontend-design principles through every task in the phase: typography, color, layout, components, and the one memorable design decision that makes the UI intentional rather than generated.

For the best results, run /teach-impeccable once before your first UI phase so the agent has your project's specific design context.

Post-action milestone recommendation¶

After any impeccable action that produces recommendations (/audit, /critique, /polish, /normalize, etc.), the agent will always suggest:

▶ Run /new-milestone to create a dedicated "UI Polish" milestone.
  This turns recommendations into versioned phases with plans, commits,
  and verification — so nothing gets lost and every improvement is auditable.

This is a recommendation, not a requirement. You can apply improvements directly in the current session, use /decision-log to record what changed, or create a full milestone if the scope warrants it. The point is that impeccable findings don't disappear into chat history — they become traceable work.

Platform availability¶

Anti-patterns impeccable prevents¶

These are the most common signs of AI-generated UI that impeccable is specifically designed to eliminate:

• Aggressive blue primary color on everything with no hierarchy
• Cards with shadows everywhere regardless of elevation intent
• Form fields with excessive padding that wastes space
• Generic empty states that say "No data found" with a sad icon
• Animations that use ease-in-out for everything without matching the interaction type
• Color that decorates rather than communicates state or hierarchy
• Typography with no rhythm. Inconsistent line heights, arbitrary font sizes
• Mobile designs that are just desktop scaled down. No real touch target consideration

Run /critique to find these. Run the targeted commands to fix them.