Design extractor

design-extractor

Overview

Stop inventing styling from priors. Point this at a real, well-designed site and get its actual design system as tokens you can either replicate elsewhere or use as the baseline to improve the site. Heavy extraction runs as JavaScript inside a headless browser; Python turns the raw data into W3C design tokens, CSS variables, a Tailwind config, and a report.

When to use

• Building new UI and you want it grounded in a strong real-world reference.
• "Make this look like <site>", "match <site>'s design", "use their fonts/colors".
• Auditing/improving an existing site's design system.

When not to: purely logic changes with no UI, or when a token file already exists.

How to run

Requires Playwright + Chromium (installed by install.py). Run by full path (works from any directory):

python "$HOME/.claude/skills/design-extractor/scripts/analyze.py" \
  --url https://stripe.com \
  --mode both \
  --out ./design-audit

(scripts/analyze.py is relative to this SKILL.md; use this skill's directory.)

• --mode replicate (lift the look elsewhere) · improve (elevate the site) · both (default).
• --out DIR — where artifacts go (default ./design-audit).
• --threshold 2.3 — color-cluster merge sensitivity (raise to merge more aggressively).
• --viewport 1366x900, --headed (debug), --save-raw, --no-emit.

What you get (in --out)

• tokens.json — W3C design tokens (the source of truth; see references/token-schema.md).
• variables.css — :root CSS custom properties.
• tailwind.tokens.js — theme.extend config to merge into Tailwind.
• report.md — palette, typography + font licensing, scales, the site's own CSS variables, and a mode-specific section.

What to do with it

Replicate mode:

1. Read report.md. Reuse variables.css (or the Tailwind file) in the target project.
2. For fonts, follow the licensing column — Google Fonts are free to self-host; Adobe/Monotype/unknown self-hosted fonts need a license. Never bundle a paid font without one — substitute a close free alternative and say so.
3. Map the target's components onto the tokens; cite the source site.

Improve mode:

1. Read the grounded diagnostics in report.md (contrast, spacing grid, palette size, type-scale, motion spread).
2. Turn each fact into a concrete, dynamic improvement — fix contrast failures, snap spacing to one grid, tighten the type scale to a modular ratio, add purposeful motion. Justify every change with the extracted data, not generic tips.

Always prefer the extracted, specific values over made-up ones.