Skip to main content
Windsurf is Codeium’s agentic IDE with Cascade, a powerful AI agent. UI/UX Pro Max integrates as a skill that works seamlessly with Cascade’s multi-step workflows.

​
Installation

1

Install CLI

npm install -g uipro-cli
2

Navigate to Project

cd /path/to/your/project
3

Install for Windsurf

uipro init --ai windsurf
This creates two folders:
  • .windsurf/skills/ui-ux-pro-max/ - Main skill files
  • .shared/ui-ux-pro-max/ - Shared reference data
4

Restart Windsurf

Close and reopen Windsurf to load the skill.

​
File Structure

.windsurf/
└── 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

.shared/
└── ui-ux-pro-max/
    └── data/                     # Shared reference data

​
How to Use

​
Automatic Activation with Cascade

UI/UX Pro Max activates automatically when you mention UI/UX work in Windsurf’s Cascade: 
Build a landing page for my SaaS product

​
With Cascade Agent

Cascade’s multi-step reasoning works perfectly with UI/UX Pro Max:
1

Initiate Request

Build a fintech banking dashboard with dark theme
2

Cascade Plans

Cascade creates a multi-step plan:
  1. Generate design system (style, colors, fonts)
  2. Create component structure
  3. Implement UI with design tokens
  4. Add interactions and animations
  5. Validate accessibility
3

Design System Generated

UI/UX Pro Max provides:
  • Style: Dark Mode OLED
  • Colors: Trust Blue (#1E3A8A), Wealth Green (#047857)
  • Typography: Inter / Roboto Mono
  • Anti-patterns: Avoid bright colors, use subtle gradients
4

Implementation

Cascade implements code following the design system across multiple files.

​
Features in Windsurf

​
Multi-Step UI Generation

Cascade excels at complex, multi-step UI generation: 
Build a complete e-commerce site with:
1. Homepage with hero and featured products
2. Product listing with filters and search
3. Product detail page with image gallery
4. Shopping cart with quantity controls
5. Checkout flow with form validation
Cascade will:
  • Generate a unified design system
  • Create all components with consistent styling
  • Implement responsive layouts
  • Add proper accessibility
  • Follow UX best practices

​
Intelligent Refinement

Cascade can refine designs iteratively: 
Make the hero section more engaging
Add micro-interactions to buttons
Optimize for mobile-first experience
Improve color contrast for accessibility

​
Context-Aware Design

Cascade understands project context: 
// If you have existing components
Extend the current design system to add a new pricing page

// If you have a design file
Implement this Figma design with our color palette

​
Advanced Usage

​
Direct Search Commands

Run search commands in Windsurf’s integrated terminal:

​
Persistent Design Systems

Create reusable design systems for your project: 
# Generate master design system
python3 .windsurf/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"

# Create page-specific overrides
python3 .windsurf/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "pricing"
python3 .windsurf/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
Hierarchical structure: 
design-system/
├── MASTER.md           # Global source of truth
└── pages/
    ├── pricing.md      # Pricing page overrides
    └── dashboard.md    # Dashboard page overrides
Then reference in Cascade: 
Build the pricing page following design-system/MASTER.md and design-system/pages/pricing.md

​
Stack-Specific Guidance

Specify your tech stack for optimized recommendations: 
Build a Next.js 14 landing page with:
- App Router
- Server Components
- Parallel routes for modals
- Streaming with Suspense
UI/UX Pro Max provides Next.js-specific patterns:
  • Image optimization with next/image
  • Font optimization with next/font
  • Layout nesting strategies
  • Loading states

​
CLI Commands

# Update to latest version
uipro update

# List available versions
uipro versions

# Install offline (use bundled assets)
uipro init --ai windsurf --offline

​
Tips for Windsurf

Let Cascade plan complex UI systems:
Build a complete SaaS application with:
- Marketing landing page
- User authentication (login, signup, forgot password)
- Dashboard with analytics
- Settings page with multiple tabs
- Profile page with avatar upload
Cascade will create a comprehensive plan and execute it step by step.
Cascade understands conversational refinements:
// After initial generation
Actually, make it more minimal
The colors are too bright, tone them down
Add more whitespace between sections
Make the CTA buttons more prominent
Cascade excels at coordinated multi-file changes:
Update the design system:
- Change primary color to blue
- Update all components to use the new color
- Adjust hover states
- Update documentation
Evolve your design system over time:
Review design-system/MASTER.md and suggest improvements:
- More accessible color contrast
- Consistent spacing scale
- Better mobile breakpoints

​
Troubleshooting

  1. Verify .windsurf/skills/ui-ux-pro-max/SKILL.md exists
  2. Check file has proper # ui-ux-pro-max heading
  3. Restart Windsurf completely
  4. Clear Windsurf cache if issues persist
Install Python 3.x:
python3 --version

# macOS
brew install python3

# Ubuntu/Debian
sudo apt install python3

# Windows
winget install Python.Python.3.12
Be explicit about using UI/UX Pro Max:
Build a landing page for my SaaS product.
First, generate a design system using UI/UX Pro Max.
Then implement the page following the design system.
Check script permissions:
chmod +x .windsurf/skills/ui-ux-pro-max/scripts/search.py
python3 .windsurf/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

Cascade Workflows

Master Windsurf Cascade workflows