Design Extractor: pull the design system out of any landing
Design Extractor is a free tool that reads a live landing page and extracts its design system as structured tokens: colors, typography, spacing, border radii, shadows and component styles. You get the result as JSON, CSS, Markdown and a Tailwind theme, ready to feed into a page builder or an AI coding tool.
What it extracts
Paste a URL and a real browser loads the page, reads its computed CSS, and structures what it finds into design tokens:
- Color palette
- Typography: font stacks and the type scale
- Spacing rhythm, border radii, shadows
- Component-level styles
The result ships as tokens.json (W3C design-token format), tokens.css, a Markdown spec, and a Tailwind theme — formats a builder or an AI coding tool can consume directly.
When to use it
The common case: a landing in your niche converts, and you want its visual DNA as a starting point instead of a blank page. Extract the tokens, then hand them to your developer or send them straight to Forge — the platform's white-page generator — which builds a page in the same design language.
It also works as a baseline tool: extract your own page before a redesign so the new build has something concrete to match against.
Free tokens mode, paid rebuild prompt
Tokens extraction is the free tier. A separate paid mode reverse-engineers the page section by section — structure, asset references, animation behavior — into a rebuild prompt for AI builders. Start with tokens; they cover most "I want this look" jobs.
How it works
- Paste the URL of the landing you want to read.
- Run a tokens extraction — a real browser renders the page first, so you get computed styles, not source guesses.
- Open the result: token groups plus tokens.json, tokens.css, a Markdown spec and a Tailwind theme.
- Download the files, or send the extraction to Forge to generate a page in the same design DNA.
FAQ
What do I get from a free extraction?
Computed design tokens from the live page — colors, typography, spacing, radii, shadows, component styles — as tokens.json (W3C format), tokens.css, a Markdown spec, and a Tailwind theme.
Is this a screenshot tool or a site ripper?
Neither. It reads computed CSS through a real browser and structures it into tokens. The free mode doesn't download the site's assets or clone its layout.
What's the difference between tokens mode and prompt mode?
Tokens mode (free) extracts the design system. Prompt mode (paid) reverse-engineers the page — structure, assets, animation behavior — into a rebuild prompt for AI builders like Cursor or Forge.
Can I use the tokens in FictioFactori's page generator?
Yes. Send-to-Forge hands the extraction to Forge as a design context, so the generated white page inherits the same visual DNA.
Does it work on heavy JavaScript pages?
The capture harness is Playwright with scroll-hijack handling — the same one AdInfraCheck uses for screenshots — so SPAs render before extraction. Complex animation detection can be incomplete; the result lists known limitations when that's the case.
Extract your first design system
Register and run a free tokens extraction on any landing you want to rebuild.
Get started