Your UX co-pilot — from idea to validated flow, in your terminal. Claude Code plugin with 376 UX rules, live preview, and smart discovery.
How to install ux-pilot?
sakaax/ux-pilot
$git clone https://github.com/sakaax/ux-pilotInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Install ux-pilot by running `git clone https://github.com/sakaax/ux-pilot`, then use it for the current task and follow its documentation at https://github.com/sakaax/ux-pilot.
README.md
| 1 | <p align="center"> |
| 2 | <img src=".github/banner.png" alt="ux-pilot banner" width="100%"> |
| 3 | </p> |
| 4 | |
| 5 | <p align="center"> |
| 6 | <strong>Your UX co-pilot — from idea to validated flow, in your terminal.</strong> |
| 7 | </p> |
| 8 | |
| 9 | <p align="center"> |
| 10 | <a href="https://github.com/Sakaax/ux-pilot/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"></a> |
| 11 | <a href="https://github.com/Sakaax/ux-pilot"><img src="https://img.shields.io/github/stars/Sakaax/ux-pilot?style=social" alt="GitHub Stars"></a> |
| 12 | <a href="https://www.producthunt.com/products/ux-pilot-2"><img src="https://img.shields.io/badge/Product%20Hunt-Live%20Now-orange" alt="Product Hunt"></a> |
| 13 | <a href="https://ux-pilot.sakaax.com"><img src="https://img.shields.io/badge/Landing-ux--pilot.sakaax.com-D4622A" alt="Landing Page"></a> |
| 14 | </p> |
| 15 | |
| 16 | <p align="center"> |
| 17 | <a href="#installation">Install</a> · |
| 18 | <a href="#4-phases">How it works</a> · |
| 19 | <a href="#376-ux-rules">Rules</a> · |
| 20 | <a href="https://ux-pilot.sakaax.com/demo.html">Try the demo</a> · |
| 21 | <a href="https://ux-pilot.sakaax.com">Landing page</a> |
| 22 | </p> |
| 23 | |
| 24 | --- |
| 25 | |
| 26 | 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. |
| 27 | |
| 28 | ## What's New (v0.1.3) |
| 29 | |
| 30 | - **HTML Audit Report** — audit results open as a styled HTML page in your browser with score, severity grouping, and category breakdown |
| 31 | - **Fix Prompts (natural language)** — each finding includes a no-coder-friendly prompt you can paste into Claude Code to fix the issue. No HTML tags, just plain instructions |
| 32 | - **Persistent UX Brief** — discovery saves `ux-pilot/ux-brief.md` in your project, updated as you make decisions |
| 33 | - **Visual Audit with Playwright** — if [Playwright MCP](https://github.com/microsoft/playwright-mcp) is installed, the audit captures screenshots at 375px, 768px, and 1280px and analyzes the visual result. Falls back to static CSS analysis if not available |
| 34 | - **6 Mobile CSS Checks** — detects tables without responsive wrapper, fixed widths > 500px, small touch targets (< 44px), small fonts (< 14px), nav without flex-wrap, and CSS widths without media queries |
| 35 | - **Mobile Score Calibration** — mobile findings now carry 1.5x penalty weight for more accurate scoring |
| 36 | - **Screenshot References** — findings from visual audit include clickable screenshot thumbnails in the HTML report |
| 37 | - **Anti AI-Slop: No Emojis** — the plugin now uses inline SVG icons instead of emojis (emojis render differently across OS/browsers) |
| 38 | - **Finding Numbering** — each finding shows its index (1/10, 2/10...) for easier tracking |
| 39 | - **Back to Top** — link at the bottom of the HTML report |
| 40 | |
| 41 | > Having issues updating? See [Troubleshooting](#troubleshooting). |
| 42 | |
| 43 | ### Optional: Playwright MCP for Visual Audit |
| 44 | |
| 45 | For the best audit results, install [Playwright MCP](https://github.com/microsoft/playwright-mcp) to enable screenshot-based visual analysis: |
| 46 | |
| 47 | ```bash |
| 48 | npm install -g @playwright/mcp |
| 49 | ``` |
| 50 | |
| 51 | Then add it to your Claude Code MCP config (`~/.claude/mcp.json`): |
| 52 | |
| 53 | ```json |
| 54 | { |
| 55 | "mcpServers": { |
| 56 | "playwright": { |
| 57 | "command": "npx", |
| 58 | "args": ["@playwright/mcp"] |
| 59 | } |
| 60 | } |
| 61 | } |
| 62 | ``` |
| 63 | |
| 64 | Without Playwright, the audit uses static CSS analysis only — still useful, but can't detect visual overflow or layout issues that only appear when the page is rendered. |
| 65 | |
| 66 | ## Why ux-pilot? |
| 67 | |
| 68 | Every AI tool generates the same generic output: Inter font, purple gradient on white, centered hero, done. **ux-pilot exists to fix this.** |
| 69 | |
| 70 | 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. |
| 71 | |
| 72 | ## What makes it different |
| 73 | |
| 74 | | | Existing tools | ux-pilot | |
| 75 | |---|----------------|----------| |
| 76 | | **Approach** | Generate code directly | Dialogue first, code after | |
| 77 | | **Output** | One-shot result | Iterative, named versions | |
| 78 | | **Scope** | Landing pages mostly | Full apps (dashboards, CRUD, onboarding...) | |
| 79 | | **Preview** | No live preview | Local server with hot reload | |
| 80 | | **UX knowledge** | Few or no rules | 376 rules loaded on-demand | |
| 81 | | **Context** | Loads everything | Token-efficient (rules loaded per screen) | |
| 82 | | **Version naming** | V1, V2, V3 | Descriptive: "Classic", "Bold", "Minimal" | |
| 83 | | **Design quality** | Generic AI aesthetic | Anti "AI slop" rules built-in | |
| 84 | |
| 85 | ## Installation |
| 86 | |
| 87 | ```bash |
| 88 | # Step 1 — Add from marketplace |
| 89 | /plugin marketplace add Sakaax/ux-pilot |
| 90 | |
| 91 | # Step 2 — Install the skill |
| 92 | /plugin install ux-pilot@ux-pilot |
| 93 | ``` |
| 94 | |
| 95 | No API keys. No subscription. Free and open source. |
| 96 | |
| 97 | ## Usage |
| 98 | |
| 99 | ```bash |
| 100 | /ux-pilot # Full flow (Discovery -> Audit -> Preview -> Export) |
| 101 | /ux-pilot audit # Scan existing code for UX issues |
| 102 | /ux-pilot preview # Jump to preview server |
| 103 | /ux-pilot export # Gene |
Related
6 picksType
- figma-context-mcpGive your coding agent access to your Figma data. Implement designs in any framework in one-shot.Jul 2026
- sunnysidefigma-context-mcpModel Context Protocol server for Figma integrationApr 2026
- figma-console-mcpThe most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes.Jul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverJul 2026
- dembrandtExtract design tokens and publicly visible CSS information from any websiteJul 2026
- touchdesigner-mcpMCP server for TouchDesigner - Control and operate TouchDesigner projects through AI agentsJul 2026
