UI/UX Pro Max

Design vocabulary and intelligence for precise UI direction.

Core Insight

AI doesn't lack creativity. Humans lack the vocabulary to guide it.

This skill provides the precise terminology that unlocks professional design output.

When to Use

• Building UI without a designer
• Describing visual styles to AI
• Generating design systems
• Creating dashboards, landing pages, apps
• Need specific "look and feel"

Design Styles Vocabulary

Glassmorphism

Keywords: frosted glass, blur, transparency, light refraction
CSS: backdrop-filter: blur(10px); background: rgba(255,255,255,0.1);
Use for: Modern dashboards, overlays, cards, modals

Neumorphism (Soft UI)

Keywords: soft shadows, embossed, extruded, tactile
CSS: box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;
Use for: Buttons, toggles, sliders, settings panels

Neo-Brutalism

Keywords: bold colors, thick borders, raw, intentionally rough
CSS: border: 3px solid black; box-shadow: 4px 4px 0 black;
Use for: Creative portfolios, bold statements, anti-corporate

Minimalism

Keywords: whitespace, clean, essential, reduction
CSS: Lots of margin, limited color palette, thin fonts
Use for: Professional services, luxury brands, content-focused

Bento Grid

Keywords: varied card sizes, magazine layout, asymmetric grid
CSS: grid-template-columns: repeat(4, 1fr); varied spans
Use for: Dashboards, feature showcases, portfolios

Dark Mode

Keywords: low brightness, reduced eye strain, OLED-friendly
Colors: Gray-900 background, Gray-100 text, muted accents
Use for: Dev tools, media apps, night-time usage

Skeuomorphism

Keywords: realistic textures, physical metaphors, familiar
Examples: Leather texture, paper, wood grain, physical buttons
Use for: Educational apps, games, nostalgic design

Flat Design

Keywords: 2D, no shadows, bold colors, simple shapes
CSS: No gradients, no shadows, solid colors
Use for: Icons, illustrations, mobile apps

Component Vocabulary

Cards

"Elevated card" = shadow-md, white background
"Outlined card" = border, no shadow
"Glass card" = transparent, backdrop blur
"Floating card" = large shadow, lifted appearance

Buttons

"Primary CTA" = filled, brand color, prominent
"Secondary" = outlined or muted background
"Ghost button" = transparent, text only
"Pill button" = fully rounded corners
"Icon button" = square, icon only

Navigation

"Sticky header" = fixed top, blur background
"Sidebar nav" = left-anchored, collapsible
"Bottom nav" = mobile, icon + label
"Breadcrumbs" = hierarchical, > separated
"Tab bar" = horizontal, underline active

Feedback

"Toast" = temporary, corner-positioned
"Snackbar" = bottom, action button
"Modal" = centered, overlay backdrop
"Sheet" = slides from edge (bottom/right)
"Tooltip" = hover-triggered, contextual

Project Type Prompts

Dashboard

"Build a dashboard with:
- Bento grid layout
- Glassmorphism cards
- Dark mode
- Stats cards with sparklines
- Sidebar navigation"

Landing Page

"Build a landing page with:
- Hero section with gradient text
- Bento feature grid
- Social proof section
- Sticky CTA header
- Minimalist footer"

SaaS App

"Build a SaaS interface with:
- Clean sidebar navigation
- White card-based content
- Subtle shadows
- Blue accent color
- Empty states with illustrations"

Mobile App

"Build a mobile app with:
- Bottom tab navigation
- Pull-to-refresh
- Card-based content
- Floating action button
- Native-feeling transitions"

Color Psychology

Color	Meaning	Use For
Blue	Trust, professional	Finance, healthcare, B2B
Green	Growth, nature	Eco, finance (positive), health
Red	Urgency, energy	CTAs, warnings, food
Purple	Premium, creative	Luxury, creative tools
Orange	Friendly, energetic	Youth brands, food
Black	Luxury, power	Fashion, premium products
White	Clean, simple	Healthcare, minimalist

Typography Pairings

Modern: Inter + Inter (variable weight)
Classic: Playfair Display + Source Sans
Tech: Space Grotesk + IBM Plex Mono
Friendly: Poppins + Open Sans
Editorial: Merriweather + Lato

Spacing System

Micro: 4px (icons, inline spacing)
Small: 8px (between related elements)
Medium: 16px (between sections)
Large: 24-32px (major sections)
XL: 48-64px (page sections)

Quick Style Recipes

"Apple-like"

Minimalist, lots of whitespace, SF Pro font,
subtle gray cards, animated micro-interactions,
high-quality imagery, single accent color

"Stripe-like"

Clean, technical, gradient hero,
code snippets, documentation style,
purple/blue gradient, metric cards

"Linear-like"

Dark mode default, purple accents,
keyboard shortcuts visible, minimal borders,
command palette, glassmorphism elements

"Notion-like"

Content-first, markdown-native,
collapsible blocks, minimal chrome,
emoji as icons, gray scale palette