← A Trilha
🚧
Rascunho · pendente de revisão humana
Esta página foi gerada com IA e ainda não foi revisada por uma pessoa. O conteúdo pode mudar bastante.

🧪 Sua primeira página com o Claude Code

Você conversa, a IA cria a página, e você vai pedindo mudanças até ela ficar do seu jeito. Tudo no seu computador, pela aba "Code", sem decorar comando nenhum.

🎯 O que você vai ter no final

Uma página HTML sozinha, com visual caprichado, salva numa pasta do seu computador e do jeito que você foi moldando conversando. Tudo pedindo em português, sem decorar comando nenhum e sem gastar nada. Reserve uns 20 a 30 minutos na primeira vez.

Botar a página no ar, num endereço público, é assunto de um capítulo mais à frente. Aqui o foco é o começo de tudo: criar e ir mudando até ela ficar boa.

💻 Seu sistema

Já vem marcado o seu sistema — se estiver errado, é só trocar aqui. Os comandos e atalhos do roteiro se ajustam a ele. O miolo (os pedidos pra IA, criar e ir mudando a página) é igual nos dois.

✅ Antes de começar

💡 As duas telas do instalador do Git que não são "Next"

1. "Choosing the default editor used by Git" — vem marcado o Vim. Se algum dia o git precisar abrir um editor, você cai nele e não consegue nem sair (o próprio instalador avisa, em vermelho, que é difícil de usar). Abra o menu e escolha Notepad.

Menu do instalador do Git mostrando a opção Use Vim (the ubiquitous text editor) as Git's default editor, destacada em vermelho.
Esse menu vem com o Vim. Troque por Notepad.

2. "Adjusting the name of the initial branch in new repositories" — vem marcado "Let Git decide", que usa o nome master. O GitHub hoje usa main. Marque a segunda opção, "Override the default branch name": o campo já vem preenchido com main, não precisa digitar nada.

Tela do instalador do Git com duas opções: Let Git decide, marcada, e Override the default branch name for new repositories, destacada em verde, com o campo preenchido com main.
Marque a segunda opção. O campo já vem com main.

⚠️ Uma terceira tela vale conferir sem mexer: em "Adjusting your PATH environment", a opção do meio (a que diz Recommended) já vem escolhida — é ela que deixa a aba "Code" encontrar o git. Só não troque.

O número de telas pode mudar de uma versão pra outra do instalador. Se a sua tiver uma a mais ou a menos, é normal — o que importa são essas.

1

Criar a pasta onde seus projetos vão morar

uma vez só, serve para todos os projetos futuros

A IA precisa de uma pasta para trabalhar. Vamos criar uma agora, num lugar que não vai te dar dor de cabeça depois. Dois jeitos de fazer a mesma coisa — escolha o que te deixa mais à vontade.

  1. 1Aperte Win + E para abrir o Explorador de Arquivos.
  2. 2Clique na barra de endereço lá em cima (onde aparece o caminho), apague o que estiver lá, digite %USERPROFILE% e aperte Enter. Isso te leva direto para a sua pasta de usuário, algo como C:\Users\voce.
  3. 3Clique com o botão direito num espaço vazio → Novo → Pasta. Chame de projetos.
  4. 4Entre em projetos e crie outra pasta dentro dela, chamada primeira-pagina.
✅ Nos dois caminhos você fica com: C:\Users\seu-nome\projetos\primeira-pagina, vazia. É nela que a IA vai trabalhar.
⚠️ Evite criar dentro de "Documentos" ou da "Área de Trabalho". No Windows atual, essas duas costumam estar sincronizadas com o OneDrive — e o OneDrive mexendo nos arquivos ao mesmo tempo que a IA pode gerar cópias em conflito ou um arquivo momentaneamente travado. Não impede o Claude de funcionar, mas é atrito à toa. Uma pasta direto no seu usuário (o ~ do comando, ou o %USERPROFILE% pelo mouse) normalmente fica fora do OneDrive — por isso a usamos.
💡 Por que sem espaço e sem acento no nome?
Usamos primeira-pagina em vez de "Primeira Página". Nome com espaço ou acento funciona, mas pede cuidado — um espaço, por exemplo, precisa de aspas em quase todo comando, e é fácil esquecer e ver o comando falhar. Enquanto você está começando, um nome simples (minúsculas, sem acento, hífen no lugar do espaço) tira esse tropeço do caminho, sem você nem pensar nele. É o costume de quem trabalha com código, e é por isso.
2

Abrir a sessão apontando para essa pasta

as 4 escolhas antes do primeiro prompt

Abra o Claude Desktop e vá na aba "Code". Antes de mandar a primeira mensagem, ele pede 4 coisas. Não é instalação, é configuração da sessão (a página das ferramentas explica cada uma com calma):

  1. 1Environment → escolha Local. É o seu próprio computador.
  2. 2Project folder → clique em "Select folder" e aponte a pasta primeira-pagina que você acabou de criar. Esta é a única obrigatória.
  3. 3Model → deixe o padrão.
  4. 4Permission mode → deixe em Manual (a opção que pede sua permissão a cada mudança). É o mais cauteloso e já vem selecionado como padrão, então provavelmente você nem precisa mexer. Na primeira vez isso é ótimo: antes de editar um arquivo ou rodar um comando, ele te mostra o que pretende fazer e espera você aprovar.
✅ Você deve ver o nome da pasta primeira-pagina indicado na sessão. Ainda não digite nada.
💡 Sobre trocar de pasta: a pasta é escolhida por sessão. Para mexer em outro projeto, o caminho normal é abrir uma sessão nova e apontar a pasta dele. Cada sessão tem sua própria conversa, sua própria pasta e suas próprias mudanças.
3

Pedir a página

o prompt é o projeto: quanto mais concreto, melhor o resultado

Aqui está o pulo do gato, e vale mais que o resto do roteiro: a página sai boa na medida em que você diz do que ela trata. Se você pedir "faz uma página bonita", a IA inventa o assunto e cai no genérico, porque não tem de onde tirar decisão nenhuma. Se você disser o assunto, o público e para que a página serve, ela tem matéria-prima para escolher cor, fonte e layout.

Copie o prompt abaixo e mande na caixa de mensagem (o assunto é um exemplo, troque à vontade — só mantenha o mesmo nível de detalhe):

Prompt · criar a página
Crie um arquivo index.html nesta pasta: uma página única que é um mini-guia da região da Vila (o centro histórico de Ilhabela) e das praias em volta, em português do Brasil. É o guia de quem vai todo ano e conhece a ilha, não o de folheto turístico. Detalhes que a página precisa passar: - A base é a Vila (o centro histórico à beira-mar) e as praias mais calmas em volta dela. - Precisa ter: as praias que valem a pena por ali (Perequê, Itaguaçu, Engenho d'Água, Saco da Capela); pescar nos píeres (o da Vila, no fim da Rua do Meio, e o do Perequê); comer bem e barato no Cheiro Verde (comida caseira, na Vila); e o pôr do sol no píer do Perequê. - O público é família, que curte sossego e o jeito local, não balada. - Um aviso honesto de quem já foi: leve repelente, os borrachudos de Ilhabela são famosos. Sobre o visual: um clima de mar e ilha, com personalidade. Não precisa ser espalhafatoso, só não pode parecer template genérico. Faça tudo num arquivo HTML só, com o CSS dentro dele — sem usar fontes, imagens ou bibliotecas carregadas de sites externos. E deixe funcionando bem no celular.
💡 Por que o prompt é escrito assim?
O prompt dá assunto concreto (um guia da região da Vila em Ilhabela, de quem vai todo ano — não "uma viagem" genérica), público (família atrás de sossego), o trabalho da página (guiar o passeio) e uma restrição técnica (um arquivo só, sem puxar nada de fora). Os três primeiros são o que dá à IA de onde tirar o visual. O último deixa este primeiro exercício mais simples: CSS é a parte que diz como a página se parece (cores, fontes, espaçamento), e botar tudo num arquivo só significa que não há vários arquivos pra organizar nem links entre HTML e CSS pra digitar errado. Mais adiante, dá pra separar tudo normalmente (HTML, CSS, imagens).
💡 Por que o arquivo se chama index.html?
São duas coisas num nome só, e a segunda vale guardar.

O .html é o formato: é isso que o navegador sabe abrir e mostrar na tela.

Já index não é um nome qualquer que a gente escolheu: é uma palavra especial. Seus arquivos podem se chamar o que você quiser (guia.html, receita.html, qualquer-coisa.html), e cada um desses, para abrir, pede o nome dele no fim do endereço. Já o index.html é o que quase todo serviço de hospedagem entrega sozinho quando o endereço não diz qual arquivo quer: ele é a porta de entrada da pasta. Quem manda nisso é o nome, não o conteúdo. (Não é mágica do HTML, é convenção do servidor.)

Você não vai publicar nada agora — isso é capítulo à frente. Mas quando for, ter chamado de index.html desde já faz o endereço sair limpo, sem o nome do arquivo pendurado no fim.

Ele vai pedir permissão para criar o arquivo. Aceite. Ele escreve o HTML e, no fim, te resume o que fez.

✅ Você deve ver: um arquivo index.html aparecendo na pasta primeira-pagina. É só isso que precisa acontecer aqui.
💡 Se sair com cara de "página de IA" (fundo creme, letra serifada grandona, degradê roxo), não é azar nem limite da ferramenta: é o que ela produz quando o pedido não a obriga a escolher. Reclame como reclamaria com uma pessoa: "isso está parecendo template. É uma ilha no litoral: mar, mata atlântica, barco de pescador. Puxa o visual pra esse mundo." Quanto mais você aponta o mundo da coisa, menos genérico ela fica.
4

Ver a página com os próprios olhos

olhe sempre, a cada mudança

A IA te descreve o que fez, mas descrição não é a página. E você nem precisa sair do Claude para ver com os próprios olhos: a aba "Code" agora tem um navegador embutido (o "Browser pane"), que abre a sua página ali do lado da conversa.

  1. 1No resumo que a IA te deu, clique no caminho do index.html que aparece no chat. A página abre no navegador embutido, dentro da própria janela do Claude. Se o painel não estiver à vista, chame ele com Ctrl + Shift + B ou pelo menu Views.
  2. 2Olhe de verdade: o texto está certo? O visual combina com o que você pediu? Nada quebrado ou apertado? Essa conferência é o passo. Seguir em frente sem olhar é como mandar um e-mail sem reler.
✅ Na maior parte das vezes a página já vai estar ali antes de você pedir: por padrão a IA abre e confere a própria página no painel a cada mudança (é o "auto-verify"). Ainda assim, o olho final é seu — a IA verifica sozinha o funcionamento básico, você julga se ficou bom.

Prefere ver no seu navegador de sempre, em vez do embutido? Também dá — e serve pra ver a página como um visitante veria:

No Explorador de Arquivos, entre na pasta primeira-pagina e dê dois cliques no index.html. Ele abre no seu navegador. A cada mudança que você pedir, aperte F5 ali para atualizar.

💡 Sinal de que ainda é só seu: nos dois jeitos o endereço começa com file:/// — a página está só no seu computador, ninguém mais vê. Deixá-la pública é assunto de um capítulo mais à frente.
5

Pedir ajustes

é aqui que a coisa fica boa de verdade

Quase nunca sai perfeito de primeira, e não precisa sair. O jeito de trabalhar é conversando: você olha, aponta o que incomoda, ele arruma. Sem mexer em código, sem copiar e colar nada.

Alguns pedidos para experimentar (um de cada vez, olhando o resultado entre um e outro):

Prompt · mudar o conteúdo
Põe lá no topo uma linha de "como chegar" pela balsa de São Sebastião. E deixa o Cheiro Verde com o endereço à mostra: Rua da Padroeira, 109, na Vila.
Prompt · mexer no visual
Gostei do conjunto, mas o título está discreto demais para o clima da coisa. Aumenta ele e dá mais presença. E a seção das praias está apertada contra a de baixo, respira mais aí.
Prompt · conferir no celular
Abre essa página numa tela de celular e me diz se está tudo legível e clicável. Se tiver algo quebrado ou apertado, corrige.
💡 A IA confere de verdade, ou só imagina pelo código?
Com o navegador embutido do passo 4, a IA pode abrir a página e olhar — tira print, estreita a tela como num celular, aperta os botões — em vez de avaliar só o código. Se achar algo apertado, corrige e olha de novo. Antes desse navegador, esse tipo de pedido dependia de a IA adivinhar pelo HTML.
💡 Repare no que você acabou de fazer: em nenhum momento você abriu o HTML, procurou a linha certa, editou e salvou. Você olhou e falou. Essa é a diferença entre pedir o HTML no chat e trabalhar na aba Code: lá você seria o carteiro, levando o código da conversa até o arquivo. Aqui ele faz o trajeto inteiro.
6

Dizer como você gosta

preferência geral, que vale pra conversa toda — não só pra um pedaço

No passo anterior você apontou coisas pontuais ("aumenta o título", "abre espaço aqui"). Dá pra ir além e dizer o seu gosto geral — e a IA passa a respeitar isso no resto da conversa, sem você repetir a cada pedido.

Prompt · dizer suas preferências
De modo geral, eu prefiro páginas mais limpas, com bastante espaço em branco e poucos enfeites. Evite cores berrantes e animação à toa. Se eu pedir algo que fuja disso, pode me lembrar.
💡 Isto é dar o seu gosto, não corrigir um erro. "Prefiro assim", "evite aquilo" vale pra página inteira, não só pra um trecho. Quanto mais a IA conhece o seu jeito, menos você precisa repetir — e no próximo capítulo você aprende a deixar isso guardado, pra ela lembrar até em conversa nova.
💡 Peça pra ela discordar de você
A IA tende a concordar e elogiar — é assim que ela foi treinada, e isso engana: você acha que a ideia ficou boa só porque ela topou. Puxe o contra de propósito: "o que tem de ruim nessa escolha?", "me dá dois motivos pra eu não fazer assim". A resposta fica bem mais útil quando você pede o outro lado.

🔜 O que ficou de fora de propósito

Este é o Capítulo 1, e ele para aqui de propósito — criar e ir mudando, no seu computador. O resto é a trilha adiante, um degrau de cada vez:

De onde saiu cada afirmação (verificado em 15/07/2026, revisto em 25/07):