Wizualna informacja zwrotna dla agentów AI bez zrzutów ekranu i rozbudowanych wyjaśnień

Prosisz Claude Code lub Copilota o utworzenie diagramu architektury lub planu produktu. Agent generuje interaktywny dokument HTML z diagramami. Ale gdy chcesz poprawić etykietę na bloku lub przesunąć element, staje się to żmudne. Musisz albo zrobić zrzut ekranu ze strzałkami, albo opisać to tekstowo: „w trzeciej sekcji od dołu zamień blok B na C”.

Ideą stojącą za repozytorium lavish-axi jest przywrócenie normalnej interaktywności do tego procesu. Zamiast opisów tekstowych, narzędzie otwiera wygenerowany plik w przeglądarce i udostępnia wygodne narzędzia do edycji.

Co robi Lavish Editor

To jest narzędzie CLI i implementacja protokołu AXI (Agent eXtension Interface). Narzędzie uruchamia lokalny serwer WWW i otwiera wygenerowany plik HTML w przeglądarce.

Zaznaczasz tekst, klikasz elementy, zostawiasz komentarze lub edytujesz diagramy. Wszystkie notatki są gromadzone w kolejce i wysyłane z powrotem do agenta przez long-polling lub hooki CLI. Sieć neuronowa otrzymuje precyzyjne selektory CSS i fragmenty tekstu, dzięki czemu szybko rozumie, co dokładnie trzeba naprawić.

Wszystko działa całkowicie lokalnie. Żadne zewnętrzne chmury ani wysyłanie kodu na zewnętrzne serwery domyślnie.

Konwersja Mermaid na tablicę Excalidraw

Jeśli agent wygeneruje diagram Mermaid, Lavish automatycznie konwertuje go na interaktywną tablicę Excalidraw bezpośrednio na stronie.

Klikasz na diagram, przesuwasz kształty, rysujesz połączenia lub zmieniasz tekst. Następnie klikasz wyślij informację zwrotną. Narzędzie generuje podsumowanie zmian z podglądem wizualnym, a agent aktualizuje oryginalny kod Mermaid w pliku.

Jednocześnie końcowy HTML nie jest zanieczyszczony zewnętrznymi bibliotekami. Jeśli otworzysz go w zwykłej przeglądarce bez Lavish, wyświetli standardowy czysty Mermaid.

Automatyczna walidacja układu

Interesujący szczegół: przed pokazaniem artefaktu osobie, Lavish uruchamia wewnętrzną kontrolę układu.

Wbudowany skrypt sprawdza, czy tekst nie wypłynął poza granice kontenera i czy elementy sterujące nie są zakrywane. Jeśli wykryto krytyczny błąd interfejsu, narzędzie wyśle wiadomość do agenta z prośbą o poprawkę, zanim otwarta strona zwróci Twoją uwagę.

Jak to działa technicznie

Interakcja opiera się na jasnych zasadach:

• Sesje są powiązane z kanoniczną ścieżką pliku HTML, agenci nie muszą przechowywać identyfikatorów.
• Artefakt działa w izolowanej ramce iframe, wstrzykiwany skrypt nie psuje Twoich stylów.
• Informacja zwrotna jest wysyłana do agenta w zwartym formacie TOON, aby oszczędzać tokeny kontekstu.
• Strona automatycznie przeładowuje się po zapisaniu pliku, zachowując pozycję przewijania.

Aby udostępnić wynik kolegom, polecenie export pakuje obrazy i style w jeden samodzielny plik. A jeśli chcesz szybko opublikować wynik online, polecenie share opcjonalnie wyśle go na publiczny hosting lub hosting chroniony hasłem.

Łączenie z agentami

Najłatwiejszy sposób dodania narzędzia to menedżer umiejętności:

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

W Claude Code lub podobnych środowiskach pojawi się gotowe polecenie:

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

Aby uzyskać pełną integrację we wszystkich sesjach programistycznych, możesz zainstalować narzędzie globalnie i włączyć hooki:

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

Polecenie zapisze hook SessionStart dla Claude Code, Codex, OpenCode i GitHub Copilot CLI. Gdy rozpocznie się nowa sesja, agent natychmiast zobaczy aktywne procesy przeglądu.

Dla kogo przydatny będzie ten projekt

Narzędzie jest przydatne dla programistów, którzy aktywnie zlecają zadania agentom AI do tworzenia dokumentacji technicznej i prototypów interfejsu. Narzędzie całkowicie eliminuje niekończącą się wymianę zdań na temat „napraw ten blok po prawej" i oszczędza tokeny kontekstu.