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.
Hey Product Hunt 👋 I'm Patryk, and I built Open Inspector for myself. Sharing here as maybe someone will find it useful.
I kept installing CSS inspector extensions and every one asked to "read and change all your data on all websites". That's my staging environments, internal dashboards and anything I'm logged into, handed to a closed-source extension that I have no way to audit.
So I built one that asks for nothing:
🔒 No host permissions. Just activeTab, granted by your click for one tab and revoked when you navigate away. Chrome's install dialog shows no site access at all.
📡 Zero network requests. A build step scans the source and shipped bundles for fetch/XHR/WebSocket/beacon and fails if it finds one.
📐 Things DevTools doesn't tell you: the spacing scale a page really follows, its type scale, grid/flex anatomy, the font that actually rendered, and a page-wide WCAG contrast audit.
📦 Export the design system as CSS variables, Tailwind, SCSS, JSON, W3C tokens, or a Markdown handoff for Cursor/Claude.
↩️ Safe edits. Tweak any value live; closing reverts everything exactly.
It's MIT and free forever.
Try it on a site you like, press Alt+Shift+I, and tell me what's missing or wrong.
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.
Hover any website and get its design system with zero permissions requested is exactly what a browser extension should be. Inspecting layout, styles and colour on the fly works great. Nice work!
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.