↑
UI UX Pro Max
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:
Other projects
NextLevelBuilder.io | GoClaw.sh | ClaudeKit.cc | TOSE.sh
What's New in v2.0
Intelligent Design System Generation
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 || |+----------------------------------------------------------------------------------------+
How Design System Generation Works
┌─────────────────────────────────────────────────────────────────┐│ 1. USER REQUEST ││ "Build a landing page for my beauty spa" │└─────────────────────────────────────────────────────────────────┘ │ ▼┌─────────────────────────────────────────────────────────────────┐│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) ││ • Product type matching (161 categories) ││ • Style recommendations (67 styles) ││ • Color palette selection (161 palettes) ││ • Landing page patterns (24 patterns) ││ • Typography pairing (57 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 │└─────────────────────────────────────────────────────────────────┘
161 Industry-Specific Reasoning Rules
The reasoning engine includes specialized rules for:
| Category | Examples |
|---|---|
| Tech & SaaS | SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform |
| Finance | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool |
| Healthcare | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder |
| E-commerce | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery |
| Services | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment |
| Creative | Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor |
| Lifestyle | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker |
| Emerging Tech | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet |
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)
Features
- 67 UI Styles - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more
- 161 Color Palettes - Industry-specific palettes aligned 1:1 with the 161 product types
- 57 Font Pairings - Curated typography combinations with Google Fonts imports
- 25 Chart Types - Recommendations for dashboards and analytics
- 15 Tech Stacks - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel
- 99 UX Guidelines - Best practices, anti-patterns, and accessibility rules
- 161 Reasoning Rules - Industry-specific design system generation (NEW in v2.0)
Available Styles (67)
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 |
Installation
Using Claude Marketplace (Claude Code)
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
Using CLI (Recommended)
# Install CLI globallynpm install -g uipro-cli # Go to your projectcd /path/to/your/project # Install for your AI assistantuipro init --ai claude # Claude Codeuipro init --ai cursor # Cursoruipro init --ai windsurf # Windsurfuipro init --ai antigravity # Antigravityuipro init --ai copilot # GitHub Copilotuipro init --ai kiro # Kirouipro init --ai codex # Codex CLIuipro init --ai qoder # Qoderuipro init --ai roocode # Roo Codeuipro init --ai gemini # Gemini CLIuipro init --ai trae # Traeuipro init --ai opencode # OpenCodeuipro init --ai continue # Continueuipro init --ai codebuddy # CodeBuddyuipro init --ai droid # Droid (Factory)uipro init --ai kilocode # KiloCodeuipro init --ai warp # Warpuipro init --ai augment # Augmentuipro init --ai all # All assistants
Global Install (Available for All Projects)
uipro init --ai claude --global # Install to ~/.claude/skills/uipro init --ai cursor --global # Install to ~/.cursor/skills/
Other CLI Commands
uipro versions # List available versionsuipro update # Update to latest versionuipro init --offline # Skip GitHub download, use bundled assetsuipro uninstall # Remove skill (auto-detect platform)uipro uninstall --ai claude # Remove specific platformuipro uninstall --global # Remove from global install
Prerequisites
Python 3.x is required for the search script.
# Check if Python is installedpython3 --version # macOSbrew install python3 # Ubuntu/Debiansudo apt update && sudo apt install python3 # Windowswinget install Python.Python.3.12
Usage
Skill Mode (Auto-activate)
Supported: Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment
The skill activates automatically when you request UI/UX work. Just chat naturally:
Build a landing page for my SaaS product
Trae: Switch to SOLO mode first. The skill will activate for UI/UX requests.
Workflow Mode (Slash Command)
Supported: Kiro, GitHub Copilot, Roo Code, KiloCode
Use the slash command to invoke the skill:
/ui-ux-pro-max Build a landing page for my SaaS product
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 Build a fintech banking app with dark theme
How It Works
- 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
Supported Stacks
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 |
| Angular | Angular |
| PHP | Laravel (Blade, Livewire, Inertia.js) |
| 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.
Design System Command (Advanced)
For direct access to the design system generator:
Note: If you installed via Continue, replace
.claude/skills/with.continue/skills/in the commands below. For Droid (Factory), use.factory/skills/.
# Generate design system with ASCII outputpython3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa" # Generate with Markdown outputpython3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown # Domain-specific searchpython3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain stylepython3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typographypython3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart # Stack-specific guidelinespython3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack reactpython3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
Persist Design System (Master + Overrides Pattern)
Save your design system to files for hierarchical retrieval across sessions:
# Generate and persist to design-system/MASTER.mdpython3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" # Also create a page-specific override filepython3 .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...
Architecture & Contributing
For Users
The codebase has been restructured to use a template-based generation system. All platform-specific files (.cursor/, .windsurf/, .kiro/, .factory/, etc.) are now generated dynamically by the CLI.
Always use the CLI to install:
npm install -g uipro-cliuipro init --ai <platform>
This ensures you get the latest templates and correct file structure for your AI assistant.
For Contributors
If you want to contribute to this project:
# 1. Clone the repositorygit clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.gitcd ui-ux-pro-max-skill # 2. Understand the structuresrc/ui-ux-pro-max/ # Source of truth (data, scripts, templates)cli/ # CLI installer (generates files from templates).claude/ # Local dev/test for Claude Code skill.factory/ # Local dev/test for Droid (Factory) skill # 3. Make changes in src/ui-ux-pro-max/# - data/*.csv → Database files# - scripts/*.py → Search engine & design system# - templates/ → Platform-specific templates # 4. Sync to CLI and test locallycp -r src/ui-ux-pro-max/data/* cli/assets/data/cp -r src/ui-ux-pro-max/scripts/* cli/assets/scripts/cp -r src/ui-ux-pro-max/templates/* cli/assets/templates/ # 5. Build and test CLIcd cli && bun run buildnode dist/index.js init --ai claude --offline # Test in a temp folder # 6. Create PR (never push directly to main)git checkout -b feat/your-featuregit commit -m "feat: description"git push -u origin feat/your-featuregh pr create
See CLAUDE.md for detailed development guidelines.
Star History
License
This project is licensed under the MIT License.