An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
If you find this useful, consider supporting the project:
The flagship feature of v2.0 is the Design System Generator - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.
+----------------------------------------------------------------------------------------+
| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |
+----------------------------------------------------------------------------------------+
| |
| PATTERN: Hero-Centric + Social Proof |
| Conversion: Emotion-driven with trust elements |
| CTA: Above fold, repeated after testimonials |
| Sections: |
| 1. Hero |
| 2. Services |
| 3. Testimonials |
| 4. Booking |
| 5. Contact |
| |
| STYLE: Soft UI Evolution |
| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |
| Best For: Wellness, beauty, lifestyle brands, premium services |
| Performance: Excellent | Accessibility: WCAG AA |
| |
| COLORS: |
| Primary: #E8B4B8 (Soft Pink) |
| Secondary: #A8D5BA (Sage Green) |
| CTA: #D4AF37 (Gold) |
| Background: #FFF5F5 (Warm White) |
| Text: #2D3436 (Charcoal) |
| Notes: Calming palette with gold accents for luxury feel |
| |
| TYPOGRAPHY: Cormorant Garamond / Montserrat |
| Mood: Elegant, calming, sophisticated |
| Best For: Luxury brands, wellness, beauty, editorial |
| Google Fonts: https://fonts.google.com/share?selection.family=... |
| |
| KEY EFFECTS: |
| Soft shadows + Smooth transitions (200-300ms) + Gentle hover states |
| |
| AVOID (Anti-patterns): |
| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients |
| |
| PRE-DELIVERY CHECKLIST: |
| [ ] No emojis as icons (use SVG: Heroicons/Lucide) |
| [ ] cursor-pointer on all clickable elements |
| [ ] Hover states with smooth transitions (150-300ms) |
| [ ] Light mode: text contrast 4.5:1 minimum |
| [ ] Focus states visible for keyboard nav |
| [ ] prefers-reduced-motion respected |
| [ ] Responsive: 375px, 768px, 1024px, 1440px |
| |
+----------------------------------------------------------------------------------------+
┌─────────────────────────────────────────────────────────────────┐
│ 1. USER REQUEST │
│ "Build a landing page for my beauty spa" │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │
│ • Product type matching (100 categories) │
│ • Style recommendations (67 styles) │
│ • Color palette selection (96 palettes) │
│ • Landing page patterns (24 patterns) │
│ • Typography pairing (56 font combinations) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. REASONING ENGINE │
│ • Match product → UI category rules │
│ • Apply style priorities (BM25 ranking) │
│ • Filter anti-patterns for industry │
│ • Process decision rules (JSON conditions) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 4. COMPLETE DESIGN SYSTEM OUTPUT │
│ Pattern + Style + Colors + Typography + Effects │
│ + Anti-patterns to avoid + Pre-delivery checklist │
└─────────────────────────────────────────────────────────────────┘
The reasoning engine includes specialized rules for:
| Category | Examples |
|---|---|
| Tech & SaaS | SaaS, Micro SaaS, B2B Enterprise, Developer Tools, AI/Chatbot Platform |
| Finance | Fintech, Banking, Crypto, Insurance, Trading Dashboard |
| Healthcare | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health |
| E-commerce | General, Luxury, Marketplace, Subscription Box |
| Services | Beauty/Spa, Restaurant, Hotel, Legal, Consulting |
| Creative | Portfolio, Agency, Photography, Gaming, Music Streaming |
| Emerging Tech | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Systems |
Each rule includes:
- Recommended Pattern - Landing page structure
- Style Priority - Best matching UI styles
- Color Mood - Industry-appropriate palettes
- Typography Mood - Font personality matching
- Key Effects - Animations and interactions
- Anti-Patterns - What NOT to do (e.g., "AI purple/pink gradients" for banking)
- 67 UI Styles - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more
- 96 Color Palettes - Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, etc.
- 56 Font Pairings - Curated typography combinations with Google Fonts imports
- 25 Chart Types - Recommendations for dashboards and analytics
- 13 Tech Stacks - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose
- 98 UX Guidelines - Best practices, anti-patterns, and accessibility rules
- 100 Reasoning Rules - Industry-specific design system generation (NEW in v2.0)
General Styles (49)
| # | Style | Best For |
|---|---|---|
| 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation |
| 2 | Neumorphism | Health/wellness apps, meditation platforms |
| 3 | Glassmorphism | Modern SaaS, financial dashboards |
| 4 | Brutalism | Design portfolios, artistic projects |
| 5 | 3D & Hyperrealism | Gaming, product showcase, immersive |
| 6 | Vibrant & Block-based | Startups, creative agencies, gaming |
| 7 | Dark Mode (OLED) | Night-mode apps, coding platforms |
| 8 | Accessible & Ethical | Government, healthcare, education |
| 9 | Claymorphism | Educational apps, children's apps, SaaS |
| 10 | Aurora UI | Modern SaaS, creative agencies |
| 11 | Retro-Futurism | Gaming, entertainment, music platforms |
| 12 | Flat Design | Web apps, mobile apps, startup MVPs |
| 13 | Skeuomorphism | Legacy apps, gaming, premium products |
| 14 | Liquid Glass | Premium SaaS, high-end e-commerce |
| 15 | Motion-Driven | Portfolio sites, storytelling platforms |
| 16 | Micro-interactions | Mobile apps, touchscreen UIs |
| 17 | Inclusive Design | Public services, education, healthcare |
| 18 | Zero Interface | Voice assistants, AI platforms |
| 19 | Soft UI Evolution | Modern enterprise apps, SaaS |
| 20 | Neubrutalism | Gen Z brands, startups, Figma-style |
| 21 | Bento Box Grid | Dashboards, product pages, portfolios |
| 22 | Y2K Aesthetic | Fashion brands, music, Gen Z |
| 23 | Cyberpunk UI | Gaming, tech products, crypto apps |
| 24 | Organic Biophilic | Wellness apps, sustainability brands |
| 25 | AI-Native UI | AI products, chatbots, copilots |
| 26 | Memphis Design | Creative agencies, music, youth brands |
| 27 | Vaporwave | Music platforms, gaming, portfolios |
| 28 | Dimensional Layering | Dashboards, card layouts, modals |
| 29 | Exaggerated Minimalism | Fashion, architecture, portfolios |
| 30 | Kinetic Typography | Hero sections, marketing sites |
| 31 | Parallax Storytelling | Brand storytelling, product launches |
| 32 | Swiss Modernism 2.0 | Corporate sites, architecture, editorial |
| 33 | HUD / Sci-Fi FUI | Sci-fi games, space tech, cybersecurity |
| 34 | Pixel Art | Indie games, retro tools, creative |
| 35 | Bento Grids | Product features, dashboards, personal |
| 36 | Spatial UI (VisionOS) | Spatial computing apps, VR/AR |
| 37 | E-Ink / Paper | Reading apps, digital newspapers |
| 38 | Gen Z Chaos / Maximalism | Gen Z lifestyle, music artists |
| 39 | Biomimetic / Organic 2.0 | Sustainability tech, biotech, health |
| 40 | Anti-Polish / Raw Aesthetic | Creative portfolios, artist sites |
| 41 | Tactile Digital / Deformable UI | Modern mobile apps, playful brands |
| 42 | Nature Distilled | Wellness brands, sustainable products |
| 43 | Interactive Cursor Design | Creative portfolios, interactive |
| 44 | Voice-First Multimodal | Voice assistants, accessibility apps |
| 45 | 3D Product Preview | E-commerce, furniture, fashion |
| 46 | Gradient Mesh / Aurora Evolved | Hero sections, backgrounds, creative |
| 47 | Editorial Grid / Magazine | News sites, blogs, magazines |
| 48 | Chromatic Aberration / RGB Split | Music platforms, gaming, tech |
| 49 | Vintage Analog / Retro Film | Photography, music/vinyl brands |
Landing Page Styles (8)
| # | Style | Best For |
|---|---|---|
| 1 | Hero-Centric Design | Products with strong visual identity |
| 2 | Conversion-Optimized | Lead generation, sales pages |
| 3 | Feature-Rich Showcase | SaaS, complex products |
| 4 | Minimal & Direct | Simple products, apps |
| 5 | Social Proof-Focused | Services, B2C products |
| 6 | Interactive Product Demo | Software, tools |
| 7 | Trust & Authority | B2B, enterprise, consulting |
| 8 | Storytelling-Driven | Brands, agencies, nonprofits |
BI/Analytics Dashboard Styles (10)
| # | Style | Best For |
|---|---|---|
| 1 | Data-Dense Dashboard | Complex data analysis |
| 2 | Heat Map & Heatmap Style | Geographic/behavior data |
| 3 | Executive Dashboard | C-suite summaries |
| 4 | Real-Time Monitoring | Operations, DevOps |
| 5 | Drill-Down Analytics | Detailed exploration |
| 6 | Comparative Analysis Dashboard | Side-by-side comparisons |
| 7 | Predictive Analytics | Forecasting, ML insights |
| 8 | User Behavior Analytics | UX research, product analytics |
| 9 | Financial Dashboard | Finance, accounting |
| 10 | Sales Intelligence Dashboard | Sales teams, CRM |
Install directly in Claude Code with two commands:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
# Install CLI globally
npm install -g uipro-cli
# Go to your project
cd /path/to/your/project
# Install for your AI assistant
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot # GitHub Copilot
uipro init --ai kiro # Kiro
uipro init --ai codex # Codex CLI
uipro init --ai qoder # Qoder
uipro init --ai roocode # Roo Code
uipro init --ai gemini # Gemini CLI
uipro init --ai trae # Trae
uipro init --ai opencode # OpenCode
uipro init --ai continue # Continue
uipro init --ai codebuddy # CodeBuddy
uipro init --ai all # All assistantsuipro versions # List available versions
uipro update # Update to latest version
uipro init --offline # Skip GitHub download, use bundled assetsPython 3.x is required for the search script.
# Check if Python is installed
python3 --version
# macOS
brew install python3
# Ubuntu/Debian
sudo apt update && sudo apt install python3
# Windows
winget install Python.Python.3.12The skill activates automatically when you request UI/UX work. Just chat naturally:
Build a landing page for my SaaS product
Use the slash command to invoke the skill:
/ui-ux-pro-max Build a landing page for my SaaS product
Type / in chat to see available commands, then select ui-ux-pro-max:
/ui-ux-pro-max Build a landing page for my SaaS product
In VS Code with Copilot, type / in chat to see available prompts, then select ui-ux-pro-max:
/ui-ux-pro-max Build a landing page for my SaaS product
The skill activates automatically for UI/UX requests. You can also invoke it explicitly:
$ui-ux-pro-max Build a landing page for my SaaS product
The skill activates automatically for UI/UX requests once installed to .continue/skills/:
Build a landing page for my SaaS product
The skill activates automatically when you request UI/UX work:
Build a landing page for my SaaS product
The skill activates automatically when you request UI/UX work:
Build a landing page for my SaaS product
The skill activates automatically when you request UI/UX work:
Build a landing page for my SaaS product
Disclaimer: Trae skill is in beta. Please report any issues or feedback.
To use Trae skill, you need to switch to SOLO mode. If your request is related to skills, skills will be used:
Build a landing page (frontend ONLY) for my SaaS product.
The skill activates automatically when you request UI/UX work:
Build a landing page for my SaaS product
The skill activates automatically when you request UI/UX work:
Build a landing page for my SaaS product
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
- You ask - Request any UI/UX task (build, design, create, implement, review, fix, improve)
- Design System Generated - The AI automatically generates a complete design system using the reasoning engine
- Smart recommendations - Based on your product type and requirements, it finds the best matching styles, colors, and typography
- Code generation - Implements the UI with proper colors, fonts, spacing, and best practices
- Pre-delivery checks - Validates against common UI/UX anti-patterns
The skill provides stack-specific guidelines for:
| Category | Stacks |
|---|---|
| Web (HTML) | HTML + Tailwind (default) |
| React Ecosystem | React, Next.js, shadcn/ui |
| Vue Ecosystem | Vue, Nuxt.js, Nuxt UI |
| Other Web | Svelte, Astro |
| iOS | SwiftUI |
| Android | Jetpack Compose |
| Cross-Platform | React Native, Flutter |
Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind.
For direct access to the design system generator:
Note: If you installed via Continue, replace
.claude/skills/with.continue/skills/in the commands below.
# Generate design system with ASCII output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
# Generate with Markdown output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# Domain-specific 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 guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwindSave your design system to files for hierarchical retrieval across sessions:
# Generate and persist to design-system/MASTER.md
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
# Also create a page-specific override file
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"This creates a design-system/ folder structure:
design-system/
├── MASTER.md # Global Source of Truth (colors, typography, spacing, components)
└── pages/
└── dashboard.md # Page-specific overrides (only deviations from Master)
How hierarchical retrieval works:
- When building a specific page (e.g., "Checkout"), first check
design-system/pages/checkout.md - If the page file exists, its rules override the Master file
- If not, use
design-system/MASTER.mdexclusively
Context-aware retrieval prompt:
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
This project is licensed under the MIT License.