Extract Design System from Website

Reverse-engineer a complete design system from a live website using two passes:

1. CSS source analysis — fetch and parse stylesheets for declared values
2. Headed Playwright extraction — visually browse the site, interact with elements, extract computed styles, and capture screenshots at real device resolutions

Prerequisites

• Playwright installed (npx playwright install chromium if not set up)
• web_fetch tool for fetching raw HTML/CSS source

Quick Start

Run the extraction script against the target URL:

node scripts/extract.mjs <url> [outDir] [subpage1,subpage2,...]