Launched this week
A free, open-source browser extension for inspecting layout, styles, colour, type and assets on any page, and exporting its design tokens. Unlike the popular alternatives, it requests no site access and makes zero network requests. MIT, no account.
the activeTab-only approach is the actual selling point here, not a footnote. one question on the design-token export - when a site is using CSS-in-JS with generated class names instead of a real design system, does it still manage to group colors/spacing into something coherent, or does the export turn into a huge flat list of one-off values with no naming to speak of?
@galdayan good question. It doesn't care about class names at all. It reads the computed styles of what's actually on screen, so a site using CSS-in-JS gets the same treatment as one with a proper design system.
Colors that look almost the same get merged into one, so you won't end up with 12 slightly different greys. They're named by what they look like (blue-600, gray-100), not by what they mean, so you won't get "primary" or "surface". That information just isn't on the page.
Spacing is weaker right now. It works out the base unit (like "8px, 92% of values fit"), but the export still lists every value it finds, including the odd ones. On a messy site that list gets long. Cleaning that up is next on my list.
@patryk_lasek1 the "named by what they look like, not what they mean" tradeoff is honest and makes sense given it can't see intent. on the spacing cleanup - would you rather bucket the odd values into "nearest multiple of the base unit, off by Xpx" instead of listing them raw? that at least tells you it's probably a rounding/drift issue rather than an intentional one-off, without pretending to know more than the page actually tells you.