The UI/UX Skill for Claude Code

• By Praveen Jha · Updated 2026-10-23 · 8 min read · Developer & MCP tools

CLAUDE CODE • UI / UX PRO MAX SKILL

Stop asking Claude to guess at design. Install one skill with styles, palettes, font pairings and UX rules built in - and get a complete, rule-backed design system before any code is written.

Author: Praveen Jha | praveenjha.com Skill: ui-ux-pro-max - open source, MIT licence Works in: Claude Code, Cursor, Windsurf, Copilot, Codex, Gemini CLI and more Time to install: About 2 minutes | Cost: Free (Basic) Prerequisite: Python 3.x for the search script (standard library only)

Use it when you are

Starting a new page or project and need a full design system recommendation.

Choosing styles, colours or fonts - or picking a chart type for data.

Reviewing existing UI, fixing UI bugs, or working on dark mode, animations, forms and navigation.

Read this first: The catalogue keeps growing. This guide uses the current v2.0 counts throughout - use those numbers for what you install today.

A searchable design database, not a prompt pack

The skill gives Claude a database to search and rules to reason with. When you ask for UI work, it matches your product type first, then recommends a style, palette, typography and pattern that fit that industry - and lists anti-patterns to avoid.

Earlier releases were smaller - 50+ styles, 161 palettes, 57 font pairings, 161 product types, 99 UX guidelines, 25 chart types. The v2.0 counts above are larger because the catalogue has since expanded.

From one sentence to a complete design system

1. You ask

For example: "Build a landing page for my beauty spa." No design vocabulary needed.

2. Five parallel searches run

Product type (192 categories), style, colour palette, landing pattern and typography are searched at once.

3. The reasoning engine decides

It matches product to UI category rules, ranks styles with BM25 search, filters industry anti-patterns and applies decision rules.

4. You get the full system, then code

Pattern + Style + Colours + Typography + Effects + Anti-patterns + Pre-delivery checklist. Only then does Claude generate code.

Worked example: Serenity Spa

Install: pick one route, then verify

Route A - Claude Code plugin marketplace (fastest)

Run these two commands inside Claude Code:

Copy-ready text

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Then run /plugin. You should see ui-ux-pro-max in the list.

Route B - CLI (recommended for other assistants)

Copy-ready text

npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude       # Claude Code
uipro init --ai cursor       # Cursor
uipro init --ai windsurf     # Windsurf
uipro init --ai copilot      # GitHub Copilot
uipro init --ai codex        # Codex CLI
uipro init --ai gemini       # Gemini CLI
uipro init --ai all          # All assistants

The npm package is ui-ux-pro-max-cli; it installs the uipro command. Do not use older uipro-cli releases - they are stale.

Global install + maintenance

Copy-ready text

uipro init --ai claude --global   # to ~/.claude/skills/
uipro versions                    # list versions
uipro update                      # refresh skill files
uipro uninstall --ai claude       # remove

Prerequisite check: Run python3 --version. Python 3.x is required for the search script. If it is missing, install Python yourself from python.org or your OS package manager before retrying.

Two ways to invoke it

Skill mode - auto-activate

Supported in Claude Code, Cursor, Windsurf, Antigravity, Codex, Copilot and others. Just chat naturally - the skill activates on UI/UX requests:

Copy-ready text

Build a landing page for
my SaaS product

Workflow mode - slash command

Supported in Kiro, Roo Code and KiloCode, and a common pattern for Claude Code. Prefix your prompt:

Copy-ready text

/ui-ux-pro-max Build a
landing page for my
SaaS product

Supported stacks (22)

HTML + Tailwind (default), React, Next.js, shadcn/ui, Vue, Nuxt.js, Nuxt UI, Angular, Laravel, Svelte, Astro, Three.js, SwiftUI, Jetpack Compose, React Native, Flutter, JavaFX, WPF, WinUI 3, Avalonia, Uno Platform and UWP. Name your stack in the prompt, or let it default to HTML + Tailwind.

Industry reasoning at a glance

Each rule supplies a recommended pattern, style priority, colour mood, typography mood, key effects and anti-patterns - for example, no AI purple/pink gradients for banking.

Prompt library - copy, paste, ship

Prefix each prompt with /ui-ux-pro-max in Claude Code. Start with these seven examples.

More starting prompts

Copy-ready text

Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode
Make a mobile app UI for e-commerce
Build a fintech banking app with dark theme

Review tip: For reviews, let the skill run its built-in checklist - accessibility, touch targets, performance and layout - and ask it to list each failure with the rule it broke, not just a score.

Advanced: search the database directly

For repeatable, scriptable results, call the search script yourself. Paths below assume a Claude Code project install.

Copy-ready text

# Full design system (ASCII)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "beauty spa wellness" --design-system -p "Serenity Spa"

# Full design system (Markdown)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "fintech banking" --design-system -f markdown

# Domain search
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "dashboard" --domain chart
# Stack-specific guidance
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "form validation" --stack react

Persist it: Master + Overrides

Copy-ready text

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "SaaS dashboard" --design-system --persist -p "MyApp"

This creates design-system/myapp/MASTER.md as the single reference for the whole project, with page files under design-system/myapp/pages/ holding only what deviates from the Master. Add --page "dashboard" to create a page override. On later pages, Claude checks the page file first, then falls back to the Master - so the whole project stays visually consistent across sessions.

Ship only after the pre-delivery checklist passes

• [ ] No emojis as icons - use SVG (Heroicons / Lucide)
• [ ] cursor-pointer on all clickable elements
• [ ] Light mode text contrast 4.5:1 minimum; visible focus states
• [ ] prefers-reduced-motion respected; hover states do not shift layout
• [ ] Text, chips and badges reflow without clipping or broken labels
• [ ] Responsive at 375px, 768px, 1024px and 1440px

Basic (free, this guide)

Open source under MIT. All 79 searchable styles, 192 product types and palettes, font pairings, BM25 search, design system generation and 22 stacks.

Premium

Adds brand identity, logo and icon design, banner and slide skills, AI image assets, enterprise design-token architecture and priority support. Details at uupm.cc.

Troubleshooting

About this guide

Product site: https://uupm.cc | Licence: MIT | Guide version: Oct 2026. The catalogue keeps growing, so counts may increase in later versions - the v2.0 counts in this guide are the ones to use today.

Related pages

• Free AI guides (Resources)
• Learn AI
• Contact Praveen