How UX Master Works

class HarvesterBrowser:
    async def extract(self, url: str) -> HarvestResult:
        """
        1. Launch headless Chromium
        2. Navigate to URL
        3. Wait for visual stability
        4. Inject harvester_v4.js
        5. Execute AI extraction
        6. Capture screenshot
        7. Return structured data
        """

class HarvesterV4 {
    extract(options) {
        return {
            // Visual Analysis
            colors: this.extractColors(),
            typography: this.extractTypography(),
            spacing: this.extractSpacing(),
            components: this.extractComponents(),
            
            // Structural
            layout: this.analyzeLayout(),
            pageType: this.detectPageType(),
            
            // Metadata
            _version: 4,
            _timestamp: Date.now()
        };
    }
}

extractColors() {
    const elements = document.querySelectorAll('*');
    const frequency = new Map();
    
    // Collect all colors
    elements.forEach(el => {
        const style = window.getComputedStyle(el);
        const bg = style.backgroundColor;
        const text = style.color;
        const border = style.borderColor;
        
        [bg, text, border].forEach(color => {
            if (color && color !== 'transparent') {
                frequency.set(color, (frequency.get(color) || 0) + 1);
            }
        });
    });
    
    // Sort by frequency
    const sorted = [...frequency.entries()]
        .sort((a, b) => b[1] - a[1]);
    
    return {
        histogram: { background, text, border },
        dominant: this.extractDominant(sorted)
    };
}

extractComponents() {
    const blueprints = [];
    
    // Button detection
    document.querySelectorAll('button, [role="button"]')
        .forEach(el => blueprints.push(this.analyzeButton(el)));
    
    // Input detection
    document.querySelectorAll('input, textarea, select')
        .forEach(el => blueprints.push(this.analyzeInput(el)));
    
    // Card detection
    document.querySelectorAll('.card, [class*="card"]')
        .forEach(el => blueprints.push(this.analyzeCard(el)));
    
    return { blueprints, count: blueprints.length };
}