DEV Community: CapiLabs

How I Built a Modern Design Token Extractor: Solving CORS, Shadow DOM, and W3C DTCG Specs

CapiLabs — Tue, 13 Oct 2026 12:25:26 +0000

How I Built a Modern Design Token Extractor: Solving CORS, Shadow DOM, and W3C DTCG Specs

Extracting design tokens from live websites sounds simple on paper—until you actually try to build a tool that handles modern frontend architectures.

When working on Token Inspector, my Chrome extension designed to bridge the gap between live web styles, Tailwind CSS, Figma (Tokens Studio), and Shadcn UI, I quickly ran into deep architectural walls. Traditional scrapers and basic CSS parsers fall apart the moment they encounter external CDNs, cross-origin security errors, or encapsulated web components.

In this article, I want to share how I solved these bottlenecks in the latest v2 update, handling everything from strict W3C standards to Shadow DOM traversal.

1. The Trap of window.getComputedStyle() vs. Live Stylesheets

Most quick scripts rely on window.getComputedStyle() to grab colors, spacing, and font sizes from DOM elements. While easy, this approach has a massive flaw: it flattens the values.

If a button uses background-color: var(--primary-500), getComputedStyle returns the resolved computed color (e.g., rgb(37, 99, 235)). You completely lose the semantic relationship and alias links like {colors.primary.500}.

The Solution:
To preserve raw variables and aliases, the parser must iterate directly through document.styleSheets and inspect live CSS rules (cssRules). This allows the extension to capture raw strings like var(--token-name) and map them back to proper DTCG alias syntax.

2. Bypassing CORS Errors Gracefully

Reading live stylesheets comes with a catch: if a website loads styles from an external CDN or Google Fonts (a different origin), the browser throws a strict SecurityError due to CORS policies.

If your parser isn't armored, a single third-party stylesheet will crash your entire extraction loop.

The Solution:
We wrapped the stylesheet traversal in robust try/catch blocks per sheet. If a stylesheet is completely unreachable due to strict CORS policies, it is skipped gracefully without breaking the main extraction thread:

for (const sheet of document.styleSheets) {
  try {
    const rules = sheet.cssRules;
    // Process rules...
  } catch (e) {
    // Gracefully handle cross-origin stylesheets without crashing
    console.warn("Skipping cross-origin stylesheet due to CORS restrictions.");
  }
}

3. Conquering Shadow DOM and Lit Components

Modern component-based frameworks (like Lit, Shoelace, or custom web components) encapsulate their styles inside a Shadow DOM using adoptedStyleSheets on each shadow root. Standard document.styleSheets is completely blind to these.

The Solution:
To ensure zero tokens are left behind, the scanner performs a recursive traversal through all open shadow roots (shadowRoot with mode: 'open') across the DOM tree, harvesting their adoptedStyleSheets alongside global rules:

function scanElement(element) {
  if (element.shadowRoot) {
    // Inspect adoptedStyleSheets inside the shadow root
    for (const sheet of element.shadowRoot.adoptedStyleSheets || []) {
      processRules(sheet.cssRules);
    }
    // Recursively check children inside shadow DOM
    scanSubTree(element.shadowRoot);
  }
  // Continue traversal...
}

(Note: Closed shadow roots remain intentionally invisible by browser design, but open roots cover the vast majority of modern component libraries).

4. Standardizing Output: W3C DTCG 2025.10 & Shadcn UI

With clean raw data captured, the extension formats the output to match modern ecosystem standards:

W3C DTCG 2025.10 Spec: Colors are no longer dumped as flat hex strings. They are mapped into structured objects containing colorSpace, components, alpha, and hex properties, making them natively compatible with advanced token managers like Figma Tokens Studio.
Shadcn UI & Tailwind: Automatically maps extracted variables to standard --background, --foreground, and --primary variables, complete with light/dark mode separation and fallback heuristics.

Conclusion & Try Token Inspector
Building developer tools requires anticipating edge cases where the browser's security model and modern component architecture collide. By combining direct stylesheet parsing, safe CORS handling, and recursive Shadow DOM crawlers, Token Inspector turns messy live DOMs into clean, production-ready design systems in seconds.

If you are building design systems or juggling Tailwind and Figma syncs, you can install the extension right now:

📥 https://chromewebstore.google.com/detail/token-inspector-%E2%80%94-ui-desi/ahhkpfngdhkjiipkhfnefpkiniliafdh?hl=es&authuser=0

(Looking for the Pro features? You can grab your license on https://matyoro.gumroad.com/l/token-inspector?_gl=1*p1bw03*_ga*NzE5ODkxODI3LjE3OTA4NjIwNTY.*_ga_6LJN6D94N6*czE3OTE4NDA5NzUkbzQyJGcxJHQxNzkxODQxNDQ4JGo2MCRsMCRoMA.. and use the code REDDITPRO at checkout for an exclusive developer discount!)

I’d love to hear your thoughts or how you handle token synchronization in your own tech stacks in the comments below!

I built a Chrome Extension to extract Tailwind & Figma tokens (and got blocked by Reddit bots 🤖)

CapiLabs — Tue, 06 Oct 2026 12:54:37 +0000

As someone who constantly jumps between UI/UX design in Figma and writing Tailwind components, I was wasting hours manually inspecting computed CSS to extract hex codes and build tailwind.config.js files.

Over the weekend, I built Token Inspector, a 100% client-side Chrome extension to automate this. In one click, it exports ready-to-use Tailwind configs, Tokens Studio JSON, and zips all inline SVGs.

I tried sharing it on Reddit this morning to get my first 20 users, but the automods instantly nuked my post because of the link. So, I’m giving the promo code I made for them to the Dev.to community instead.

Use code REDDITPRO at checkout to bypass the paywall and get the premium version 100% free.

You can grab it from the Chrome Web Store here:

https://chromewebstore.google.com/detail/token-inspector-%E2%80%94-ui-desi/ahhkpfngdhkjiipkhfnefpkiniliafdh?ref=producthunt

Let me know what you think of the code output!

How to Extract Tailwind CSS Configs and Figma Tokens from Any Site in 1 Click

CapiLabs — Mon, 05 Oct 2026 15:58:24 +0000

Every developer and designer has been there: you stumble upon a beautifully designed website and want to reverse-engineer its design tokens or inspect how its typography, color palette, and utility classes are structured.

Normally, this means opening DevTools, inspect-elementing dozens of DOM nodes one by one, manually copying computed HEX codes or CSS --variables, and spending 30 minutes manually formatting a tailwind.config.js or syncing values into Figma.

I got tired of this repetitive manual process, so I built a privacy-first browser tool to automate it: Token Inspector.

The Problem with Manual Token Inspection

Modern web apps rely heavily on utility-first frameworks like Tailwind CSS or complex CSS custom properties. When inspect-elementing computed styles in DevTools:

Variables are scattered: CSS variables are often spread across :root, body tags, or dynamically injected stylesheets.
Framework Mismatch: Converting raw CSS computed values back into structured framework syntax requires manual guesswork and mapping.
Asset Collection Friction: Extracting inline SVG icons or vector assets requires right-clicking each DOM element, copying outer HTML, and creating individual .svg files manually.

Automating Token Extraction

Token Inspector scans the DOM and active stylesheets of any web page directly in your browser, extracting three major design system components:

1. Production-Ready Tailwind CSS Configurations

Instead of manually guessing color palettes, typography scales, or border-radius rules, the extension parses the computed theme variables and builds a structured tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      borderRadius: {
        'custom': '12px',
      }
    },
  },
};

Figma Tokens Studio JSON Export
Bridging the gap between design and production code is always tricky. The extension outputs structured JSON matching the Tokens Studio schema, allowing you to import color palettes and variables directly into native Figma Variables.
Bulk SVG Exporter
It scans all inline vector elements (

Privacy First: 100% Client-Side Architecture
Security and privacy were top priorities when building this tool. Many web inspection extensions send scraped DOM nodes or telemetry to external backend servers.

Token Inspector executes 100% client-side using standard Web APIs (window.getComputedStyle, DOM Parsing, and Canvas APIs). Zero data leaves your local browser session.

Try It Out & Share Your Feedback
We just launched Token Inspector today on Product Hunt!

If you are a frontend developer, UI/UX designer, or indie builder, I'd love for you to give it a spin, test it on complex production web apps, and let me know your thoughts or edge cases you encounter.

👉 Check out Token Inspector on Product Hunt: https://www.producthunt.com/posts/token-inspector

What does your current design token inspection workflow look like? Let's discuss in the comments below!