Markagent: UI/Web Feedback Annotator for AI Agents

Markagent is the web annotator built for AI coding agents. Turn what you see into pixel-precise prompts that read cleanly as bug tickets for humans — and drop straight into Claude Code, Cursor, Codex, OpenCode, Antigravity, and any AI agent. Click any element on any webpage. Leave a note. Capture a screenshot. Markagent figures out the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and the viewport size — then exports a structured, agent-ready prompt your AI actually understands. Stop typing "the button on the left — no, the other one." Mark the spot. Ship the prompt to Agent. ▸ ANNOTATE any element with one click — quick vibe annotations or detailed specs. ▸ CAPTURE full-page or element-cropped screenshots. ▸ RECORD click journeys as numbered, screenshot-backed playthroughs. ▸ EXPORT agent-ready prompts to Claude Code, Cursor, Codex, OpenCode, Antigravity, and any AI assistant. ▸ 100% LOCAL — annotations, screenshots, and prompts never leave your browser. ▸ FREE forever — no account, no email, no upsell. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Hold Cmd (Mac) or Ctrl (Windows/Linux) and click an element. Markagent pins a numbered marker on it. 2. Type your note. "Make this rounded." "Wrong copy." "Move 8px right." Repeat as many times as you want. 3. Capture a screenshot. Full-page or element-cropped — your call. 4. Hit Export. Paste the prompt into Claude Code, Cursor, Codex, OpenCode, Antigravity, or any AI assistant. Install to first agent-ready prompt: under sixty seconds. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRECISION ELEMENT TARGETING Markagent identifies the React component, the source file (in dev mode), and a stable CSS selector for every element you click. Your AI gets the exact node — not a vague description. SMART SCREENSHOT CAPTURE Full-page or visible-region screenshots, auto-cropped to the element you annotated. The AI sees what you see. USER JOURNEY RECORDING Flip journey mode on and your clicks become a numbered, screenshot-backed reproduction. Bug reports that don't need a follow-up call. AGENT-READY PROMPT EXPORT One click copies a structured prompt with selectors, screenshots, page URL, viewport size, and your notes. Tuned for each major AI coding agent. KEYBOARD-FIRST WORKFLOW Cmd+Shift+. on Mac. Ctrl+Shift+. on Windows and Linux. Toolbar appears anywhere, on any site. ZERO SETUP No accounts. No API keys. No project configuration. Install, pin, go. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS WITH EVERY AI CODING AGENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tuned export templates for the major AI coding agents: • Claude Code — Anthropic's terminal-native coding agent • Cursor — the AI-first code editor • Codex — OpenAI's coding agent • OpenCode — open-source terminal coding agent • Antigravity — Google's AI development environment If your AI tool reads text, Markagent works with it. That covers conversational assistants like ChatGPT, Gemini, and Copilot, vibe coding platforms such as v0, Bolt, and Lovable, and local LLMs running through Ollama or LM Studio. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PERFECT FOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIBE CODERS — Tired of explaining the same UI tweak three times. DESIGNERS — Doing design QA on staged builds with pixel-perfect specs. PRODUCT MANAGERS — Filing UI bug reports engineers understand on the first read. FRONTEND ENGINEERS — Better prompts when refactoring unfamiliar code. QA TEAMS — Reproducible bug reports without an automation framework. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ONE EXPORT, TWO AUDIENCES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ A Markagent export is markdown. It reads cleanly as a bug ticket for humans — and drops straight into any AI coding agent without modification. Tester records the journey. Sends to engineering. The developer reads it like a normal bug report, then forwards the same markdown to Claude Code, Cursor, Codex, OpenCode, Antigravity, or any AI agent to fix. No translation step. No second tool. Same artifact, two audiences. Human-to-human handoff. Human-to-agent handoff. One file. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AGENT-NATIVE, NOT JUST AN ANNOTATOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Generic annotators save images. An AI agent receiving a plain screenshot only sees "something is wrong somewhere." Markagent is built for agents. Every annotation carries the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and the viewport — packaged as a prompt your AI can act on without guessing. Same click. Pixel-precise context. Real fixes. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVACY — 100% LOCAL, NO TELEMETRY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent runs entirely in your browser. • No analytics. No tracking. No fingerprinting. • No accounts. No login. No email. • No servers. Zero outbound network requests. • No cloud sync. Notes live in local extension storage and nowhere else. Verify it yourself in Chrome DevTools' Network tab. Nothing leaves your browser. The host permission is required so Markagent can inject its toolbar and read DOM structure on pages you annotate. It does not transmit any data anywhere. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRICING ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Free. No account. No upsell. No "Pro" tier. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ QUICK START ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Install Markagent. 2. Pin it to your toolbar. 3. Press Cmd+Shift+. (Mac) or Ctrl+Shift+. (Windows/Linux) on any page. 4. Hold Cmd or Ctrl and click any element to drop your first annotation. 5. Type a note. Capture a screenshot. Hit Export. Paste into your AI agent. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FREQUENTLY ASKED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Q: How do I give UI feedback to Claude Code, Cursor, or Codex? A: Use Markagent. Click any element on the webpage, leave a note, hit Export, and paste the structured prompt into your AI agent. Markagent …