I built a UX co-pilot for Claude Code — 376 rules, live preview, zero AI slop

The problem

Every time I asked an AI to design a UI, I got the same output:

• Inter font
• Purple gradient on white background
• Centered hero with a subtitle and a button
• "Here's V1, V2, and V3"

It looked... fine. But it looked like everything else. No personality, no UX thinking, no understanding of what the product actually needed.

## The idea

What if the AI could ask questions first before generating anything?

What if it understood that a fintech dashboard needs different UX rules than a restaurant landing page? That a dev tool should use monospace fonts and dark mode, not pastel gradients?

That's what I built.

## Meet ux-pilot

ux-pilot is a free, open-source plugin for Claude Code that acts as a senior UX designer inside your terminal.

Instead of generating code directly, it runs a structured discovery flow — asks about your product, users, business model, and design preferences — then applies the right rules from a
library of 376 UX rules.

### The 4 phases

1. Discovery
The plugin asks questions one at a time (ABCD choices + free text). It adapts — if you're building a CLI tool, it skips pricing/funnel questions. If you give detailed answers, it infers
what it can and moves faster.

Output: a structured UX Brief.

2. Audit
Already have code? The plugin scans it. It detects your framework (Next.js, React, Vue, Svelte), checks routes, HTML structure, forms, accessibility, SEO, mobile. Produces a scored report
with findings by severity.

3. Preview
Opens a local server with hot reload (SSE). Generates screens in vanilla HTML/CSS. For each screen, proposes 2-3 named versions — not V1/V2/V3, but descriptive names like "Classic",
"Bold", "Minimal". You approve, reject, or comment.

4. Export
Generates a complete UX spec in markdown. Optionally converts approved screens to React, Svelte, or Vue components.

## 376 rules, loaded on-demand

The rules are organized in 6 categories:

• UX Patterns (10 files) — accessibility, forms, navigation, layout, typography
• Conversion & Funnel (7 files) — CTA, pricing, signup, 34 landing patterns
• SEO & AEO (5 files) — structure, schema.org, AI citation optimization
• Psychology (4 files) — social proof, cognitive load, trust, persuasion
• Aesthetics (4 files) — anti-AI-slop, typography craft, 67 UI styles
• Product Type (1 file) — 30 product-specific recommendations

Key design decision: rules are never loaded all at once. When you're designing a landing page, only landing-patterns, cta, seo, aesthetics, and social-proof rules are loaded. This
saves tokens and improves accuracy.

## The anti "AI slop" feature

This was the main motivation. The plugin has explicit rules against generic AI output:

Banned:

• Inter, Roboto, Arial, system fonts
• Purple gradients on white backgrounds
• Cookie-cutter layouts
• V1/V2/V3 version naming

Instead:

• Distinctive fonts with weight extremes (200 vs 800)
• 3x+ size jumps between heading and body
• Gradient meshes, noise textures
• Descriptive version names

## Built-in data

Beyond rules, the plugin ships with curated design data:

• 161 color palettes — industry-specific
• 57 font pairings — Google Fonts with mood tags
• 67 UI styles — with use cases and CSS hints
• 30 product types — with landing patterns and anti-patterns

## The meta flex

The landing page for ux-pilot was designed using ux-pilot itself. The plugin ran the discovery, chose the typography (Newsreader + Space Grotesk + JetBrains
Mono), picked the terracotta accent, and generated the structure.

## Try it

bash
  /plugin marketplace add Sakaax/ux-pilot
  /plugin install ux-pilot@ux-pilot
  /ux-pilot

  - Landing: https://ux-pilot.sakaax.com
  - Demo: https://ux-pilot.sakaax.com/demo.html
  - GitHub: https://github.com/Sakaax/ux-pilot
  - Product Hunt: https://www.producthunt.com/products/ux-pilot-2

  Free, MIT licensed, open source. Feedback welcome — especially on the rule set and the discovery flow.