👁️ Por que "ver" o próprio trabalho muda tudo
No módulo 5.1 você viu por que o front-end de um agente sai "genérico": ele escreve o código olhando só para o código, nunca para o resultado. É como pintar um quadro de olhos vendados — você sabe que moveu o pincel, mas não sabe se acertou a cor, o traço, a proporção. O código pode estar sintaticamente perfeito e, mesmo assim, a página renderizada (o que aparece de fato na tela quando o navegador desenha o HTML/CSS) pode estar feia, quebrada ou fora do que você pediu.
Novo aqui? Renderizar é o processo do navegador transformar código (HTML, CSS, JavaScript) em pixels na tela — é a diferença entre "ler a receita" e "provar o prato pronto". Um agente que só lê a receita nunca sabe se o prato ficou bom.
O laço de screenshot resolve exatamente isso: dá ao agente uma forma de "provar o prato". Ele escreve o código, olha o resultado renderizado através de uma captura de tela, compara com o que foi pedido, e corrige. Sem esse laço, o agente entrega na primeira tentativa e reza. Com ele, o agente itera — repete o ciclo várias vezes — até o resultado bater com o objetivo. Essa é, sozinha, a maior alavanca de qualidade visual que existe neste curso.
💡 Conceito Principal
Sem o laço, o agente é cego ao próprio resultado visual — só enxerga texto e código. Com o laço, ele ganha um sentido novo: visão de feedback sobre o que produziu.
- •Cego: escreve código → entrega → você descobre o defeito depois.
- •Com visão: escreve código → vê o resultado → corrige antes de te entregar.
✗ Sem o laço
- ✗Botão desalinhado só aparece quando você abre a página
- ✗Cor de fundo errada, texto ilegível — o agente "não sabia"
- ✗Cada correção vira uma rodada nova de conversa com você
✓ Com o laço
- ✓Agente já viu o botão torto e ajustou antes de te chamar
- ✓Contraste, espaçamento e alinhamento chegam corrigidos
- ✓Você entra só na revisão final, não na caça a defeito óbvio
🔄 Os 5 estágios do laço, em círculo
O laço tem cinco estágios que se repetem em círculo — não é uma linha reta que termina, é uma roda que gira até o resultado ficar bom. Cada volta completa é uma iteração (uma repetição do mesmo processo, tentando melhorar um pouco a cada vez).
Legenda: o laço gira sempre na mesma ordem — escreve, sobe servidor, captura, compara, corrige — e volta ao início (seta em ciano) até o "bateu com o objetivo?" no centro responder sim. Cada volta completa é uma iteração.
🔍 Por dentro de cada estágio
- 1. Escreve: o agente gera ou ajusta o HTML/CSS/JS do front-end.
- 2. Sobe servidor local: um programa que roda no seu próprio computador e mostra a página como se fosse um site — só que só você (e o agente) conseguem ver, em um endereço tipo
localhost:3000. - 3. Captura: tira um screenshot (uma foto exata do que está na tela naquele instante) usando automação de navegador — um programa que controla o navegador sem você tocar o mouse, abrindo a página e "apertando o botão" de printar a tela sozinho.
- 4. Compara: olha o screenshot ao lado do que foi pedido — a referência, o objetivo, a marca — e aponta as diferenças.
- 5. Corrige: ajusta o código com base no que viu de errado, e a roda gira de novo para o estágio 1.
🔬 Ver por dentro: o que muda a cada volta
Na primeira volta do laço, o agente costuma acertar a estrutura geral — os blocos estão no lugar certo, o texto está lá — mas erra detalhes que só aparecem visualmente: espaçamento apertado, contraste ruim, elementos "grudados" um no outro. É exatamente o tipo de erro que passa despercebido lendo só o código, mas salta aos olhos numa captura de tela.
Na segunda e terceira voltas, o agente já está corrigindo refinamentos: alinhamento de botão, tamanho de fonte no celular (o que muda quando a tela é menor — chamado de responsivo, quando o layout se adapta ao tamanho da tela), cor de hover (o efeito visual quando o mouse passa por cima de um botão). É esse polimento incremental — pequenas correções, repetidas — que separa um resultado "genérico" de um "quase profissional".
Antes (volta 1)
- • Botão "Assinar" cortado na borda direita do celular
- • Texto branco sobre fundo amarelo claro (ilegível)
- • Título e parágrafo grudados, sem respiro
Depois (volta 3)
- • Botão dentro da margem, com espaçamento nas laterais
- • Contraste ajustado — texto escuro sobre fundo claro
- • Espaçamento entre título e parágrafo, layout "respira"
💡 Dica Prática
Peça sempre pelo menos duas voltas completas do laço antes de considerar pronto. A primeira volta resolve o óbvio; a segunda é onde o resultado sai de "funciona" para "parece profissional".
🛠️ Construir: pedindo o laço na prática
Na prática, você não precisa "ensinar" o Claude Code a subir servidor e tirar screenshot — ele já tem essa capacidade quando você pede. O seu trabalho é pedir de forma que force o laço completo: dê o objetivo visual (a referência), peça explicitamente para ele rodar o servidor, capturar, comparar e corrigir — e repetir até bater.
Dê o objetivo visual
Descreva o que a página deve parecer, ou aponte uma referência (print, site, imagem da marca — aprofundado no módulo 5.5).
Peça o laço explicitamente
"Suba um servidor local, tire um screenshot, compare com o objetivo e corrija" — sem esse pedido claro, o agente pode pular direto pra entrega sem verificar visualmente.
Exija repetição até bater
Peça para ele repetir o ciclo até o resultado bater com o objetivo — não aceitar a primeira captura como "pronto".
Legenda: mesma sequência do diagrama circular, agora em linha do tempo — o arco ciano no topo mostra a repetição voltando ao estágio 1.
📋 Bloco copy-run: pedindo o laço completo
Objetivo: fazer o agente construir uma página e se auto-corrigir visualmente antes de te entregar, usando o laço completo.
Crie a página <nome-da-pagina.html> com <descrição do que ela deve ter — seções, textos, botões>.
Depois de escrever o código:
1. Suba um servidor local nesta pasta (ex.: porta <3000>).
2. Abra a página e tire um screenshot da tela cheia.
3. Compare o screenshot com este objetivo: <descreva o visual esperado,
ou aponte a referência/imagem/marca a seguir>.
4. Se houver diferença (cor, espaçamento, alinhamento, texto cortado),
corrija o código.
5. Tire um novo screenshot e repita os passos 3-4 até o resultado bater
com o objetivo. Não pare na primeira tentativa.
Ao final, me mostre o último screenshot e liste o que foi corrigido em cada volta.Como verificar: peça para o agente listar quantas voltas do laço ele deu e o que corrigiu em cada uma. Se ele disser "uma volta só, ficou bom de primeira", desconfie — peça para ele mostrar o screenshot da primeira e da última tentativa lado a lado.
🔍 Por dentro
Automação de navegador: um programa que abre e controla o navegador sozinho — clica, rola a página, tira foto da tela — sem precisar de uma pessoa tocando o mouse. É a "mão" que permite ao agente capturar o próprio resultado visual.
⚠️ Erros comuns que quebram o laço
O laço de screenshot só funciona se você o alimentar direito. Os erros mais comuns não são técnicos — são de como você pede. Veja os dois que mais aparecem.
✗ Erro 1: objetivo vago
- ✗"Faz bonito" não dá ao agente nada pra comparar
- ✗Sem referência visual clara, a comparação vira opinião do próprio agente
- ✗Resultado: ele "acha" que bateu, mas você discorda ao ver
✓ Correção
- ✓Descreva cores, textos, seções e comportamento esperado
- ✓Aponte um print ou site de referência quando existir (módulo 5.5)
- ✓Quanto mais concreto o objetivo, mais precisa a comparação
✗ Erro 2: achar que uma passada basta
- ✗Pedir "tira um screenshot e me mostra" — sem pedir a comparação e a correção
- ✗Aceitar a primeira captura como pronta sem checar detalhes
- ✗Fica no meio do caminho: viu, mas não corrigiu
✓ Correção
- ✓Peça explicitamente "repita até bater" — não "tire um print"
- ✓Exija pelo menos 2 voltas antes de considerar pronto (tópico 3)
- ✓Peça o histórico das correções feitas em cada volta como prova
⚠️ Atenção
Este laço tem limites — ele não substitui seu julgamento final e não resolve tudo sozinho. Os limites concretos (o que ele NÃO enxerga, quando parar de insistir) são o assunto inteiro do próximo módulo, 5.4.
✅ Checklist e exercício
Antes de considerar qualquer página do agente "pronta", passe pela checklist abaixo. Ela resume os cinco estágios do laço em forma de verificação prática.
☑️ Checklist do laço de screenshot
- ☐Dei um objetivo visual concreto (não "faz bonito")
- ☐Pedi explicitamente para subir servidor local e capturar tela
- ☐Pedi a comparação explícita entre screenshot e objetivo
- ☐Exigi pelo menos 2 voltas do laço, não uma passada só
- ☐Pedi o histórico do que foi corrigido a cada volta
- ☐Revisei eu mesmo o resultado final antes de aprovar
🎯 Exercício
Escolha uma página simples (pode ser uma landing de uma linha só, tipo "cartão de visitas digital"). Peça ao Claude Code, usando o bloco copy-run do tópico 4, que:
- Crie a página com pelo menos 3 seções (topo, meio, rodapé).
- Rode o laço completo — escrever, subir servidor, capturar, comparar, corrigir — no mínimo 2 vezes.
- Te mostre o screenshot da primeira e da última tentativa.
- Liste, em texto, o que mudou entre as duas.
Se o agente pular direto pra "pronto" sem te mostrar as duas capturas, o laço não rodou de verdade — peça de novo, sendo mais explícito.
Checagem rápida (opcional): por que o agente é "cego" sem o laço de screenshot?