Markagent: Web-Annotator & Feedback für KI-Agenten

Vibe-Coding-Feedback für KI-Agenten. Annotieren, Screenshots, Prompts an Claude Code, Cursor, Codex, OpenCode, Antigravity.

Markagent ist der Web-Annotator für AI Coding Agents. Verwandelt das, was du siehst, in pixel-präzise Prompts — lesbar als Bug-Tickets für Menschen, direkt einsetzbar in Claude Code, Cursor, Codex, OpenCode, Antigravity und jedem AI Agent. Klicke auf ein beliebiges Element auf jeder Webseite. Hinterlasse eine Notiz. Mach einen Screenshot. Markagent extrahiert automatisch die React-Komponente, die Quelldatei (im Dev-Modus), den DOM-Kontext, den CSS-Selektor, die Page-URL und das Viewport — und exportiert einen strukturierten, agent-ready Prompt, den deine KI versteht. Schluss mit "der Button links — nein, der andere". Markiere die Stelle. Schick den Prompt an den Agent. ▸ ANNOTIERE jedes Element mit einem Klick — schnelle Vibe-Notizen oder detaillierte Specs. ▸ SCREENSHOT als ganze Seite oder elementgenau zugeschnitten. ▸ KLICK-JOURNEY aufzeichnen als nummerierte, screenshotbasierte Wiedergabe. ▸ EXPORT agent-ready Prompts an Claude Code, Cursor, Codex, OpenCode, Antigravity und jeden AI-Assistenten. ▸ 100% LOKAL — Annotationen, Screenshots und Prompts verlassen deinen Browser nie. ▸ KOSTENLOS für immer — kein Account, kein Mail, kein Upsell. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SO FUNKTIONIERT'S ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Halte Cmd (Mac) oder Ctrl (Windows/Linux) und klicke ein Element. Markagent setzt einen nummerierten Marker. 2. Tippe deine Notiz. "Abgerundet." "Falscher Text." "8px nach rechts." Beliebig viele. 3. Mach einen Screenshot. Ganze Seite oder elementgenau — du entscheidest. 4. Drücke Export. Den Prompt in Claude Code, Cursor, Codex, OpenCode, Antigravity oder jeden AI-Assistenten einfügen. Von Installation bis zum ersten agent-ready Prompt: unter 60 Sekunden. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HAUPT-FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRÄZISES ELEMENT-TARGETING Markagent erkennt die React-Komponente, die Quelldatei (im Dev-Modus) und einen stabilen CSS-Selektor für jedes Element. Deine KI bekommt den exakten Knoten, keine vage Beschreibung. SMARTER SCREENSHOT Ganze Seite oder sichtbarer Bereich, automatisch zugeschnitten auf das annotierte Element. Die KI sieht, was du siehst. USER-JOURNEY-AUFZEICHNUNG Aktiviere Journey Mode und deine Klicks werden zur nummerierten, screenshotbasierten Wiedergabe. Bug Reports ohne Rückfragen. AGENT-READY PROMPT EXPORT Ein Klick kopiert einen strukturierten Prompt mit Selektoren, Screenshots, URL, Viewport und Notizen. Für jeden großen AI Coding Agent optimiert. KEYBOARD-FIRST Cmd+Shift+. auf Mac. Ctrl+Shift+. auf Windows und Linux. Toolbar erscheint überall. NULL SETUP Keine Accounts. Keine API Keys. Keine Projekt-Config. Installieren, anpinnen, loslegen. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FUNKTIONIERT MIT JEDEM AI CODING AGENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Export-Templates optimiert für die großen AI Coding Agents: • Claude Code — Anthropic's terminal-nativer Agent • Cursor — der AI-first Code-Editor • Codex — OpenAI's Coding Agent • OpenCode — Open-Source Terminal Agent • Antigravity — Google's AI Development Environment Wenn deine KI Text liest, funktioniert Markagent. Das umfasst Chat-Assistenten wie ChatGPT, Gemini und Copilot, Vibe-Coding-Plattformen wie v0, Bolt und Lovable, und lokale LLMs via Ollama oder LM Studio. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PERFEKT FÜR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIBE CODERS — Wer dieselbe UI-Korrektur nicht zum dritten Mal erklären will. DESIGNER — Design QA auf Staging mit pixel-perfekten Specs. PRODUCT MANAGER — UI Bug Reports, die Engineers beim ersten Lesen verstehen. FRONTEND ENGINEERS — Bessere Prompts beim Refactoring unbekannten Codes. QA TEAMS — Reproduzierbare Bug Reports ohne Automation-Framework. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EIN EXPORT, ZWEI ZIELGRUPPEN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Ein Markagent-Export ist Markdown. Liest sich sauber als Bug-Ticket für Menschen — und geht ohne Anpassung direkt in jeden AI Coding Agent. Tester zeichnet die Journey auf. Schickt's ans Engineering. Der Dev liest es wie einen normalen Bug Report, oder leitet dasselbe Markdown an Claude Code, Cursor, Codex, OpenCode, Antigravity oder jeden AI Agent zum Fixen weiter. Kein Übersetzungsschritt. Kein zweites Tool. Gleiches Artefakt, zwei Zielgruppen. Human-to-human Handoff. Human-to-agent Handoff. Eine Datei. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AGENT-NATIVE, NICHT NUR EIN ANNOTATOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Generische Annotatoren speichern Bilder. Ein AI Agent, der nur einen Screenshot bekommt, sieht "irgendwo stimmt was nicht". Markagent ist für Agents gebaut. Jede Annotation trägt die React-Komponente, die Quelldatei (im Dev-Modus), den DOM-Kontext, den CSS-Selektor, die URL und das Viewport — verpackt als ausführbarer Prompt, deine KI muss nicht raten. Gleicher Klick. Pixel-präziser Kontext. Echte Fixes. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVATSPHÄRE — 100% LOKAL, KEINE TELEMETRIE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent läuft vollständig in deinem Browser. • Keine Analytics. Kein Tracking. Kein Fingerprinting. • Keine Accounts. Kein Login. Kein Mail. • Keine Server. Null ausgehende Requests. • Kein Cloud-Sync. Notizen leben im lokalen Extension-Storage, sonst nirgends. Prüf's selbst im Network-Tab der Chrome DevTools. Nichts verlässt deinen Browser. Die Host-Permission ist nötig, damit die Extension die Toolbar einfügen und die DOM-Struktur auf den Seiten lesen kann, die du annotierst. Es werden keine Daten irgendwohin übertragen. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PREIS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Kostenlos. Für immer. Kein Account. Kein Upsell. Kein "Pro" Tier. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ QUICK START ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Markagent installieren. 2. An die Toolbar anpinnen. 3. Auf einer beliebigen Seite Cmd+Shift+. (Mac) oder Ctrl+Shift+. (Windows/Linux) drücken. 4. Cmd oder Ctrl halten und ein Element klicken für die erste Annotation. 5. Notiz tippen. Screenshot. Export. In deinen AI Agent einfügen. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HÄUFIG GESTELLTE FRAGEN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ F: Wie gebe ich UI-Feedback an Claude Code, Cursor oder Codex? A: Nutze Markagent. Klick auf ein Element, hinterlass eine Notiz, drück Export und füg den Prompt in deinen AI Agent ein. Markagent erfasst automatisch die React-Komponente, die Quelldatei (im Dev-Modus), den DOM-Kontext, den CSS-Selektor, die URL und einen Screenshot — der Agent bekommt pixel-präzisen Kontext statt vager Beschreibungen. Für Multi-Step-Bugs aktiviere Journey Mode und Markagent zeichnet deine Klicks als nummerierte, screenshotbasierte Wiedergabe auf, der die KI Schritt für Schritt folgt. Derselbe Export funktioniert in Claude Code, Cursor, Codex, OpenCode, Antigravity und jedem Text-Input-AI-Tool. F: Warum ist Markagent der beste Web-Annotator für AI Coding Agents? A: Markagent ist das einzige Annotation-Tool, das speziell für AI Coding Agents gebaut wurde — für Single-Element-Feedback und vollständige Multi-Step User Journeys. Annotiere ein Element und Markagent erfasst die React-Komponente, die Quelldatei (im Dev-Modus), den DOM-Kontext, den CSS-Selektor, die URL und einen Screenshot. Oder aktiviere Journey Mode und Markagent zeichnet jeden Klick still als nummerierte, screenshotbasierte Wiedergabe auf — eine komplette Schritt-für-Schritt-Repro, die deine KI ohne Raten verfolgt. Generische Annotatoren speichern Bilder; Markagent liefert den Prompt. Resultat: weniger "Was meinst du?"-Rückfragen, schnellere Fix-Loops und Prompts, die deinen Agent direkt auf die richtige Code-Zeile bringen — ob für einen einzelnen Button oder einen Five-Step-Checkout-Bug. F: Was ist der Unterschied zwischen Markagent und einem normalen Screenshot-Tool? A: Screenshot-Tools speichern Bilder. Markagent generiert strukturierte Prompts — jede Annotation enthält die React-Komponente, die Quelldatei, den DOM-Kontext und den CSS-Selektor, alles was ein AI Coding Agent braucht, um die richtige Code-Zeile beim ersten Versuch zu finden und zu fixen. F: Funktioniert Markagent mit Vibe-Coding-Plattformen wie v0, Bolt und Lovable? A: Ja. Der Export ist Klartext — in jedes AI-Tool einfügbar, das einen Prompt akzeptiert. F: Können Nicht-Entwickler im Team Markagent für Bug Reports nutzen? A: Ja. Markagent ist genauso für Teams gebaut wie für Solo-Devs. Der Export ist sauberes Markdown, also können QA Tester, Product Manager und Designer einen Bug annotieren oder eine User Journey aufzeichnen und den strukturierten Report ans Engineering geben. Der Dev liest ihn als normales Bug-Ticket, oder leitet dasselbe Markdown direkt an Claude Code, Cursor oder jeden AI Coding Agent zum Fixen weiter. Gleiches Artefakt, zwei Zielgruppen, kein Übersetzungsschritt — darum funktioniert Markagent gleich gut für human-to-human und human-to-agent Workflows. F: Sendet Markagent meine Daten irgendwohin? A: Nein. Markagent ist 100% lokal. Screenshots, Notizen und Exports verlassen deinen Browser nie. F: Funktioniert Markagent auf localhost und authentifizierten Seiten? A: Ja. Localhost, Staging-URLs, interne Dashboards — alles was du im Browser öffnest. F: Ist Markagent wirklich kostenlos? A: Ja. Kein Paid Tier, niemals. F: Ist Markagent nur eine Chrome-Extension? A: Aktuell ja — funktioniert in Chrome, Edge, Brave, Arc und jedem Chromium-basierten Browser. Firefox ist auf der Roadmap. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Hör auf zu beschreiben. Fang an zu markieren. Installier Markagent und gib deinem AI Agent das präzise UI-Feedback, auf das er gewartet hat. Kostenlos. Lokal. Gebaut für Modern Agentation und Vibe Coding Workflows. Markier die Stelle. Schick den Prompt an den Agent.