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

@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

@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

@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 | Body: Open Sans

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

Best for: Education, consumer apps, lifestyle brands

Editorial / Creative

Heading: Fraunces | Body: Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

Best for: Blogs, magazines, portfolios

Healthcare / Wellness

Heading: Outfit | Body: Nunito

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');

Best for: Healthcare, wellness, medical apps

---

Visual Styles Reference

Minimalism

• Colors: Monochrome + 1 accent, high whitespace
• Effects: Subtle shadows, clean borders, micro-interactions
• Best For: SaaS, productivity, professional apps
• Keywords: clean, simple, whitespace, subtle, elegant

Glassmorphism

• Colors: Translucent layers, blur effects, gradient backgrounds
• Effects: backdrop-blur, bg-white/10, soft shadows
• Best For: Modern dashboards, music apps, portfolios
• Keywords: glass, blur, translucent, frosted, layered

Neumorphism

• Colors: Soft pastels, same-hue shadows (dark/light)
• Effects: Inset shadows, extruded elements, soft depth
• Best For: Control panels, calculators, music players
• Keywords: soft, embossed, extruded, tactile, 3D-soft

Dark Mode

• Colors: Dark backgrounds (#0F172A), light text, accent colors
• Effects: Subtle borders, glows on focus, reduced eye strain
• Best For: Developer tools, media apps, gaming
• Keywords: dark, night, low-light, contrast, modern

Bento Grid

• Colors: Card-based with distinct backgrounds per section
• Effects: Grid layouts, varying card sizes, clear hierarchy
• Best For: Feature showcases, portfolios, dashboards
• Keywords: grid, cards, modular, organized, showcase

Aurora / Gradient Mesh

• Colors: Multi-color gradients, mesh blending, vibrant
• Effects: Animated gradients, color transitions, depth
• Best For: AI products, creative tools, landing pages
• Keywords: aurora, gradient, mesh, colorful, flowing

Brutalism

• Colors: High contrast, raw colors, bold primaries
• Effects: Heavy borders, raw typography, intentionally rough
• Best For: Creative agencies, art portfolios, bold brands
• Keywords: raw, bold, stark, unpolished, striking

---

Landing Page Patterns

Hero-Centric (Conversion Focus)

Sections: Hero > Social Proof > Features > CTA

• Primary CTA above fold
• Trust badges near CTA
• Single focused message

Feature-Forward (Product Demo)

Sections: Hero > Feature Grid > How It Works > Pricing > CTA

• Visual product demos
• Benefits over features
• Comparison tables for pricing

Story-Driven (Brand Building)

Sections: Hero > Problem > Solution > Journey > Team > CTA

• Emotional connection first
• Customer success stories
• Brand narrative flow

Social Proof Heavy (Trust Building)

Sections: Hero > Logos > Testimonials > Case Studies > CTA

• Client logos prominent
• Video testimonials
• Stats and numbers

---

Chart Type Selection

Data Type	Best Chart	When to Use
Trend Over Time	Line Chart	Time-series, growth, progress
Compare Categories	Bar Chart	Rankings, comparisons
Part-to-Whole	Donut Chart	Percentages, proportions (≤5 items)
Correlation	Scatter Plot	Relationships, patterns
Geographic	Choropleth Map	Regional data, locations
Funnel/Flow	Funnel Chart	Conversion, process stages
Performance	Gauge/Bullet	KPIs, targets
Hierarchical	Treemap	Nested categories, proportions

Chart Color Guidance:

• Primary data: #2563EB (blue-600)
• Success/Growth: #22C55E (green-500)
• Warning/Alert: #F59E0B (amber-500)
• Error/Decline: #EF4444 (red-500)
• Neutral: #94A3B8 (slate-400)

For detailed chart data (25 chart types with library recommendations, accessibility notes, and interactive levels), see data/design-data.csv.

---

Accessibility Requirements (CRITICAL)

Color Contrast

• Normal text: 4.5:1 minimum ratio
• Large text (18px+): 3:1 minimum ratio
• Interactive elements: Clear focus states

Touch Targets

• Minimum size: 44x44px for touch devices
• Spacing: 8px minimum between targets

Focus States

/* Always visible focus ring */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Form Labels

• Every input MUST have associated label
• Use <label for="id"> or aria-label
• Error messages near the problem field

---

Common UX Anti-Patterns (AVOID)

Icons

• NO: Using emojis as UI icons
• YES: Use SVG icons (Heroicons, Lucide, Simple Icons)

Hover States

• NO: Scale transforms that shift layout
• YES: Color/opacity transitions only

Cursors

• NO: Default cursor on clickable elements
• YES: cursor-pointer on all interactive elements

Light Mode Glass

• NO: bg-white/10 (too transparent, invisible)
• YES: bg-white/80 or higher opacity

Z-Index

• NO: Random z-index values (999, 9999)
• YES: Defined scale: 10 (default), 20 (dropdown), 30 (modal), 50 (toast)

Animations

• NO: Slow animations (>500ms) or layout-shifting
• YES: 150-300ms duration, transform/opacity only

---

Stack-Specific Guidelines

HTML + Tailwind CSS

• Use utility classes, avoid custom CSS
• Responsive: sm:, md:, lg:, xl: breakpoints
• Dark mode: dark: variant
• Always include cursor-pointer on buttons/links

React

• Use memo() for expensive components
• Prefer useMemo/useCallback for stable references
• Avoid inline functions in render
• Use Suspense for code splitting

Next.js

• Use next/image for automatic optimization
• Implement dynamic imports for heavy components
• Use next/font for optimized font loading
• Leverage Server Components where possible

Vue 3

• Use Composition API with <script setup>
• Pinia for state management
• defineProps with TypeScript
• Lazy load routes with dynamic imports

Flutter

• Use const constructors for static widgets
• ListView.builder for long lists
• Dispose controllers in dispose()
• Use Theme.of(context) for consistent theming

SwiftUI

• Use @State for local state, @StateObject for reference types
• Prefer .task over .onAppear for async
• Use LazyVStack for long lists
• Support Dynamic Type for accessibility

For comprehensive stack-specific guidelines (99 rules across Flutter, SwiftUI, and more), see data/stack-guidelines.csv.

---

Response Style

When designing interfaces:

1. Present the design system first with all recommendations
2. Show color swatches with hex values and usage
3. Include Google Fonts import code ready to use
4. Provide code examples following stack best practices
5. Explain design decisions with reasoning

---

Pre-Delivery Checklist

Visual Quality

• No emojis as icons (use SVG: Heroicons, Lucide, Simple Icons)
• All icons from consistent icon set
• Brand logos verified from official sources
• Hover states don't cause layout shift

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear visual feedback
• Transitions are smooth (150-300ms)
• Focus states visible for keyboard navigation

Light/Dark Mode

• Light mode text has sufficient contrast (4.5:1 minimum)
• Glass/transparent elements visible in light mode
• Borders visible in both modes

Layout

• Floating elements have proper spacing from edges
• No content hidden behind fixed navbars
• Responsive at 375px, 768px, 1024px, 1440px
• No horizontal scroll on mobile

Accessibility

• All images have alt text
• Form inputs have labels
• Color is not the only indicator
• prefers-reduced-motion respected

Pre-Implementation

• Product type identified
• Visual style selected
• Color palette defined
• Typography pairing chosen
• Landing page pattern selected
• Accessibility requirements noted
• Tech stack guidelines reviewed