🎯 Mục tiêu
Transform from slow/legacy frontend code, no standard design system, hard to maintain — to standard Semi Design system, reusable component library, AI-powered code generation.
❌ Before
- Slow/legacy frontend code
- No standard design system
- Hard to maintain
✅ After
- Standard Semi Design system
- Reusable component library
- AI-powered code generation
✨ Features
🤖
Browser Automation
Tự động mở browser, thu thập dữ liệu từ bất kỳ website nào.
🧠
AI Visual Analysis
Phân tích màu sắc, layout, typography với AI.
🌐
Multi-page Crawl
Collect from multiple pages, merge design systems.
⚛️
Component Generation
Tự động tạo React/Vue/Semi components.
🚀 Quick Start
1. Cài đặt Dependencies
Bash
cd /Users/todyle/Library/Mobile\ Documents/com~apple~CloudDocs/Code/AgentSkills/ux-master
# Cài Playwright
pip install playwright
playwright install chromium2. Quick Workflow
Bash
# Extract + Index + Generate
python3 scripts/harvester_cli.py quick https://example.com3. Output
File Structure
output/
├── design-system.css # CSS variables theo Semi Design
├── design-system.json # Full design tokens
├── figma-tokens.json # Figma Tokens Studio
└── components/ # Generated components
├── button/
├── card/
└── input/🏗️ Semi Design Architecture
Color System
/* Brand Colors */
--semi-color-primary
--semi-color-secondary
--semi-color-tertiary
/* Semantic Colors */
--semi-color-success
--semi-color-warning
--semi-color-danger
/* Background Scale */
--semi-color-bg-0 /* Page */
--semi-color-bg-1 /* Card */
--semi-color-bg-2 /* Sidebar */
Spacing System
--semi-spacing-none: 0
--semi-spacing-super-tight: 2px
--semi-spacing-extra-tight: 4px
--semi-spacing-tight: 8px
--semi-spacing-base-tight: 12px
--semi-spacing-base: 16px
--semi-spacing-loose: 24px
--semi-spacing-super-loose: 40px
📖 Sử dụng chi tiết
A. Browser Automation
Bash
# Single URL
python3 scripts/harvester_browser.py --url https://example.com
# With screenshots
python3 scripts/harvester_browser.py --url https://example.com --mobile
# Multi-page crawl
python3 scripts/harvester_browser.py --url https://example.com --crawl --max-pages 5B. Design System Indexer
Bash
# Index single harvest
python3 scripts/design_system_indexer.py \
--input harvest.json \
--name "MyApp"
# Merge multiple
python3 scripts/design_system_indexer.py \
--multi page1.json page2.json page3.json \
--name "UnifiedSystem"
# With Figma tokens
python3 scripts/design_system_indexer.py \
--input harvest.json \
--figmaC. Component Generator
Bash
# Generate all
python3 scripts/component_generator.py \
--input design-system.json \
--all --output ./components
# Specific component
python3 scripts/component_generator.py \
--input design-system.json \
--component button
# Semi Design framework
python3 scripts/component_generator.py \
--input design-system.json \
--all --framework semi📊 Enterprise Workflow
Phase 1: Extract (1-2 days)
python3 scripts/harvester_cli.py extract \
--url https://myapp.com \
--crawl --max-pages 20 \
--output ./myapp-design-systemPhase 2: Index & Standardize (1 day)
python3 scripts/design_system_indexer.py \
--multi ./myapp-design-system/*.json \
--name "MyAppDesignSystem"Phase 3: Component Library (2-3 days)
python3 scripts/component_generator.py \
--input ./myapp-design-system/design-system.json \
--all --framework react-tailwind \
--output ./myapp-componentsPhase 4: Integration (ongoing)
Sử dụng AI IDE/CLI + UX Master để code với design system mới.
🎨 Ví dụ: Chuyển đổi
Before (Legacy Code)
tsx
// ❌ Hardcoded, không consistent
<button className="px-4 py-2 bg-blue-500 text-white rounded">
Save
</button>
<button className="px-3 py-1 bg-blue-400 text-white rounded-sm">
Cancel
</button>After (With Design System)
tsx
// ✅ Consistent, maintainable
<Button variant="primary" size="md">
Save
</Button>
<Button variant="secondary" size="md">
Cancel
</Button>🔧 Bắt đầu với Harvester v4
Extract design system from any website in minutes.