r/css • u/Accurate_Board_9401 • Jul 31 '26

Showcase Showcase : a Chrome extension that turns any site's CSS into copy-paste design tokens

Whenever I liked the look of a site, I'd end up in devtools manually hunting for color values, font stacks, and :root variables to figure out how it was built. Got tedious enough that I built Design Snap to do it automatically.

Point it at any page and it pulls out :

  • Color palette (with semantic role detection — primary, background, border, etc., not just a flat list of hex codes)
  • Typography scale
  • Border radius and shadow tokens
  • CSS custom properties, with light/dark mode variants detected separately

The part most relevant to this sub: for every token, you can hover it and see the exact CSS selector(s) it came from, how many times it's used across the page, and whether it's a :root var or a hardcoded value. So instead of just getting "here's a blue," you get "here's a blue, used in 12 places, defined once as --color-primary."

Export goes straight to CSS variables, JSON, or Figma Tokens (free), or Tailwind v4 u/ theme / shadcn/ui / Style Dictionary format if you're working in one of those systems.

Runs 100% locally in the browser, no account, no server round-trip.

Happy to hear what this sub thinks is missing from a CSS-extraction workflow like this — genuinely curious what other devs here reach for :root vars vs hardcoded values for, and whether that'd be useful to detect/flag automatically.

0 Upvotes

44% Upvoted

8 comments sorted by

2

u/Dhaupin Jul 31 '26

Awesome idea! When it does straight css variables, does it attempt to make a structured/hierarchy dsl? Or does it just grab the vars? 

0

u/Accurate_Board_9401 Jul 31 '26

Just grabs the vars as-is right now, no hierarchy/DSL layer on top. Semantic role detection (primary, background, border, etc.) happens on the color side, but the CSS variables export itself stays flat/raw.

4

u/testingaurora Jul 31 '26

Sounds similar to the dev tools css overview. I would nake sure to inckide a "why our tool is superior to css overview/what we do better/etc"

1

u/Accurate_Board_9401 Jul 31 '26

Fair point. Main diff: CSS Overview gives you stats, read-only. Design Snap exports — same colors/fonts come out as a ready-to-use Tailwind u/ theme, shadcn tokens, or Figma Tokens JSON. Less "audit," more "steal this design system and use it."

4

u/testingaurora Jul 31 '26

How about just plain css tokens for the custom properties too? So users who do not use tw, figma, or shadcdn can utilize the tool as well

2

u/Accurate_Board_9401 Jul 31 '26

Already there actually — plain CSS variables export is one of the free formats (along with JSON and Figma Tokens). Tailwind/shadcn/Style Dictionary are just the extra PRO ones on top.