Show HN: Visual Prompts for Coding Agents (github.com)

A small React utility called prompt-canvas was released as an npm package to enable “visual prompts” for coding agents directly from your frontend. Developers install it (npm install prompt-canvas), mount the PromptCanvas component in app/layout.tsx (recommended only in development), run the dev server, and open the web app. The component provides an in-page annotation layer—pen, text, eraser—plus a screenshot-copy action so you can mark UI issues, highlight desired changes, and send that visual context to coding agents or automation tooling. This matters because visual prompts close the loop between UI state and code-generation agents: instead of writing long textual descriptions, devs can point, scribble, and capture exact UI regions to communicate bugs, feature requests, or code edits. Technically it’s lightweight (client-side React component), intended for dev-mode use, and supports Chrome and Firefox. Keyboard shortcuts simplify annotation: P (pen), T (text), E (eraser), C (copy screenshot), and ⌘Z/⌘⇧Z for undo/redo. For teams building agent-driven developer tools, this lowers friction for reproducible, context-rich prompts and could speed up triage, automated PR generation, or supervised patching workflows.