design-context-extract

# Design Context Extract Extract the "Design DNA" from existing applications — colors, typography, spacing, and component patterns — and output as structured tokens. ```bash design-context-extract /tmp/screenshot.png # From screenshot design-context-extract /tmp/recording.mp4 # From screen recording (motion spec) design-context-extract https://example.com # From live URL design-context-extract current project # Scan project's existing styles ``` ## Pipeline ``` Input (screenshot/URL/project) │ ▼ ┌──────────────────────────────┐ │ Capture │ Screenshot or fetch HTML/CSS └──────────┬───────────────────┘ │ ▼ ┌──────────────────────────────┐ │ Extract │ Stitch get_screen + generate_screen_from_text │ │ OR multimodal analysis (fallback) │ → Colors (hex + oklch) │ │ → Typography (families, scale)│ │ → Spacing (padding, gaps) │ │ → Components (structure) │ └──────────┬───────────────────┘ │ ▼ ┌──────────────────────────────┐ │ Output │ Choose format: │ → design-tokens.json (W3C) │ │ → @theme (Tailwind v4) │ │ → tokens.css (CSS variables) │ │ → Markdown spec │ └──────────────────────────────┘ ``` ## Step 0: Detect Input and Context ```python INPUT = "" # 1. Create main task IMMEDIATELY TaskCreate(subject="Extract design context: {INPUT}", description="Extract ...