Website Design Token Extraction
Measures a live site's rendered styles and turns them into a lean color, type, and spacing token set, with a raw-to-token mapping.
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
You eyedropped a few hex codes from a screenshot, and your new UI still looks off-brand. The grays are slightly wrong, the headings are the wrong size, and the spacing feels random. This skill measures what the site actually renders. It weights each value by how much the page uses it, merges near-duplicates, and gives you a small set of named tokens you can build from.
What it does
- Gives you a browser-console snippet (or runs it headless if Claude can execute code). The snippet collects computed colors, type, spacing, radii, shadows, breakpoints, and CSS custom properties.
- Weights values by usage: text colors by character count, backgrounds by area. A color covering half the page outranks one on thirty tiny icons.
- Merges near-identical colors in OKLab and keeps translucent overlays as alpha tokens instead of flattening them onto one background.
- Only calls something a modular type scale or an 8px grid when the measurements support it, and fits clamp() values for fluid headings.
- Names tokens by role (text-muted, surface-subtle, action), checks WCAG contrast, and spots when a site already uses stock Tailwind or its own CSS variables.
- Tags every value as measured, declared, or estimated, so you know which numbers you can trust.
What you get
A token file in your format (CSS variables, DTCG JSON, or a Tailwind theme), plus a table showing which token each raw value maps to. You also get a short list of findings (inconsistencies, contrast failures) and the gaps it couldn't observe.
Best for
Front-end developers, designers, and vibe-coders who want new UI to match an existing site. Also teams writing down the system a legacy product is already using, before a redesign or a component library build.
SKILL.md preview
---
name: website-design-token-extraction
description: Reverse-engineers a live website into a reusable design token set (color, type, spacing, radius, shadow, breakpoints). It measures rendered computed styles, weights them by usage, merges near-duplicates, names tokens by role, and tags every value as measured, declared, or estimated. Use when the user says "extract the design system from this site", "get me the colors and fonts from this URL", "turn this website into design tokens", "make my app look like this site", "build a Tailwind theme from this page", "the hex codes I pulled from the screenshot look off", or "my generated UI keeps drifting from our site's look".
---
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.