Media
5 items
Description
Pin comments to elements or regions on any webpage; export as JSON for Claude Code or any LLM. Prototype Feedback is a lightweight visual feedback tool for hosted webpage prototypes — built for the LLM-coding era. Click any element on a page to pin a comment to it. Or drag a region for free-form feedback. Each comment captures the element in page context plus a tight crop of the pin target, the CSS selector, the bounding box, and any reference materials you drop in (images, files, Google Docs / Figma / Notion links). Console errors and warnings that fire during your review are captured automatically. Then export — either as a ZIP that Claude Code reads and acts on directly, or as a polished single-file HTML report you can email to a stakeholder. WHO IT'S FOR - Designers and PMs who want to leave precise feedback on a teammate's prototype without screenshots-and-Slack - Developers who use Claude Code / Cursor and want pinned visual feedback that an LLM can act on - Small teams reviewing hosted staging URLs HOW IT WORKS 1. Open any webpage you want to give feedback on. 2. Click the extension and Start feedback session. 3. Pin an element, drag a region, or both. Type a comment. Attach reference images, files, or links if useful. Any console errors that fire during your session are captured in the background. 4. When done, choose your export: - ZIP for Claude Code — slim JSON + separate PNG files. Claude reads each screenshot directly and applies changes to your source. - HTML report — single Apple-styled file with numbered comment cards, viewport context screenshots, pin details, and a collapsible console log. Email it to anyone. 5. The ZIP carries an embedded _llm_guide so the AI knows exactly what to do without an extra prompt. The HTML opens anywhere offline, no tools required. SESSIONS (NEW in v0.3) Organize your feedback into separate sessions — one per prototype, one per review round, whatever fits your workflow. Create, rename, switch, and delete sessions from the popup. Each session maintains its own comments, screenshots, and console logs independently. Your active session persists across browser restarts. UPLOAD TO GOOGLE DRIVE (NEW in v0.3) After exporting, upload your feedback ZIP directly to a Google Drive folder with one click. Configure the target folder in Settings, sign in with your Google account, and hit Upload. Useful when your team collects feedback in a shared Drive folder instead of emailing files around. WHAT MAKES IT DIFFERENT - Two export formats from one capture session: machine-readable ZIP for AI assistants, human-readable HTML for stakeholders. - Cropped screenshot AT the reviewer's exact pixel ratio, plus selector, plus bbox — so the AI has everything it needs to find and edit the right element. Larger viewport-context screenshot included for the HTML report. - Console errors and warnings captured during your review session, with timestamps. Catches the runtime story alongside the visual feedback — often the reviewer's pin is downstream of a JS error nobody noticed. - Drop image attachments, file attachments, or paste Google Docs / Figma / Notion / Loom URLs. Each is auto-tagged with its kind so an AI can route reference material correctly. - Stable element selectors via @medv/finder. - Edit and delete comments before exporting. Per-comment thumbnails in the popup. - Multiple sessions — review three prototypes in parallel without losing your place. Each session has its own comments and exports. - Optional Google Drive upload — push your export to a shared folder without leaving the extension. - No SaaS lock-in. No accounts. No backend required. PRIVACY Everything stays on your machine. No telemetry, no servers, no analytics. The extension only sends data when you explicitly click Export — and even then it goes to your local Downloads folder. Console errors are captured in browser memory only during an active feedback session and never transmitted. Full privacy policy linked from the listing. OPTIONAL: COMPANION LOCAL SERVER (open source) If you're the person collecting feedback from multiple reviewers, an optional self-hosted server adds: • Project organization — create projects, group reviewers, scope feedback • Gmail invite emails — drafts created in your own Gmail (you click Send) • Workspace directory autocomplete — type a name, autocomplete from your org • Drag-drop ingest with auto-tagging — drop the reviewer's JSON, get comments grouped by project (matched by reviewer email) • Claude Code prompts assembled per project — paste one line, Claude reads all the screenshots, attachments, and selectors Runs entirely on your machine. No accounts. Your data never leaves your computer. Source + install: https://github.com/leslurb/prototype-feedback-server Quick start: git clone https://github.com/leslurb/prototype-feedback-server cd prototype-feedback-server ./run.sh (macOS / Linux) .\run.bat (Windows) Then open http://127.0.0.1:8090 and toggle "Connect to local server" in the extension's Settings. The server is entirely optional. The extension works standalone for capture and JSON export — most reviewers will never need to install it.