Design Token Extractor is a Chrome extension that lets you instantly pull design system tokens from any live website. Instead of manually inspecting styles or digging through dev tools, you can extract: • Colors • Typography (fonts, sizes, weights) • Spacing and layout values It’s built for developers and designers who want to quickly understand, replicate, or audit a design system without wasting time.
No reviews yetBe the first to leave a review for Design Token Extractor
Maker
📌
I built Design Token Extractor out of frustration with a really common workflow:
You see a great UI and want to understand how it’s built…
and suddenly you’re deep in DevTools trying to manually inspect colors, font sizes, spacing, and variables.
It’s slow, repetitive, and honestly — annoying.
So I made a Chrome extension that extracts design tokens directly from any website.
The goal was simple:
turn “inspect → copy → repeat” into one click.
Right now it focuses on:
→ colors
→ typography
→ spacing
But I’m really curious how people would use this in real workflows:
• design audits
• reverse engineering
• building design systems
Would love your feedback:
What’s missing? What would make this actually indispensable?