Vibe Annotations

Vibe Annotations is a browser extension and local server that lets developers leave visual feedback on a web page and hand it to an AI coding agent in one batch. A user clicks any element on a localhost page, adds a note about what needs to change, and builds up a queue of annotations across pages. The agent then reads the queue and implements every fix together. Each pin captures the exact DOM selector and, where available, the React or Vue component and source file behind the element, so the agent has precise context rather than a screenshot alone. A Figma style panel allows direct design edits to size, spacing, color and text with a live preview, and users can ask the agent for variants of a component and choose the winner on the page. Screenshots are taken automatically and reference images can be attached. Annotations export as a single self contained HTML file with images embedded, or as a lighter Markdown file. Setup is a Chromium extension, which works in Chrome, Edge, Brave, Opera, Vivaldi and Arc, plus a local server started with a single npx command, and an MCP configuration added to the agent. It works with Claude Code, Cursor, Windsurf, GitHub Copilot and Codex. The tool is source available and runs entirely locally. The vendor describes it as free, and no paid plans are published.