Media
5 items
Description
Element inspector for AI-assisted development. Ctrl+Option+Z to activate. The inspector built for vibe coding. Point at what's wrong, say what you want, and hand it off — to your AI as a precise work order, or to another person as a comment that sticks to the exact element. 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. Share feedback with a person, not just your AI. Mark comments on a page, click Share, and Specter copies a link. Whoever opens it — on the same page, with Specter installed — sees your notes pinned to the exact same elements. Comments only: your CSS values and measurements never leave your screen. If the page changed and an element is gone, that comment is flagged instead of landing on the wrong spot. No account, no backend — the comments ride inside the link (or a small file for big reviews). 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 C to toggle between Comment mode and Properties mode. 4. In Properties mode, press the Option key to toggle between the Properties and Measurement viewer. 5. Press P to mark it and type the change you want (optional). 6. Press Cmd+C to copy the elements — and your notes — for your AI. Or press L, then Share, to send them to a person. 7. Paste into your AI assistant, or share the link with a teammate. Note: If you want to send your specs directly to your AI agent, install the Vite plugin: https://www.npmjs.com/package/vite-plugin-specter Features: 1. Annotate on the page — press P to note a change on any element; mark several, copy as one instruction set 2. Share comments with a person — mark notes, hit Share, send a link; they re-anchor on the same elements in the recipient's browser (comments only — never your CSS or measurements) 3. CSS inspector — tag, component, dimensions, font, color, padding, margin, radius for any element on any site 4. Figma-style measure — tap Option, then hover to see exact pixel gaps between elements 5. Pin & measure — press M to pin one element, hover another to measure the distance 6. Review panel — press L to see, edit, remove, or share everything you've marked 7. Token-lean output — copies just what the AI needs, nothing it doesn't 8. Works anywhere — production, staging, competitors; no setup