inspiration-analyzer

# Inspiration Analyzer Analyze websites to extract design inspiration including colors, typography, layouts, and UI patterns. ## Purpose When a user provides inspiration URLs, this skill: - Visits each site using browser tools - Takes screenshots for visual analysis - Extracts specific design elements - Creates structured inspiration report - Identifies replicable patterns ## Workflow ### Step 1: Get Browser Context ```javascript // Get or create browser tab tabs_context_mcp({ createIfEmpty: true }) tabs_create_mcp() ``` ### Step 2: Navigate to URL ```javascript navigate({ url: "https://example.com", tabId: tabId }) ``` ### Step 3: Capture Screenshots Take multiple screenshots to capture the full experience: 1. **Hero/Above-fold**: Initial viewport 2. **Scrolled sections**: Scroll and capture 3. **Interactive states**: Hover on navigation, buttons 4. **Mobile view**: Resize to mobile width ```javascript // Full page screenshot computer({ action: "screenshot", tabId: tabId }) // Scroll and capture more computer({ action: "scroll", scroll_direction: "down", tabId: tabId }) computer({ action: "screenshot", tabId: tabId }) // Mobile view resize_window({ width: 375, height: 812, tabId: tabId }) computer({ action: "screenshot", tabId: tabId }) ``` ### Step 4: Analyze Elements From screenshots and page content, extract: #### Colors - **Primary color**: Main brand color - **Secondary colors**: Supporting palette - **Background color**: Page and section backgrounds - ...