UI UX Pro Max Skill

UI UX Pro Max is an AI skill designed to provide design intelligence for building professional user interfaces and experiences across various platforms and frameworks.

Key capabilities include:

• Intelligent Design System Generation: An AI-powered reasoning engine that analyzes project requirements to generate tailored design systems (patterns, styles, colors, typography, and effects).
• Industry-Specific Reasoning: Utilizes 161 reasoning rules across categories like Tech & SaaS, Finance, Healthcare, E-commerce, and more to ensure design decisions align with industry standards.
• Anti-Pattern Detection: Identifies design choices to avoid (e.g., avoiding neon colors in banking applications) to maintain professional standards.
• Pre-delivery Checklists: Provides actionable checklists for accessibility (WCAG), responsiveness, and interaction design.

The stack integrates four specific layers to improve AI design quality:

• Knowledge Layer: Uses ui-ux-pro-max to provide searchable design systems (styles, color palettes, typography, UX rules).
• Taste Layer: Uses the official Anthropic frontend-design plugin to enforce aesthetic commitment.
• Components Layer: Uses the shadcn MCP to add production components via natural language.
• Visual Feedback Layer: Uses @playwright/mcp and chrome-devtools-mcp so Claude can see, screenshot, and iterate on the rendered page.
• Automated Review: Uses a design-review subagent and the /design-review command to perform a 7-phase audit (WCAG AA, responsiveness, etc.).

The project maintains three distinct locations for data, scripts, and templates, each serving a specific purpose in the ecosystem. To avoid maintenance overhead, you should only modify files in the src/ui-ux-pro-max/ directory.

To set up a Claude Code environment optimized for professional website design, follow these steps to install the necessary MCP servers (Playwright, Chrome DevTools, shadcn) and the design workflow.

1. Clone the repository and enter the directory.
2. Run the setup script to install plugins and the Playwright browser.
3. Launch Claude Code; the MCP servers and CLAUDE.md workflow will load automatically.

Once running, you can request UI work directly. Claude will follow a loop of planning, building, screenshotting for visual feedback, and performing a /design-review audit.

# 1. Clone and enter
git clone https://github.com/YMungerDev/claude-website-design-stack
cd claude-website-design-stack

# 2. Install the skills/plugins + Playwright browser
./scripts/setup.sh

# 3. Open Claude Code
claude

Depending on your AI assistant, you can trigger the UI/UX intelligence in two ways:

Skill Mode (Automatic Activation)

Supported by: Claude Code, Cursor, Windsurf, Antigravity, Continue, Gemini CLI, etc. Simply ask for UI/UX tasks in natural language. The skill activates automatically when it detects a design request. *Example: "Build a landing page for my SaaS product"

Workflow Mode (Slash Commands)

Supported by: Kiro, GitHub Copilot, Roo Code, KiloCode. Use the specific slash command to invoke the skill. *Example: /ui-ux-pro-max Build a landing page for my SaaS product

Note for Trae users: Switch to SOLO mode first; the skill will then activate automatically on UI/UX requests.

Depending on your AI assistant, you can trigger the design intelligence in two ways:

1. Skill Mode (Auto-activate): For assistants like Claude Code, Cursor, and Windsurf, the skill activates automatically when you request UI/UX tasks. Just chat naturally. Note for Trae: Switch to SOLO mode first.

2. Workflow Mode (Slash Command): For assistants like Kiro, GitHub Copilot, and Roo Code, use the explicit slash command: /ui-ux-pro-max <your request>

Example Prompts:

• 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

# Skill Mode (Natural Language)
Build a landing page for my SaaS product

# Workflow Mode (Slash Command)
/ui-ux-pro-max Build a landing page for my SaaS product

The recommended way to use UI UX Pro Max is via the ui-ux-pro-max-cli package.

1. Global Installation

Install the CLI globally using npm:

2. Initialize for AI Assistants

Navigate to your project directory and run uipro init with the --ai flag followed by your specific assistant name.

Supported Assistants:

• claude (Claude Code)
• cursor (Cursor)
• windsurf (Windsurf)
• copilot (GitHub Copilot)
• roo (Roo Code)
• continue (Continue)
• all (Installs for all supported assistants)

3. Global Installation for Assistants

To install the skill globally for an assistant (e.g., in ~/.claude/skills/), add the --global flag.

Follow these steps to set up the full design-to-audit workflow using Claude Code. This requires Node 18+ and Python 3.x.

1. One-shot setup

Run the setup script to install audit dependencies (Playwright + Chromium) and the ui-ux-pro-max skill:

./scripts/setup.sh

2. Install the taste plugin

Inside your Claude Code session, install the required frontend design plugin:

/plugin install frontend-design@anthropics/claude-code

3. Approve MCP servers

Open Claude Code in the project directory. It will prompt you to approve the project MCP servers: playwright, chrome-devtools, and shadcn. Approve them to allow Claude to interact with the browser and design tools. Verify they are active by running /mcp.

The codebase uses a template-based generation system. To ensure you receive the latest templates and the correct file structure for your AI assistant, always use the CLI for installation rather than manual file copying or Marketplace installs (which may have issues with symbolic links).

1. Install the CLI globally: npm install -g ui-ux-pro-max-cli
2. Initialize for your specific platform: uipro init --ai <platform> (e.g., claude, cursor, windsurf)

If you encounter permission errors during global installation, you can use npx to run the initialization without a global install: npx ui-ux-pro-max-cli init --ai claude

npm install -g ui-ux-pro-max-cli
uipro init --ai claude