Visuelles Feedback für KI-Agenten ohne Screenshots und umständliche Erklärungen

Sie bitten Claude Code oder Copilot, ein Architekturdiagramm oder einen Produktplan zu erstellen. Der Agent generiert ein interaktives HTML-Dokument mit Diagrammen. Aber sobald Sie ein Label an einem Block korrigieren oder ein Element verschieben möchten, wird es mühsam. Sie müssen entweder einen Screenshot mit Pfeilen machen oder es in Text beschreiben: „im dritten Abschnitt von unten, ersetze Block B durch C."

Die Idee hinter dem lavish-axi Repository ist es, normale Interaktivität in diesen Prozess zurückzubringen. Anstatt von Textbeschreibungen öffnet das Tool die generierte Datei im Browser und bietet komfortable Bearbeitungswerkzeuge.

Was Lavish Editor macht

Dies ist ein CLI-Tool und eine Implementierung des AXI-Protokolls (Agent eXtension Interface). Das Tool startet einen lokalen Webserver und öffnet die generierte HTML-Datei im Browser.

Sie markieren Text, klicken auf Elemente, hinterlassen Kommentare oder bearbeiten Diagramme. Alle Notizen werden in einer Warteschlange gesammelt und über Long-Polling oder CLI-Hooks an den Agenten zurückgesendet. Das neuronale Netzwerk erhält präzise CSS-Selektoren und Textfragmente, sodass es schnell versteht, was genau korrigiert werden muss.

Alles funktioniert vollständig lokal. Keine Drittanbieter-Clouds oder das Senden Ihres Codes an externe Server standardmäßig.

Mermaid in Excalidraw-Board konvertieren

Wenn der Agent ein Mermaid-Diagramm generiert, konvertiert Lavish es automatisch in ein interaktives Excalidraw-Board direkt auf der Seite.

Sie klicken auf das Diagramm, verschieben Formen, zeichnen Verbindungen oder ändern Text. Dann klicken Sie auf Feedback senden. Das Tool erstellt eine Zusammenfassung der Änderungen mit einer visuellen Vorschau, und der Agent aktualisiert den ursprünglichen Mermaid-Code in der Datei.

Gleichzeitig wird das finale HTML nicht mit externen Bibliotheken belastet. Wenn Sie es in einem normalen Browser ohne Lavish öffnen, wird es sauberes Standard-Mermaid anzeigen.

Automatische Layout-Validierung

Ein interessantes Detail: Bevor das Artefakt einer Person gezeigt wird, führt Lavish eine interne Layout-Prüfung durch.

Das integrierte Skript prüft, ob Text die Containergrenzen überläuft und ob Steuerelemente überlappt werden. Wenn ein kritischer Interface-Fehler erkannt wird, sendet das Tool eine Nachricht an den Agenten zur Überarbeitung, bevor die geöffnete Seite Ihre Aufmerksamkeit erregt.

Technische Funktionsweise

Die Interaktion basiert auf klaren Prinzipien:

• Sitzungen sind an den kanonischen HTML-Dateipfad gebunden, Agenten müssen keine IDs speichern.
• Das Artefakt läuft in einem isolierten iframe, das Injection-Skript bricht Ihre Styles nicht.
• Feedback wird im kompakten TOON-Format an den Agenten gesendet, um Context-Tokens zu sparen.
• Die Seite lädt automatisch neu, wenn die Datei gespeichert wird, wobei die Scroll-Position beibehalten wird.

Um das Ergebnis mit Kollegen zu teilen, packt der export Befehl Bilder und Styles in eine einzelne eigenständige Datei. Und wenn Sie das Ergebnis schnell online veröffentlichen müssen, lädt der share Befehl es optional auf öffentlichen oder passwortgeschützten Hosting hoch.

Verbindung zu Agenten

Der einfachste Weg, das Tool hinzuzufügen, ist über den Skill-Manager:

npx skills add kunchenguid/lavish-axi --skill lavish

In Claude Code oder ähnlichen Umgebungen erscheint ein fertiger Befehl:

/lavish давайте обсудим план проекта

Für eine Ende-zu-Ende-Integration über alle Entwicklungssitzungen hinweg können Sie das Tool global installieren und Hooks aktivieren:

npm install -g lavish-axi
lavish-axi setup hooks

Der Befehl schreibt einen SessionStart Hook für Claude Code, Codex, OpenCode und GitHub Copilot CLI. Wenn eine neue Sitzung startet, sieht der Agent sofort aktive Review-Prozesse.

Für wen dieses Projekt nützlich ist

Das Tool ist nützlich für Entwickler, die KI-Agenten aktiv Aufgaben zur Erstellung technischer Dokumentation und Interface-Prototypen geben. Das Tool eliminiert vollständig endloses Hin und Her zum Thema „korrigiere den Block rechts" und spart Context-Tokens.