Design Tool

Figma's inspect panel, for any website

4 followers

Figma's inspect panel, for any website

4 followers

Visit website

Design resources

•

Vibe Coding Tools

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.

Free

Launch tags:Chrome Extensions•Design Tools•Developer Tools

Launch Team

AWS Activate CreditsCredits that fuel your startup’s next milestone

Promoted

Maker

📌

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.

Report

2mo ago

Reviews