skills.rest
paolomoz
paolomozCOMMUNITY
Explore all skills by this author →
GitHub

design-system-extractor

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

3|Updated Feb 3, 2026
Search Tags:#design system#design tokens#puppeteer#css extraction#website styles#brand design
One-click install
npx skills add https://github.com/paolomoz/skills --skill design-system-extractor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-extractor
Source: https://github.com/paolomoz/skills/tree/main/skills/design-system-extractor
Command: npx skills add https://github.com/paolomoz/skills --skill design-system-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the tedious process of manually identifying and documenting design tokens (colors, typography, spacing, etc.) from live websites, saving significant time for design and development teams.

Core Features & Use Cases

  • Comprehensive Token Extraction: Captures colors, typography, spacing, button styles, layout dimensions, and shadows.
  • Automated Style Analysis: Uses Puppeteer to inspect computed styles directly from the browser.
  • Use Case: Replicate the design system of a competitor's website or extract tokens from an legacy site to kickstart a redesign.

Quick Start

Use the design-system-extractor skill to extract design tokens from the website at https://example.com.

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 automatically?▼

To extract design tokens from a live website, use Puppeteer for browser automation and style inspection to capture computed styles for colors, typography, spacing, buttons, and layout dimensions.

Can I reverse-engineer a CSS design system from an existing site?▼

Yes, you can reverse-engineer a CSS design system from an existing site by using Puppeteer to inspect and capture computed styles directly from the browser, automating the documentation of colors and typography.

Do I need Puppeteer to capture computed styles for website style auditing?▼

Yes, you need Puppeteer to capture computed styles for website style auditing, as it provides the browser automation required to inspect live elements and extract layout dimensions and shadows.

What is the best way to get color and typography tokens for a redesign?▼

The best way to get color and typography tokens for a redesign is automating style extraction with Puppeteer to capture computed styles directly from legacy websites, saving significant manual documentation time.

Does design token extraction work for button styles and layout dimensions?▼

Design token extraction works for button styles and layout dimensions by using Puppeteer to inspect computed styles, comprehensively capturing shadows, spacing, and component-level styling data from live websites.

Related Skills

Explore More Design & Creative Skills→
vuminhieuvuminhieu

chrome-devtools

Orchestrate Puppeteer scripts with persistent sessions for browser automation and testing.

Community
Advanced
viably-labsviably-labs

google-design-md

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Official
Intermediate
lucasmccomblucasmccomb

design-review

Capture multi-viewport screenshots and analyze DOM, CSS, and computed styles for design issues.

Community
Advanced
Paidax01Paidax01
398

website-to-design-md

Extract design elements from a live website into markdown and HTML preview.

Community
Advanced