extract-design-system

Reverse-engineer design tokens from public websites into starter token files for your project.

- Extracts color palettes, typography, spacing, radius, and shadow scales from a target URL using Playwright

- Generates normalized JSON output and CSS token files ready for local project integration

- Offers extraction-only mode to review raw primitives before generating starter assets, or init-only mode to regenerate tokens from existing extraction data

- Includes safety checks: confirms public URL reachability, requires explicit confirmation before modifying existing design systems or app code, and sets clear expectations that results are initialization aids, not pixel-perfect reproductions

Extract Design System

Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.

Before You Start

Ask for:

- the target public website URL

- whether the user wants extraction only or starter files too

Set expectations:

- this v1 extracts tokens and starter assets, not a full component library

- results are useful for initialization, not pixel-perfect reproduction

- do not overwrite an existing design system or app styling without confirmation

Workflow