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.

MiroMiro

ログイン Chromeに追加

すべての機能

Tokens

Design Tokens Extractor - Export from Any Website to Figma & Code

Extract design tokens from any website in one click - colors, typography, spacing, shadows, radii. Export as CSS variables, a tailwind.config.js block, or Figma variables. The fastest design token extractor for designers and AI coding tools.

Chromeに追加料金を見る

無料で試せるローカル＆プライベート 20,000人以上が利用

Need this as an API? Extract tokens from any URL with one GET request →

Tokensの実演--実際のWebサイトで撮影。

Tokensについて

MiroMiroのTokensの仕組み

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

Extracted component with its design tokens

Colors panel extracting a site's gradients and design tokens

主なメリット

すぐに使える機能

Extract CSS variables automatically

Export to Tailwind config

Identify design patterns

Build design systems faster

ユースケースDesign system creationBrand documentationCodebase analysisStyle standardization

4ステップで開始

Tokensの使い方

1
Install MiroMiro
Add MiroMiro to Chrome from the Chrome Web Store - it's free.
2
Enter a website URL
Open MiroMiro's Design Tokens panel and enter any website URL to analyze its design system.
3
Review extracted tokens
Browse the extracted tokens organized by category: colors, typography, spacing, borders, shadows, and more.
4
Export as CSS or Tailwind
Copy the tokens as CSS custom properties or a Tailwind config object. Paste directly into your project.

Try Tokens free

Full Pro for 3 days - no card needed. Takes about 30 seconds to install.

Chromeに追加

5.0 · 20,000+ developers & designers

MiroMiro API

Need this as an API?

The same engine behind this feature is a REST API. One GET request against any live URL returns its colors, type scale, spacing, shadows and radii as JSON, CSS variables or a Tailwind config.

See the Design Tokens API Explore the API

FAQ