ui-ux-pro-max

# UI/UX Pro Max - Design Intelligence Expert

Comprehensive UI/UX design guide for web and mobile applications. Provides intelligent design recommendations based on product type, industry, and user requirements. Reference these guidelines when designing new UI, choosing colors and typography, reviewing code for UX issues, or implementing features.

---

## Workflow

### Step 1: Analyze User Requirements

Extract from user request:
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
- **Industry**: healthcare, fintech, gaming, education, beauty, etc.
- **Tech stack**: React, Vue, Next.js, Svelte, Flutter, or html-tailwind (default)

### Step 2: Generate Design System

Consult the reference data below (and CSV files in `data/`) for:
- Recommended patterns and section layouts
- Primary visual style with effects
- Color palette (primary, secondary, CTA, background, text)
- Typography pairing (heading + body fonts with Google Fonts URL)
- Key effects and anti-patterns to avoid

### Step 3: Implementation Guidelines

Apply stack-specific best practices from the reference data:
- HTML/Tailwind utilities, responsive breakpoints
- React hooks, state management, performance patterns
- Vue Composition API, Pinia state
- Flutter widgets, themes, navigation
- Accessibility requirements (WCAG compliance)

### Step 4: Pre-Delivery Verification

Run through all checklists (visual quality, interaction, light/dark mode, layout, accessibility) before delivering any UI code.

---

## Priority Rules

| Priority | Category | Impact |
|----------|----------|--------|
| 1 | Accessibility | CRITICAL - Color contrast 4.5:1, focus states, aria-labels |
| 2 | Touch & Interaction | CRITICAL - 44x44px touch targets, cursor-pointer |
| 3 | Performance | HIGH - Image optimization, lazy loading |
| 4 | Layout & Responsive | HIGH - Mobile-first, viewport meta |
| 5 | Typography & Color | MEDIUM - Line height 1.5-1.75, readable fonts |
| 6 | Animation | MEDIUM - 150-300ms duration, transform-only |
| 7 | Style Selection | MEDIUM - Match style to product type |

---

## Quick Style Selector by Product Type

| Product Type | Primary Style | Secondary Styles | Color Mood |
|--------------|---------------|------------------|------------|
| SaaS (General) | Minimalism | Flat Design, Glassmorphism | Trust blue + accent contrast |
| E-commerce | Neo-Brutalism | Bento Grid, Dark Mode | Brand primary + success green |
| E-commerce Luxury | Luxury Minimal | Dark Mode, Elegant | Premium black + gold accents |
| Healthcare | Soft Minimalism | Flat Design, Organic | Calm blue + health green |
| Fintech/Crypto | Cyberpunk | Dark Mode, Glassmorphism | Dark tech + vibrant accents |
| Gaming | Neon Glow | Cyberpunk, Dark Mode | Vibrant + neon + immersive |
| Portfolio/Creative | Editorial | Brutalism, Asymmetric | Brand primary + artistic |
| Dashboard | Corporate Tech | Flat Design, Data-Dense | Cool→Hot gradients + neutral |
| AI/Chatbot | Aurora Gradients | Glassmorphism, Dark Mode | Neutral + AI Purple (#6366F1) |
| Beauty/Spa/Wellness | Organic Shapes | Soft Minimalism, Elegant | Soft pastels + natural tones |

---

## Color Palettes by Industry

### SaaS / Business
| Role | Hex | Tailwind |
|------|-----|----------|
| Primary | #2563EB | blue-600 |
| Secondary | #3B82F6 | blue-500 |
| CTA | #F97316 | orange-500 |
| Background | #F8FAFC | slate-50 |
| Text | #1E293B | slate-800 |
| Border | #E2E8F0 | slate-200 |

### E-commerce Luxury
| Role | Hex | Tailwind |
|------|-----|----------|
| Primary | #1C1917 | stone-900 |
| Secondary | #44403C | stone-700 |
| CTA | #CA8A04 | yellow-600 |
| Background | #FAFAF9 | stone-50 |
| Text | #0C0A09 | stone-950 |
| Border | #D6D3D1 | stone-300 |

### Healthcare
| Role | Hex | Tailwind |
|------|-----|----------|
| Primary | #0891B2 | cyan-600 |
| Secondary | #22D3EE | cyan-400 |
| CTA | #059669 | emerald-600 |
| Background | #ECFEFF | cyan-50 |
| Text | #164E63 | cyan-900 |
| Border | #A5F3FC | cyan-200 |

### Fintech / Crypto
| Role | Hex | Tailwind |
|------|-----|----------|
| Primary | #F59E0B | amber-500 |
| Secondary | #FBBF24 | amber-400 |
| CTA | #8B5CF6 | violet-500 |
| Background | #0F172A | slate-900 |
| Text | #F8FAFC | slate-50 |
| Border | #334155 | slate-700 |

### Gaming
| Role | Hex | Tailwind |
|------|-----|----------|
| Primary | #7C3AED | violet-600 |
| Secondary | #A78BFA | violet-400 |
| CTA | #F43F5E | rose-500 |
| Background | #0F0F23 | custom-dark |
| Text | #E2E8F0 | slate-200 |
| Border | #4C1D95 | violet-900 |

### AI / Chatbot Platform
| Role | Hex | Tailwind |
|------|-----|----------|
| Primary | #7C3AED | violet-600 |
| Secondary | #A78BFA | violet-400 |
| CTA | #06B6D4 | cyan-500 |
| Background | #FAF5FF | violet-50 |
| Text | #1E1B4B | indigo-950 |
| Border | #DDD6FE | violet-200 |

### Beauty / Spa / Wellness
| Role | Hex | Tailwind |
|------|-----|----------|
| Primary | #DB2777 | pink-600 |
| Secondary | #F472B6 | pink-400 |
| CTA | #059669 | emerald-600 |
| Background | #FDF2F8 | pink-50 |
| Text | #831843 | pink-900 |
| Border | #FBCFE8 | pink-200 |

---

## Typography Pairings

### Professional / Corporate
**Heading:** Inter | **Body:** Inter
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
```
*Best for: SaaS, dashboards, business apps*

### Elegant / Luxury
**Heading:** Playfair Display | **Body:** Lato
```css
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');
```
*Best for: Luxury brands, editorial, high-end e-commerce*

### Modern / Tech
**Heading:** Space Grotesk | **Body:** DM Sans
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');
```
*Best for: Tech startups, fintech, AI products*

### Friendly / Playful
**Heading:** Poppins