If you use AI coding tools (Cursor, Claude Code, Windsurf), you've probably hit this: you see something wrong in your UI, and now you have to describe it in text.
"The padding on the card component... it's in the dashboard page... the one with the user avatar... the spacing between the avatar and the name is too tight, and the border radius should match the other cards..."
By the time you've typed that, you could have just opened the CSS and fixed it.
What I built
Pointa is a Chrome extension that lets you click on any element in your localhost app and leave a visual annotation.
pointa.dev | GitHub: github.com/AmElmo/pointa-app
Behind the scenes, it captures:
Element CSS selector
Current CSS properties
Source file reference
Your annotation text
Optional screenshot
Your AI coding tool reads all annotations via MCP (Model Context Protocol) and implements the changes.
The bulk workflow
This is where it clicks.
Browse through your app. Click things that need fixing. Wrong color here. Bad padding there. Missing hover state. Broken alignment on mobile.
Build up 15-20 annotations across different pages.
Then tell your AI: "Please fix those annotations."
All changes. One command. No context switching between "reviewing the app" and "fixing the app."
Bug reports with context
For bugs, Pointa captures a full timeline:
Console errors and warnings
Network request failures
User interactions (clicks, inputs)
DOM state at the time of the bug
Backend logs (if you wrap your dev server with pointa dev)
Your AI gets the same context a senior developer would want when debugging — automatically.
Setup
Install Chrome extension from Chrome Web Store
Then:
npx pointa-server
That's it. Under a minute.
Privacy
Everything runs locally. Annotations live in ~/.pointa on your machine. No cloud, no accounts, no data leaving your machine.
Open source, MIT licensed.
pointa.dev | GitHub: github.com/AmElmo/pointa-app
Works with Cursor, Claude Code, Windsurf, GitHub Copilot — any MCP-compatible tool.
Top comments (0)