BugHerd

Promptfree, for everyone, and the only version there is

Copy the prompt for Claude CodeCopy the prompt for CodexCopy the prompt for Cursor

Copy

Build me the visual feedback tool that replaces BugHerd.

The whole product is one idea: **a note is worthless without the context it was made in.** "The button is broken" is a support ticket; "this button, on this page, at 390px wide, in Safari 18, with this console error" is a fix.

STACK
- Node 20+ with Fastify, server-rendered HTML with a little vanilla JS
- SQLite through better-sqlite3, WAL mode
- A small script on the reviewed site, no framework
- Caddy in front

THE DATA MODEL
- projects: id, name, site_url, script_key
- notes: id, project_id, url, selector, x_pct, y_pct, body, status, assignee, created_by, created_at
- context: id, note_id, viewport_w, viewport_h, dpr, user_agent_bucket, console_json, screenshot_path
- replies: id, note_id, author, body, at
- Every note carries its page, its element and its conditions. **Those three are the product**

THE WIDGET
- A small button; click it, then click anything on the page, and a comment box opens where you clicked
- Store the element's selector AND the percentage position. The selector breaks when the page changes; the position still shows roughly where they meant
- **Prefer a stable selector**: a data attribute, then an id, then a short structural path. Never a generated class name — it changes on every build and the pin points at nothing
- Under 20KB, loaded after the page, inside a shadow root so neither stylesheet can touch the other
- Works for somebody with no account: a project key in the script, a name typed once, kept in local storage

THE CONTEXT, CAPTURED WITHOUT ASKING
- Viewport size, device pixel ratio, and a coarse browser bucket. Never the raw user agent
- The last few console errors, captured by wrapping console.error at load
- A screenshot: html2canvas is imperfect and enough. If it fails, send the note anyway — **a report without a picture beats no report**

WHAT TO BE CAREFUL WITH
- **A screenshot of a logged-in page contains that person's data.** Say so before the first capture, allow it to be turned off per project, and never capture inputs marked as sensitive
- Strip values from every input before capture, always
- Notes are visible to the project's members only, checked on the server

THE BOARD
- A list per project: open, doing, done. Three columns, not seven
- Click a note and it opens the page at that URL with the pin restored
- Filter by page, which is how a developer actually works — fix one screen at a time

CLOSING THE LOOP
- Push to your issue tracker with the context in the body, and keep the id so status flows back
- Notify the reporter when their note is marked done. **That is why a client bothers a second time**

WHAT MATTERS MOST
Stable selectors plus percentage position, and honesty about screenshots. The first keeps a pin meaningful after a deploy; the second keeps the tool from quietly collecting your customers' data.