caderno secreto · claude code · aula 01

Construindo o site da We Love Chile do zero ao ar, print por print.

Este caderno é o diário de bordo da aula: cada etapa da construção do site da We Love Chile registrada com o print real do momento, do primeiro comando até o site no ar. Acompanha os registros e compara com a construção do seu.

BLOCO 01

O combinado: eu construo o da WLC, você constrói o seu

Nada de assistir deitado no sofá: pasta criada, terminal aberto, e o time de WeAgents inteiro em campo com você no papel de diretor.

Larry criando a pasta do projeto e abrindo o Claude Code dentro dela, em ilustração 3D dos WeAgents — cena 1.1Larry criando a pasta do projeto e abrindo o Claude Code dentro dela

Bloco 01a missão aceita, a pasta existe

BLOCO 02

Inteligência competitiva: o Pax rasgando o mercado

Antes de escrever uma linha, o Firecrawl levanta os melhores sites de passeios do mundo, a matriz de avaliação pontua todos, e sai o relatório do que os top 5 fazem que os piores não fazem.

prompt · pesquisa competitiva (texto completo nos entregáveis da aula)

# o Pax assume com o Firecrawl conectado
› quero criar o site da We Love Chile...
› matriz de avaliação + top 5 + o que os melhores fazem
→ me entregue o relatório em um HTML premium

Relatório da matriz de concorrentes aberto no navegador — print 2.1O relatório da matriz de concorrentes que o Pax entregou: 25 sites pontuados em 9 critérios.

O Pax entrega o dossiê e recebe de volta uma resposta curta, sem o posicionamento de bandeja, em ilustração 3D dos WeAgents — cena 2.2O Pax entrega o dossiê e recebe de volta uma resposta curta, sem o posicionamento de bandeja

Bloco 02o mercado provou o que funciona

BLOCO 03

O brief em dois arquivos: principios.md e a constituição da marca

Tudo que o relatório ensinou vira principios.md, e a identidade da WLC (paleta, Lufga e Chalkiez, tom de amiga que já foi ao Chile) vira o arquivo de marca que a Iris guarda: a constituição que todo artefato referencia.

Arquivo principios.md aberto no editor de código — print 3.1O principios.md: o que o mercado provou que funciona, virado instrução.

Arquivo marca.md aberto no editor de código — print 3.2O marca.md: paleta, tipografia e voz da We Love Chile, a constituição da marca.

Bloco 03a memória externa do projeto existe

BLOCO 04

O CLAUDE.md do projeto: as regras permanentes

O manual que o Claude lê toda sessão: use a skill de design antes de codar, teste em localhost numa porta alta livre, só faça push quando eu mandar. Máximo de 200 palavras, poder de lei.

Arquivo CLAUDE.md do projeto aberto no editor de código — print 4.1O CLAUDE.md do projeto: as regras permanentes que o Claude lê toda sessão.

Bloco 04o projeto tem manual

BLOCO 05

O hack dos 3 agentes: três estratégias, uma vencedora

Três terminais nomeados, três sabores de verdade: o Claude puro guiado pelos princípios, um site que a gente ama como inspiração de estrutura, e um DESIGN.md pronto como linguagem visual. Cada um constrói na sua pasta, a gente abre os três e escolhe.

terminais · três versões em paralelo

› terminal 1 · claude puro → pasta /1
› terminal 2 · html de referência → pasta /2
› terminal 3 · design.md pronto → pasta /3
✓ abre cada um num localhost e compara

abrir em aba nova ↗

As três versões rodando de verdade, uma por aba: clica e compara sem sair do caderno. Se aparecer em branco é porque os previews locais não estão de pé; depois do deploy, essas URLs trocam pelas públicas.

Primeira versão do site da We Love Chile aberta no navegador — print 5.1Versão do Claude puro, guiado pelos princípios e pelo design system da marca.

Segunda versão do site da We Love Chile aberta no navegador — print 5.2Versão que copia a estrutura do melhor concorrente do ranking, com a nossa marca.

Terceira versão do site da We Love Chile aberta no navegador — print 5.3Versão construída sobre o rigor de um design system pronto, com as cores e fontes da marca mandando.

A versão vencedora do site aberta no navegador, com selo de vencedora na janela — print 5.4A vencedora: a versão construída sobre um design system pronto. Ganhou pelo rigor de espaçamento e hierarquia que as outras duas não tinham, sem perder as cores e as fontes da marca.

Bloco 05três sabores, um campeão

BLOCO 06

Deploy, git e domínio: a URL de verdade

O Vex passa o pente de segurança, o repositório nasce no GitHub (o save game do projeto), o deploy sobe, e o Dom conecta o domínio próprio com redirect 301 e cadeado HTTPS.

prompts · publicação

› conecta no GitHub via CLI e cria o repo
› publica o site e me guia no deploy
› instala analytics e speed insights
✓ conecta o domínio próprio + 301 + https

O repositório nasce no GitHub: o save game do projeto, em ilustração 3D dos WeAgents — cena 6.1O repositório nasce no GitHub: o save game do projeto

Site da We Love Chile publicado, com a URL na barra do navegador — print 6.2O site no ar, na URL de verdade.

O domínio próprio conectado, com cadeado e propagação, em ilustração 3D dos WeAgents — cena 6.3O domínio próprio conectado, com cadeado e propagação

Bloco 06commit + push = site no ar

BLOCO 07

Skills de UX e SEO em paralelo, e a conversão

Dois agentes ao mesmo tempo: um passa o site inteiro pelas skills de UI/UX, o outro otimiza o SEO pra "passeios em Santiago" e família (avisados um do outro pra não brigarem pelo copy). E a passada de conversão: H1 curto, um CTA só, prova social perto do botão.

Dois agentes em paralelo: um passa o site pelas skills de UI e UX, o outro cuida do SEO, em ilustração 3D dos WeAgents — cena 7.1Dois agentes em paralelo: um passa o site pelas skills de UI e UX, o outro cuida do SEO

O antes e depois da primeira dobra: um H1 curto, um CTA só, prova social perto do botão, em ilustração 3D dos WeAgents — cena 7.2O antes e depois da primeira dobra: um H1 curto, um CTA só, prova social perto do botão

Bloco 07bonito, ranqueável e vendedor

BLOCO 08

Auditoria crítica: a janela com olhar de crítico

Uma janela nova, contexto limpo, e o pedido: encontre inconsistências, copy que não faz sentido e design que escorregou, numa lista crítica/alta/média/baixa. A paixão de quem construiu esconde defeito; o crítico acha.

A auditoria crítica em contexto limpo, com a lista separada por prioridade, em ilustração 3D dos WeAgents — cena 8.1A auditoria crítica em contexto limpo, com a lista separada por prioridade

O site final depois das correções: o resultado da aula, em ilustração 3D dos WeAgents — cena 8.2O site final depois das correções: o resultado da aula

Bloco 08o site sobreviveu ao crítico

fechamento

Em momento nenhum a gente programou. A gente pesquisou, decidiu e dirigiu.

O mercado ensinou, o brief guardou, três estratégias competiram, uma venceu, e o site da We Love Chile foi do zero ao ar com o time inteiro em campo. Cada print deste caderno é de construção real, sem ensaio: o que você acompanhou aqui foi o processo verdadeiro, com os acertos e as correções no meio do caminho.

te vejo na aula de design.

abrir a Aula 02 · design para sites →