This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
Hover any element on a live website and read its type styles the way you would in Figma. Click two elements to measure the exact gap between them as dimension lines, not a ruler you eyeball. See margin, border and padding as a spacing box instead of a flat CSS list. Reach past full-bleed overlay elements with a Cmd/Ctrl-hover. No host permission, no tracking, no network requests — nothing leaves your browser.
Hey everyone 👋
I built this because I was tired of digging through DevTools just to measure spacing on a website - scrolling a huge list of CSS properties when all I wanted was "what's the gap between these two things," the way Figma just tells you.
So Design Tool brings that Figma-style inspect experience into the browser. Hover to see type styles, click two elements to measure the gap between them, see padding/margin as a proper spacing diagram.
It's activeTab-only, no network requests, nothing leaves your browser. Would love to hear what you think, and happy to answer anything about how it's built.
No comment highlights available yet. Please check back later!
About Design Tool on Product Hunt
“Figma's inspect panel, for any website”
Design Tool was submitted on Product Hunt and earned 8 upvotes and 1 comments, placing #39 on the daily leaderboard. Hover any element on a live website and read its type styles the way you would in Figma. Click two elements to measure the exact gap between them as dimension lines, not a ruler you eyeball. See margin, border and padding as a spacing box instead of a flat CSS list. Reach past full-bleed overlay elements with a Cmd/Ctrl-hover. No host permission, no tracking, no network requests — nothing leaves your browser.
Design Tool was featured in Chrome Extensions (52.8k followers), Design Tools (262.8k followers), Developer Tools (519.8k followers) and GitHub (41.4k followers) on Product Hunt. Together, these topics include over 173.3k products, making this a competitive space to launch in.
Who hunted Design Tool?
Design Tool was hunted by Naresh Sain (Shadezie). A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Design Tool stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Naresh Sain (Shadezie)