ux-pilot

Your UX co-pilot — from idea to validated flow, in your terminal.

Install  ·  How it works  ·  Rules  ·  Try the demo  ·  Landing page

A Claude Code plugin that acts as a senior UX designer. It doesn't generate code blindly — it understands your product, challenges your choices, shows you the result in a live browser preview, and helps you iterate until the flow is validated.

Why ux-pilot?

Every AI tool generates the same generic output: Inter font, purple gradient on white, centered hero, done. ux-pilot exists to fix this.

Instead of jumping straight to code, it runs a structured discovery flow — asks about your product, users, and goals — then applies the right rules from 376 UX rules sourced from WCAG 2.1, Nielsen Norman Group, and Laws of UX.

What makes it different

Installation

# Step 1 — Add from marketplace
/plugin marketplace add Sakaax/ux-pilot

# Step 2 — Install the skill
/plugin install ux-pilot@ux-pilot

No API keys. No subscription. Free and open source.

Usage

/ux-pilot              # Full flow (Discovery -> Audit -> Preview -> Export)
/ux-pilot audit        # Scan existing code for UX issues
/ux-pilot preview      # Jump to preview server
/ux-pilot export       # Generate UX spec + components

4 Phases

1. Discovery

The plugin asks you questions one at a time (ABCD choices + free text). It understands your product, users, business model, flows, design preferences, and SEO needs.

• Adapts questions based on your answers — skips irrelevant ones
• Goal: get to the Brief in as few questions as possible
• Output: a structured UX Brief

2. Audit

If you have existing code, the plugin scans it automatically:

• Detects framework (Next.js, React, Vue, Svelte, vanilla)
• Scans routes, HTML, forms, images, navigation, accessibility, SEO, mobile
• Produces a scored report (XX/100) with findings by severity
• Each finding references the violated rule and suggests a fix

3. Preview

The plugin opens a local server and generates your screens in vanilla HTML/CSS:

• 2-3 named versions per screen (not V1/V2/V3 — descriptive names)
• Hot reload via SSE — changes appear instantly
• Approve, reject, or comment per screen
• Rules loaded per-screen for token efficiency

4. Export

• Complete UX spec in markdown
• Converts approved screens to React, Svelte, or Vue components
• Detects your project's framework and follows its conventions

376 UX Rules

Rules are organized in 6 categories, loaded on-demand (never all at once):

Smart loading

Rules are loaded based on what you're designing:

Built-in Data

Anti "AI Slop"

The plugin actively fights generic AI-generated aesthetics:

Banned

• Fonts: Inter, Roboto, Arial, system fonts
• Colors: Purple gradients on white, timid palettes without accent
• Layouts: Cookie-cutter structures, predictable grids
• Naming: V1/V2/V3 version names

Instead

• Distinctive fonts with weight extremes (100/200 vs 800/900)
• 3x+ size jumps between heading and body
• Gradient meshes, noise textures, grain overlays
• Dominant color + sharp accent
• Descriptive version names: "Classic", "Bold", "Minimal"

Tech Stack

Project Structure

ux-pilot/
├── skills/ux-pilot.md        # Claude Code skill entry point
├── rules/                    # 376 UX rules in 31 markdown files
│   ├── ux-patterns/          # Accessibility, forms, navigation...
│   ├── conversion-funnel/    # CTA, pricing, 34 landing patterns...
│   ├── seo-aeo/              # Structure, meta, schema.org...
│   ├── psychology/           # Social proof, trust, persuasion...
│   ├── aesthetics/           # Anti-slop, typography, 67 styles...
│   └── product-type/         # 30 product recommendations
├── data/                     # Palettes, fonts, styles (JSON)
├── src/
│   ├── discovery/            # Questions, router, brief generator
│   ├── audit/                # Framework detector, scanner, report
│   ├── preview/              # HTTP server, SSE, file watcher, toolbar
│   ├── rules/                # On-demand context-based rule loader
│   ├── data/                 # Palette/font/style/product-type lookup
│   └── export/               # Spec generator, component converter
├── templates/                # Preview shell + 10 screen templates
├── hooks/                    # PostToolUse UX check hook
└── tests/                    # 77 tests

Links

Credits

Rules enriched from:

• ui-ux-pro-max (MIT) — 99 UX guidelines, styles, palettes, font pairings
• frontend-design (Anthropic) — Design principles, anti-patterns
• WCAG 2.1, Nielsen Norman Group, Laws of UX

License

MIT — free forever.

_{Built by Sakaax — this README's landing page was designed using ux-pilot.}