- 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 (https://spotnote-weld.vercel.app/reference/prompt-format) Prompt Format . MCP (local agent) (spotnote.html#mcp-local-agent) 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 (https://spotnote-weld.vercel.app/guides/mcp) 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. Staging builds (spotnote.html#staging-builds) 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 (https://spotnote-weld.vercel.app/guides/staging) Staging Builds . staging-demo.mp4 On a (https://spotnote-weld.vercel.app/guides/staging) staging build : the designer writes a note and pastes it to the team chat, and the developer's agent goes straight to the file and line . Webhook (spotnote.html#webhook) 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 (https://spotnote-weld.vercel.app/guides/webhook) 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. Docs (spotnote.html#docs) Full documentation is (https://spotnote-weld.vercel.app) here License (spotnote.html#license) MIT About Vite plugin for UI feedback to coding agents. (https://spotnote-weld.vercel.app) (https://spotnote-weld.vercel.app) spotnote-weld.vercel.app Topics (https://github.com/topics/ai) ai (https://github.com/topics/claude) claude (https://github.com/topics/design-tools) design-tools (https://github.com/topics/front-end-development) front-end-development (https://github.com/topics/vitejs) vitejs Resources (spotnote.html#readme-ov-file) Readme (spotnote.html#MIT-1-ov-file) MIT license (https://github.com/harukikuri/spotnote/activity) Activity Stars 2 stars Watchers 0 watching Forks (https://github.com/harukikuri/spotnote/forks) 0 forks (https://github.com/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fharukikuri%2Fspotnote&report=harukikuri+%28user%29) Report repository Releases Contributors Languages Footer (https://github.com) © 2026 GitHub, Inc. Footer navigation (https://docs.github.com/site-policy/github-terms/github-terms-of-service) Terms (https://docs.github.com/site-policy/privacy-policies/github-privacy-statement) Privacy (https://github.com/security) Security (https://www.githubstatus.com/) Status (https://github.community/) Community (https://docs.github.com/) Docs (https://support.github.com?tags=dotcom-footer) Contact Manage cookies Do not share my personal information You can’t perform that action at this time.