Sizes & spacing
Hover any element for its exact size and the live gap to anything beside it.
Measure, inspect, and edit any live page. Its real CSS, type, and color, without ever opening DevTools.
No account · no tracking · 100% local
One measuring layer · every screen
NewInspeck, now in Claude
Inspeck now lives in the app Claude is building. Inspect, measure and comment right on the page. Your notes land in the Claude chat with the exact element, and Claude fixes it.
01 · How it works
Every size & gap, instantly.
Type, color, contrast.
Edit the CSS, live.
Note it, screenshot it.
02 · Features
Every demo below is real and live: the same overlays the extension draws.
Hover any element for its exact size and the live gap to anything beside it.
Type, color, padding and radius, plus a live contrast check. Real computed values, not guesses.
Design Engineer
Tweak size, weight, or corners in the inspect panel. The selected button restyles on the page as you go.
Drop notes on the design, then snap a screenshot with them baked in. Receipts for every review.
03 · The panel
Click any element for its real CSS, type and color, then edit it live, walk the tree, or write your own CSS. No Elements tab, no digging.
04 · Who it’s for
Check the build against your file, without ever leaving the build.
The exact values, instantly. No screenshot-squinting, no guess-px.
Audit spacing-scale drift across whole product surfaces in one pass.
Turn “feels off” into “13px should be 16px” in seconds, with proof.
05 · Mac app
Inspeck for Mac lives in your menu bar and measures native apps: the same hover-to-measure superpower, on your whole desktop.
06 · FAQ
The browser extension does. Any page your browser can open: production, staging, localhost, web apps behind logins, even content inside iframes. If you can see it, you can measure it. Inspeck in Claude is for the app you’re building, so it runs on pages served from your own machine.
No. The browser extension and the Mac app run entirely on your own machine. They work fully offline and make zero network requests. Measurements, notes and screenshots never leave your device: no account, no tracking, nothing collected.
Inspeck in Claude keeps your notes on your Mac and hands them only to your own Claude chat. It fetches just two things: its latest version number from GitHub (at most once a week), and stylesheets your page loads from a CDN, so their CSS shows as written.
Nope. If you can hover and click, you can audit a UI. Engineers still get the deep end: selectors, computed styles and copy-ready specs.
Chrome and Chromium-based browsers (Edge, Arc, Brave), plus Firefox and Zen via Mozilla Add-ons. There's also a native macOS app that measures any app on your desktop, not just the browser, and Inspeck in Claude for the app you’re vibe coding, on macOS.
In your app’s folder, run npx inspeck init. It adds Inspeck to Claude and to your app, in development only. Run your app, press I, click anything and type what’s off, then say “check my Inspeck notes” in Claude. Claude gets each note with the exact element, its CSS and where it lives in your code, and fixes it.
It needs macOS, Claude Code (the desktop app or the terminal) and Node.js 20 or later.
Free. Use it on every project, every day. Inspeck in Claude is free and open source too. Be the person who notices the 13px.
Add Inspeck to your browser and make every pixel accountable.
Works with Chrome · Edge · Arc · Brave · Firefox · Zen
Two quick steps and Inspeck is live in your menu bar:
Download didn’t start? Re-download (~1 MB)