skills.rest
aemdemos
aemdemosOFFICIAL
Explore all skills by this author →
GitHub

design-system-extractor

Extract computed CSS properties and generate structured design tokens from live websites.

Updated Mar 16, 2026
Search Tags:#typography#css#puppeteer#buttons#design-tokens#extract#color-extraction
One-click install
npx skills add https://github.com/aemdemos/summit-dsg --skill design-system-extractor-aemdemos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-extractor
Source: https://github.com/aemdemos/summit-dsg/tree/main/.agents/skills/design-system-extractor
Command: npx skills add https://github.com/aemdemos/summit-dsg --skill design-system-extractor-aemdemos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracts visual design information from live websites to eliminate manual inspection and re-implementation of colors, typography, spacing, buttons, layout, and shadows so teams can rebuild or migrate consistent design systems.

Core Features & Use Cases

  • Computed Style Capture: Launches a headless Chromium instance to capture getComputedStyle values for body, headings, links, and button variants.
  • Token Generation: Produces both raw ComputedDesign data and a processed ExtractedDesign token schema (colors, typography, spacing, layout, shadows, and font sources) ready for downstream tooling.
  • Use Cases: Reverse-engineering competitor sites, migrating legacy frontends to new platforms, auditing visual design consistency, and seeding design-token systems for designers and developers.

Quick Start

Use the design-system-extractor to extract design tokens and component styles from the target website URL and return a structured ExtractedDesign JSON object.

Frequently Asked Questions about design-system-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from a live website's CSS?▼

Extract design tokens from live websites by launching a headless Chromium instance to capture computed CSS properties and generate a structured ExtractedDesign token schema for colors, typography, and spacing.

Can I reverse-engineer competitor brand colors and typography automatically?▼

Reverse-engineer competitor brand colors and typography by sampling DOM elements via Puppeteer, capturing getComputedStyle values, and deduplicating colors to output structured design tokens.

What's the best way to audit visual design consistency across a website?▼

Audit visual design consistency by capturing computed styles for headings, links, and button variants, then mapping the extracted layout grids and shadows into a structured JSON schema.

Does this design token extractor work with private or authenticated web pages?▼

This design token extractor operates on publicly accessible desktop websites using networkidle navigation, meaning it does not handle authenticated or private pages behind login screens.

How do I migrate legacy frontend styles into a new design system?▼

Migrate legacy frontend styles by extracting raw ComputedDesign data and a processed ExtractedDesign token schema from the existing site, ready for seeding your new design system.

Why are my extracted web fonts missing their source stylesheet URLs?▼

Extracted web fonts may lack source URLs if optional stylesheet parsing is disabled; enabling it captures font sources alongside computed typography values during DOM sampling.

Related Skills

Explore More Design & Creative Skills→
BaGyun0107BaGyun0107

browse

Automate headless Chromium interactions and capture screenshots for visual regression testing.

Community
Intermediate
teslasoft-deteslasoft-de
1

visual-design

Generates cohesive visual design systems with OKLCH color tokens and CSS/SCSS/JSON exports.

Community
Advanced
Markson22Markson22

reversa-design-system

Extract design tokens and documentation from CSS, theme files, and screenshots.

Community
Intermediate
paolomozpaolomoz
3

design-system-extractor

Extract design tokens and component styles from live websites using Puppeteer.

Community
Advanced