DesignSpy
Paste any public URL and extract its design system — colors, typography, spacing, radii,
and shadows — rendered visually. Download the result as a design.md file to
drop into Claude, Cursor, or any AI coding tool as instant design context.
Works best on sites that use CSS custom properties (design tokens). Sites behind login walls or bot protection won't load.
How DesignSpy works
DesignSpy fetches a site's CSS server-side (bypassing browser CORS restrictions), parses it for design tokens, and returns a structured result your browser renders visually.
Named Tokens
Sites using CSS custom properties (variables) like --color-primary or
--spacing-md produce the richest output — token names and values are
extracted directly.
Raw Values
Even without named tokens, DesignSpy extracts raw colors, font families, border radii, and shadows from property declarations across all linked CSS files.
Spacing Heuristic
Spacing values are extracted by counting how often each value appears across
margin, padding, and gap — values used 3+
times are considered part of the system.
design.md for AI tools
The downloaded file is formatted as a self-contained design brief — paste it into your AI coding tool alongside your code to keep colors, fonts, and spacing consistent.
What works well / what doesn't
- Best results: Sites using design systems with CSS variables (Radix, Material, custom token systems, beacon-ui).
- Partial results: Tailwind JIT or CSS-in-JS sites — only raw values, no named tokens.
- Won't work: Sites behind login walls, Cloudflare bot challenges, or that block automated access.
- CSS files larger than 300 KB are skipped to keep responses fast.