Notepix: annotate your UI for AI coding agents

Click your app, tell AI what to fix. You're building a web app with an AI coding agent. You can SEE what's wrong on the screen, but turning it into a prompt means describing the element, guessing the file, and hoping the agent finds the right button. Notepix removes that step: point at the thing, say what you want, and hand the agent a brief that already knows where the code lives. HOW IT WORKS 1. Open your app (works best on your localhost dev server) and press Alt+Shift+A — or click the Notepix icon. 2. Pin a ✎ Note to any element, drag a ▢ Frame around an area, or sketch with ✏ Draw — single keys N, F, D and S switch modes. Write each change in plain words. 3. Hit "Copy for AI" and paste into your agent's chat. Done. WHAT MAKES THE BRIEF PRECISE • React source resolution — on dev builds each mark records the component name and source file behind it (React 18 and 19, Vite, Next.js, CRA), so the agent edits the right file instead of grepping. • Pixel-true readouts — hovering shows the element's real font size, padding, margins and the measured gap to its neighbors, in px; every note records the element's computed style (font, color, spacing, radius, size) and class list, so the brief says what it looks like now. • @references — a note can reference other elements ("make this match @header-button"), each resolved to its own source. • Clean screenshot crops — the 📷 on any mark crops a screenshot of just that element, with Notepix's own pins and frames stripped out first; a freehand drawing keeps its red ink, since that is the annotation — and attaches that inked shot to itself automatically, so the agent always sees what you circled. • Attach up to 4 screenshots to any mark — thumbnails on its card, kept in exports, and every image that leaves Notepix is stamped with its mark's #id badge, so the agent can't mismatch picture and instruction. • Five formats — Markdown, plain text, JSON, a hand-off prompt for Claude in Chrome (it reads the marks straight off the page), or a prompt for an agent connected over MCP. Notes survive page reloads on localhost, and you can export/import them as JSON files. • A loop, not a one-shot — when the agent fixes a mark, tick it ✓ done: it stays on its card for reference but drops out of the next "Copy for AI", so the agent only ever gets what's still open. Every delete offers a one-click Undo for a few seconds. WORKS WITH ANY AGENT The brief is plain text on your clipboard: if your coding agent has a chat box you can paste into, it works. No account and no setup required. OPTIONAL: SKIP THE COPY-PASTE ENTIRELY If your agent speaks MCP, you can let it read the marks itself. One command — "npx -y notepix-mcp setup" — finds the MCP-capable coding agents installed on your machine and registers the server with each of them; then switch the connection on with the plug icon in the Notepix panel. Your agent can then list your open marks with the source file behind each one, look at the screenshots you attached, tick marks off as it fixes them — the card flips to DONE in front of you — and even wait for the next mark you pin, so you just keep clicking around your app while it works. This is off until you turn it on, and it is still entirely local: the connection is to 127.0.0.1 on your own machine, and the companion server runs only while your agent is running. PRIVATE BY DESIGN 100% local: your pages, notes and screenshots never leave your machine. No analytics, no tracking, no Notepix server anywhere. Notepix makes no network requests at all until you enter a license key; after that the only internet call is the license check (gumroad.com), and it carries nothing about your pages. The optional agent connection described above never leaves your computer — it goes to 127.0.0.1. FAIR PRICING Free trial for 7 days, full-featured. Then a one-time $6.43 unlocks it forever — no subscription. Viewing, copying and exporting your existing notes always keeps working, paid or not. WHAT'S NEW 1.16.7 — September 2026 • The hover readout is now a devtools-style inspector card: the element's JSX name and rendered size over its source path, then property / value rows — font, color, position, display, padding, margin, radius, the measured gaps to its siblings, background and border, colours swatched. • The card is never cut off or covered: it keeps its width on narrow elements, stays clear of the margin and gap labels and of the Notepix panel, moves below an element at the top of the viewport or beside a tall one, and slides left at the right edge of the screen.