Retroalimentación visual para agentes de IA sin capturas de pantalla ni explicaciones extensas

Le pides a Claude Code o Copilot que cree un diagrama de arquitectura o un plan de producto. El agente genera un documento HTML interactivo con diagramas. Pero en el momento en que quieres corregir una etiqueta en un bloque o mover un elemento, se vuelve tedioso. Tienes que tomar una captura de pantalla con flechas, o describirlo en texto: "en la tercera sección desde abajo, reemplaza el bloque B con C".

La idea detrás del repositorio lavish-axi es recuperar la interactividad normal en este proceso. En lugar de descripciones de texto, la herramienta abre el archivo generado en el navegador y proporciona herramientas de edición convenientes.

Qué hace Lavish Editor

Esta es una utilidad CLI e implementación del protocolo AXI (Agent eXtension Interface). La herramienta inicia un servidor web local y abre el archivo HTML generado en el navegador.

Seleccionas texto, haces clic en elementos, dejas comentarios o editas diagramas. Todas las notas se recopilan en una cola y se envían de vuelta al agente mediante long-polling o hooks de CLI. La red neuronal recibe selectores CSS precisos y fragmentos de texto, por lo que comprende rápidamente exactamente qué necesita corregirse.

Todo funciona completamente de forma local. Sin nubes de terceros ni envío de tu código a servidores externos de forma predeterminada.

Convirtiendo Mermaid a un tablero Excalidraw

Si el agente genera un diagrama Mermaid, Lavish lo convierte automáticamente en un tablero Excalidraw interactivo directamente en la página.

Haces clic en el diagrama, mueves formas, dibujas conexiones o cambias texto. Luego envías tus comentarios. La herramienta genera un resumen de los cambios con una vista previa visual, y el agente actualiza el código Mermaid original en el archivo.

Al mismo tiempo, el HTML final en sí no se contamina con bibliotecas externas. Si lo abres en un navegador normal sin Lavish, mostrará Mermaid estándar y limpio.

Validación automática del diseño

Un detalle interesante: antes de mostrar el artefacto a una persona, Lavish ejecuta una verificación interna del diseño.

El script integrado verifica si el texto ha desbordado los límites del contenedor y si los controles se superponen. Si se detecta un problema crítico de interfaz, la herramienta enviará un mensaje al agente para revisión antes de que la página abierta llame tu atención.

Cómo funciona técnicamente

La interacción se construye sobre principios claros:

• Las sesiones están vinculadas a la ruta canónica del archivo HTML, los agentes no necesitan almacenar IDs.
• El artefacto se ejecuta en un iframe aislado, el script de inyección no rompe tus estilos.
• Los comentarios se envían al agente en un formato TOON compacto para ahorrar tokens de contexto.
• La página se recarga automáticamente cuando se guarda el archivo, manteniendo la posición de desplazamiento.

Para compartir el resultado con colegas, el comando export empaqueta imágenes y estilos en un único archivo independiente. Y si necesitas publicar rápidamente el resultado en línea, el comando share opcionalmente lo subirá a hosting público o protegido con contraseña.

Conectando con agentes

La forma más sencilla de agregar la herramienta es a través del gestor de habilidades:

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

En Claude Code o entornos similares, aparecerá un comando listo para usar:

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

Para una integración de extremo a extremo en todas las sesiones de desarrollo, puedes instalar la utilidad globalmente y habilitar los hooks:

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

El comando escribirá un hook SessionStart para Claude Code, Codex, OpenCode y GitHub Copilot CLI. Cuando cualquier sesión nueva comience, el agente verá inmediatamente los procesos de revisión activos.

A quién le será útil este proyecto

La utilidad es útil para desarrolladores que delegan activamente tareas a agentes de IA para crear documentación técnica y prototipos de interfaz. La herramienta elimina por completo los interminables vaivenes sobre el tema de "corrige ese bloque de la derecha" y ahorra tokens de contexto.