design-system

# Design System Extractor Analyse an existing website, HTML file, or screenshot and synthesise a semantic design system into a `DESIGN.md` file. The output is optimised for use with the `design-loop` skill and general page generation. ## When to Use - Starting a new project based on an existing site's visual language - Documenting a site's design system that was never formally written down - Preparing `.design/DESIGN.md` before running the design loop - Extracting brand guidelines from a client's existing website - Creating consistency documentation for a multi-page project - Extracting design tokens from a Google Stitch project ## Workflow ### Step 1: Identify the Source Ask the user for one of: | Source | Method | |--------|--------| | **Live URL** | Browse via Playwright CLI or scraper, screenshot + extract HTML | | **Local HTML file** | Read the file directly | | **Screenshot image** | Analyse visually (limited — no exact hex extraction) | | **Existing project** | Scan `site/public/` for HTML files to analyse | | **Stitch project** | Use `@google/stitch-sdk` to fetch screen HTML + design theme | ### Step 2: Extract Raw Design Data #### From a Live URL 1. **Browse the site** using Playwright CLI: ``` playwright-cli -s=design open {url} playwright-cli -s=design screenshot --filename=.design/screenshots/source-desktop.png ``` 2. **Extract the full HTML** — either via scraper MCP or by reading the page source 3. **Resize and screenshot mobile** (375px)...