Feedback visual para agentes de IA sem capturas de tela e explicações longas

Você pede ao Claude Code ou Copilot para criar um diagrama de arquitetura ou plano de produto. O agente gera um documento HTML interativo com diagramas. Mas no momento em que você quer corrigir um rótulo em um bloco ou mover um elemento, isso se torna tedioso. Você tem que tirar uma captura de tela com setas, ou descrever em texto: "na terceira seção de baixo, substitua o bloco B por C."

A ideia por trás do repositório lavish-axi é trazer de volta a interatividade normal a esse processo. Em vez de descrições em texto, a ferramenta abre o arquivo gerado no navegador e fornece ferramentas convenientes de edição.

O que o Lavish Editor Faz

Esta é uma ferramenta CLI e implementação do protocolo AXI (Agent eXtension Interface). A ferramenta inicia um servidor web local e abre o arquivo HTML gerado no navegador.

Você seleciona texto, clica em elementos, deixa comentários ou edita diagramas. Todas as anotações são coletadas em uma fila e enviadas de volta ao agente via long-polling ou hooks de CLI. A rede neural recebe seletores CSS precisos e fragmentos de texto, então ela entende rapidamente exatamente o que precisa ser corrigido.

Tudo funciona completamente localmente. Sem nuvens de terceiros ou envio do seu código para servidores externos por padrão.

Convertendo Mermaid para Quadro Excalidraw

Se o agente gerar um diagrama Mermaid, o Lavish automaticamente o converte em um quadro Excalidraw interativo diretamente na página.

Você clica no diagrama, move formas, desenha conexões ou altera texto. Então você clica em enviar feedback. A ferramenta gera um resumo das alterações com uma visualização, e o agente atualiza o código Mermaid original no arquivo.

Ao mesmo tempo, o HTML final em si não é poluído com bibliotecas externas. Se você abri-lo em um navegador comum sem o Lavish, ele exibirá o Mermaid limpo padrão.

Validação Automática de Layout

Um detalhe interessante: antes de mostrar o artefato para uma pessoa, o Lavish executa uma verificação interna de layout.

O script integrado verifica se o texto transbordou os limites do contêiner e se os controles estão sendo sobrepostos. Se uma quebra crítica de interface for detectada, a ferramenta enviará uma mensagem ao agente para revisão antes que a página aberta chame sua atenção.

Como Funciona Tecnicamente

A interação é construída sobre princípios claros:

• As sessões são vinculadas ao caminho canônico do arquivo HTML, os agentes não precisam armazenar IDs.
• O artefato é executado em um iframe isolado, o script de injeção não quebra seus estilos.
• O feedback é enviado ao agente em um formato TOON compacto para economizar tokens de contexto.
• A página recarrega automaticamente quando o arquivo é salvo, mantendo a posição de rolagem.

Para compartilhar o resultado com colegas, o comando export empacota imagens e estilos em um único arquivo independente. E se você precisa publicar rapidamente o resultado online, o comando share opcionalmente fará upload para hospedagem pública ou protegida por senha.

Conectando aos Agentes

A forma mais fácil de adicionar a ferramenta é através do gerenciador de skills:

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

Em Claude Code ou ambientes similares, um comando pronto aparecerá:

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

Para integração completa em todas as sessões de desenvolvimento, você pode instalar a ferramenta globalmente e habilitar os hooks:

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

O comando escreverá um hook SessionStart para Claude Code, Codex, OpenCode e GitHub Copilot CLI. Quando qualquer nova sessão iniciar, o agente verá imediatamente os processos de revisão ativos.

Para Quem Este Projeto Será Útil

A ferramenta é útil para desenvolvedores que dão ativamente tarefas a agentes de IA para criar documentação técnica e protótipos de interface. A ferramenta elimina completamente a ida e volta interminável sobre o tema "corrige aquele bloco à direita" e economiza tokens de contexto.