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.
Before & after
Same prompt, same agent — the only difference is the skill.
Based on my knowledge of Stripe's website, here's an approximation of their design system: Colors: Stripe uses a purple/indigo primary color (roughly #635BFF), with dark navy text and plenty of white space. Typography: They use a clean sans-serif, likely a custom or system font stack. Headings are bold and large. Spacing: Generous padding, probably based on an 8px grid. Note that I can't browse the site directly, so these are estimates from memory — you may want to inspect the site yourself with dev tools to get exact values.
Crawled the rendered page. Extracted from computed styles, not from memory. tokens.json COLOR --brand-primary: #635BFF (47 elements) --brand-accent: #0A2540 (surfaces, footer) --text-primary: #0A2540 --text-secondary: #425466 --surface-raised: #FFFFFF shadow: 0 2px 5px -1px rgba(50,50,93,.25) TYPE scale ratio 1.25, base 16px --font-sans: "Sohne var", -apple-system, "Segoe UI", sans-serif h1 48/1.08/700 h2 38/1.16/600 h3 28/1.28/600 body 16/1.5/400 small 14/1.5/400 SPACING 4px base, observed steps 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 RADIUS 4 (inputs) · 8 (cards) · 999 (pills) COMPONENT PATTERNS button/primary — 12px 24px, radius 4, weight 600, no border card — 24px pad, radius 8, 1px #E6EBF1 border Feed tokens.json to any UI build and the output stays on-brand instead of drifting a shade per screen.
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.
SKILL.md preview
---
name: extract-design-system
description: Use when a public website needs its design DNA reverse-engineered into a reusable token system rather than a one-off visual clone.
version: 1.0.0
category: Design / Frontend
author: AgentVolt
license: proprietary
tags:
- design
- frontend
- standard
---
# Extract Design System
Crawls a live public URL and reverse-engineers its rendered design into a structured, reusable token system — colors, typography, spacing — instead of a screenshot guess.
## When to use
… (sign up to view the full skill)