Aula 22O Claude vendo a sua página

Objetivos

Ao final desta aula você vai saber:

• Mostrar ao Claude, com um print do celular, um defeito que só aparece na tela pequena
• Pedir a correção dizendo também o que não pode mudar, e conferir no celular de verdade
• Deixar o Claude abrir a página no seu Chrome e olhar sozinho, com o Claude no Chrome
• Saber o que é o uso do computador e por que, para a sua página, ele quase nunca é o caminho

Até aqui, quem olhava a página era você: abria no navegador, conferia e, quando precisava, mostrava um print ao Claude (Aulas 04 e 19). Mas tem defeito que só aparece no celular, e o Claude não tem celular. Nesta aula, ele passa a ver a sua página: primeiro pelo print que você tira no celular, depois abrindo a página sozinho, no seu Chrome.

O que você precisa:

• A página no ar, da Aula 19. Pulou a Aula 19? Faça tudo com a página no computador: onde muda, a aula avisa.
• Para o Claude no Chrome: o Chrome (ou o Edge), a extensão do Claude e um plano direto da Anthropic (Pro, Max, Team ou Enterprise), com o login pelo /login. Com chave de API, ele não liga.
• O uso do computador fica só na leitura: ele está em prévia, nos planos Pro e Max, e no terminal funciona só no Mac.

O print do celular

Um print mostra num segundo o que levaria um parágrafo para explicar. E o print do celular mostra o que você não vê no computador.

1. Abra a página no celular, no endereço que você mandou para você mesmo no WhatsApp, na Aula 19 (https://seu-usuario.github.io/confeitaria/).
2. Procure um defeito. Role até o cardápio e olhe os botões do filtro: Todos, Bolos, Docinhos e Tortas. Em muitos celulares, eles ficam espremidos, ou o último sai cortado da tela. Olhe também os textos, as fotos e o formulário.
3. Tire um print do defeito, do jeito de sempre no seu celular.
4. Mande o print para o computador: por e-mail para você mesmo, ou pelo WhatsApp, aberto no computador. Salve a imagem na pasta Downloads.

💡 Pulou a Aula 19? Tire o print no computador: abra a página com dois cliques no index.html, arraste a borda da janela do navegador até ela ficar o mais estreita possível, perto da largura de um celular, e tire o print, como na Aula 04.

A página já aparece bem no celular? Ótimo sinal. Procure outra coisa que incomode, como um texto pequeno demais ou uma foto que passa da borda, e siga o mesmo caminho.

Mostre o print ao Claude

Abra o terminal, entre na pasta e abra o Claude Code: cd Documents/confeitaria, com o nome da sua pasta, e depois claude. Aperte Shift + Tab uma vez e confira se aparece manual mode on.

Leve o print para a conversa de um destes dois jeitos:

E peça, na mesma mensagem:

No celular, os botões do filtro ficam cortados, como neste print. Arrume sem mudar nada do jeito que a página aparece no computador.

A segunda frase é o critério: ela diz o que não pode mudar. Sem ela, o Claude pode consertar o celular mexendo no computador também. No Manual, ele mostra cada mudança antes e pede licença: leia e aprove, como na Aula 05.

Confira nos dois tamanhos e no celular

1. No computador. Atualize a página no navegador, com a janela grande: nada mudou. Depois, estreite a janela até perto da largura de um celular: os quatro botões do filtro aparecem inteiros?
2. Guarde e envie. Peça: "guarde uma versão com uma mensagem em português explicando o que mudou e envie para o GitHub". A trava da Aula 10 pergunta antes do envio: leia e aprove.
3. No celular de verdade. Em até 10 minutos, o site no ar muda. Abra a página no celular e atualize.

Critério de pronto: no celular, os quatro botões do filtro aparecem inteiros, e no computador a página continua igual. Ainda não ficou? Tire outro print e mostre ao Claude: "ainda está assim, como neste print".

Pulou a Aula 19? O critério é o mesmo, na janela estreita do computador. Guarde a versão e pule o envio.

O Claude olhando sozinho: o Claude no Chrome

Com o print, quem olha ainda é você. Com o Claude no Chrome (Claude in Chrome), uma extensão do navegador, o Claude abre a página no seu Chrome, clica nos botões e conta o que viu. E você acompanha tudo numa janela do Chrome, ao vivo.

Na primeira vez, instale a extensão Claude, na Chrome Web Store, e entre nela com a mesma conta do Claude que você usa no Claude Code. Se esquecer, tudo bem: quando o Claude precisar do navegador e não achar a extensão, aparece um aviso chamado Claude wants to use your browser (o Claude quer usar o seu navegador). Escolha Install extension (instalar a extensão) e siga os passos.

Saia da conversa com /exit e abra de novo, agora com o Chrome ligado:

claude --chrome

Na primeira vez, aparece uma explicação curta: aperte Enter. Confira o manual mode on (Shift + Tab) e peça:

Abra no Chrome a página https://seu-usuario.github.io/confeitaria/, clique em cada botão do filtro e me conte o que aparece em cada um.

O que acontece:

• Cada site pede licença. Na primeira ação num site, aparece um pedido que começa com Claude in Chrome wants to (o Claude no Chrome quer…), com a opção de liberar aquele site para a conversa inteira. Leia e aprove.
• Você vê tudo. Uma janela do Chrome se mexe sozinha, ao vivo: é o Claude clicando. As abas dele ficam juntas, num grupo só.
• Ele usa os seus logins. O Claude no Chrome trabalha no seu Chrome de verdade e entra no que você já está logado. Numa tela de login ou num CAPTCHA (aquele teste de "não sou um robô"), ele para e pede para você resolver. Por isso, peça só o que você mesmo faria.

Critério de pronto: o Claude conta, botão por botão, o que aparece em Todos, Bolos, Docinhos e Tortas, e você viu a janela do Chrome clicando sozinha. Quer o print num arquivo? Peça: "tire um print da página e salve no computador", e ele diz onde salvou.

⚠️ O Chrome não é o celular. O Claude no Chrome olha a página no tamanho da janela do Chrome, e a documentação não diz que ele imita a tela de um celular. Para ver como no celular, o print do celular de verdade continua sendo o caminho.

Pulou a Aula 19? Peça para ele abrir o index.html da sua pasta no Chrome. Se ele disser que não consegue abrir um arquivo do computador, fique com o print: ele resolve igual. (O jeito de programador está em "Para ir além".)

Para ver se está tudo ligado, digite /chrome: o painel mostra Status: Enabled (ligado) e Extension: Installed (extensão instalada). Ali também fica a opção Enabled by default (ligado por padrão), para não precisar do --chrome toda vez. Ligado sempre, ele ocupa um pouco da memória de trabalho em toda conversa (Aula 07): prefira ligar quando for usar. Esc fecha o painel.

O uso do computador, em poucas palavras

O uso do computador (computer use) vai além do navegador: o Claude vê a sua tela, clica e digita nos apps, como uma pessoa faria. Está em prévia, só nos planos Pro e Max (não no Team nem no Enterprise). No terminal, funciona só no Mac; no app Claude Desktop, no Mac e no Windows.

• Vem desligado. Para ligar, se um dia precisar: /mcp, computer-use e Enable (ligar). O passo a passo está em "Para ir além".
• Pede licença app por app. Na primeira vez que o Claude precisa de um app na conversa, você escolhe Allow for this session (liberar nesta conversa) ou Deny (recusar).
• Esc para tudo, de qualquer lugar, na hora.

Para a sua página, ele quase nunca é o caminho. O Claude tenta primeiro a ferramenta mais precisa: um conector (Aula 14), depois um comando, depois o Chrome e, só no fim, a tela, que é o caminho mais lento. E, num navegador, o uso do computador só olha, não clica: quem clica na página é o Claude no Chrome.

Para ir além (opcional): imagens, o navegador e o computador por inteiro

🔧 Para ir além (para quem já programa; pode pular): esta parte mostra o que um projeto de programação faz com cada um desses olhos: imagens citadas no pedido, o servidor de desenvolvimento e o localhost, o console e o DOM no Chrome, o uso do computador por inteiro e a prévia do app Claude Desktop. Se você nunca programou, pule direto para o Na prática: tudo o que ele pede já foi explicado acima.

Imagens no pedido

Cada imagem colada vira um chip [Image #N], que você cita pela posição:

[Image #1] é o cabeçalho no celular: o menu cobre o logo. Corrija o CSS
para o menu ficar abaixo do logo em telas com menos de 480px.

Também dá para arrastar o arquivo para o terminal ou dar o caminho no pedido ("analise a imagem docs/mockup.png"). Funciona bem para bug visual, para ir do design ao código ("implemente esta tela com os componentes que já existem no projeto") e para mostrar um erro na tela. Imagem também ocupa contexto (Aula 07).

O servidor de desenvolvimento e o localhost

Durante o desenvolvimento, um site costuma rodar num servidor de desenvolvimento, um programa que mostra o site em teste num endereço do seu computador, como localhost:3000. Para uma página só de HTML, como a da confeitaria, peça "suba um servidor local para esta pasta e abra a página no Chrome": o Chrome passa a abrir a página por um endereço localhost, sem depender do GitHub nem de abrir um arquivo do disco.

O console e o DOM, no Chrome

Com o Claude no Chrome, o Claude lê os erros do console e o DOM (a estrutura que o navegador montou) e corrige o código que causou o erro:

Abra localhost:3000/cadastro, tente enviar o formulário vazio e com um
e-mail inválido, e me diga se as mensagens de erro aparecem. Se houver
erro no console, corrija o código e teste de novo.

• Requisitos por inteiro: a extensão 1.0.36 ou mais nova; Chrome, Edge ou outro navegador Chromium (Brave, Arc, Vivaldi, Opera); um plano direto da Anthropic e o /login. Com chave de API ou com um token do claude setup-token, a integração fica desligada, mesmo com --chrome. Não funciona no WSL nem por provedores como Bedrock, Agent Platform ou Foundry. A extensão precisa estar na mesma conta e na mesma organização do Claude Code (o /status mostra qual).
• O /chrome: mostra o estado da conexão, gerencia as permissões, reconecta a extensão e escolhe o navegador, quando há mais de um (Select browser…). O Enabled by default vale para as próximas sessões, não para a que está aberta; para ter as ferramentas agora, saia e rode claude --chrome.
• Permissões por site: vêm das configurações da extensão. No modo auto, quando o classificador aprova uma ação num site, a extensão pula a própria checagem para aquela ação.
• Mais usos: testar apps em que você está logado (Google Docs, Gmail, Notion), extrair dados de páginas, preencher formulários, mandar arquivos para campos de upload, gravar a sessão como GIF (que mostra tudo o que está na tela, inclusive dados da conta) e salvar prints no disco.

O uso do computador por inteiro

É um servidor MCP embutido, o computer-use, desligado até você ligar:

1. Rode /mcp, encontre o computer-use e escolha Enable. Vale para o projeto, então é uma vez por projeto.
2. Na primeira vez, o macOS pede duas permissões: Accessibility (Acessibilidade, para clicar e digitar) e Screen Recording (Gravação de Tela, para ver a tela). Conceda e escolha Try again. Às vezes, o macOS pede para reiniciar o Claude Code.

Compile o app, abra e clique em cada aba para ver se alguma trava.
Tire um print de qualquer tela de erro.

• App por app: o pedido mostra quais apps, as permissões extras (como a área de transferência) e quantos apps vão ficar escondidos. Terminais e editores ("equivale a acesso ao shell"), o Finder e os Ajustes do Sistema vêm com um aviso extra.
• Níveis fixos: navegadores e plataformas de investimento ficam só na visualização; terminais e editores, só no clique; os outros apps, controle total.
• Parar: o macOS avisa "Claude is using your computer · press Esc to stop". O Esc, de qualquer lugar, ou o Ctrl + C no terminal param na hora e devolvem os apps.
• Enquanto ele trabalha, os outros apps ficam escondidos, e o seu terminal fica visível, mas fora dos prints. Só uma sessão por vez usa o computador, e ela segura a vez até sair.
• Fora do sandbox: roda no seu desktop de verdade. Libere só os apps de que a tarefa precisa. Não funciona no modo -p.

A prévia no app Claude Desktop

No app, o painel Browser abre o site ao lado da conversa. O Claude pode subir o servidor de desenvolvimento e conferir sozinho cada mudança (auto-verify): tira prints, olha o DOM, clica e corrige antes de responder. A configuração fica em .claude/launch.json, que o Claude cria; para desligar a conferência, "autoVerify": false. O painel usa um perfil limpo, sem os seus logins: para agir como você, use o Claude no Chrome.

Na documentação oficial, em inglês: Claude in Chrome, computer use, imagens na conversa e a prévia do app.

Na prática

Use a pasta da sua página (a confeitaria, ou a da sua ideia).

1. No celular, abra a página no ar e procure um defeito, como os botões do filtro cortados. Tire um print e mande para o computador, por e-mail ou pelo WhatsApp. (Pulou a Aula 19? Tire o print da página numa janela estreita do computador.)
2. Abra o terminal, entre na pasta e abra o Claude Code: cd Documents/confeitaria, com o nome da sua pasta, e depois claude. Aperte Shift + Tab uma vez e confira se aparece manual mode on.
3. Arraste o print para a janela do terminal (ou cole com Ctrl + V, Alt + V no Windows) e peça: "No celular, os botões do filtro ficam cortados, como neste print. Arrume sem mudar nada do jeito que a página aparece no computador." Aprove as mudanças.
4. Confira a página no computador, com a janela grande e com ela estreita. Peça: "guarde uma versão com uma mensagem em português explicando o que mudou e envie para o GitHub", e aprove o envio, que a trava pergunta. (Pulou a Aula 19? Só guarde a versão.)
5. Em até 10 minutos, abra a página no celular: os quatro botões do filtro aparecem inteiros.
6. Saia com /exit e abra de novo com claude --chrome. Confira o manual mode on e peça: "Abra no Chrome a página https://seu-usuario.github.io/confeitaria/, clique em cada botão do filtro e me conte o que aparece em cada um." Aprove o pedido Claude in Chrome wants to e acompanhe a janela do Chrome.
7. Digite /chrome e confira Status: Enabled e Extension: Installed. Esc fecha o painel.

Resumo

• Defeito de celular se mostra com um print do celular: mande para o computador e arraste para a janela do terminal, ou cole com Ctrl + V (Alt + V no Windows).
• No pedido, diga o que está errado e o que não pode mudar: "arrume sem mudar nada do jeito que a página aparece no computador".
• Confira no computador, com a janela grande e estreita; guarde uma versão, envie e confira no celular de verdade, em até 10 minutos.
• O Claude no Chrome (claude --chrome) abre a página no seu Chrome, clica e conta o que viu. Cada site pede licença, e ele usa os seus logins. Ele vê a página no tamanho da janela: o celular de verdade continua com o print.
• O uso do computador (prévia, Pro e Max; no terminal, só no Mac) usa os apps da tela, com licença app por app, e o Esc para tudo. Para a página, o Chrome resolve.

Na próxima aula, a conversa sai da sua mesa: você continua pelo celular e manda uma tarefa para a nuvem, que trabalha com o computador desligado.