Skip to main content
The /ui-ux-pro-max command provides comprehensive design intelligence with searchable databases of styles, colors, typography, and UX patterns. Use this for professional UI/UX implementation.

​
What’s included

50+ Styles

Glassmorphism, minimalism, brutalism, and more

97 Color Palettes

Product-specific palettes (SaaS, e-commerce, healthcare, etc.)

57 Font Pairings

Google Fonts combinations for every style

99 UX Guidelines

Best practices and anti-patterns

25 Chart Types

Visualization recommendations

9 Tech Stacks

Implementation guides (React, Vue, Next.js, etc.)

​
Prerequisites

Python 3.x is required. Check if installed: 
python3 --version || python --version
If not installed: 
brew install python3

​
How to use

​
Step 1: Generate design system (REQUIRED)

Always start with --design-system for comprehensive recommendations: 
python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system -p "Project Name"
This command:
  1. Searches 5 domains in parallel (product, style, color, landing, typography)
  2. Applies reasoning rules to select best matches
  3. Returns complete design system with anti-patterns to avoid
Example: 
python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

​
Step 2: Persist design system (optional)

Save for hierarchical retrieval across sessions: 
python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
This creates:
  • design-system/MASTER.md - Global source of truth
  • design-system/pages/ - Page-specific overrides
With page-specific override: 
python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

​
Step 3: Detailed searches (as needed)

Get additional details for specific domains: 
python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
NeedDomainExample
More style optionsstyle--domain style "glassmorphism dark"
Chart recommendationschart--domain chart "real-time dashboard"
UX best practicesux--domain ux "animation accessibility"
Alternative fontstypography--domain typography "elegant luxury"
Landing structurelanding--domain landing "hero social-proof"

​
Step 4: Stack guidelines

Get implementation-specific best practices (defaults to html-tailwind): 
python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

​
Available domains

DomainUse ForExample Keywords
productProduct type recommendationsSaaS, e-commerce, portfolio, healthcare
styleUI styles, colors, effectsglassmorphism, minimalism, dark mode
typographyFont pairingselegant, playful, professional
colorColor palettes by productsaas, ecommerce, healthcare, beauty
landingPage structure, CTAshero, testimonial, pricing
chartChart typestrend, comparison, timeline, funnel
uxBest practicesanimation, accessibility, z-index
webWeb guidelinesaria, focus, keyboard, semantic

​
Available stacks

StackFocus
html-tailwindTailwind utilities, responsive, a11y (DEFAULT)
reactState, hooks, performance, patterns
nextjsSSR, routing, images, API routes
vueComposition API, Pinia, Vue Router
svelteRunes, stores, SvelteKit
swiftuiViews, State, Navigation, Animation
react-nativeComponents, Navigation, Lists
flutterWidgets, State, Layout, Theming
shadcnshadcn/ui components, theming, forms
jetpack-composeComposables, Modifiers, State Hoisting

​
Common rules for professional UI

​
Icons & Visual Elements

RuleDoDon’t
No emoji iconsUse SVG icons (Heroicons, Lucide)Use emojis like 🎨 🚀 ⚙️
Stable hover statesUse color/opacity transitionsUse scale transforms that shift layout
Correct brand logosResearch official SVGGuess or use incorrect logos
Consistent icon sizingUse fixed viewBox (24x24)Mix different sizes randomly

​
Interaction & Cursor

RuleDoDon’t
Cursor pointerAdd cursor-pointer to clickable cardsLeave default cursor
Hover feedbackProvide visual feedbackNo indication of interactivity
Smooth transitionsUse transition-colors duration-200Instant state changes

​
Light/Dark Mode Contrast

RuleDoDon’t
Glass card light modeUse bg-white/80 or higherUse bg-white/10 (too transparent)
Text contrast lightUse #0F172A (slate-900) for textUse #94A3B8 (slate-400)
Muted text lightUse #475569 (slate-600) minimumUse gray-400 or lighter
Border visibilityUse border-gray-200 in light modeUse border-white/10

​
Pre-delivery checklist

Before delivering UI code:

​
Visual Quality

  • No emojis used as icons (use SVG instead)
  • All icons from consistent set (Heroicons/Lucide)
  • Brand logos are correct (Simple Icons)
  • Hover states don’t cause layout shift

​
Interaction

  • All clickable elements have cursor-pointer
  • Hover states provide clear 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
  • Test both modes before delivery

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us