design-system-extractor
CommunityExtract website design tokens
Authorpaolomoz
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
puppeteer
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-system-extractor Download link: https://github.com/paolomoz/skills/archive/main.zip#design-system-extractor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.