Como revisar HTML criado por IA antes de compartilhar por link
Um preview convincente responde a uma pergunta: o navegador consegue renderizar este código? Ao enviar um link para outra pessoa, aparecem outras: os arquivos referenciados foram junto? Os dados existem fora do seu navegador? A próxima versão vai exigir um novo link?
Uso este roteiro para revisar páginas HTML criadas com IA antes de compartilhá-las. Ele vale para qualquer hospedagem estática; nenhuma das verificações exige um framework específico.
1. Confira o pacote, não apenas o index.html
Se o HTML referencia arquivos locais, o arquivo sozinho não contém esses recursos. Uma estrutura possível é:
meu-projeto/
index.html
assets/
capa.png
app.js
No documento, os caminhos precisam fazer sentido dentro desse pacote:
<img src="./assets/capa.png" alt="Capa do projeto">
<script src="./assets/app.js"></script>
Envie a pasta inteira e mantenha index.html no nível mais alto. Revise caminhos como file:///, C:\... ou referências a pastas que só existem na sua máquina. Se o gerador criou src/, public/ ou outra estrutura que depende de build, execute esse build primeiro e compartilhe os arquivos resultantes; renomear a pasta não substitui essa etapa.
2. Interação no navegador não significa dado compartilhado
Uma página estática pode ter controles, cálculos, desenhos e rascunhos. O problema começa quando a interface promete mais do que o armazenamento real entrega.
<label for="rascunho">Rascunho</label>
<textarea id="rascunho"></textarea>
<button id="salvar" type="button">Salvar neste navegador</button>
<script>
document.querySelector('#salvar').addEventListener('click', () => {
localStorage.setItem('rascunho', document.querySelector('#rascunho').value);
});
</script>
Esse código funciona sem backend, mas o rascunho fica associado àquele navegador e àquela origem. Ele não aparece automaticamente no computador de quem criou a página nem no aparelho de outra pessoa. Por isso o botão diz “Salvar neste navegador”, e não “Enviar para a equipe”.
Antes de publicar, classifique cada ação: calcula ou transforma algo apenas na tela, guarda um estado local ou precisa compartilhar dados com outras pessoas? Só a terceira exige um serviço de dados, mas ela também precisa de autenticação, validação e regras de acesso no servidor.
3. Procure o backend implícito no código gerado
Este trecho pode funcionar durante o desenvolvimento e falhar no link público:
fetch('http://localhost:3000/api/respostas', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mensagem: 'exemplo' }),
});
Há dois limites diferentes aqui. Depois da publicação, localhost aponta para o computador de quem visita a página, não para a sua máquina. E uma página servida por HTTPS não pode depender de uma API HTTP insegura; o navegador bloqueia conteúdo misto.
Se existir uma API real, ela precisa estar publicada separadamente, usar HTTPS e permitir a origem da página por CORS. Isso não elimina a necessidade de autenticação e validação no servidor. Também remova chaves privadas, tokens administrativos e dados pessoais do HTML, CSS e JavaScript: tudo o que chega ao navegador pode ser lido por quem recebe o link.
Hospedar o front-end estático não publica automaticamente essa API. Faça essa separação antes de revisar cores ou texto do botão de “sucesso”.
4. Teste como destinatário e combine como será a atualização
Abra o resultado em outro navegador, sem a sua sessão, e em um telefone. Além da aparência, verifique:
- as imagens e os scripts carregam sem depender de arquivos locais;
- os controles têm o comportamento descrito pelo texto;
- uma ação que deveria salvar dados tem um destino real;
- o conteúdo pode ser público sem expor segredos ou dados de teste reais.
Se a página vai receber revisões, decida também onde a próxima versão será enviada. Atualizar o mesmo endereço evita espalhar “final-v2”, “final-v3” e correções em links diferentes. Para isso, o serviço de hospedagem precisa permitir substituir o conteúdo mantendo a URL; nem todo link de upload anônimo oferece essa opção.
O fluxo que deixei disponível para testar
No exemplo interativo de página criada com IA, o controle de ângulo altera o gradiente e o CSS exibido sem publicar nada. Verifiquei esse comportamento no Chromium e também enviei um HTML fictício para uma instância isolada, abrindo depois a URL gerada. Isso não substitui o teste nos navegadores e nas APIs do seu próprio projeto.
O roteiro ilustrado para compartilhar HTML criado com IA reúne essas verificações e tem a opção de enviar um arquivo, uma pasta ou um ZIP. No Plopino, a ferramenta que estou desenvolvendo, uploads anônimos são públicos e ficam disponíveis por 30 dias. Ao salvar a página em uma conta, é possível atualizar o conteúdo em My Boards mantendo o mesmo link. O serviço entrega o front-end estático; uma API ou um banco de dados continua sendo uma parte separada do projeto.
O critério que uso para encerrar a revisão é simples: a pessoa que recebe o link consegue abrir a página e entender quais ações são locais, quais realmente salvam dados e onde encontrar a próxima versão?