generate-ui-from-brand

# generate-ui-from-brand **Type:** Pipeline / Orchestrator **Input:** URL or existing DESIGN.md **Output:** Actionable UI spec with decisions made --- ## Step 1 — Extract **If a URL is provided and Dembrandt MCP is available:** All MCP extraction tools are async — they return a `job_id` immediately. Poll `get_job_status` until `status` is `"completed"`, then read `result`. ``` { job_id } = get_design_tokens({ url }) { result } = get_job_status({ job_id }) // repeat until status === "completed" ``` Run these in sequence (each extraction launches a browser): ``` get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing ``` **If Dembrandt MCP is not available, run CLI:** ```bash npx dembrandt <url> --design-md --crawl 3 ``` **If DESIGN.md already exists:** parse it directly — skip extraction. --- ## Step 2 — Normalize Tokens Do not use raw extracted values directly. Map them to a semantic system first. ### Colours Identify the role of each extracted colour: | Role | Token | How to identify | |---|---|---| | `color-primary` | Main brand colour | Used on primary buttons, links, key interactive elements | | `color-secondary` | Supporting brand colour | Used on secondary actions, accents | | `color-surface` | Background | Page or card background | | `color-surface-raised` | Elevated surface | Cards, panels, modals | | `color-border` | Border / divider | Input borders, separators | | `color-text` | Primary text | Body copy | | `color-...