design-system

Extract a design-tokens JSON (colors, typography, spacing, breakpoints) from a live web page. Routes through the crawlio-agent-headless pillar of @crawlio/mcp, which invokes skill_extract_design_system via the session-based RE API.

The output is structured enough to drop directly into a Tailwind config, a CSS custom-property sheet, or a Figma tokens plugin.

When to Use

• User wants to "clone the look" of a site they are rebuilding (their own legacy site, a design they are migrating, or a reference they have permission to reproduce)
• User wants to audit their own site's color palette for consistency — e.g. "how many shades of blue are we actually shipping?"
• User is preparing a migration plan and needs a concrete token inventory before touching CSS

Do NOT use this skill to wholesale clone a site you do not have authorization to reproduce. Design-token extraction is fine for inspiration and for sites you own; direct visual cloning of someone else's commercial product without permission is not.

Headless RE Session API

The headless pillar uses a session-based API. You create a session first, then run skills within it.