Pitch: O problema da regeneração total de HTML por IA e como resolvemos isso no DOM
Olá, pessoal do TabNews!
Quem trabalha com desenvolvimento front-end ou vem experimentando vibe coding (geração e prototipagem de interfaces com LLMs) certamente já esbarrou com uma dor de cabeça clássica: você tem uma landing page com layout, Tailwind e breakpoints já homologados, pede para uma IA alterar apenas um parágrafo ou um card de serviços, e ela simplesmente reescreve o arquivo HTML inteiro, quebrando estilos, classes de grid e seletores CSS consolidados.
Recentemente nos debruçamos sobre esse problema na engenharia do HtmlDrag e gostaria de compartilhar com vocês a anatomia dessa falha e a metodologia técnica que adotamos para contorná-la: o refinamento pontual delimitado no DOM.
TL;DR: O segredo para editar trechos de uma página web com IA sem quebrar o layout circundante é abandonar a regeneração cega de arquivos e adotar um fluxo em 3 etapas:
- Seleção do Alvo (Target Selection): Ancorar o contexto de execução no menor contêiner DOM completo (o nó pai do card), e não na seção inteira.
- Prompting Delimitado com Invariantes (Bounded Invariants): Estabelecer cláusulas rígidas de salvaguarda que congelem expressamente os nós vizinhos, classes CSS compartilhadas e tags estruturais.
- Verificação Híbrida e Ajuste Visual Direto: Não queimar tokens tentando forçar contagens estritas de palavras via LLMs estocásticos; finalizar textos fechados diretamente no editor visual e exportar HTML limpo.
A "Armadilha da Regeneração por Prompt" (The Prompt-Regeneration Trap)
Quando você passa um arquivo HTML de 1.500 linhas para um chat de IA e pede "atualize o segundo card", o modelo não realiza um patch cirúrgico na árvore DOM física. Ele prevê probabilisticamente token por token o documento inteiro do zero.
Nesse processo surgem mutações estocásticas inevitáveis:
- Breakpoints responsivos de CSS que funcionavam são descartados;
- Classes utilitárias compartilhadas do Tailwind são renomeadas ou reordenadas arbitrariamente;
- Metadados e atributos de acessibilidade/tracking desaparecem.
Para resolver isso, qualquer alteração local precisa definir formalmente três eixos de controle:
- Onde (Scope Anchor): O nó DOM isolado que envolve estritamente os elementos mutáveis.
- O quê (Delta Specification): A especificação exata do que deve ser alterado, baseada em fatos objetivos.
- O que permanece (Explicit Invariants): Cláusulas que proíbem explicitamente qualquer mutação nos irmãos e no grid pai.
Escolhendo a Granularidade Correta no DOM
O sucesso do isolamento depende da escolha do contêiner ideal:
| Cenário | Granularidade Recomendada | Invariantes (O que congelar) | Risco se omitir o limite |
|---|---|---|---|
| Correção de texto/digitação | Elemento de texto específico (Edição visual direta) | Contêiner pai, irmãos, classes CSS | Risco de reescrita aleatória de frases pela IA |
| Reformulação de um card | Contêiner isolado do card | Cards vizinhos, links de CTA, grid | IA reescreve cards adjacentes já aprovados |
| Atualização de links/UTM | Nó no gerenciador visual | Classes de botão, estados de hover | IA altera atributos de estilo e classes utilitárias |
| Reestruturação de seção | Elemento com briefing por bloco | Header, footer, seções vizinhas | Efeito cascata desalinha a página inteira |
Passo a Passo na Prática: Caso Real Asterlane
Para validar esse fluxo, utilizamos uma página real de serviços com 3 cards lado a lado (Research brief agent, Customer support e Revenue operations agent). O objetivo: atualizar apenas o card central de suporte para torná-lo um agente de triagem especializado, sem mover um único pixel dos outros dois.
1. Importação e Inspeção do Estado Zero
Importamos o HTML diretamente no canvas. Antes de disparar qualquer alteração, inspecionamos a árvore de elementos: 3 cards íntegros, zero seleções ativas.
2. Ancoragem de Escopo (Scope Anchor) e Cláusulas de Guarda
Clicamos diretamente no card central. O seletor visual isola o nó exato (indicando 1/20 elementos selecionados).
No campo de prompt, aplicamos uma especificação delimitada com invariantes:
Target: Update only the selected Customer support card.
Action: Change title to "Support triage agent". Rewrite the description to exactly 20-28 words explaining it triages incoming requests, drafts responses from approved docs, and routes edge cases to human reps. Update the 3 bullet points accordingly.
Invariants: Do not modify adjacent cards. Keep all Tailwind classes, button links, and 3-column grid structure strictly intact.
3. Execução e Auditoria de Mutações
O modelo processa apenas a subárvore do nó selecionado. Ao concluir, inspecionamos o resultado: o card central foi atualizado com sucesso, enquanto os cards esquerdo e direito permaneceram bit a bit idênticos ao original.
4. Ajuste Visual Determinístico vs. "Rerolling" de Prompt
Um detalhe técnico importante: na resposta da IA, a descrição gerada ficou com 16 palavras, apesar de termos solicitado entre 20 e 28 palavras.
Por que isso acontece? LLMs operam com base em BPE tokens (Byte-Pair Encoding), e não em contagem de palavras do dicionário. Ficar reenviando prompts para tentar acertar a contagem exata desperdiça tokens e tempo.
A solução pragmática é dar um duplo clique diretamente no texto na tela e ajustar manualmente para 22 palavras em 5 segundos, com precisão cirúrgica.
5. Snapshot de Versão e Exportação Limpa
Com a alteração auditada, salvamos um snapshot de versão (v3) para histórico seguro e exportamos o arquivo HTML final: código limpo, sem injeção de scripts proprietários nem contêineres poluídos.
Conclusão e Debate
A proliferação de ferramentas de IA generativa no desenvolvimento web tornou a criação de páginas instantânea, mas a manutenção dessas interfaces ainda exige rigor de engenharia de software tradicional. Limitar o raio de destruição através de seleções no DOM e restrições invariantes se mostrou a forma mais eficiente de manter código saudável em produção.
Construímos o HtmlDrag justamente para resolver essa lacuna de fluxo no navegador.
E vocês aqui na comunidade do TabNews:
- Como têm lidado com a manutenção e pequenas alterações em projetos gerados por IA?
- Vocês isolam componentes manualmente, usam ferramentas de patch ou ainda passam raiva com regenerações completas de arquivos?
Adoraria ouvir a experiência e os métodos de vocês aqui nos comentários!