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

Economize nas Contas do Claude Code Roteando Tokens de Planejamento para Modelos Mais Baratos
Tips

Economize nas Contas do Claude Code Roteando Tokens de Planejamento para Modelos Mais Baratos

Um usuário cortou US$ 40 em taxas de excesso ao dividir os fluxos de trabalho do Claude Code: etapas de planejamento vão para o Haiku 3.5, edições reais e decisões permanecem no Opus/Sonnet. Um wrapper de 30 linhas gerencia o roteamento; a configuração levou cerca de 2 horas.

OpenClawRadar
Plugin de Código Claude Causa Bug que Faz Habilidades Carregarem Duas Vezes, Aumentando a Compactação de Contexto
Tips

Plugin de Código Claude Causa Bug que Faz Habilidades Carregarem Duas Vezes, Aumentando a Compactação de Contexto

Um bug no Claude Code faz com que os plugins carreguem cada habilidade duas vezes devido a diretórios de cache obsoletos e duplicação de symlinks, aumentando significativamente o tamanho do prompt do sistema e desencadeando compactação frequente de contexto. A fonte fornece scripts de verificação para identificar o problema e scripts de correção para remover versões obsoletas de plugins e symlinks duplicados.

OpenClawRadar
Construindo uma Camada de Processo sobre o Claude Code para Gerenciar Contexto e Coordenação
Tips

Construindo uma Camada de Processo sobre o Claude Code para Gerenciar Contexto e Coordenação

Uma equipe compartilha como construiu uma camada de processo sobre o Claude Code que declara entradas/saídas por etapa de engenharia, reduzindo a perda de contexto durante as transições e possibilitando ganhos de produtividade compostos sem depender de disciplina individual.

OpenClawRadar
35 Dias de Código Claude: Por que 3 Agentes Paralelos São o Verdadeiro Limite
Tips

35 Dias de Código Claude: Por que 3 Agentes Paralelos São o Verdadeiro Limite

Análise de mais de 1.800 turnos do Claude Code mostra que o gargalo não é o contexto — é a capacidade humana de junção. Uma fórmula simples N ≈ 1 / (fração do tempo esperando por você) explica o limite de 3 agentes.

OpenClawRadar