Token Inspector — UI & Design Systems

Inspect, extract, and export Tailwind CSS design tokens, custom properties, and icons directly from any website.

oken Inspector is the ultimate developer tool for inspecting, auditing, and extracting design tokens directly from live web applications into production-ready code and Figma-compatible JSON formats. Unlike standard browser DevTools that flatten CSS variables into raw computed RGB values, Token Inspector crawls stylesheet rules to preserve full semantic token trees, aliases, and variable hierarchies. 🚀 WHAT'S NEW IN V2.1: • Perceptual Fuzzy Color Matching: Powered by pure Oklab color space and Delta E distance calculations to catch hardcoded color near-misses (e.g., matching `#1c1c1e` to `--zinc-900`). • Team Collaboration & Sync: Export audit overrides directly inside the W3C DTCG JSON `$extensions.tokenInspector.overrides` metadata with timestamped Last-Write-Wins conflict resolution. • Domain Memory: Automatically remembers approved color mappings per domain using chrome.storage.local. • Refined UI & Navigation: Optimized 500px layout with smooth horizontal tab scrolling for fast audits. KEY FEATURES: • W3C DTCG Spec Compliant: Export structured design tokens fully compatible with Figma Tokens Studio and modern token workflows. • 1-Click Code Exports: Generate instant Shadcn UI CSS variables and Tailwind CSS theme configurations. • Shadow DOM & CORS Bypass: Recursively crawl open shadowRoot instances, adoptedStyleSheets, and cross-origin stylesheets from third-party CDNs. • Comprehensive Auditing: Inspect colors, typography, spacing, border radii, CSS variables, and asset trees in real time. WHO IS THIS FOR? Designed for Frontend Engineers, UI/UX Designers, and Design System teams looking to audit production sites, migrate legacy codebases, and keep code in sync with Figma libraries.