Show HN: Spotnote – Vite plugin for UI feedback to coding agents

Spotnote, a new MIT-licensed Vite plugin, lets developers click any element in a running app, type the desired change, and copy a prompt containing the exact file, line and column for coding agents such as Claude Code, Cursor and Codex. Spotnote requires Vite 5 or later and Node 22 or later, runs only in `vite dev` or explicitly enabled staging builds, and offers an MCP server (`npx -y spotnote-mcp`) so agents can pick up notes directly, plus a webhook option that posts each note as JSON to a user-supplied URL.

Spotnote https://spotnote-weld.vercel.app is a Vite plugin for UI feedback to coding agents. Click any element in your running app, write what should change, and hand your agent its exact file, line and column. solo-demo.mp4 - Exact spot. Your UI feedback points to the exact file, line and column in your source code, so your agent doesn't have to search for it. - Any Vite framework. React, Vue, Svelte, Solid, Astro, and so on. - Zero imports. Nothing to import in your app code. - Production stays clean. Spotnote runs only in vite dev , and in staging builds https://spotnote-weld.vercel.app/guides/staging you turn it on for. - Everything is local. No account, no cloud. - Vite 5 or later - Node 22 or later npm install -D spotnote python // vite.config.ts import spotnote from "spotnote"; export default defineConfig { plugins: react , spotnote , } ; Start your dev server and click the launcher in the bottom-left corner. Click an element, type what should change and press Enter . The prompt is on your clipboard: paste it into Claude Code, Cursor, Codex or any chat. The prompt Spotnote copies for a note, ready to paste into your agent: Request Make the padding bigger Target - file: components/ProductCard.jsx - line: 7, column: 5 - used at: pages/Products.jsx:68 <ProductCard in Products - element: <div class="product" - text: "shoes Aero Runner $120" - instance: 1 of 12 rendered from this line by DOM order — target the one matching the text above Source path outer → inner App Products ProductCard Current computed styles padding: 16px margin: 0px color: rgb 26, 26, 26 background: rgba 0, 0, 0, 0 font-size: 16px font-weight: 400 border-radius: 12px Every field is explained in Prompt Format https://spotnote-weld.vercel.app/reference/prompt-format . Skip the copy and paste: your agent picks up notes as you write them. claude mcp add --scope user spotnote -- npx -y spotnote-mcp Then ask your agent: Watch my Spotnote notes. Codex, Cursor and Gemini CLI. demo.mp4 With MCP https://spotnote-weld.vercel.app/guides/mcp connected: click a button, ask for a pill shape, and Claude Code picks up the note, makes the change and replies on it . You never leave the browser. Let designers and reviewers write notes on a staging or preview deploy, and paste them to your team: spotnote { build: "staging" } vite build --mode staging then includes Spotnote, and vite build still doesn't. Each prompt also names the commit the build was made from. See Staging Builds https://spotnote-weld.vercel.app/guides/staging . staging-demo.mp4 On a staging build https://spotnote-weld.vercel.app/guides/staging : the designer writes a note and pastes it to the team chat, and the developer's agent goes straight to the file and line . Send each note to a URL of yours as it's written: to post it to your team's chat or issue tracker, without the copy and paste. spotnote { build: "staging" , webhook: "https://feedback.example.com/spotnote" } Each note arrives as JSON, with its text, page, file and line, commit, and prompt. See Webhook https://spotnote-weld.vercel.app/guides/webhook . demo-webhook.mp4 On a staging build with a webhook: press Enter, and the note lands in your team's chat , with its file and line. Full documentation is here https://spotnote-weld.vercel.app MIT