What are design tokens?

Design tokens are the smallest units of a design system - colors, fonts, spacing, border radii, shadows. They represent design decisions as reusable variables that keep your UI consistent.

What export formats are supported?

MiroMiro exports tokens as CSS custom properties (--color-primary: #6B21A8) and Tailwind CSS configuration objects, ready to paste into your tailwind.config.js or global CSS.

How do I extract design tokens from a website?

Install MiroMiro, enter any public website URL in the Design Tokens panel, and click extract. MiroMiro reads the computed CSS and stylesheets to identify color tokens, typography scales, spacing systems, border radii, and shadows - even if the site doesn't use CSS variables. Export as CSS custom properties, a tailwind.config.js block, or values ready for Figma variables.

How does MiroMiro identify which values are tokens?

MiroMiro analyzes CSS files for repeated values, existing CSS custom properties, and common design patterns (color scales, spacing systems, typography scales) to intelligently group values into tokens.

Can I use extracted tokens to rebuild a design system?

Absolutely. Extracted tokens give you the foundation of any website's design system. Import them into your project as CSS variables or Tailwind config and you have an instant, consistent starting point.

How is this different from Figma Tokens or Specify?

Figma Tokens and Specify work within Figma to manage tokens you've already defined. MiroMiro works the other way - it extracts tokens from live websites, so you can capture a design system from any site and import it into Figma variables, CSS, or Tailwind. They complement each other.

Can I extract Figma variables from a website?

MiroMiro extracts color tokens, typography scales, and spacing values from any live website. While it doesn't directly export Figma variable files, the extracted values map perfectly to Figma variables - paste them into your Figma design system to match any website's token system.

Tokens

Design Tokens Extractor A website's colors, type and spacing, as tokens

Extract design tokens from any website in one click - colors, typography, spacing, shadows, radii.

Add to Chrome, free All features

Free to install · 3-day Pro trial · No card

Tokens in action, recorded on a live website.

How it works

A site's design system, in three clicks

Extract the design system

One click reads every token the site uses.

Review the tokens

Colors, type scale and spacing, grouped and named.

Export as CSS or Tailwind

Paste CSS variables or a Tailwind theme into your project.

What you get

The design system, without rebuilding it

Extract

One click reads it all

Colors, type scale, spacing, radii and shadows, from any live site.

Review

Grouped and named

Tokens come organized, so you can see the system at a glance.

Export

CSS variables or a Tailwind theme

Paste it into your project and start from the real system.

Give your AI the real design system

Hand the tokens to Cursor or Claude so what it builds stays on brand.

What is the design token extractor?

あらゆるWebサイトのCSSからデザイントークンを自動抽出。カラートークン、タイポグラフィスケール、スペーシングシステムを含むデザイン上の決定を特定し、CSSカスタムプロパティ、Tailwind設定、Figma変数やFigmaトークン用の値としてエクスポート。Specifyなどのプラグインや手動のトークンワークフローと違い、MiroMiroはライブWebサイトから直接完全なトークンシステムを構築できます。

FAQ

Design token extractor questions

Compare withDivmagic

More featuresCSS Inspector Assets SVG Lottie Colors Contrast Inspect & Export Elementor

Try the design token extractor on any website

Install MiroMiro free. Full Pro for 3 days, no card needed.

Add to Chrome, free View pricing