Vibe Annotations

Name: Vibe Annotations
Rating: 5.0 (2 reviews)

10x your vibe-coding workflow writing visual annotations

5.0•2 reviews•

115 followers

10x your vibe-coding workflow writing visual annotations

5.0•2 reviews•

115 followers

Visit website

Vibe Coding Tools

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.

Free

Launch tags:Chrome Extensions•Developer Tools•Vibe coding

Launch Team / Built With

Render Sandboxes: a computer for every agentIsolated compute, persistent state and a real filesystem

Promoted

Vibe Annotations

Maker

📌

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.

Report

1yr ago

Trufflow

The number of times I've fought Vercel v0 over a minute detail only for it to fix it but then break something else.... This looks like a great way to pin point exact areas that I want the AI to fix!

Report

1yr ago

Vibe Annotations

Maker

@lienchueh 💯

Very frustrating to spend hours on details and sometimes get regressions because of the vagueness around the exact element you wish to change. Here you can even drop comments on the window size you want to fix, it’ll map to the correct breakpoints in your project 👌 No more time wasted!

Report

1yr ago

This is really interesting idea,
Can be super useful if it really works well with the existing tools.
Will check this out for sure.

Report

1yr ago

Vibe Annotations

Maker

@mdshadabalam3 It should work well! Only current limitations are around specific frameworks that alter the DOM tree extensively, making it hard for the inspector to properly target elements 🎯

Report

1yr ago

Love the super clean ux/ui, honestly vibe coding takes so much time than expected so looking forward for the results, keep it up!

Report

1yr ago

Vibe Annotations

Maker

@samgurungsynkly Thanks! Yes agreed, it gets frustrating on little details. I've actually used the extension to build the website: saved so much time 🥹

Report

1yr ago

@raph_r_ Yep no one really talks about how much longer it can take vibe coding if not prompted right.

Report

1yr ago

5.0

Based on 2 reviews