Token Inspector — UI & Design Systems

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

Token Inspector – Extract Tailwind CSS & Figma Design Tokens instantly Transform any website into production-ready Tailwind CSS configurations and Figma design tokens in seconds. Token Inspector gives frontend developers and UI/UX designers deep visual inspection and single-click export capabilities directly from the browser. 🚀 Key Features: • Tailwind CSS Exporter: Generate production-ready tailwind.config.js files with exact color palettes, spacing scales, typography, and border radiuses. • Figma Variables Integration: Export tokens into Tokens Studio JSON format to sync directly with native Figma Variables. • CSS Custom Properties Scanner: Automatically detect and inspect CSS root variables (--custom-properties) across any web page. • Typography & Spacing Scales: Analyze font families, line heights, font weights, and spacing systems visually. • Bulk SVG Downloader: Extract and download all SVG icons and vector assets from the current page in a single .ZIP archive. • Privacy-First: Operates 100% client-side inside your browser with zero tracking, data collection, or external servers. 💡 How It Works: 1. Navigate to any website you want to inspect. 2. Click the Token Inspector extension icon in your Chrome toolbar. 3. Explore detected tokens or click "Export" to download your tailwind.config.js or Figma JSON file. ⚡ Perfect For: Frontend Engineers, UI/UX Designers, Design System Leads, and Tailwind CSS Developers looking to streamline their web build workflow.