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: