Specter-dev by Setu Kathawate

The inspector built for vibe coding. Point at what's wrong, say what you want, and hand your AI a precise work order — no more screenshot → explain → retry loop.

Hover any element on any site to see its real CSS: tag, component, dimensions, font, color, background, padding, margin, border-radius. Press Cmd+C to copy it in an AI-optimized format and paste straight into Claude, Cursor, or any assistant. One paste replaces a paragraph of explanation.

Annotate right on the page. Press P on any element and type the change you want — "reduce width to 320", "match the header font". Mark up as many elements as you need, then copy them all at once, each paired with your exact instruction. Your AI knows which element and what to do — no re-describing.

It's your browser inspector and Figma's measurement panel, rebuilt for the AI workflow — and tuned to spend as few tokens as possible while staying precise.

How it works:

1. Click the Specter icon (or press Ctrl+Option+Z) to activate on any page.
2. Hover an element to see its style properties.
3. Press P to mark it and type the change you want (optional).
4. Press Cmd+C to copy the elements — and your notes.
5. Paste into your AI assistant.

Features:

1. Annotate on the page — press P to note a change on any element; mark several, copy as one instruction set
2. CSS inspector — tag, component, dimensions, font, color, padding, margin, radius for any element on any site
3. Figma-style measure — tap Option, then hover to see exact pixel gaps between elements
4. Pin & measure — press M to pin one element, hover another to measure the distance
5. Review panel — press L to see, edit, or remove everything you've marked
6. Token-lean output — copies just what the AI needs, nothing it doesn't
7. Works anywhere — production, staging, competitors; no setup