How to export design tokens from any screenshot (no Figma needed)

Design tokens are the named values a design is built from. Most tools expect them to live in a Figma file. But plenty of the designs you want to build from are just screenshots: a site you admire, a client’s reference, a Dribbble shot.

The token set worth extracting

Color with roles, as hex.
Typography: font family and fallback, size, line height, weight, letter spacing.
Radius, spacing, shadow, and the layout’s max width and columns.

Pick the format your stack uses

CSS variables for any stack.
Tailwind v4 @theme for Tailwind projects (see the Tailwind guide).
tokens.json in the W3C Design Tokens format, for Style Dictionary or Tokens Studio.
DESIGN.md for coding agents (see the DESIGN.md guide).

From screenshot to tokens with Recast

Drop the screenshot, get the prompt, then open Export spec: all four formats come from the same extraction, free, once per prompt version. Below are the real CSS variables for a landing-page hero.

tokens.css

/* Vectrus misty mountain hero: design tokens from Recast */
:root {
  --color-ink: #14233A; /* headline, nav text, icon fill, underline, arrow border */
  --color-ink-muted: #5B6676; /* tagline text */
  --color-line: #14233A; /* active nav underline and arrow button border */
  --color-sky: #E6EAEF; /* fallback background behind photo, menu overlay background */
  --color-mist: #F2F4F7; /* brightest cloud tone / news dot ring color */
  --color-rock: #7C8799; /* mid-tone mountain shadows */
  --font-heading: "Inter Tight", Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: "Inter Tight", Inter, 'Helvetica Neue', Arial, sans-serif;
  --text-nav-link: 12px;
  --leading-nav-link: 1;
  --weight-nav-link: 400;
  --tracking-nav-link: 0.12em;
  --text-headline: 76px;
  --leading-headline: 1.06;
  --weight-headline: 400;
  --tracking-headline: -0.01em;
  --text-tagline: 14px;
  --leading-tagline: 1;
  --weight-tagline: 400;
  --tracking-tagline: 0.42em;
  --text-tagline-mobile: 11px;
  --leading-tagline-mobile: 1;
  --weight-tagline-mobile: 400;
  --tracking-tagline-mobile: 0.3em;

Real Recast export: CSS variables extracted from one screenshot. See the design and the full spec.

Common questions

Can you extract design tokens without Figma?

Yes. Recast reads a screenshot or video and exports its colors, typography, radii, spacing, and shadows as CSS variables, a Tailwind v4 theme, W3C tokens.json, or a DESIGN.md.

Is tokens.json compatible with Style Dictionary?

It follows the W3C Design Tokens Community Group format, which Style Dictionary and Tokens Studio read.

Does exporting cost credits?

No. Spec export is free and made once per prompt version.

More guides

Try it on your own design.

Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.