Hugo Carvalho

Tokenscout - A design-token extractor for live, rendered websites

by
Extract design tokens from a live, rendered website perceptual color clustering (CIELAB ΔE76), type/spacing scales, assets, and motion. Zero-dependency core. - Atroci/tokenscout

Add a comment

Replies

Best
Hugo Carvalho
Maker
📌
Hey Product Hunt 👋 I built tokenscout because I kept running into the same problem while rebuilding client websites. Before starting a redesign, I usually need to collect the obvious things first: logos, colors, images, typography, spacing, UI patterns, and whatever visual information will help me rebuild the site without guessing. But there was no consistent way to do that. Most tools start from a CSS file, a design file, or a framework-specific setup. In real client work, that is rarely what I have. Sometimes I only have the live website. Sometimes the site is old, messy, built on WordPress, changed by plugins, or full of overrides. What matters is not what the source says. What matters is what the browser actually paints. So I started building tokenscout around a very simple workflow: “Go to this website and get me the images, copy, color tokens, and design information I need to rebuild it.” The goal is to make that reliable. The first open-core release focuses on the design-token foundation: color parsing, sRGB to Lab conversion, ΔE76 color distance, perceptual color clustering, type scale reduction, spacing scale reduction, and DTCG design-tokens.json export. The bigger vision is a live-site extraction tool that can crawl a rendered page, read computed styles, collect assets, detect motion, and give designers and developers a clean starting point for redesigns, migrations, audits, and design-system work. tokenscout is early, but it already solves a real pain I kept having in client projects. I’d love feedback from people who rebuild websites, migrate old brands, create design systems, or work between design and code. What would you want tokenscout to extract first?