LeafMarker - Visual editor for Claude Code, Cursor & Codex

Stop describing bugs to your AI. Just point at them. LeafMarker turns a click on any webpage into a task your AI coder fixes for you. Click the broken thing (or snip a region for canvases, video, and cross-origin embeds), type what's wrong, run /leaf in Claude Code, Cursor, or Codex — your AI finds the file, makes the fix, marks it done. The whole loop happens inside your repo, in plain JSON and PNG files your AI already knows how to read. ━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━ 1. Open your running app in Chrome — localhost, staging, a Vercel preview, or your live site. 2. Press C to click any element, or press S to drag a region (for canvases, video, cross-origin embeds where the DOM picker can't reach). 3. Type a comment in the popup that appears. 4. In Claude Code, Cursor, or Codex, run /leaf. The AI reads the task, finds the element in your code, ships the fix, marks it done. Every task carries a CSS selector (or a snipped screenshot region), a page URL, and your comment. Your AI gets exact context, not English descriptions of where to look. ━━━━━━━━━━━━━━━━━━━━ WHY IT'S DIFFERENT ━━━━━━━━━━━━━━━━━━━━ → Works on the app you've actually built — not a recreation of it. Other tools want you to rebuild the UI inside their environment first. LeafMarker reads what's in front of you in the browser, on whatever URL you're developing against. → Works with any AI coder. Claude Code, Cursor, and Codex are tested and supported. The output is plain JSON and PNG files — anything that reads files plays well. You're not locked in. → Your work stays in your repo. Comments, selectors, screenshots — all written locally to a .leafmarker/ folder inside your project. Only Google sign-in and billing touch our servers. Your annotations never do. → Built for brownfield. Inherited a React app you didn't write? Point at the bug anyway — the AI finds the file from the selector, screenshot, and URL. You don't have to know the codebase. ━━━━━━━━━━━━━━━━━━━━ WHAT LANDS IN YOUR REPO ━━━━━━━━━━━━━━━━━━━━ A new .leafmarker/ folder, with: - leafmarker-tasks-detail.json — the single source of truth for your task queue (selector, URL, screenshot path, status, timestamps, comment) - screenshots/ — one PNG per task - lm.js — bundled zero-dependency CLI your AI uses for atomic writes (merge-on-write, no clobbered fields, single-doing invariant) - Workflow rules deployed automatically: leafmarker-workflow.mdc (Cursor), leaf-command.md (Claude Code, Codex), vscode-task.json Anything that can read files can consume it. ━━━━━━━━━━━━━━━━━━━━ THREE WAYS TO RUN IT ━━━━━━━━━━━━━━━━━━━━ - /leaf (default, yolo) — full queue, dependency-ordered, no prompts. Run when you trust the queue and want to step away. - /leaf step — one task at a time, with approval between each. Use when you want to eyeball every change. - /leaf batch — group related tasks (same selector / same component) and apply them together with one approval. In Cursor, drop the slash: leaf, step leaf, batch leaf. Same dispatcher. The bundled workflow rules detect dependencies between tasks (sequential cues, pronouns) so your AI works through the queue in a sensible order — not random. ━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS ━━━━━━━━━━━━━━━━━━━━ C — toggle comment mode (element picker) S — enter region-snip mode (drag a rectangle to capture) Esc — exit comment or snip mode Enter — submit a comment Shift+Enter — newline in the comment box Cmd/Ctrl+Shift+P — pick or re-pick the project directory Cmd/Ctrl+R — manual refresh ━━━━━━━━━━━━━━━━━━━━ WHAT YOU CAN DO WITH IT ━━━━━━━━━━━━━━━━━━━━ - Fix UI bugs without ever leaving your browser - Turn a designer's review session into a queue your AI works through - Capture bugs inside canvas charts, video players, or third-party iframes — anywhere the DOM picker can't reach (press S) - Replace QA tickets with comments your AI can act on directly - Drop pointers on a page for a new contributor: "this lives in components/Header.tsx" - Audit accessibility — let the AI fix the obvious ones - Catch a bug in production, fix it in your local code, ship — without ever reproducing it locally first - Pair-program across timezones: leave comments by day, your overnight collaborator (human or AI) runs /leaf and ships them by morning - Inherit a codebase you didn't write — point at the bug, the AI finds the file from the selector + screenshot + URL ━━━━━━━━━━━━━━━━━━━━ WHAT YOU GET ━━━━━━━━━━━━━━━━━━━━ A draggable sidebar that collapses into a floating button. A three-column task board (To Do, Doing, Done) with live counts and per-task actions. Hover any element on the page, see it outlined, click to attach a comment. Or press S to drag a region — works on canvases, videos, cross-origin embeds the element picker can't reach. Multi-line comment box. Selector or snipped screenshot saved with every task. Smart project-mismatch detection — captures the favicon of your project at connect time, warns you if you reload the same site tomorrow and it actually looks like a different repo. Per-origin auto-reconnect so the right project handle is restored on every reload. Dark and light themes that respect your system. In-popup settings — you never leave the page. A 3-second refresh loop so the sidebar reflects what your AI is doing in real time. Connection verifier that prompts reconnection automatically if the browser drops your project. Deduplicated notifications — the same error never hits you eight times. /leaf works in Claude Code, Cursor, and Codex out of the box. A VS Code task template ships with it. The bundled workflow rules teach your AI exactly how to read, group, prioritize, and complete tasks. Google sign-in via the Chrome identity API. No password forms. ━━━━━━━━━━━━━━━━━━━━ FREE / PRO ━━━━━━━━━━━━━━━━━━━━ Free - 6 tasks per project (lifetime, cumulative — across all 3 free projects, that's 18 annotations) - 3 connected projects - Light theme Pro — pick the tier that fits: - Quarterly · $18.99 e…