Aula 22O Claude vendo a sua página

🖥️ Versão Desktop. Nesta aula, tudo acontece no seu celular e na aba Code do app Claude Desktop: na caixa de mensagem, no painel Browser e em Settings. Você não digita nenhum comando: o envio para o GitHub aparece num pedido de licença, e você aprova, como na Aula 19.

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 painel Browser e conferir sozinho, com licença para os sites de fora
• 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 painel Browser ou 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 painel Browser.

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.
• O painel Browser já vem no app.
• O uso do computador fica só na leitura: ele está em prévia, nos planos Pro e Max, no Mac e no Windows.

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: com a página aberta no painel Browser, arraste a borda do painel até ele ficar estreito, perto da largura de um celular, e tire o print, como na Aula 04 (no Mac, Command + Shift + 4; no Windows, Windows + Print Screen). O painel não fica tão estreito? Faça o mesmo no seu navegador de sempre: abra a página com dois cliques no index.html e estreite a janela.

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

Na aba Code, clique em + New. Na linha abaixo da caixa de mensagem, escolha Local e a pasta da sua página. Antes da primeira mensagem, escolha Manual no seletor de modo, na mesma linha.

Leve o print para a caixa de mensagem 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 painel Browser. Peça "abra a página no painel Browser", ou clique no caminho do index.html quando ele aparecer na conversa. Com o painel largo, nada mudou. Depois, arraste a borda do painel para estreitá-lo: 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 pede licença antes do envio, na conversa: 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, no painel estreito (ou na janela estreita do navegador). Guarde a versão e pule o envio.

O Claude olhando sozinho: o painel Browser

Com o print, quem olha ainda é você. No painel Browser, o navegador que fica dentro do app, ao lado da conversa, o Claude abre a página, clica nos botões, tira prints e conta o que viu. Para abrir o painel, aperte Command + Shift + B no Mac (Ctrl + Shift + B no Windows) ou clique em Browser, na barra de título da conversa.

Peça:

Abra no painel Browser a página https://seu-usuario.github.io/confeitaria/, confira o filtro e me mostre um print.

O que acontece:

• Os arquivos da sua pasta abrem sem pedir licença. Os sites de fora pedem, e a página no ar é um site de fora: na primeira vez, aparece um cartão, e o Claude espera a sua escolha. Allow once (permitir uma vez) libera só aquela ação, sem guardar nada; Always allow (permitir sempre) guarda a liberação daquele site neste computador; Deny (recusar) não deixa. Cada site pede a sua.
• Você vê tudo, no painel, ao lado da conversa.
• O painel não usa os seus logins. Ele é um navegador limpo, separado do seu, sem as suas senhas salvas nem o seu histórico. E, mesmo num site liberado, o Claude não compra nada, não cria contas e não passa por CAPTCHAs (aquele teste de "não sou um robô") sem você.

Critério de pronto: o Claude responde com o que aparece em Todos, Bolos, Docinhos e Tortas e com um print da página, e você viu o painel clicando sozinho.

⚠️ O painel não é o celular. Arrastar a borda do painel dá uma ideia, mas a documentação não promete 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 abrir o index.html da sua pasta no painel: ele abre sem cartão nenhum.

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 Mac e no Windows.

• Vem desligado. Para ligar, se um dia precisar: em Settings (configurações), This computer → System, ligue Enable computer use. No Mac, o sistema pede ainda duas licenças, que a aula mostra 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, se estiver configurado, depois o simulador, para apps de iPhone, e, só no fim, a tela, que é o caminho mais lento. E, num navegador, o uso do computador só olha, não clica: para a página, o painel Browser resolve.

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 no pedido, a prévia com o servidor de desenvolvimento e o localhost, os sites de fora no painel, o Claude no Chrome para usar os seus logins e o uso do computador por inteiro. Se você nunca programou, pule direto para o Na prática: tudo o que ele pede já foi explicado acima.

Imagens no pedido

No pedido, fale da imagem anexada:

A imagem anexada é 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.

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).

A prévia: o servidor de desenvolvimento e o localhost

Durante o desenvolvimento, um site costuma rodar num servidor de desenvolvimento, que mostra o site em teste num endereço do seu computador, como localhost:3000. No app, o Claude sobe esse servidor e abre o site no painel Browser. Por padrão, ele confere sozinho cada mudança (o auto-verify): tira prints, olha o DOM, clica, preenche formulários e corrige o que encontra antes de responder.

• A configuração fica em .claude/launch.json. O Claude cria uma sozinho; edite se o projeto usa outro comando (como yarn dev) ou outra porta. Para desligar a conferência, "autoVerify": false no arquivo, ou Auto-verify changes, no menu ⋮ do painel.
• O menu Dev servers, no cabeçalho do painel, inicia e para os servidores, um por um ou todos.
• O perfil limpo esquece os logins quando você fecha o app. Para não entrar de novo a cada vez, ligue Keep cookies no menu ⋮ do painel; para apagar o que ele guardou, Clear browsing data. Para desligar o painel de vez, Browser tools, em Settings → Claude Code.
• Numa sessão local, um clique no caminho de um HTML, de um PDF ou de um vídeo abre o arquivo no painel. Numa sessão SSH, o Claude não abre o app no painel.

Os sites de fora no painel

• O painel tem abas: dá para abrir a documentação de uma biblioteca ou o seu sistema de tarefas ao lado do app, e entrar em sites, inclusive pelo login do Google.
• Em qualquer modo, uma checagem de segurança revisa o que o Claude clica e digita em sites de fora; se ela desconfiar, você recebe um pedido de licença. Fora do Auto e do Bypass permissions, há ainda uma lista de sites conferida antes de ele entrar num site novo.
• Na primeira vez que você clica num link de fora na conversa, o app pergunta se os links abrem no painel ou no seu navegador. Para mudar depois, Open links in built-in browser, no menu ⋮ do painel. Command + clique (Ctrl + clique no Windows) abre direto no seu navegador.
• Command + Shift + S (Ctrl + Shift + S no Windows) seleciona um elemento da página no painel.

O Claude no Chrome, para usar os seus logins

O painel é feito para construir e testar o app e para sites que não precisam da sua identidade. Para o Claude agir como você, nas contas em que você já está logado, a documentação indica a extensão Claude in Chrome, que usa os logins do seu navegador. Quando ela está configurada, o Claude a usa nas tarefas de navegador. A ligação da extensão é descrita para a versão do terminal (claude --chrome) e para o VS Code.

O uso do computador por inteiro

1. Atualize o app (no Mac, Claude → Check for Updates; no Windows, Help → Check for Updates) e reinicie.
2. Em Settings → This computer → System, em Computer use, ligue Enable computer use. No Windows, já vale na hora. Não aparece? Confira se o plano é Pro ou Max e se o sistema é Mac ou Windows.
3. No Mac, conceda Accessibility (Acessibilidade, para clicar e digitar) e Screen Recording (Gravação de Tela, para ver a tela). A página de Settings mostra o estado de cada uma; um clique no aviso abre o painel certo dos Ajustes do Sistema.

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

• Níveis fixos por tipo de app: navegadores e plataformas de investimento ficam só na visualização; terminais e editores de código, só no clique; os outros apps, controle total. Terminais, o Finder (ou o Explorador de Arquivos) e os Ajustes do Sistema vêm com um aviso extra.
• Denied apps: na mesma seção de Settings, a lista dos apps que o Claude não pode usar, sem nem perguntar.
• Unhide apps when Claude finishes: enquanto ele trabalha, os outros apps ficam escondidos e voltam no fim. No Mac, o uso do computador também roda em segundo plano, nos apps aprovados, enquanto você segue trabalhando.
• Só uma sessão por vez usa o computador. Nas sessões abertas pelo Dispatch, a licença de um app vale 30 minutos.
• Apps de iPhone: o painel iOS Simulator (no Mac, com o Xcode) roda o app no simulador sem usar a tela, e não precisa do uso do computador.
• Fora do sandbox: roda no seu desktop de verdade. Libere só os apps de que a tarefa precisa.

Na documentação oficial, em inglês: Preview your app, Browse external sites, Let Claude use your computer e o iOS Simulator.

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 no painel estreito.)
2. Na aba Code, clique em + New. Na linha abaixo da caixa de mensagem, escolha Local e a pasta da sua página. Antes da primeira mensagem, escolha Manual no seletor de modo, na mesma linha.
3. Arraste o print para a caixa de mensagem (ou + → Add files or photos) 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. Abra a página no painel Browser e confira com o painel largo e estreito. 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. (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. Peça: "Abra no painel Browser a página https://seu-usuario.github.io/confeitaria/, confira o filtro e me mostre um print." No cartão do site, escolha Allow once. (Pulou a Aula 19? Peça o index.html da sua pasta, que abre sem cartão.)
7. (Opcional, Pro ou Max) Abra Settings → This computer → System e encontre a seção Computer use, sem ligar nada.

Resumo

• Defeito de celular se mostra com um print do celular: mande para o computador e arraste para a caixa de mensagem, ou use + → Add files or photos.
• 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 painel Browser, largo e estreito; guarde uma versão, envie e confira no celular de verdade, em até 10 minutos.
• No painel Browser, o Claude abre a página, clica e mostra um print. Os arquivos da pasta abrem direto, e cada site de fora pede licença: Allow once, Always allow ou Deny. O painel dá uma ideia do celular, mas a palavra final é do print do celular de verdade.
• O uso do computador (prévia, Pro e Max, no Mac e no Windows) liga em Settings → This computer → System, pede licença app por app, e o Esc para tudo. Para a página, o painel Browser 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.