What a design token extractor does
Design tokens are the small set of named values a design system is built from: colors, font families, a type scale, spacing steps, corner radii and shadows. Most websites never publish theirs. A design token extractor reads a rendered page and recovers those values, so you can reuse a consistent system instead of copying numbers one element at a time.
PikSpec is a Chrome extension that does this from the page you already have open. It measures what the browser actually rendered, groups repeated values into scales, and exports them in the formats your project uses.
What PikSpec measures
Colors are grouped into primary, secondary, accent and neutral ramps, plus purpose-based roles such as background, surface, text, border and action, and success, warning and error colors when the page has recognisable ones. Typography includes the body, heading and monospace families and a type scale where each step records its size, line height, weight and letter spacing.
Spacing is collected into steps, with the underlying rhythm reported when one is detected, such as a 4px or 8px base. Corner radii, box shadows ordered by elevation, and CSS gradients are captured as well. Every export ends with a provenance note that separates measured values from anything that had to be inferred.
Five export formats from one capture
One generation produces every format together, so the files never disagree with each other. Copying or re-downloading a result you have already generated does not use another generation.
- DESIGN.md: A readable brief of the measured values with usage guidance, written for AI coding tools.
- tokens.json: Portable token data using $type and $value fields, for design-system tools, scripts and integrations.
- tokens.css: CSS custom properties for colors, type, spacing, radius and effects, ready to paste into a stylesheet.
- tailwind.css: A Tailwind CSS v4 theme that exposes the same tokens as utility classes.
- tokens.scss: The same values as Sass variables for an SCSS codebase.
How to extract design tokens in three steps
1. Open the website in Chrome, open PikSpec from the toolbar and choose Grant access & analyse. Use a page you are permitted to inspect; Chrome’s own pages and the Chrome Web Store cannot be analysed.
2. Review the colors and typography in Styles. Check that repeated values really form a system before you rely on them.
3. Open Tokens, generate the token package and download it. Add the files to your project, or give DESIGN.md to your AI coding tool.
Measured values, not the original source
An extractor sees how a page rendered, not the design files or source code behind it. PikSpec reports the values it observed and names them by role, so a token called primary is PikSpec’s description of how a color is used, not necessarily the name the original team chose. Values that depend on states, breakpoints or fonts the capture did not include cannot be recovered by changing the export format.
Treat the output as a documented starting point. Adapt it into your own product’s system rather than reproducing another brand, and only reuse what you have the right to use.
Using extracted tokens with AI coding tools
AI coding tools produce generic-looking interfaces when they have to guess spacing, type and color. Giving them measured tokens replaces those guesses with rules. Put the files in your repository and point your tool at DESIGN.md or the Tailwind theme when you ask it to build or restyle a component. This works with Claude Code, Cursor, v0, Codex, Windsurf and GitHub Copilot. PikSpec is not affiliated with those tools.
Read more about generating a DESIGN.md for AI tools or finding the colors and fonts a website uses.
Start for free
Element inspection is unlimited on every plan. The free plan includes 3 / month token generations and needs no card. Paid plans raise the monthly allowance.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.