🎯 Choose Your Path
🎨
Figma Plugin
Recommended for Designers
⏱️ 2 min
|
⭐ Easy
🖥️
MCP Server
For Teams & AI Integration
⏱️ 5 min
|
⭐⭐ Medium
💻
CLI
For Power Users
⏱️ 3 min
|
⭐⭐⭐ Advanced
🎨
Path 1: Figma Plugin
The easiest way to get started
1
Install (30 seconds)
- Open Figma (desktop or web)
- Click Plugins in the menu
- Select Browse plugins in Community
- Search: "UX-Master"
- Click Install
2
Generate Design System
- Open any Figma file
- Go to Plugins → UX-Master
- In the Generate tab, type:
Input
A fintech dashboard with dark mode and real-time chartsClick ✨ Generate Magic and wait 2-3 seconds
3
Apply to Figma
You'll see:
- 🎨 Color palette (primary, secondary, accent)
- ✍️ Typography recommendations
- 🧠 UX Laws applied (e.g., "Fitts's Law: 48px touch targets")
- ✓ Design Tests passed
Click "Apply to Figma" to create Variables automatically!
🖥️
Path 2: MCP Server
For Teams & AI Integration
What is MCP? MCP = Model Context Protocol. It lets AI assistants (Claude, Cursor) use UX-Master tools directly.
1
Install CLI
Bash
# Install UX-Master CLI
pip install uxmaster[mcp]
# Or with pipx (recommended)
pipx install uxmaster[mcp]2
Start MCP Server
Bash
# Start the server
uxm mcp start
# Or run in background
uxm mcp start -d
# Check status
uxm mcp statusYou should see:
✓ MCP Server running on http://localhost:3000
✓ 8 tools available3
Configure Your AI Assistant
For Claude Code
Add to .claude/settings.json:
JSON
{
"mcpServers": {
"ux-master": {
"command": "python",
"args": ["-m", "mcp.server"],
"env": {
"PORT": "3000"
}
}
}
}For Cursor
Add to .cursor/mcp.json:
JSON
{
"mcpServers": {
"ux-master": {
"url": "http://localhost:3000"
}
}
}4
Use in AI Chat
Now you can ask:
"Create a landing page for my SaaS product"The AI will:
- Call UX-Master to generate design system
- Apply 48 UX Laws automatically
- Show you the results with recommendations
💻
Path 3: CLI Commands
For Power Users
Basic Commands
Bash
# Install UX-Master
pip install uxmaster
# Install for specific AI assistant
uxm init --ai claude
# Generate design system
uxm search "fintech dashboard" --design-system
# Search UX Laws
uxm search "mobile touch targets" --domain ux-laws
# Validate HTML file
uxm validate index.html --suite mobileComplete Workflow Example
Bash
# 1. Install for Claude Code
uxm init --ai claude
# 2. Generate design system
uxm search "healthcare app for elderly" --design-system -p "CareConnect"
# Output:
# 🎨 Style: Soft UI Evolution
# 🎨 Colors: #3B82F6 primary, #10B981 success
# ✍️ Typography: Inter / 16px body
# 🧠 UX Laws: Fitts's Law (48px targets), High contrast (WCAG AAA)
# 3. Persist for later use
uxm search "healthcare app" --design-system --persist -p "CareConnect"
# Creates: design-system/careconnect/MASTER.md
# 4. Search specific UX Laws for mobile
uxm search "mobile app fitts" --domain ux-laws -n 3
# 5. Get design tests for validation
uxm search "mobile touch target" --domain design-tests🎉 You're Ready!
Start creating beautiful, UX-compliant designs with AI.