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).
Product upvotes vs the next 3
Waiting for data. Loading
Product comments vs the next 3
Waiting for data. Loading
Product upvote speed vs the next 3
Waiting for data. Loading
Product upvotes and comments
Waiting for data. Loading
Product vs the next 3
Loading
Design Tool
Figma's inspect panel, for any website
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.
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.
On the analytics side, Design Tool competes within Chrome Extensions, Design Tools, Developer Tools and GitHub — topics that collectively have 876.8k followers on Product Hunt. The dashboard above tracks how Design Tool performed against the three products that launched closest to it on the same day.
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.
For a complete overview of Design Tool including community comment highlights and product details, visit the product overview.
Naresh Sain (Shadezie)