design-system

1# Design System Extractor
2 
3Analyse 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.
4 
5## When to Use
6 
7- Starting a new project based on an existing site's visual language
8- Documenting a site's design system that was never formally written down
9- Preparing `.design/DESIGN.md` before running the design loop
10- Extracting brand guidelines from a client's existing website
11- Creating consistency documentation for a multi-page project
12- Extracting design tokens from a Google Stitch project
13 
14## Workflow
15 
16### Step 1: Identify the Source
17 
18Ask the user for one of:
19 
20| Source | Method |
21|--------|--------|
22| **Live URL** | Browse via Playwright CLI or scraper, screenshot + extract HTML |
23| **Local HTML file** | Read the file directly |
24| **Screenshot image** | Analyse visually (limited — no exact hex extraction) |
25| **Existing project** | Scan `site/public/` for HTML files to analyse |
26| **Stitch project** | Use `@google/stitch-sdk` to fetch screen HTML + design theme |
27 
28### Step 2: Extract Raw Design Data
29 
30#### From a Live URL
31 
321. **Browse the site** using Playwright CLI:
33   ```
34   playwright-cli -s=design open {url}
35   playwright-cli -s=design screenshot --filename=.design/screenshots/source-desktop.png
36   ```
37 
382. **Extract the full HTML** — either via scraper MCP or by reading the page source
39…