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 的实景演示--录制于真实网站。

关于Tokens

MiroMiro 中 Tokens 的工作原理

Extract design tokens from any live website automatically - colors, typography scales, spacing systems, and more. MiroMiro reads computed CSS and exports tokens as CSS custom properties, Tailwind configuration, or values ready for Figma variables. No enterprise tools, no manual copying. One click to capture an entire design system from any website and use it in your own projects.

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