SpecX - Design token extractor

About

Web interfaces aren’t just colors and fonts. They’re systems of decisions repeated at scale. Specx helps you see those decisions.

Specx is a chrome extension that inspects any live webpage and reveals the visual foundations it’s built on—design tokens, patterns, and constraints that usually stay hidden behind layers of CSS. Instead of screenshots and guesswork, you get clarity.

What Specx does.
Specx scans the active webpage and extracts the values that actually shape the interface:
— Colors used across the product, grouped by usage
 
— Typography styles, weights, and hierarchy
 
— Spacing patterns that define layout rhythm
 
— Borders, radii, shadows, and structural details
 
— Repeated values that signal design tokens in practice

It’s not about copying designs. It’s about understanding how real products are constructed.

Why Specx exists.
Design systems rarely exist in isolation. Most of what we learn comes from observing real interfaces in the wild.

Specx turns the web into a living design system reference—so you can:
— Audit visual consistency
 
— Learn how mature products scale design decisions
 
— Reverse-engineer interfaces thoughtfully
 
— Build stronger systems, not just prettier screens

Built for people who care about structure.
Specx is for:
— Designers working on design systems
 
— Frontend developers aligning code with design intent
 
— Product designers studying patterns across products
 
— Design students learning from real-world interfaces
 
— Teams who want fewer assumptions and more evidence

Simple to use.
— Install SpecX
— Open any webpage

— Click the extension

No setup. No accounts. No noise.

Just the system beneath the interface.

⭐ Love SpecX? We'd appreciate your review!