web-design-system-extract
CommunityExtract pixel-perfect design systems from live sites.
Authorwweggplant
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Extracts and packages a live website's visual language so designers and engineers don't have to reverse-engineer tokens, components, and interaction rules manually; produces reproducible tokens, component specs, and evidence for implementation.
Core Features & Use Cases
- Tech Stack Fingerprint: Detects frameworks, styling systems, and UI libraries with evidence.
- Font Forensics: Logs network font requests, @font-face rules, and computed font probes per breakpoint.
- Design Tokens & Scales: Clusters colors, typography, spacing, radius, shadows, motion, and z-index into finite scales and semantic mappings.
- Interaction Model & State Capture: Records hover/focus/active/disabled diffs and produces a component × state matrix.
- Minimal Implementation: Generates Tailwind config or CSS vars + tokens.ts and example components for reproduction.
Quick Start
Use the web-design-system-extract skill to extract https://www.example.com and produce tokens, state diffs, evidence artifacts, and a minimal Tailwind or CSS implementation.
Dependency Matrix
Required Modules
playwright
Components
scripts
💻 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: web-design-system-extract Download link: https://github.com/wweggplant/web-design-system-extract/archive/main.zip#web-design-system-extract 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 471,000+ vetted skills library on demand.