UI/UX Pro Max

Overview

Complete UI/UX design intelligence for building polished, intuitive interfaces. Covers interaction design, user flows, component patterns, design systems, accessibility, and micro-interactions. Provides both strategic design thinking and practical implementation guidance for production-quality interfaces.

Instructions

When a user asks for UI/UX guidance or implementation, follow these steps:

Step 1: Understand the design context

Aspect	What to Identify
Users	Who are they? Technical? Non-technical? Frequency of use?
Task	What is the user trying to accomplish?
Context	Desktop, mobile, or both? Time-pressured or exploratory?
Complexity	How many steps? How much data? How many options?
Existing patterns	What conventions does the product already follow?

Step 2: Apply core UX principles

Progressive disclosure: Show only what is needed at each step. Hide complexity behind expandable sections, tooltips, or advanced settings.

Feedback loops: Every user action must produce visible feedback within 100ms. Clicks, submissions, errors, success — all need clear responses.

Error prevention over error handling: Disable invalid options, validate inline, use smart defaults. It is cheaper to prevent mistakes than to recover from them.

Recognition over recall: Users should see their options, not remember them. Use dropdowns instead of free text when options are known. Show recent items and suggestions.

Consistency: Same action, same pattern, everywhere. If clicking a row opens a detail panel on one page, it should do the same on every page.

Step 3: Design the interaction patterns

Navigation patterns:

Top nav:        Best for < 7 primary sections, public sites
Sidebar nav:    Best for apps with deep hierarchy, frequent switching
Tab bar:        Best for mobile, 3-5 primary destinations
Breadcrumbs:    Best for deep hierarchies where users need to backtrack
Command palette: Best for power users, keyboard-driven apps

Form patterns:

Single column:  Best for most forms (faster completion)
Multi-column:   Only for related short fields (city/state/zip)
Stepped wizard: Best for 7+ fields or complex flows
Inline editing: Best for settings and profile pages

Data display patterns:

Table:          Best for comparing items with many attributes
Card grid:      Best for visual items or browsing
List:           Best for sequential or prioritized items
Detail panel:   Best for master-detail workflows
Dashboard:      Best for monitoring metrics at a glance

Step 4: Implement with polish

Loading states:

Skeleton screens over spinners (less jarring, feels faster)
Show progress bars for operations over 3 seconds
Optimistic UI for common actions (show success immediately, rollback on failure)

Empty states:

Never show a blank screen. Explain what will appear here and how to get started
Include an illustration or icon to soften the empty feeling
Provide a primary action button ("Create your first project")

Transitions and animation:

Duration:   150-300ms for UI transitions (faster feels snappy)
Easing:     ease-out for entrances, ease-in for exits
Motion:     Fade + slight translate (8-16px) for appearing elements
Hover:      Scale 1.02-1.05 for cards, color shift for buttons
Focus:      Visible ring (2px offset) for keyboard navigation

Micro-interactions that matter:

Button press: subtle scale down (0.97) on active
Toggle switch: smooth slide with color transition
Checkbox: checkmark draws in with a slight bounce
Form submit: button shows loading state, then success checkmark
Delete: item slides out, undo toast appears

Step 5: Validate the design

5-second test: Can a new user identify the page purpose in 5 seconds?
Squint test: When you blur your eyes, does the visual hierarchy still work?
Tab test: Can you navigate the entire flow with keyboard only?
Error test: What happens when things go wrong? Empty data? Long text? Slow network?

Examples

Example 1: Improve a settings page UX

User request: "Our settings page is confusing, help me redesign it"

Analysis and output:

## Current Issues
1. All settings on one long page — overwhelming
2. No grouping — unrelated settings mixed together
3. Save button only at the bottom — easy to miss
4. No indication of which settings were changed

## Recommended Design

### Structure
- Group settings into logical sections with a left sidebar:
  - General, Notifications, Security, Billing, Integrations
- Each section loads as its own panel on the right

### Interaction
- Auto-save with a subtle "Saved" toast (no save button needed)
- Or: floating save bar that appears only when changes are detected
- Show changed fields with a subtle highlight
- Add "Reset to default" per field, not per page

### Component Pattern
[Sidebar] → [Section Header + Description] → [Setting Group]

Each setting:
  Label (bold) + Description (gray, smaller)
  Input/Toggle/Select aligned to the right
  Divider between settings

Example 2: Design a user onboarding flow

User request: "Design an onboarding flow for our project management app"

Output:

## Onboarding Flow (4 steps)

### Step 1: Welcome + Name (10 sec)
- "Welcome to [App]! Let's get you set up."
- Single field: "What should we call you?"
- Skip button visible but de-emphasized
- Progress: ████░░░░ 1/4

### Step 2: Create First Project (20 sec)
- "Create your first project"
- Project name field (pre-filled with "My First Project")
- Template picker: 3 visual cards (Blank, Marketing, Engineering)
- Progress: █████░░░ 2/4

### Step 3: Invite Team (optional) (15 sec)
- "Work better together"
- Email input with "Add another" button
- "I'll do this later" link prominent
- Progress: ███████░ 3/4

### Step 4: Quick Tour (30 sec)
- 3-step spotlight tour of key features
- Highlight: sidebar nav, create button, notification bell
- "Got it" button on each, skip link visible
- Progress: ████████ Done!

### Design Principles Applied
- Each step has ONE primary action
- Never more than 2 fields per step
- Always show progress and allow skipping
- Pre-fill smart defaults to reduce effort
- Total time: under 90 seconds

Example 3: Design system component audit

User request: "Help me create consistent button styles for our app"