How does it handle custom web fonts?

It scans the document's computed styles for font families and attempts to find matching @font-face rules or reconstruct import URLs for providers like Google Fonts.

Do I need to install external dependencies?

Yes, this skill requires Puppeteer to be installed in your project environment to launch the headless browser used for style extraction.

What kind of output does the extraction generate?

It produces a structured JSON object containing both raw computed styles and processed tokens for colors, spacing, typography, and buttons.

Can it capture interactive states like button hovers?

Yes, the skill uses Puppeteer's page.hover() functionality to trigger pseudo-classes and capture computed styles for interactive elements.

Does it require the target website to be public?

Ideally, yes. The skill works best on publicly accessible URLs, though it can be configured to use specific cookies or headers for authenticated pages.

Design System Extractor

Name: Design System Extractor
Author: paolomoz

bypaolomoz

•

디자인 도구

Extracts comprehensive design tokens and component styles from live websites using automated browser inspection.

This skill automates the process of reverse-engineering a website's visual identity by launching a headless browser and analyzing computed CSS styles in real-time. It captures foundational elements like typography, color palettes, and spacing scales, as well as complex component styles such as buttons and shadows. The resulting structured design tokens provide a ready-to-use inventory for developers and designers looking to migrate platforms, replicate visual styles, or document undocumented design systems.

주요 기능

012 GitHub stars

02Comprehensive capture of typography, color palettes, and spacing scales

03Layout and grid system analysis including container widths and breakpoints

04Intelligent button variant detection and full visual profile mapping

05Automated CSS computed style extraction via Puppeteer headless browser

06Web font detection with Google Fonts and Adobe Typekit integration

사용 사례

01Migrating an existing legacy website to a modern component-based framework

02Generating a standardized design token set from a brand's live production site

03Performing competitive design audits to understand layout patterns and color usage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add paolomoz/skills design-system-extractor

For use in Claude.ai and ChatGPT

주요 기능

012 GitHub stars

02Comprehensive capture of typography, color palettes, and spacing scales

03Layout and grid system analysis including container widths and breakpoints

04Intelligent button variant detection and full visual profile mapping

05Automated CSS computed style extraction via Puppeteer headless browser

06Web font detection with Google Fonts and Adobe Typekit integration

사용 사례

01Migrating an existing legacy website to a modern component-based framework

02Generating a standardized design token set from a brand's live production site

03Performing competitive design audits to understand layout patterns and color usage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add paolomoz/skills design-system-extractor

For use in Claude.ai and ChatGPT