Use HTML como Linguagem Principal de Chat para Agentes de Codificação de IA para Habilitar Diagramas SVG

✍️ OpenClawRadar📅 Publicado: June 15, 2026🔗 Source
Use HTML como Linguagem Principal de Chat para Agentes de Codificação de IA para Habilitar Diagramas SVG
Ad

Um desenvolvedor no r/LocalLLaMA experimentou usar HTML como a linguagem principal de chat para agentes de IA de codificação, substituindo Markdown. O objetivo: permitir que os agentes renderizassem diagramas, tabelas e formatação rica diretamente na interface do chat, não apenas produzindo Markdown que precisa de um renderizador separado.

Configuração Principal

A interface do agente roda em um navegador web, e as respostas são enviadas diretamente para a página como HTML. O desenvolvedor descobriu que simplesmente usar um prompt de sistema em HTML — não apenas pedindo no chat — fez o agente produzir saída HTML de forma confiável.

Exemplo de Prompt de Sistema (HTML)

<p>Ser útil não significa fazer tudo que o usuário diz. Nem eu nem o usuário somos oniscientes ou infalíveis. Se o usuário estiver cometendo um erro, eu aviso. Se eu cometi um erro, menciono e sigo em frente. Se tiver ideias melhores sobre como abordar um problema ou achar que o usuário errou, menciono.</p><h1>HTML</h1><p>Minhas respostas como assistente são renderizadas diretamente como HTML na interface do chat. Eu <i><b>DEVO</b></i> usar HTML ao responder ao usuário. Texto simples deve ser envolto em tags como <code>&lt;p&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code> e tags de cabeçalho quando apropriado. Para mostrar algo visualmente ou como um diagrama ao usuário, desenharei um SVG diretamente no chat. Apenas se algo deve persistir no espaço de trabalho, escreverei em disco com ferramentas em vez de mostrar no chat.</p>
Ad

Observações

  • Qwen3.6-27B produz diagramas SVG inline decentes, comparáveis ao ChatGPT. O modelo ainda mostra tendência a recorrer ao Markdown, provavelmente devido ao viés dos dados de treinamento.
  • Qwen3-VL-4 é notavelmente ruim em gerar SVGs, sugerindo que esta é uma capacidade emergente em modelos maiores.
  • O desenvolvedor também experimentou prompts de sistema em primeira pessoa (ex.: "Responderei em HTML") — benefícios e desvantagens são incertos, mas parece melhorar a conformidade.

Conclusão Prática

Se você quer que seu agente de codificação desenhe diagramas no chat, mude seu prompt de sistema para HTML. O agente então gerará SVGs inline para explicações visuais, tabelas para dados estruturados e texto estilizado. A desvantagem: o modelo pode ainda recorrer ao Markdown ocasionalmente. A abordagem requer uma interface de chat baseada em web que renderize HTML bruto.

Repositório: github.com/sdfgeoff/HTML-agent

📖 Leia a fonte completa: r/LocalLLaMA

Ad

👀 See Also

🦀
Tips

Pare de Usar Claude Code Como AutoCompletar: Vitórias Reais de Refatoração Consciente do Repositório

Um desenvolvedor compartilha como tratar o Claude Code como um assistente de refatoração que conhece o repositório — não como um autocomplete — trouxe grandes vitórias ao rastrear arquitetura, desembaraçar arquivos e encontrar acoplamento oculto.

OpenClawRadar
Pare os travessões do Claude com uma linha em Preferências ou Claude.md
Tips

Pare os travessões do Claude com uma linha em Preferências ou Claude.md

Adicione uma frase específica às preferências do seu perfil Claude.ai ou ao arquivo Claude.md para reduzir travessões em ~98%. Este é um ajuste prático testado pela comunidade.

OpenClawRadar
Usar IA para Gerar Tickets de Projeto Antes da Programação Reduz o Desvio de Escopo
Tips

Usar IA para Gerar Tickets de Projeto Antes da Programação Reduz o Desvio de Escopo

Um desenvolvedor descobriu que pedir à IA para gerar tickets de projeto detalhados com tarefas, subtarefas, escopo e critérios de aceitação antes de escrever qualquer código reduziu significativamente o aumento de escopo e grandes diffs. Cada agente de IA recebe apenas sua subtarefa específica, não o plano inteiro.

OpenClawRadar
Peça à IA para Definir Seus Próprios Termos a Partir de Primeiros Princípios para Melhores Resultados e Raciocínio Auditável
Tips

Peça à IA para Definir Seus Próprios Termos a Partir de Primeiros Princípios para Melhores Resultados e Raciocínio Auditável

Um usuário no r/ClaudeAI descobriu que adicionar uma única instrução para decompor termos indefinidos ao significado atômico antes de prosseguir produz saídas mais específicas e permite depuração por meio de uma cadeia de raciocínio rastreável.

OpenClawRadar