TokenSnap — Design Token Extractor

Extract colors, fonts, spacing, and design tokens from any page as CSS variables or AI-ready briefs.

Every website you visit is already a design system — it just isn't written down anywhere. TokenSnap writes it down for you. Open any page, click the TokenSnap icon, and it reads the live computed styles of what's actually rendered on screen. Not the stylesheet. Not a guess. The real values the browser resolved. In about a second you get a clean, deduplicated set of design tokens: typography scale, colour palette, spacing rhythm, border radii and shadows. Then pick how you want it. ── THREE WAYS TO EXPORT ── ▸ CSS vars A ready-to-paste :root block of CSS custom properties. Sensibly named, sorted into a real scale, and commented with the source URL, timestamp and how many elements were sampled. Drop it into your project and start building. ▸ AI Brief A structured Markdown brief covering mission, brand, audience, product surface and style foundations. Written for pasting into ChatGPT, Claude, v0 or any other assistant, so the model produces UI that actually matches your design language instead of inventing its own. ▸ Skill file A complete Claude/Cursor skill file with proper YAML frontmatter and managed content markers. Drop it into your agent's skills folder and your coding assistant permanently understands your design system — tokens, component behaviour and accessibility standards included. Re-run it later and only the managed block is refreshed, so your own edits survive. ── WHO IT'S FOR ── - Frontend developers rebuilding or refactoring an existing UI - Designers auditing consistency across a live product - Anyone doing competitive teardowns of a site's visual language - Teams bootstrapping a design system from a site that never had one - Developers who want their AI coding agent to stop producing generic UI ── PRIVACY, PLAINLY ── TokenSnap runs entirely in your browser. There is no account, no server and no analytics. Extraction happens inside the tab you already have open, and the result stays on your machine unless you press copy or download. We don't collect your browsing history, page content or tokens — because we never receive them. TokenSnap only touches a page when you explicitly click the toolbar icon. It does not run in the background and it has no access to the tabs you aren't looking at. ── GOOD TO KNOW ── - Works on any standard web page, including pages behind a login (it reads what you can already see) - Chrome's own pages (chrome://, the Web Store) are off limits to all extensions, TokenSnap included - Output is plain text — yours to edit, commit or throw away - No sign-up, no trial, no upsell prompts Install it, open a site you admire, and see its design system in one click.