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):

   playwright-cli -s=design resize 375 812
   playwright-cli -s=design screenshot --filename=.design/screenshots/source-mobile.png
   

4. Close the session: playwright-cli -s=design close

From a Local HTML File

Read the file directly and extract design tokens from the source.

From a Screenshot Only

Analyse the image visually. Note: colour extraction will be approximate without HTML source. Flag this limitation in the output.

From a Google Stitch Project