10x your vibe-coding workflow writing visual annotations
Visual annotation tool for AI coding agents like Claude Code, Cursor, GitHub Copilot, and Windsurf. Drop feedbacks on your localhost website and let AI implement all changes automatically via the companion MCP. Free chrome extension for designers / developers.
Sometimes, vibe coding gets frustrating: You get from 0% to 80% in a few seconds, and from 80% to 100% in hours, getting stuck in endless unproductive feedback sessions with prompts like:
"I've attached an image of the issue, fix it..."
"The button in the top right is misplaced..."
"Fix the element with [HTML selector]..." "Yes great for mobile but you've made a regression on desktop..."
Polishing details is not AI coding agents forte 🥹
So I built Vibe Annotations toget from 80% to 100% in minutes.
How it works: 1. Install Chrome extension, copy/past commands to run the companion local server (2 min setup) 2. Open the extension and start adding feedbacks over your multiple pages 3. Ask your AI agent "process all my annotations/feedbacks/comments..."
Now watch as it implements every fix automatically and closes your requests.
Perfect for: ✅ Prototyping or ideating using Figma MCP ✅ Front-end development ✅ Vibe coding with Claude Code, Cursor, Windsurf integration, GH Copilot or any MCP-compatible coding agent
Good to know: 🔍 Annotations attach all the coding details required so your agent doesn't get lost, even the window width (responsive, yay!) 🔒 Secure by design, your annotations stay in your files, and you run the server locally ⚒️ Annotations are read by your agent, so you can even ask it to run other tools you have like "This is wrong, read my Figma frame to get it right" or "Change this content by the correct one on Notion" 🔥 Open Source, MIT licensed on GitHub ✋ Limitation: You must have a coding agent that allows calling MCP tools, often on paying plans
I've been using this daily for weeks, it's transformed how I work with AI coding agents.
Hey Product Hunt! 👋
Sometimes, vibe coding gets frustrating:
You get from 0% to 80% in a few seconds, and from 80% to 100% in hours, getting stuck in endless unproductive feedback sessions with prompts like:
"I've attached an image of the issue, fix it..."
"The button in the top right is misplaced..."
"Fix the element with [HTML selector]..."
"Yes great for mobile but you've made a regression on desktop..."
Polishing details is not AI coding agents forte 🥹
So I built Vibe Annotations to get from 80% to 100% in minutes.
How it works:
1. Install Chrome extension, copy/past commands to run the companion local server (2 min setup)
2. Open the extension and start adding feedbacks over your multiple pages
3. Ask your AI agent "process all my annotations/feedbacks/comments..."
Now watch as it implements every fix automatically and closes your requests.
Perfect for:
✅ Prototyping or ideating using Figma MCP
✅ Front-end development
✅ Vibe coding with Claude Code, Cursor, Windsurf integration, GH Copilot or any MCP-compatible coding agent
Good to know:
🔍 Annotations attach all the coding details required so your agent doesn't get lost, even the window width (responsive, yay!)
🔒 Secure by design, your annotations stay in your files, and you run the server locally
⚒️ Annotations are read by your agent, so you can even ask it to run other tools you have like "This is wrong, read my Figma frame to get it right" or "Change this content by the correct one on Notion"
🔥 Open Source, MIT licensed on GitHub
✋ Limitation: You must have a coding agent that allows calling MCP tools, often on paying plans
I've been using this daily for weeks, it's transformed how I work with AI coding agents.
Excited to share it with you!
Have a fix? Here's the GitHub repo
Questions, feedbacks, ideas? Discuss on GitHub
Cheers 🫡
Raphael R.