Vibe Annotations
Vibe Annotations · Coding
Vibe Annotations ist eine kostenlose Browser-Erweiterung und ein MCP-Server, mit dem Sie Feedback auf lokalen Seiten markieren und KI-Agenten wie Claude Code oder Cursor es umsetzen lassen.
Über Vibe Annotations
What Is Vibe Annotations
Vibe Annotations ist ein visuelles Anmerkungstool für die Webentwicklung. Es sammelt Feedback für KI-Agenten direkt dort, wo Sie arbeiten. Sie installieren die Browser-Erweiterung, klicken ein beliebiges Element auf einer localhost-Seite an und hinterlassen eine Notiz, was zu reparieren ist. Jede Markierung erfasst den genauen DOM-Selektor, die React- oder Vue-Komponente und die Quelldatei hinter diesem Element. So bekommt der KI-Agent einen präzisen Kontext statt einer schwammigen Beschreibung.
Das Produkt besteht aus zwei Teilen. Die Erweiterung funktioniert allein per Kopieren und Einfügen, und ein optionaler MCP-Server ergänzt die automatische Synchronisierung, damit Agenten Anmerkungen lesen, überwachen und auflösen, ohne dass Sie etwas kopieren. Der Server erscheint auf npm als vibe-annotations-server, und beide Teile sind kostenlos und quelloffen.
Die wichtigste Grenze liegt im Umfang. Das Tool ist für localhost und lokale HTML-Dateien während der Entwicklung gebaut, nicht für Live-Websites oder Projekte außerhalb des Webs. Wer keinen Entwicklungsserver laufen lässt und keinen KI-Agenten nutzt, findet hier wenig.
Getting Started
- Installieren Sie die Erweiterung aus dem Chrome Web Store, oder laden Sie sie für die Entwicklung entpackt aus dem Repository
- Führen Sie npx vibe-annotations-server init aus, um den Server zu installieren, auf Port 3846 zu starten und mit Ihrem KI-Agenten zu verbinden
- Öffnen Sie eine beliebige localhost-Seite, klicken Sie in der Leiste auf Annotate und klicken Sie Elemente an, um Kommentare, Design-Korrekturen oder Textänderungen zu hinterlassen
- Übergeben Sie die Warteschlange an Ihren Agenten, der die Anmerkungen über MCP liest und die Korrekturen in einem Durchgang umsetzt
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Vibe Annotations.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler
- Programmierer, die mit KI-Agenten arbeiten
- Einzelentwickler
- Kleine Teams, die die Oberfläche prüfen
Aufgaben
- Kaputtes Layout melden
- Design-Korrekturen schicken
- Varianten einer Komponente anfordern
- Feedback außerhalb des Browsers teilen
- Die Korrekturschleife automatisieren
Szenarien
- Sie haben einen Button ein dutzend Mal angepasst und das Tippen des Selektors wird mühsam
- Ein Screenshot allein sagt dem Agenten nicht, welches Element falsch ist
- Sie prüfen eine Seite über mehrere Routen
- Ein Kollege will Ihre Meinung zu seinem lokalen Build
- Der Agent soll weiterarbeiten, während Sie annotieren
Wichtigste Funktionen
Markierungen mit vollem Kontext
Jede Markierung erfasst den genauen DOM-Selektor des angeklickten Elements, dazu die React- oder Vue-Komponente und die Quelldatei dahinter. Darin liegt der Unterschied zu einem Screenshot-Tool, bei dem der Agent aus Pixeln erraten muss, welches Element gemeint ist. Hier bekommt er einen Selektor, auf den er reagieren kann, und die Korrektur landet gleich am richtigen Knoten.
Ein Figma-ähnliches Panel für Design-Korrekturen
Über Kommentare hinaus ändern Sie Größe, Abstand, Farbe und Text direkt auf der Seite in einem Figma-ähnlichen Panel. Sie sehen die Live-Vorschau, bevor Sie die Änderung übergeben, was der Agent umsetzt, haben Sie also schon abgesegnet. Kleine visuelle Anpassungen bleiben ganz aus dem Chat.
Varianten erzeugen und ansehen
Sie fordern den Agenten um Varianten jeder Komponente und vergleichen sie direkt auf der Seite. Das Panel zeigt die Optionen nebeneinander, und Sie wählen die beste, ohne den Browser zu verlassen. Aus einem Hin und Her über Layouts wird eine einzige Entscheidung.
Screenshots und Referenzbilder
Das Tool erfasst automatisch einen Screenshot jedes Elements, das Sie annotieren, und darüber hinaus hängen Sie eigene Referenzbilder an. Der visuelle Kontext reist mit der geschriebenen Notiz, was hilft, wenn sich eine Änderung leichter zeigen als beschreiben lässt.
Export in einer einzigen Datei
Sie exportieren einen Stapel Anmerkungen als eine in sich geschlossene .html-Datei mit eingebetteten Bildern, oder als leichtere .md-Datei, wenn nur der Text zählt. So oder so ist es eine Datei zum Versenden, kein Ordner voller Screenshots und Notizen.
MCP-Integration mit Überwachungsmodus
Der Server stellt angeschlossenen Agenten Werkzeuge wie read_annotations, watch_annotations und get_project_context bereit. Die Einrichtung ist ein einziger Befehl für Claude Code, Cursor, Windsurf, Codex, OpenClaw und VS Code. Der Überwachungsmodus macht Long-Polling auf neue Anmerkungen, damit Ihr Agent Korrekturen live umsetzt, während Sie weiterarbeiten.
Vor- und Nachteile
Vorteile
- Kostenlos und quelloffen, mit dem Server auf npm und dem Code auf GitHub
- Markierungen tragen Selektor, Komponente und Quelldatei, der Agent muss das Ziel nicht erraten
- Funktioniert mit den großen KI-Agenten, darunter Claude Code, Cursor, Windsurf, Codex und VS Code
- Die Erweiterung läuft allein per Kopieren und Einfügen, der MCP-Server ist also optional
- Exportiert einen ganzen Stapel als eine einzige .html- oder .md-Datei zum Teilen außerhalb des Browsers
Nachteile
- Für localhost und lokale HTML-Dateien gebaut, Live-Websites lassen sich damit nicht annotieren
- Keine Preisseite und kein kommerzieller Support, was zählt, wenn ein Team einen Anbieter hinter dem Tool will
- Die MCP-Einrichtung verlangt Node und einen laufenden lokalen Server, mehr Aufwand als eine reine Erweiterungsinstallation
- Annotation gilt nur für Web-Frontends, für native Apps oder Backend-Arbeit gibt es nichts
Häufige Fragen
Vibe Annotations lässt Sie Elemente auf einer localhost-Seite anklicken und Feedback hinterlassen, das KI-Agenten lesen und umsetzen können. Jede Anmerkung erfasst den DOM-Selektor, die React- oder Vue-Komponente und die Quelldatei, der Agent weiß also, welches Element zu ändern ist.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Vibe Annotations.
Alternativen zu Vibe Annotations
Udon
Udon · Coding · ProduktivitätUdon macht aus einem Apple-Silicon-Mac einen Heimserver, den Sie im Browser steuern, mit Containern, Dateifreigaben und einem optionalen KI-Systemadministrator.
offstage
offstage cloud · Coding · Produktivitätoffstage gibt KI-Agenten und CI-Jobs einen echten Mac: ein frisches macOS-27-Konto auf Apple Silicon, per API gesteuert und sekundengenau abgerechnet.
BotBus
Chengdu Tuyang Tusen Technology Co., Ltd. · Coding · ProduktivitätMit BotBus lassen sich KI-Agenten vom Smartphone steuern, auch wenn der Rechner im Büro steht: Befehle freigeben, Aufgaben starten, Ergebnisse lesen.