Extract Design System
Scrapes any public website and reverse-engineers it into a real, reusable design token system (colors, type, spacing) instead of a one-off screenshot clone.
About this skill
name: extract-design-system description: Use when Scrapes any public website and reverse-engineers it into a real, reusable design token system (colors, type, spacing) instead of a one-off screenshot clone.
Extract Design System
Point the skill at any live public URL and it crawls the rendered page to pull out its actual design DNA: color palette, typography scale, spacing units, and component patterns, then outputs them as a structured design token file Claude can build from. Instead of eyeballing a site and guessing at hex codes, you get a real, reusable system that keeps future UI generations consistent with the source site's look and feel.
What you get
- A design token file (colors, type, spacing) extracted from any public website URL, ready to feed into Claude for consistent, on-brand UI generation.
Customize your output
- Target URL to scrape
- which token categories to extract (color/type/spacing/components).
Example output
A full design token set pulled from a live site, used as the foundation for a matching UI build.
Best for
Designers and vibe-coders who want to match an existing site's aesthetic exactly rather than starting from a generic template.
Source: Griffin Wooldridge · https://www.youtube.com/watch?v=gAT9e7m74bI Category: Design / Frontend · Priority: Standard
SKILL.md preview
---
name: extract-design-system
description: Use when Scrapes any public website and reverse-engineers it into a real, reusable design token system (colors, type, spacing) instead of a one-off screenshot clone.
---
# Extract Design System
Point the skill at any live public URL and it crawls the rendered page to pull out its actual design DNA: color palette, typography scale, spacing units, and component patterns, then outputs them as a structured design token file Claude can build from. Instead of eyeballing a site and guessing at hex codes, you get a real, reusable system that keeps future UI generations consistent with the source site's look and feel.
## What you get
- A design token file (colors, type, spacing) extracted from any public website URL, ready to feed...