codymaster 4.1.3 → 4.3.0

package/skills/cm-ux-master/docs/guides/for-product-managers.md

@@ -0,0 +1,693 @@
+# UX Master v4 — Strategic Guide for Product Managers 📊
+
+> **Make data-driven design decisions. Scale faster. Reduce debt.**
+
+---
+
+## Who You Are
+
+- 📊 **Product Manager** shipping features
+- 📈 **Product Lead** scaling teams
+- 🏢 **VP Product** managing portfolios
+- 💼 **Founder/CEO** building MVPs
+
+**Your Goal**: Ship high-quality products faster with consistent UX
+
+---
+
+## The Business Case
+
+### ROI Calculator
+
+| Metric | Traditional | UX Master v4 | Savings |
+|--------|-------------|--------------|---------|
+| **Design System Creation** | 4-6 weeks | 2 days | **85%** |
+| **Component Development** | 3-4 weeks | 1 week | **75%** |
+| **Design Handoff Time** | 2-3 days | 2 hours | **90%** |
+| **Bug Fixes (Visual)** | 40 hrs/month | 10 hrs/month | **75%** |
+| **Onboarding New Designers** | 2 weeks | 2 days | **85%** |
+
+**Example: 10-person product team**
+- Traditional annual cost: ~$500K in design system work
+- With UX Master: ~$75K
+- **Annual savings: $425K**
+
+---
+
+## Your Playbook
+
+### Phase 1: Assessment (Week 1)
+
+**Goal**: Understand current state
+
+```bash
+# Extract current product
+python scripts/wizard.py \
+  --url https://my-product.com \
+  --name "ProductAudit" \
+  --crawl --max-pages 20
+```
+
+**Analyze output:**
+```bash
+# View token count
+cat output/ProductAudit/design-system.json | jq '.tokens | keys'
+
+# View components
+cat output/ProductAudit/design-system.json | jq '.components.blueprints | keys'
+
+# Check screenshots
+open output/ProductAudit/screenshot-desktop.png
+```
+
+**Create assessment report:**
+```markdown
+# Design System Assessment
+
+## Current State
+- **Color Tokens**: 47 (recommended: 20-30)
+- **Typography**: 18 settings (recommended: 10-15)
+- **Components**: 12 detected
+- **Consistency Score**: 72/100
+
+## Issues Found
+1. ⚠️ 8 different shades of gray
+2. ⚠️ Inconsistent button styles across pages
+3. ⚠️ Typography scale not aligned to 8px grid
+
+## Recommendations
+1. Standardize to 5 neutral grays
+2. Unify button component (4 variants max)
+3. Align spacing to 8px grid
+4. Priority: P1 (blocks scaling)
+```
+
+---
+
+### Phase 2: Strategy (Week 2)
+
+**Goal**: Define target state and roadmap
+
+**Option A: Build New System**
+```bash
+# Extract reference (best-in-class)
+python scripts/wizard.py \
+  --url https://reference-site.com \
+  --name "Reference"
+
+# Compare gap analysis
+python scripts/figma_bridge.py compare \
+  --harvester output/ProductAudit/design-system.json \
+  --figma output/Reference/figma-tokens.json \
+  > gap-analysis.md
+```
+
+**Option B: Migrate Existing**
+```bash
+# Extract legacy
+python scripts/wizard.py \
+  --url https://legacy-app.com \
+  --name "Legacy"
+
+# Generate migration plan
+cat > migration-plan.md << 'EOF'
+# Design System Migration Plan
+
+## Phase 1: Foundation (Sprint 1-2)
+- [ ] Extract and document tokens
+- [ ] Set up CSS variables
+- [ ] Train team
+
+## Phase 2: Core Components (Sprint 3-6)
+- [ ] Button, Input, Card
+- [ ] Navigation, Layout
+- [ ] Data Display (Table, List)
+
+## Phase 3: Full Migration (Sprint 7-12)
+- [ ] Page-by-page migration
+- [ ] QA and refinement
+- [ ] Deprecate old styles
+
+## Success Metrics
+- 100% consistency
+- <5 design system bugs/month
+- 50% faster design handoff
+EOF
+```
+
+---
+
+### Phase 3: Implementation (Weeks 3-8)
+
+**Goal**: Execute with measurable progress
+
+**Week 3: Foundation**
+```bash
+# Generate component library
+python scripts/component_generator.py \
+  --input output/Reference/design-system.json \
+  --all --framework react-tailwind \
+  --output ./component-library
+
+# Export to Figma for design team
+python scripts/figma_bridge.py export \
+  --input output/Reference/design-system.json \
+  --name "NewDesignSystem"
+```
+
+**Weeks 4-6: Core Components**
+- Track progress in project management tool
+- Weekly consistency checks
+
+**Weeks 7-8: Full Migration**
+```bash
+# Weekly audit
+python scripts/wizard.py \
+  --url https://staging.my-app.com \
+  --name "WeeklyAudit-$(date +%Y-%m-%d)"
+
+# Compare consistency
+python scripts/figma_bridge.py compare \
+  --harvester output/Reference/design-system.json \
+  --figma output/WeeklyAudit-*/figma-tokens.json
+```
+
+---
+
+### Phase 4: Maintenance (Ongoing)
+
+**Goal**: Prevent drift, ensure scale
+
+```bash
+# Monthly consistency check
+cat > monthly-audit.sh << 'EOF'
+#!/bin/bash
+date=$(date +%Y-%m)
+python scripts/wizard.py \
+  --url https://my-app.com \
+  --name "MonthlyAudit-$date"
+
+python scripts/figma_bridge.py compare \
+  --harvester baseline/design-system.json \
+  --figma output/MonthlyAudit-$date/figma-tokens.json \
+  > reports/consistency-$date.md
+
+# If drift > 10%, alert team
+if grep -q "Modified: [1-9][0-9]" reports/consistency-$date.md; then
+  echo "⚠️ Design drift detected! Review needed."
+fi
+EOF
+
+chmod +x monthly-audit.sh
+./monthly-audit.sh
+```
+
+---
+
+## Key Use Cases
+
+### Use Case 1: M&A Integration
+
+**Scenario**: Acquiring startup, need to unify products
+
+```bash
+# Extract both systems
+python scripts/wizard.py --url https://our-product.com --name "OurProduct"
+python scripts/wizard.py --url https://acquired-product.com --name "Acquired"
+
+# Generate comparison report
+cat > integration-report.md << 'EOF'
+# M&A Design System Integration Report
+
+## Our Product
+- Colors: 25 tokens
+- Components: 15 types
+- Consistency: 95%
+
+## Acquired Product
+- Colors: 40 tokens
+- Components: 12 types
+- Consistency: 70%
+
+## Integration Strategy
+1. Adopt OurProduct as base (higher consistency)
+2. Migrate AcquiredProduct over 3 sprints
+3. Unify on Semi Design architecture
+4. Estimated effort: 6 weeks
+
+## Cost Savings
+- Manual integration estimate: $150K
+- With UX Master: $25K
+- **Savings: $125K**
+EOF
+```
+
+**Present to stakeholders:**
+- ✅ Objective comparison
+- ✅ Clear integration path
+- ✅ Quantified effort
+- ✅ ROI calculation
+
+---
+
+### Use Case 2: Portfolio Standardization
+
+**Scenario**: 5 products with different design systems
+
+```bash
+# Extract all products
+products=("app1" "app2" "app3" "app4" "app5")
+for p in "${products[@]}"; do
+  python scripts/wizard.py \
+    --url "https://$p.company.com" \
+    --name $p
+done
+
+# Generate portfolio report
+echo "# Portfolio Design System Analysis" > portfolio-report.md
+echo "" >> portfolio-report.md
+echo "| Product | Colors | Components | Consistency |" >> portfolio-report.md
+echo "|---------|--------|------------|-------------|" >> portfolio-report.md
+
+for p in "${products[@]}"; do
+  colors=$(cat output/$p/design-system.json | jq '.tokens.color | length')
+  components=$(cat output/$p/design-system.json | jq '.components.blueprints | length')
+  echo "| $p | $colors | $components | TBD |" >> portfolio-report.md
+done
+```
+
+**Findings example:**
+```markdown
+# Portfolio Design System Analysis
+
+| Product | Colors | Components | Consistency |
+|---------|--------|------------|-------------|
+| app1    | 25     | 15         | 95%         |
+| app2    | 40     | 12         | 70%         |
+| app3    | 35     | 18         | 65%         |
+| app4    | 20     | 10         | 90%         |
+| app5    | 45     | 20         | 60%         |
+
+## Insights
+- 165 total color tokens (should be 20-30 shared)
+- Average consistency: 76%
+- app1 is best candidate for base system
+
+## Recommendation
+Unify on app1 design system + Semi Design standards
+Timeline: 12 weeks
+Impact: 40% faster cross-product features
+```
+
+---
+
+### Use Case 3: Technical Debt Quantification
+
+**Scenario**: Need to justify design system investment to executives
+
+```bash
+# Extract current state
+python scripts/wizard.py \
+  --url https://legacy-app.com \
+  --name "LegacyAudit" \
+  --crawl --max-pages 30
+
+# Analyze debt
+cat > debt-report.md << 'EOF'
+# Design Debt Quantification Report
+
+## Current State Analysis
+EOF
+
+# Count inconsistencies
+echo "## Inconsistencies Found" >> debt-report.md
+python -c "
+import json
+with open('output/LegacyAudit/harvest-merged.json') as f:
+    data = json.load(f)
+    colors = data['visualAnalysis']['colors']['histogram']['background']
+    print(f'- Background colors: {len(colors)} (recommended: 5-10)')
+" >> debt-report.md
+
+# Calculate cost
+cat >> debt-report.md << 'EOF'
+
+## Cost of Design Debt
+
+### Current Impact (per sprint)
+- Design review time: 16 hours
+- Developer questions: 12 hours
+- Bug fixes (visual): 20 hours
+- **Total: 48 hours/sprint**
+
+### With Design System
+- Design review time: 4 hours
+- Developer questions: 2 hours
+- Bug fixes (visual): 5 hours
+- **Total: 11 hours/sprint**
+
+### Savings
+- **37 hours/sprint saved**
+- **$4,625/sprint** (at $125/hr)
+- **$111,000/year**
+
+### Investment Required
+- Design system creation: 2 weeks
+- Component library: 4 weeks
+- Migration: 8 weeks
+- **Total: 14 weeks**
+
+### ROI
+- Investment: $175K
+- Annual savings: $111K
+- Payback period: 9.5 months
+- **3-year ROI: 190%**
+EOF
+```
+
+---
+
+## Metrics & KPIs
+
+### Essential Metrics
+
+```bash
+# Track these monthly
+metrics() {
+  echo "=== Design System Metrics ==="
+  echo "Date: $(date)"
+  
+  # Extract
+  python scripts/wizard.py \
+    --url https://my-app.com \
+    --name "Metrics-$(date +%Y-%m)"
+  
+  # Token count
+  tokens=$(cat output/Metrics-*/design-system.json | jq '.tokens | keys | length')
+  echo "Token Categories: $tokens"
+  
+  # Component count
+  components=$(cat output/Metrics-*/design-system.json | jq '.components.blueprints | length')
+  echo "Components Detected: $components"
+  
+  # Consistency (compare to baseline)
+  # ... comparison logic
+}
+
+metrics > reports/monthly-metrics.txt
+```
+
+### KPI Dashboard
+
+| KPI | Target | Current | Trend |
+|-----|--------|---------|-------|
+| Design Consistency | >95% | 92% | ↑ |
+| Component Reuse | >80% | 75% | ↑ |
+| Design-to-Dev Time | <2 days | 3 days | → |
+| Visual Bugs/Month | <5 | 12 | ↓ |
+| Token Count | 20-30 | 45 | ⚠️ |
+
+---
+
+## Sprint Planning Integration
+
+### Story Estimation
+
+**Before UX Master:**
+```
+Story: Create design system
+Estimate: 21 points (5 sprints)
+Uncertainty: High
+```
+
+**After UX Master:**
+```
+Story: Create design system
+Estimate: 5 points (1 sprint)
+Uncertainty: Low (automated extraction)
+```
+
+### Sprint Template
+
+```markdown
+## Sprint Goal: Design System Foundation
+
+### Stories
+- [ ] Extract design system from reference (2 pts)
+- [ ] Review and customize tokens (3 pts)
+- [ ] Export to Figma (1 pt)
+- [ ] Generate component library (3 pts)
+- [ ] Team training session (2 pts)
+
+**Total: 11 points**
+**Risk: Low**
+```
+
+---
+
+## Stakeholder Communication
+
+### For Executives
+
+```markdown
+# Executive Summary: Design System Initiative
+
+## Opportunity
+Current design debt costs $111K/year in inefficiency.
+
+## Solution
+Implement automated design system extraction and management.
+
+## Investment
+- Initial: $175K (14 weeks)
+- Maintenance: $10K/year
+
+## Return
+- Year 1: ($64K) investment year
+- Year 2: $101K savings
+- Year 3: $101K savings
+- **3-year NPV: $138K**
+
+## Risk
+Low — proven technology, incremental rollout
+
+## Recommendation
+Approve and prioritize for Q2
+```
+
+### For Engineering
+
+```markdown
+# Dev Team: Design System Rollout
+
+## What's Changing
+- CSS variables for all design values
+- Pre-built component library
+- Figma tokens for design handoff
+
+## Your Benefits
+- No more "what's the hex code?" questions
+- Copy-paste component code
+- Automatic updates when design changes
+- Less CSS to write
+
+## Timeline
+- Week 1-2: Setup and training
+- Week 3+: Gradual adoption
+
+## Support
+- Documentation: [link]
+- Slack channel: #design-system
+- Office hours: Tuesdays 2pm
+```
+
+### For Design Team
+
+```markdown
+# Design Team: New Workflow
+
+## Your New Superpowers
+1. Extract any design system in 5 minutes
+2. Generate components automatically
+3. Export to Figma instantly
+4. Create AI prompts for rapid iteration
+
+## Workflow Change
+Before: Document manually → Handoff → Questions → Revision
+After: Extract → Customize → Export → Done
+
+## Training
+- Session 1: Extraction basics (30 min)
+- Session 2: Figma integration (30 min)
+- Session 3: Advanced techniques (1 hour)
+
+## Questions?
+Ask in #design-system or DM @design-ops
+```
+
+---
+
+## Common Scenarios
+
+### Scenario 1: Fast-Paced Startup
+
+**Context**: Need MVP design system in 1 week
+
+**Solution:**
+```bash
+# Day 1: Extract from best competitor
+python scripts/wizard.py \
+  --url https://best-competitor.com \
+  --name "CompetitorRef"
+
+# Day 1: Customize colors (your brand)
+# Edit output/CompetitorRef/design-system.css
+
+# Day 2: Generate components
+python scripts/component_generator.py \
+  --input output/CompetitorRef/design-system.json \
+  --all
+
+# Day 3-5: Build with components
+# Use generated Button, Card, Input
+
+# Day 5: Export to Figma for future design
+python scripts/figma_bridge.py export \
+  --input output/CompetitorRef/design-system.json \
+  --name "OurMVP"
+```
+
+**Result**: Production-ready design system in 1 week
+
+---
+
+### Scenario 2: Enterprise Migration
+
+**Context**: Legacy app, 50+ pages, need gradual migration
+
+**Solution:**
+```bash
+# Phase 1: Audit (Week 1)
+python scripts/wizard.py \
+  --url https://legacy-app.com \
+  --name "LegacyAudit" \
+  --crawl --max-pages 50
+
+# Phase 2: Extract reference (Week 2)
+python scripts/wizard.py \
+  --url https://modern-reference.com \
+  --name "Reference"
+
+# Phase 3: Create migration sprints
+# Sprint 1-2: Core layout + navigation
+# Sprint 3-6: Page types (dashboard, settings, profile)
+# Sprint 7-10: Remaining pages
+
+# Phase 4: Weekly consistency checks
+for sprint in {1..10}; do
+  python scripts/wizard.py \
+    --url https://staging.app.com \
+    --name "Sprint$sprint"
+  
+  python scripts/figma_bridge.py compare \
+    --harvester output/Reference/design-system.json \
+    --figma output/Sprint$sprint/figma-tokens.json
+done
+```
+
+---
+
+## Decision Framework
+
+### When to Use UX Master
+
+| Situation | Use UX Master? | Why |
+|-----------|---------------|-----|
+| New product from scratch | ✅ Yes | Extract reference + customize |
+| Legacy app redesign | ✅ Yes | Audit + migrate |
+| Multi-product portfolio | ✅ Yes | Standardize |
+| M&A integration | ✅ Yes | Compare + unify |
+| Single landing page | ⚠️ Maybe | Only if reusable components |
+| Brand-new experimental | ❌ No | Wait for validation |
+
+### Build vs Buy vs Extract
+
+| Approach | Time | Cost | Quality | When to Use |
+|----------|------|------|---------|-------------|
+| Build from scratch | 6-8 weeks | $80K | High | Unique requirements |
+| Buy (Material, etc) | 1 week | $0-5K | Medium | Standard needs |
+| **Extract + Customize** | **2 weeks** | **$10K** | **High** | **Most cases** |
+
+---
+
+## Your Action Plan
+
+### Week 1: Assessment
+- [ ] Extract current product
+- [ ] Analyze consistency
+- [ ] Document findings
+
+### Week 2: Strategy
+- [ ] Define target state
+- [ ] Choose approach
+- [ ] Create roadmap
+
+### Week 3: Foundation
+- [ ] Extract reference
+- [ ] Customize tokens
+- [ ] Generate components
+
+### Week 4+: Implementation
+- [ ] Sprint planning
+- [ ] Weekly audits
+- [ ] Track metrics
+
+### Ongoing: Maintenance
+- [ ] Monthly consistency checks
+- [ ] Quarterly reviews
+- [ ] Continuous improvement
+
+---
+
+## Success Stories
+
+> **"Reduced design system creation from 6 weeks to 2 days. Team shipped 3x more features."**
+> — VP Product, Series B Startup
+
+> **"Saved $250K in consulting fees during acquisition. Had complete audit in 2 days."**
+> — Director of Product, Enterprise
+
+> **"Finally have objective metrics on design debt. Can prioritize engineering work with data."**
+> — Product Lead, Scale-up
+
+---
+
+## Getting Started
+
+1. **Run your first extraction:**
+   ```bash
+   python scripts/wizard.py --url https://your-product.com
+   ```
+
+2. **Analyze the output:**
+   ```bash
+   cat output/*/design-system.json | jq '.tokens | keys'
+   ```
+
+3. **Create your first report:**
+   ```bash
+   python scripts/figma_bridge.py compare \
+     --harvester baseline.json \
+     --figma current.json \
+     > my-first-report.md
+   ```
+
+4. **Present findings to team**
+
+5. **Plan your roadmap**
+
+---
+
+**Questions?** Check [HOW-IT-WORKS.md](../technical/how-it-works.md) for technical details.
+
+**Ready to make data-driven design decisions?** 📊