Mostra-lhe o ecrã

O que é e porque importa

O Claude Code escreve o código, mas sozinho não vê o que tu vês. Se não tiver forma de olhar para a página, o botão torto ou o formulário que não envia não existem para ele. E no fim és tu que os descobres, depois de ele te ter escrito «feito».

Este guia resolve o problema nos dois sentidos. Tu mostras o ecrã ao Claude, com uma captura de ecrã. E o Claude olha para o ecrã sozinho, com um navegador que pode usar: abre a página, clica, preenche, vê o resultado.

Importa porque um defeito visual explicado por palavras é lento e impreciso. «O botão está um bocado mais abaixo» pode querer dizer dez coisas diferentes, uma imagem não. E quando é o Claude a refazer o percurso, os erros mais básicos encontra-os e corrige-os antes de chegarem a ti.

A regra geral, nada de «feito» sem prova, já a expliquei noutro guia. Aqui concentro-me na parte visual: como o Claude vê a página e como te mostra que funciona.

1. A frase para dar ao Claude

Esta é a frase que uso. Colo-a depois de pedir uma alteração, ou ponho-a de uma vez por todas no CLAUDE.md. Copia-a assim:

Depois de cada alteração abre a página no navegador e refaz tu o percurso como um utilizador a sério: clica, preenche, envia. Tira uma captura de ecrã antes e outra depois. Depois diz-me o que viste, passo a passo. Não escrevas "feito" enquanto não o vires funcionar: anexa-me as capturas como prova. Se alguma coisa não bater certo, corrige e volta a verificar.

Cada parte tem uma razão:

• «Refaz tu o percurso como um utilizador a sério»: não chega abrir a página. Tem de fazer o que uma pessoa faria, pela mesma ordem.
• «Uma captura antes e outra depois»: a comparação mostra o que mudou mesmo, não só que a página carrega.
• «Diz-me o que viste, passo a passo»: se falta um passo no relato, provavelmente não o fez.
• «Se alguma coisa não bater certo, corrige e volta a verificar»: assim a volta de correções faz ele, não tu.

A frase só funciona se o Claude tiver um navegador para usar. Sem isso, não consegue abrir nada: na secção 3 vês como lho dar. E se não conseguir abrir a página, tem de te dizer, não escrever «feito» na mesma.

Põe-na no CLAUDE.md

O CLAUDE.md é o ficheiro de instruções do projeto. Fica na pasta principal, como CLAUDE.md ou .claude/CLAUDE.md, e o Claude Code lê-o no início de cada sessão. Se lá puseres a frase, não tens de a repetir sempre. Podes pedir ao próprio Claude para a acrescentar:

Acrescenta ao CLAUDE.md esta regra para cada alteração à interface: [cola aqui a frase]

Depois abre uma sessão nova: o ficheiro é carregado no arranque. Para confirmar que o apanhou, escreve /context e vê em Memory files.

2. Mostra-lhe tu o ecrã

Às vezes és tu que vês o problema antes dele. Em vez de o descrever, manda-lhe a imagem. No Claude Code tens quatro formas:

1. No terminal: copia a imagem e cola-a com Ctrl+V. No Mac é Ctrl também no Terminal, não Cmd (no iTerm2 também dá Cmd+V). No Windows é Alt+V. Na mensagem aparece [Image #1].
2. Ou arrasta o ficheiro da imagem para dentro da janela do Claude Code.
3. Ou escreve o caminho do ficheiro na mensagem, como no prompt aqui em baixo.
4. Na app de computador: botão + ao lado do campo da mensagem para anexar o ficheiro, ou arrasta a imagem para o campo.

vê esta captura de ecrã: /caminho/imagem.png

Depois chega uma linha. [Image #1] diz ao Claude de que imagem estás a falar, útil quando colas mais do que uma na mesma conversa.

[Image #1] este botão está torto, corrige-o

Para tirar uma captura de uma parte do ecrã: no Mac, Cmd+Ctrl+Shift+4 copia-a diretamente para a área de transferência; no Windows, Win+Shift+S. Assim já está pronta para colar.

3. Dá um navegador ao Claude

Para o Claude refazer o percurso sozinho, tem de conseguir abrir a página. Há dois caminhos, consoante onde o usas.

A app de computador: o navegador integrado

Na app de computador do Claude, no separador Code, há um painel Browser. Abres-o com o botão Browser na barra de cima da sessão, ou com Cmd+Shift+B no Mac (Ctrl+Shift+B no Windows). O Claude arranca o teu site em local, abre-o lá, clica, preenche os formulários, tira as capturas e corrige o que encontra. E tu vês enquanto ele faz.

Há também uma opção, Auto-verify changes, que está ativa por omissão: depois de alterar os ficheiros, o Claude verifica sozinho com capturas e erros antes de fechar a resposta. A frase da secção 1 serve na mesma: pede o percurso completo do utilizador e o relato do que viu.

O terminal: Claude in Chrome

Se usas o Claude Code no terminal, o caminho é o Claude in Chrome: uma extensão para Chrome ou Edge, que também funciona com outros navegadores baseados em Chromium. Instalas a extensão a partir da Chrome Web Store e depois arrancas o Claude Code assim:

claude --chrome

Dentro da sessão, o /chrome mostra-te se a ligação funciona e deixa-te escolher Enabled by default, para as próximas sessões já arrancarem ligadas. Eu só o ligo quando preciso, porque com o navegador sempre ativo as ferramentas ocupam espaço no contexto. Precisas de um plano pago do Claude (Pro, Max, Team ou Enterprise), com o acesso feito por /login: só com uma chave de API não se ativa.

Aqui o Claude usa o teu navegador a sério, numa janela que vês, também nas páginas onde já tens sessão iniciada. Se encontrar uma página de login ou um captcha, para e pergunta-te. Também consegue ler os erros na consola, útil quando a página parece estar bem mas por baixo alguma coisa falha.

As capturas como prova

Se quiseres abrir tu as capturas que o Claude tira no navegador, pede-lhe para as guardar em ficheiros: diz-te o caminho e vês quando quiseres.

Guarda as capturas de antes e depois numa pasta do projeto e diz-me os caminhos.

Se fazes apps para iPhone

O navegador serve para sites e aplicações web. Para uma app iOS, a app de computador no Mac tem um painel iOS Simulator, em beta: o Claude compila a app, lança-a no simulador, toca nos ecrãs e lê-os para verificar as alterações. Precisas do Xcode instalado, e só funciona com dispositivos simulados, não com um iPhone a sério.

Os erros mais comuns

• Descrever por palavras um defeito visual. Cola a captura e acrescenta uma linha: é mais rápido e não deixa dúvidas.
• Dar a frase ao Claude sem lhe dar um navegador. Abre o painel Browser na app de computador ou arranca o Claude Code com claude --chrome, senão não tem nada para ver.
• Aceitar «já verifiquei» sem imagens. Pede as capturas de antes e depois: se não existirem, a verificação não aconteceu.
• Ficar pelo primeiro ecrã. Confirma que o relato do Claude chega até ao fim do percurso, até ao envio.

Checklist

• A frase está no CLAUDE.md do projeto
• Depois de a acrescentar abri uma sessão nova
• O Claude tem um navegador: painel Browser ou claude --chrome
• Sei colar uma captura (Ctrl+V, Alt+V no Windows)
• Cada «feito» chega com uma captura antes e outra depois
• O relato do Claude cobre o percurso todo

Perguntas frequentes