AI-powered design intelligence for building professional UI/UX across multiple platforms with 67 styles, 96 color palettes, 100 reasoning rules, and intelligent design system generation
An AI skill that provides comprehensive design intelligence for building professional UI/UX across multiple platforms and frameworks.
This skill's flagship feature is the Design System Generator - an AI-powered reasoning engine that analyzes project requirements and generates complete, tailored design systems in seconds.
The system performs:
Multi-Domain Search (5 parallel searches):
Reasoning Engine:
Complete Design System Output:
The skill includes specialized rules for:
Each rule includes:
Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, and more.
Curated typography combinations with Google Fonts imports.
Recommendations for dashboards and analytics.
React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose.
Best practices, anti-patterns, and accessibility rules.
This skill activates automatically when you request UI/UX work. Just chat naturally:
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
To generate a complete design system for your project, use the search script:
# Generate design system with ASCII output
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
# Generate with Markdown output
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# Domain-specific search
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
# Stack-specific guidelines
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
Save your design system to files for hierarchical retrieval across sessions:
# Generate and persist to design-system/MASTER.md
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
# Also create a page-specific override file
python3 .agent/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)
When a user requests UI/UX work:
| 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 |
Always validate against this checklist before delivering UI/UX work:
The skill includes comprehensive CSV databases:
data/styles.csv - 67 UI styles with keywords, best-for, and guidelinesdata/colors.csv - 96 color palettes with hex codes and use casesdata/typography.csv - 57 font pairings with Google Fonts linksdata/products.csv - 100 product categories with UI recommendationsdata/landing.csv - 24 landing page patternsdata/charts.csv - 25 chart type recommendationsdata/ui-reasoning.csv - 100 industry-specific reasoning rulesdata/ux-guidelines.csv - 99 UX best practicesdata/stacks/ - Stack-specific guidelines for 13 frameworksWhen you request "Build a landing page for a beauty spa", the skill generates:
TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM
PATTERN: Hero-Centric + Social Proof
Conversion: Emotion-driven with trust elements
CTA: Above fold, repeated after testimonials
Sections: Hero → Services → Testimonials → Booking → 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)
TYPOGRAPHY: Cormorant Garamond / Montserrat
Mood: Elegant, calming, sophisticated
Best For: Luxury brands, wellness, beauty, editorial
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
Source: nextlevelbuilder/ui-ux-pro-max-skill License: MIT Version: 2.0+