Vibe Annotations

Vibe Annotations is a browser extension that bridges the gap between visual feedback and AI-powered coding. It lets you click directly on any element of a webpage—a button, a text box, a layout section—and attach a note explaining what needs to change. Instead of describing issues with words or taking screenshots, you point and click. You can build up a queue of these annotations across different pages of your site. Then, with a single action, you send the entire batch to an AI coding agent like Claude Code, Cursor, or GitHub Copilot. The AI receives the precise context, including the DOM structure and your instructions, and can implement the fixes directly into the code.

What makes Vibe Annotations stand out is its focus on a local-first, no-fuss workflow. The tool runs completely on your computer. Your annotations and the webpage data never leave your machine, which is great for privacy and security when working on local development servers. Setup is minimal: install the extension, start a small local server, and add a few lines to configure your AI agent. There are no accounts to create, no subscriptions, and it's fully open source. It's designed to fit into an existing developer's workflow without adding complexity.

This tool is most useful for developers who regularly use AI assistants for coding and find themselves spending time manually explaining visual or UI-related issues. It turns a tedious, back-and-forth process into a quick, visual instruction set. Whether you're tweaking a component's style, fixing alignment across a site, or requesting multiple layout changes, Vibe Annotations lets you communicate those needs directly on the interface itself and hand them off to automation.