Skip to main content

​
Overview

This guide walks you through creating a complete design system for a beauty spa landing page using UI/UX Pro Max.
UI/UX Pro Max uses an intelligent reasoning engine that analyzes 100+ industry-specific rules across 67 styles, 96 color palettes, and 57 font pairings to generate tailored design systems.

​
Generate Your First Design System

1

Describe Your Project

Start by describing what you’re building. The AI will extract:
  • Product type (SaaS, e-commerce, portfolio, etc.)
  • Industry (healthcare, fintech, beauty, etc.)
  • Style keywords (minimal, elegant, playful, etc.)
Example prompt:
Build a landing page for my beauty spa called Serenity Spa
2

AI Generates Design System

The skill automatically runs the design system generator:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "beauty spa wellness service" \
  --design-system \
  -p "Serenity Spa"
This searches 5 domains in parallel:
  • Product type matching (100 categories)
  • Style recommendations (67 styles)
  • Color palette selection (96 palettes)
  • Landing page patterns (24 patterns)
  • Typography pairing (57 combinations)
3

Review Complete Design System

You’ll receive a comprehensive design system:
+------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                            |
+------------------------------------------------------------------------------+
|
|  PATTERN: Hero-Centric + Social Proof
|     Conversion: Emotion-driven with trust elements
|     CTA: Above fold, repeated after testimonials
|     Sections:
|       1. Hero
|       2. Services
|       3. Testimonials
|       4. Booking
|       5. Contact
|
|  STYLE: Soft UI Evolution
|     Keywords: Soft shadows, subtle depth, calming, premium feel
|     Best For: Wellness, beauty, lifestyle brands, premium services
|     Performance: Excellent | Accessibility: WCAG AA
|
|  COLORS:
|     Primary:    #E8B4B8 (Soft Pink)
|     Secondary:  #A8D5BA (Sage Green)
|     CTA:        #D4AF37 (Gold)
|     Background: #FFF5F5 (Warm White)
|     Text:       #2D3436 (Charcoal)
|
|  TYPOGRAPHY: Cormorant Garamond / Montserrat
|     Mood: Elegant, calming, sophisticated
|     Google Fonts: https://fonts.google.com/share?selection.family=...
|
|  KEY EFFECTS:
|     Soft shadows + Smooth transitions (200-300ms) + Gentle hover states
|
|  AVOID (Anti-patterns):
|     Bright neon colors + Harsh animations + Dark mode
|
+------------------------------------------------------------------------------+
4

AI Implements the Design

The AI uses the design system to generate production-ready code with:
  • Exact color values from the palette
  • Google Fonts imports for typography
  • Proper spacing and layout
  • Accessibility best practices
  • Responsive design (375px, 768px, 1024px, 1440px)

​
Persist Design System (Master + Overrides)

For larger projects, persist the design system to files for reuse across sessions:
1

Generate and Save Master File

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "SaaS dashboard analytics" \
  --design-system \
  --persist \
  -p "MyApp"
Creates:
design-system/
└── myapp/
    └── MASTER.md  # Global Source of Truth
2

Create Page-Specific Overrides

For pages that need different styles:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "e-commerce checkout payment" \
  --design-system \
  --persist \
  -p "MyApp" \
  --page "checkout"
Creates:
design-system/
└── myapp/
    ├── MASTER.md
    └── pages/
        └── checkout.md  # Page-specific overrides
3

Use Hierarchical Retrieval

When building a specific page:
I am building the Checkout page. 
Please read design-system/myapp/MASTER.md.
Also check if design-system/myapp/pages/checkout.md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
The AI will:
  1. Check for pages/checkout.md (overrides)
  2. Fall back to MASTER.md (global rules)
  3. Apply the combined design system

​
Example Workflows

​
SaaS Landing Page

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "SaaS project management collaboration" \
  --design-system \
  -p "TaskFlow"

​
E-commerce Product Page

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "e-commerce luxury fashion" \
  --design-system \
  -p "LuxeStore"

​
Healthcare Dashboard

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "healthcare patient analytics dashboard" \
  --design-system \
  -p "MediTrack"

​
Common Use Cases

Landing Pages

Generate hero sections, CTAs, and social proof layouts optimized for conversion.
"SaaS landing page hero social-proof"
--design-system

Dashboards

Get chart recommendations, data visualization patterns, and KPI layouts.
"analytics dashboard real-time KPI"
--design-system

Mobile Apps

Access touch target guidelines, gesture patterns, and mobile-first layouts.
"mobile app onboarding gestures"
--stack react-native

Design Reviews

Validate designs against 99 UX guidelines and accessibility standards.
"accessibility contrast focus-states"
--domain ux

​
Advanced Search Options

​
Domain-Specific Searches

For targeted recommendations beyond the design system: 
# Explore specific visual styles
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "glassmorphism dark mode" \
  --domain style

​
Output Formats

Choose between ASCII or Markdown output: 
# Terminal-friendly box format
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "fintech crypto" \
  --design-system

​
Pre-Delivery Checklist

Before finalizing any UI, verify these items:

​
Visual Quality

  • No emojis used as icons (use SVG: Heroicons, Lucide)
  • All icons from consistent icon set
  • Correct brand logos (verified from Simple Icons)
  • Hover states don’t cause layout shift

​
Interaction

  • cursor-pointer on all clickable elements
  • Hover states with smooth transitions (150-300ms)
  • Focus states visible for keyboard navigation

​
Accessibility

  • Light mode text contrast 4.5:1 minimum
  • prefers-reduced-motion respected
  • All form inputs have labels
  • Alt text for meaningful images

​
Responsive

  • Tested at 375px, 768px, 1024px, 1440px
  • No horizontal scroll on mobile
  • Touch targets minimum 44x44px

​
Tips for Better Results

Be Specific with Keywords

Use detailed descriptions:
  • “healthcare SaaS dashboard real-time” > “app”
  • “luxury e-commerce fashion” > “online store”
  • “fintech banking trust security” > “financial app”

Combine Multiple Searches

Start with --design-system, then supplement with domain searches:
  1. Generate design system (pattern + style + colors + typography)
  2. Search UX domain for best practices
  3. Search stack domain for implementation guidelines
  4. Search chart domain for data visualization (if needed)

Iterate and Refine

If first results don’t match your vision:
  • Try different keywords (“modern” vs “contemporary” vs “minimal”)
  • Adjust max results: -n 5 for more options
  • Search multiple domains for comprehensive coverage

​
Next Steps

Browse All Styles

Explore 67 UI styles with examples and use cases

Color Palettes

Browse 96 industry-specific color palettes

Typography

Discover 57 curated font pairings with Google Fonts links

Design System Workflow

Learn advanced workflows and customization

Build docs developers (and LLMs) love

Get started for freeTalk to us