Complete Guide for
UI/UX Designers

⚡ Quick Start (5 minutes)

Step 1: Extract Design System

# Install (first time only)
pip install playwright
playwright install chromium

# Extract from any website
python scripts/wizard.py --url https://stripe.com --name "StripeClone"

What you get in 5 minutes:

• 🎨 47 color tokens (primary, semantic, neutrals)
• 📝 18 typography settings (fonts, sizes, weights)
• 📐 10 spacing values (8px grid system)
• 📸 Screenshots (desktop + mobile)

Step 2: Import to Figma

# Export to Figma format
python scripts/figma_bridge.py export \
  --input output/StripeClone/design-system.json \
  --name "StripeClone"

In Figma: Install Tokens Studio plugin → Import figma-tokens.json → Start designing with tokens!

🔄 Your Design Workflow

New Project Kickoff

# Extract from 3 competitor sites
python scripts/wizard.py --url https://competitor1.com --name "Comp1"
python scripts/wizard.py --url https://competitor2.com --name "Comp2"
python scripts/wizard.py --url https://competitor3.com --name "Comp3"

# Compare, pick best elements, customize in Figma

Design System Maintenance

Detect design drift across your product with automated comparisons:

# Extract current state
python scripts/wizard.py --url https://my-product.com --name "CurrentState" --crawl --max-pages 10

# Compare with documented system
python scripts/figma_bridge.py compare \
  --harvester output/CurrentState/design-system.json \
  --figma documented-system.json

🤖 Google Stitch AI

Generate AI design screens that perfectly match your extracted design system:

# Generate Stitch prompt
python scripts/stitch_integration.py prompt \
  --input output/MyProject/design-system.json \
  --screen dashboard

# Batch generation for multiple screens
python scripts/stitch_integration.py batch \
  --input output/MyProject/design-system.json \
  --screens dashboard settings profile checkout

In Google Stitch: Paste the prompt → Get AI-generated screens matching your design system!

🎨 Figma Integration

1. Install Tokens Studio — Figma → Plugins → Search "Tokens Studio" → Install
2. Export from UX Master — python scripts/figma_bridge.py export
3. Import to Figma — Open Tokens Studio → Import → Select figma-tokens.json
4. Apply to Components — Select frame → Click token → Value applies automatically

Best practices: Use semantic names (primary, not blue), group by category, document with descriptions.

🔍 Design System Audits

# Visual consistency check across pages
python scripts/wizard.py --url https://app.com/dashboard --name "Dashboard"
python scripts/wizard.py --url https://app.com/settings --name "Settings"

# Compare
python scripts/figma_bridge.py compare \
  --harvester output/Dashboard/design-system.json \
  --figma output/Settings/figma-tokens.json

Report shows color matches/drifts, typography inconsistencies, and actionable recommendations.

📋 Real Case Studies

Case Study: SaaS Dashboard Redesign

FinTech startup with inconsistent legacy dashboard. Using UX Master, achieved 95% consistency (up from 60%), 2x faster design iterations, and 50% fewer design-system questions from developers. Timeline: 2 weeks.

Case Study: Multi-Brand System

E-commerce platform with 5 brands. Unified on shared 8px grid, shared component library, with brand-specific color tokens. Extracted all 5 brands, created comparison matrix, standardized the foundation.

Case Study: Rapid Prototyping

Agency pitch with 3-day deadline. Extracted reference, generated Stitch prompts for 4 screens, produced 10 screens in 2 days. Won the project. Normal timeline would be 1 week.

💡 Tips from Design Pros