Design·intermediate

Design Token Extractor

Turns any website into a design-token report (colors, type, radius, spacing).

Point it at any public website and it reads the page's CSS, linked stylesheets and inline <style> blocks, extracts every `--custom-property`, and groups them into a semantic design-token report: color, typography, spacing, radius, shadow, and more. Useful for reverse-engineering a design system, auditing your own tokens, or seeding a DTCG token file. No API keys: the tool only does plain HTTP fetches.

Agent Stack

AI SDKAI Gateway

Eve features

toolsskills

Channels

http · web

Run it

git clone https://github.com/uxKero/design-token-extractor
cd design-token-extractor
pnpm install
pnpm dev

Then try: npx eve dev, then ask: "Extract the design tokens from https://vercel.com"

model: anthropic/claude-sonnet-4.6

Requires

AI Gateway access (Vercel) or an Anthropic API key

Needs Node ≥ 24 to run the Eve CLI.