ui-ux-pro-max-skill

An AI-powered design intelligence system for building professional UI/UX across multiple platforms and frameworks.

nextlevelbuilder

Designers / Developers

Image designProject managementVerifiedOpen-source license: MIT

GitHub Stars110K

Suggested prompts

Generate a design system for a high-end beauty spa landing page with an elegant and premium aesthetic.

Recommend a modern UI color palette and typography system for a fitness app targeting young users.

How can I generate a responsive design system that complies with WCAG AA standards based on my project requirements?

About this skill

UI UX Pro Max

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.

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 (192 categories)                    │
│     • Style recommendations (84 styles)                         │
│     • Color palette selection (192 palettes)                    │
│     • Landing page patterns (34 patterns)                       │
│     • Typography pairing (74 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: pattern, style priority, color mood, typography mood, key effects, and anti-patterns.

Features

84 UI Styles - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more
192 Color Palettes - Industry-specific palettes aligned 1:1 with the 192 product types
74 Font Pairings - Curated typography combinations with Google Fonts imports
25 Chart Types - Recommendations for dashboards and analytics
22 Tech Stacks - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
98 UX Guidelines - Best practices, anti-patterns, and accessibility rules
161 Reasoning Rules - Industry-specific design system generation

Available Styles

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

Usage

Simply request UI/UX work in natural language. The skill activates automatically and generates a complete design system before implementing the UI.

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, Three.js
Desktop	JavaFX, WPF, WinUI 3, Avalonia, Uno Platform, UWP
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.

Prerequisites

Python 3.x is required for the search script (standard library only — the scripts install nothing and make no network calls). If Python is missing, the AI agent will ask you to install it; it will not install software on your machine automatically.

Notes

This skill is the open-source version. It includes all core UI/UX intelligence, design system generation, and cross-platform support. For brand identity design, asset creation, and advanced features, a premium version exists but is not included here.