Skip to main content
Claude Code is the official Claude desktop application with a built-in skill marketplace. UI/UX Pro Max can be installed in two ways:

​
Installation Methods

Install directly from the Claude Code skill marketplace:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
This method automatically downloads and installs the latest version.

​
File Structure

After installation, your project will have: 
.claude/
└── skills/
    └── ui-ux-pro-max/
        ├── SKILL.md              # Main skill file
        ├── data/
        │   ├── styles.csv        # 67 UI styles
        │   ├── colors.csv        # 96 color palettes
        │   ├── typography.csv    # 57 font pairings
        │   ├── landing.csv       # 24 landing page patterns
        │   ├── products.csv      # 100 product categories
        │   ├── charts.csv        # 25 chart types
        │   ├── ux_guidelines.csv # 99 UX guidelines
        │   └── stacks/           # Stack-specific guidelines
        └── scripts/
            ├── search.py         # CLI search tool
            ├── core.py           # BM25 search engine
            └── design_system.py  # Design system generator

​
How It Works

​
Automatic Activation

UI/UX Pro Max activates automatically when you mention UI/UX-related keywords: 
Build a landing page for my SaaS product
No slash commands needed! The skill detects:
  • Actions: build, create, design, implement, review, fix, improve, optimize, enhance, refactor
  • Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, mobile app
  • Elements: button, modal, navbar, sidebar, card, table, form, chart
  • Styles: glassmorphism, minimalism, brutalism, dark mode, responsive
  • Topics: color palette, accessibility, animation, layout, typography, font pairing

​
Design System Generation

When you request UI/UX work, Claude automatically:
  1. Analyzes your request - Extracts product type, industry, and requirements
  2. Searches 5 databases in parallel - Product types, styles, colors, typography, landing patterns
  3. Runs reasoning engine - Applies 100 industry-specific rules
  4. Generates complete design system - Pattern, style, colors, fonts, effects, anti-patterns
  5. Implements with best practices - Follows pre-delivery checklist

​
Example Output

+----------------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: Hero-Centric + Social Proof                                                  |
|     Conversion: Emotion-driven with trust elements                                     |
|     CTA: Above fold, repeated after testimonials                                       |
|                                                                                        |
|  STYLE: Soft UI Evolution                                                              |
|     Keywords: Soft shadows, subtle depth, calming, premium feel                        |
|                                                                                        |
|  COLORS:                                                                               |
|     Primary:    #E8B4B8 (Soft Pink)                                                    |
|     Secondary:  #A8D5BA (Sage Green)                                                   |
|     CTA:        #D4AF37 (Gold)                                                         |
|                                                                                        |
|  TYPOGRAPHY: Cormorant Garamond / Montserrat                                           |
|     Google Fonts: https://fonts.google.com/...                                         |
+----------------------------------------------------------------------------------------+

​
Quick Reference

Claude Code includes a quick reference section in the skill file: 
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain>
Available Domains:
  • product - Product type recommendations
  • style - UI styles (67 total)
  • typography - Font pairings (57 total)
  • color - Color palettes (96 total)
  • landing - Landing page patterns (24 total)
  • chart - Chart types (25 total)
  • ux - UX guidelines (99 total)
Stack Search:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --stack <stack>
Available stacks: html-tailwind, react, nextjs, astro, vue, nuxtjs, nuxt-ui, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
# Generate design system with ASCII output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa" --design-system -p "Serenity Spa"

# Generate with Markdown output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system -f markdown

# Persist to files (Master + page overrides)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --design-system --persist -p "MyApp" --page "dashboard"
Creates hierarchical design system:
design-system/
├── MASTER.md           # Global source of truth
└── pages/
    └── dashboard.md    # Page-specific overrides

​
Example Usage

Build a landing page for my beauty spa

​
Advanced Features

​
shadcn/ui Integration

Claude Code supports integration with the shadcn/ui MCP server for component search: 
Find shadcn/ui components for a pricing table
The skill will search the shadcn/ui registry and provide component examples.

​
Persistent Design Systems

Create reusable design systems across sessions: 
# Generate and save to files
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
This creates design-system/MASTER.md that you can reference in future prompts: 
Build the checkout page using design-system/MASTER.md

​
Multi-Stack Projects

Specify different stacks for different parts of your project: 
Build the landing page with Next.js and the admin dashboard with React

​
CLI Commands

# List available versions
uipro versions

# Update to latest version
uipro update

# Install offline (skip GitHub download)
uipro init --ai claude --offline

​
Troubleshooting

  1. Check that .claude/skills/ui-ux-pro-max/SKILL.md exists
  2. Verify the frontmatter has name: ui-ux-pro-max
  3. Try using explicit UI/UX keywords like “build landing page” or “design dashboard”
  4. Restart Claude Code
Install Python 3.x:
# macOS
brew install python3

# Ubuntu/Debian
sudo apt update && sudo apt install python3

# Windows
winget install Python.Python.3.12
Verify the search script is executable:
chmod +x .claude/skills/ui-ux-pro-max/scripts/search.py
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "test" --domain style

​
Next Steps

Getting Started

Learn the basics of UI/UX Pro Max

Design Systems

Generate complete design systems

UI Styles

Explore 67 UI styles

Color Palettes

Browse 96 color palettes