Specter-dev

The inspect tool built for vibe coding. Provide precise feedback to AI. Save token costs.

Vibe coding works best when your AI has the right context upfront. Without it, you end up in a loop — screenshot, explain, try, repeat. Specter breaks that loop.

Hover any element on any website to instantly see its full CSS properties: tag, component name, dimensions, font, color, padding, margin, border-radius, and more. Press Cmd+C to copy everything in an AI-optimized format and paste it directly into Claude, Cursor, or any coding assistant. One paste replaces a paragraph of explanation — fewer tokens, less back-and-forth, better results.

Specter brings together the best of two tools you already know: the browser inspector and the Figma measurement panel — rebuilt for the vibe coding workflow.

How it works: Click the Specter icon in your Chrome toolbar to activate on any page.

Hover any element to see its full style properties in the overlay.

Press Cmd+C to copy the element data to your clipboard.

Paste into your AI assistant and describe what you want: "fix the spacing", "make this match the header font", "increase the padding".

Key features:

CSS inspector — tag, component name, dimensions, font, color, padding, margin, border-radius for any element on any site Figma-style measurement — tap Option to switch to Measure mode and see exact pixel distances between any two elements on screen Pin & measure — press M to pin an element, hover another to measure the gap between them Multi-select — press P to pick multiple elements and copy them all at once Works anywhere — production sites, staging environments, competitors, no setup required