Getting Started
What is UX-Master?
UX-Master is an AI-powered design intelligence platform that helps you:
- ✅ Validate designs against 37 Design Tests
- ✅ Generate complete design systems in seconds
- ✅ Extract design tokens from any website
- ✅ Apply 48 UX Laws for psychology-driven design
Who is it for?
- Designers - Validate designs before handoff
- Developers - Ensure UI meets UX standards
- Product Managers - Quick design quality checks
- Teams - Maintain consistency across products
Installation
Prerequisites
- Python 3.10+
- pip or uv
- (Optional) Node.js for Figma plugin development
Install UX-Master CLI
Bash
pip install uxmaster-cli
Or with uv (faster):
Bash
uv pip install uxmaster-cli
Verify Installation
Bash
uxm --version
# Should print: uxmaster, version 2.0.0
CLI Usage
Command Overview
uxm [command] [arguments] [options]
Common Workflows
Workflow 1: Design System from Scratch
Bash
# Generate design system
uxm search "e-commerce mobile app" --design-system -p "ShopApp"
# Save to file
uxm search "e-commerce mobile app" --design-system --format markdown --output design-system.md
Workflow 2: Validate Existing Design
Bash
# Extract from website
uxm extract https://competitor.com --output competitor.json
# Validate extracted design
uxm validate competitor.json --suite all --format html --output report.html
# Open report
open report.html
Figma Plugin
Installation
- Open Figma Desktop
- Go to Plugins → Development → Import Plugin from Manifest
- Select
mcp/integrations/figma/plugin/manifest.json
Generate Design System
- Open plugin from Figma menu
- Click ✨ Generate tab
- Describe your project:
A fintech dashboard with dark mode, modern glassmorphism style
- Click ✨ Generate Magic
- Wait 2-3 seconds
- Review generated tokens
- Click Apply to Figma to create Variables
Understanding Validation Results
Score Interpretation
| Score | Rating | Action |
|---|---|---|
| 90-100 | Excellent | Ship it! |
| 80-89 | Good | Minor tweaks |
| 70-79 | Fair | Review issues |
| 60-69 | Needs Work | Fix critical issues |
| <60 | Poor | Major revisions |
Issue Severity
- 🔴 Critical - Must fix before shipping
- 🟠 High - Should fix for good UX
- 🟡 Medium - Fix if time permits
- 🟢 Low - Nice to have
MCP Server
What is MCP?
Model Context Protocol (MCP) allows AI assistants like Claude, Cursor, and VS Code to use UX-Master tools directly.
Starting the Server
Bash
# Default port 3000
uxm mcp start
# Custom port
uxm mcp start --port 8080
# With Figma integration
uxm mcp start --figma-token YOUR_TOKEN
Using with Claude Code
Once installed (uxm init --ai claude), Claude can:
You: Create a landing page for my SaaS
Claude: I'll design a landing page for you. Let me check the UX guidelines first...
[Claude uses UX-Master internally]
Claude: Based on UX-Master's recommendations, here's your design:
- Hero section with clear value proposition
- Primary CTA in contrasting color
- Social proof above the fold
- Form limited to 3 fields
I've applied Fitts's Law (44px touch targets) and Hick's Law
(limited choices) to optimize conversions.
Validation
Test Suites Explained
All Tests (37)
Complete validation across all categories:
- Mobile (7 tests)
- Landing Page (6 tests)
- Dashboard (6 tests)
- Typography (4 tests)
- Color (4 tests)
- Layout (4 tests)
- Accessibility (5 tests)
- Interaction (5 tests)
Validation Tests Reference
| ID | Name | Severity | Check |
|---|---|---|---|
| DT-MOB-001 | Fitts's Law | Critical | Touch targets ≥ 44px |
| DT-MOB-002 | Thumb Zone | High | Actions in bottom 25% |
| DT-LND-001 | Hero Clarity | Critical | Value prop in 5 sec |
| DT-LND-002 | CTA Prominence | Critical | Visual dominance |
| DT-A11-001 | Focus States | Critical | Visible focus |
| DT-CLR-001 | WCAG Contrast | Critical | 4.5:1 ratio |
Design System Generation
From Description
Bash
uxm search "dark mode fintech dashboard with glassmorphism" --design-system
From Website
Bash
# Extract existing design
uxm extract https://linear.app --output linear.json
# Generate based on extracted style
uxm search "similar to linear.app but for healthcare" --design-system
Output Formats
Markdown (Human-readable)
Bash
uxm search "fintech dashboard" --design-system --format markdown --output design.md
JSON (Machine-readable)
Bash
uxm search "fintech dashboard" --design-system --format json --output tokens.json
Best Practices
Design Validation Workflow
- Design Phase - Create initial design in Figma, run validation every 30 minutes, fix critical issues immediately
- Before Handoff - Run full validation suite, score should be >= 80, generate validation report
- During Development - Validate components as built, run CI/CD validation checks, monitor regression
- Before Launch - Final validation pass, document exceptions, archive reports
Validation Frequency
| Phase | Frequency | Suite |
|---|---|---|
| Exploration | As needed | Quick |
| Design | Every 30 min | Mobile/Landing/Dashboard |
| Review | Before handoff | All |
| Development | Per component | Component-specific |
| Pre-launch | Once | All + A11y |
Troubleshooting
Common Issues
Issue: command not found: uxm
Bash
# Check Python path
which python3
# Reinstall with --user
pip install --user uxmaster-cli
# Or use full path
python3 -m uxmaster --help
Issue: MCP server not running
Bash
# Start server
uxm mcp start
# Check if running
curl http://localhost:3000/health
# Check port availability
lsof -i :3000
Getting Help
- Check documentation:
uxm docs - Verbose output:
uxm validate file.html -v - Community Discord: discord.gg/uxmaster
- GitHub Issues: github.com/uxmaster/ux-master/issues
Ready to dive deeper?
Explore our tutorials and API reference.