OnUI: Browser-Erweiterung für präzises UI-Feedback an Claude Code

OnUI ist eine Browser-Erweiterung, die visuellen Kontext für UI-Korrekturen bei der Arbeit mit Claude Code bereitstellt. Sie löst das häufige Problem, beschreiben zu müssen, welches UI-Element Aufmerksamkeit benötigt, indem sie direkte Annotationen auf Webseiten ermöglicht.

Was OnUI tut

Sie können auf jeder Webseite Elemente anklicken oder Bereiche zeichnen, Notizen hinzufügen, was nicht stimmt, und einen strukturierten Bericht exportieren. Claude Code liest diesen Bericht über lokales MCP (Model Context Protocol), wodurch es exakte Informationen über das DOM-Element, seinen Pfad, Ihre Absicht und den Schweregrad erhält. Dadurch entfallen mehrdeutige Beschreibungen wie "der Knopf rechts, nein der andere".

Technische Umsetzung

Der Entwickler hat OnUI über mehrere Wochen mit Claude Code erstellt. Claude Code schrieb den größten Teil der TypeScript-Codebasis, einschließlich sowohl der Browser-Erweiterung als auch des lokalen MCP-Servers. Spezifische technische Herausforderungen, die während der Entwicklung bewältigt wurden, umfassen:

• Iterationen zur Shadow-DOM-Isolierung, um CSS-Konflikte mit Host-Seiten zu vermeiden
• Erstellung der Annotation-Dialog-UI und Export-Formatierer
• Fehlersuche in der nativen Nachrichtenbrücke zwischen Erweiterung und lokalem MCP

Verfügbarkeit und Lizenzierung

OnUI ist kostenlos nutzbar ohne Bezahlstufen. Sie ist mit einem Klick aus dem Chrome Web Store installierbar und funktioniert auch auf Edge und Firefox. Das Projekt ist unter GPL-3.0 lizenziert, hat keine Cloud-Abhängigkeiten, keine Telemetrie und ist vollständig kostenlos.

Entwicklungs-Workflow

Der Entwickler weist auf die Ironie hin, ein Werkzeug für Claude Code mit Claude Code selbst zu bauen. Ihr aktueller UI-Iterations-Workflow ist: annotieren → Claude korrigiert → überprüfen → wiederholen.