Sua página e seu dash no ar

O passo a passo da aula. Você copia as mensagens, cola no seu Claude Code, e ele instala, conduz e constrói. Você sai com uma página de venda e um dashboard publicados. Funciona em Windows, Mac e Linux.

Começar Travou em algum ponto?

Antes de tudo

Você só precisa de duas coisas. O resto o seu Claude instala por você.

1. Abra o Claude

Abra o app Claude, vá na aba Code e escolha (ou crie) uma pasta para o projeto da aula, por exemplo com o nome "aula". Pronto: a conversa com o seu Claude começa ali.

Daqui pra frente você só conversa com ele: copie cada mensagem abaixo, cole e aperte Enter. Se você usa o Claude Code pelo terminal, abra o terminal na pasta e digite claude. Sobre o modo: use o Auto em todas as etapas. Ele segue sem te pedir licença a cada passo e para sozinho no que for arriscado. Não use o modo que ignora as permissões (Bypass).

2. Peça pro Claude instalar e conferir tudo

Cole esta mensagem. Ele instala os dois times, o time de design que eles usam e as ferramentas de publicar e de tirar print. Se faltar algo no computador, ele instala também. No fim, testa cada ferramenta de verdade.

Antes de colar, baixe os dois times: na área de membros da Escola, abra a página do Time de criação de páginas e a do Time de dashboards e relatórios. Em cada uma, clique em Baixar. Os arquivos vão para a pasta Downloads do seu computador.

Antes de colar, ajuste embaixo da caixa de mensagem: modelo Sonnet, esforço Médio, modo Auto. Instalar é tarefa simples, não precisa do modelo mais forte.

Quero construir uma página e um dashboard hoje, neste computador. Instala e confere tudo pra mim, na ordem. Me diz o que está fazendo e só me chama se não conseguir sozinho. Descobre qual é o meu sistema e adapta os comandos.

1. Instala os dois times a partir dos arquivos que eu baixei na área de membros da Escola, na minha pasta Downloads: o Time de criação de páginas na pasta ~/.claude/skills/construtor-paginas e o Time de dashboards e relatórios na pasta ~/.claude/skills/criador-dash. Extrai o conteúdo de cada arquivo na pasta dele e confere que o SKILL.md ficou direto dentro dela. Se alguma das pastas já existir, extrai o arquivo novo por cima, sem apagar nenhum arquivo meu.
2. Instala a skill frontend-design da Anthropic com este comando: npx -y skills add anthropics/skills --skill frontend-design --agent claude-code -g -y --copy
3. Instala o wrangler e o playwright (npm i -g wrangler playwright) e baixa o chromium (npx playwright install chromium).
4. Confere se tenho Node 22 ou mais novo, Python e Git. O que faltar, instala pra mim.
5. No fim, roda o verificador de ferramentas das skills construtor-paginas e criador-dash e me conduz no que faltar. Só me diz que está pronto quando tudo que é crítico responder. Aviso de item opcional não trava.

Quando a área avisar versão nova, baixe o arquivo de novo e instale por cima: cole a mesma mensagem com o arquivo novo na pasta Downloads. Pode levar um tempo e, no meio, ele pode pedir sua permissão ou sua senha do computador: aprove. Só siga pro passo 3 quando ele disser que está tudo certo.

3. Sua página (ela começa primeiro)

A página é a que mais trabalha. Por isso ela começa primeiro e continua sozinha enquanto a aula segue. Na mesma conversa do passo 2, cole:

Antes de colar, troque: modelo Opus, esforço Alto, modo Auto. A página é a etapa que mais pensa: texto, visual e revisão. Se o seu plano for o Pro e o limite apertar, troque para Sonnet com esforço Alto e siga de onde parou.

Quero criar uma página de venda para o meu negócio. Usa a skill construtor-paginas e me conduz do começo ao fim: faz as perguntas do briefing, pesquisa páginas reais do meu ramo, monta o plano e para pra eu aprovar. Depois constrói, roda as checagens e o revisor independente e, antes de publicar, me mostra os prints. Entre uma parada e outra, segue sozinho, mesmo que eu esteja fazendo outra coisa. Não inventa preço, depoimento nem número: o que eu não informar vira pendência.

Ele vai fazer seis perguntas sobre o negócio. Responda com fatos reais: o que você vende, onde atende, pra quem, qual a oferta, quanto custa e o que a pessoa faz na página. Este é um exemplo de resposta, de um negócio fictício:

1. Vendo pilates com fisioterapeuta, turmas de até 4 pessoas e aula particular.
2. Niterói, bairro de Icaraí, a duas quadras da praia.
3. Mulheres de 35 a 60 anos com dor nas costas ou que querem voltar a se exercitar com segurança.
4. Oferta: aula experimental gratuita, com avaliação postural antes.
5. Turma 2x por semana a partir de R$ 380 por mês. Particular a partir de R$ 150 a aula.
6. A pessoa agenda pelo WhatsApp.
Não tenho foto, logo nem depoimento.

Onde ele para e você decide

  1. No plano. Depois de pesquisar páginas reais do seu ramo, ele monta um plano e mostra pra você marcar, item por item: as referências de que você gosta, uma de três direções visuais (com prévia), a ordem das seções, a copy com cada frase ligada ao que você contou, se a página vai rodar anúncio e onde ela publica. Nada vira código antes disso.
  2. No fim. Ele mostra os prints da página pronta e você decide se publica.

O que esperar

  • Depois que você aprova o plano, a página segue e termina sozinha, mesmo depois da aula. Pode ir pro passo 4 sem medo.
  • Ele não inventa preço, depoimento nem número. O que você não informou vira uma lista de pendências. Sem foto sua, ele usa foto de banco com licença livre e escreve "imagem ilustrativa" na página, até você mandar as suas.
  • Antes de entregar, as checagens automáticas rodam e um revisor independente confere a página por nove critérios, em até duas rodadas.

4. Seu dash

Com a página rodando, abra uma nova sessão na aba Code, numa pasta nova (por exemplo "dash"), como no passo 1. Nessa conversa nova, cole:

Antes de colar: modelo Sonnet, esforço Alto, modo Auto.

Quero criar um dashboard de marketing com a minha planilha. Usa a skill criador-dash e me conduz do começo ao fim: sobe o painel no meu computador, abre o assistente no navegador e me diz o que responder em cada pergunta. Se ele pedir a chave de administrador, me mostra a que você criou. Se eu ainda não tiver planilha, usa esta de exemplo, com dados fictícios: https://docs.google.com/spreadsheets/d/1DJMgmFfHb0jKhkCM477AI8CDjrY5qquQUikfbg7b9sU/edit. No fim, publica na minha conta da Cloudflare e me entrega o link. Se eu ainda não tiver a conta, constrói e me mostra o painel no meu computador, e a publicação espera.

O que acontece, na ordem

  1. Ele confere as ferramentas.
  2. Sobe o painel no seu computador e abre o assistente no navegador.
  3. Pergunta da sua operação: que área, onde está o dado e que decisão você toma olhando o painel.
  4. Fecha com você a direção do painel: o número que mais importa, o que não entra, a cor e o tema.
  5. Cria a estrutura na sua conta Cloudflare. Aqui abre uma tela de login no navegador. Ainda sem conta? Ele constrói e mostra o painel no seu computador, e a publicação espera você criar a conta.
  6. Publica e te entrega o link.

As quatro perguntas do assistente

  1. O que você quer acompanhar? Marketing, Vendas, Suporte, Financeiro ou Estoque.
  2. Onde estão os seus números? O link de uma planilha do Google ou um arquivo CSV. Planilha com várias abas: abra a aba que vale e copie o link com ela aberta (ele termina em #gid= e um número), que o painel lê essa aba.
  3. Confira as colunas. Dá pra trocar o nome de uma métrica: "Conversões" pode virar "Alunas novas".
  4. Deixe com a sua cara. Nome, logotipo, cor, claro ou escuro, o número em destaque e a meta. A meta vale por mês, a menos que você escolha outro período, e a barra dela é proporcional ao período que estiver na tela. A prévia aparece ao lado enquanto você escolhe.

Ainda não tem planilha? A mensagem acima já traz uma de exemplo, com dados fictícios: quando o assistente pedir onde estão os números, o Claude cola o link pra você. Se for usar a sua, compartilhe como "Qualquer pessoa com o link" antes de colar.

O assistente pede uma chave de administrador logo no começo. É a que o próprio Claude criou quando subiu o painel no seu computador: peça pra ele te mostrar.

Em "Mais opções" você pode pôr uma senha no painel. Depois de criar dois ou mais dashes, o botão "Novo grupo" na lista junta todos num link só, em abas.

Quando o dash estiver no ar, volte na sessão da página: se ela estiver esperando você aprovar o plano ou publicar, é lá que ela te chama.

Travou em algum ponto?

Em qualquer dúvida, mande uma mensagem pro seu Claude. Abra o item, copie e cole.

Deu um erro e eu não sei o que fazer 
Deu este erro: <cola o erro aqui>. Me ajuda a resolver.
Instalei algo e o Claude diz que não encontra 
Instalei uma ferramenta e ela não está sendo encontrada. Me ajuda a resolver e confere se agora está funcionando.
A página parou e o Claude não anda 
A página parou? Me diz em que etapa estamos e o que você está esperando de mim. Se for o plano, me mostra de novo pra eu aprovar.
O Claude diz que o time de design está faltando 
Está faltando a skill frontend-design. Instala de novo para todos os projetos, do jeito certo, e confere se está funcionando.
Apareceu erro de permissão ("EACCES" ou "permission denied") 
Deu erro de permissão (EACCES) ao instalar. Ajusta isso sem precisar de senha de administrador e continua de onde parou.
Apareceu "Address already in use" ao subir o painel 
Apareceu "Address already in use" ao subir o painel. Sobe em outra porta.
O painel foi publicado na conta errada da Cloudflare 
O painel foi publicado na conta errada da Cloudflare. Me mostra em qual conta estamos e me ajuda a trocar pela conta certa.
O navegador de teste abre e fecha na hora 
O navegador de teste abre e fecha na hora. Instala o que falta no meu sistema pra ele funcionar e testa de novo.