Extracting Design Tokens from Any Website

Design tokens are the atomic values that define a design system: colors, font sizes, spacing scales, border radii, shadows. uirip extracts these automatically from any website.

How it works

When webprobe runs inside the browser, it collects every computed style value across the page. The analysis pipeline then:

1. Clusters similar values (e.g., #1a1a1a and #1b1b1b are likely the same token)
2. Names tokens based on their usage context (primary color, heading font size, etc.)
3. Deduplicates across components to find the shared design language
4. Outputs tokens as CSS custom properties, Tailwind config values, or JSON

Example output

From a typical marketing site, you might get:

:root {
  --color-primary: #2563eb;
  --color-secondary: #64748b;
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
}

Why this matters

Manually extracting design tokens means hours in DevTools. With uirip, you get a complete token set in seconds — ready to drop into your design system or Tailwind config.