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 o seu painel publicado e a sua página a caminho: ela termina sozinha depois da aula e te chama para publicar. 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, ajuste na linha embaixo da caixa de mensagem: modelo Sonnet, esforço Médio, modo Auto. O esforço fica dentro do seletor de modelo: clique no nome do modelo para ver. 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 de skills a partir do GitHub: https://github.com/ojuliocouto/skill-construtor-paginas na pasta ~/.claude/skills/construtor-paginas e https://github.com/ojuliocouto/skill-criador-dash na pasta ~/.claude/skills/criador-dash. Se alguma das pastas já existir, atualiza com git pull.
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. Instala também o Pillow e o numpy no Python que o construtor-paginas usa: o verificador chama de opcional, mas a página precisa deles.
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.

Se você já tinha instalado os times antes, ele atualiza para a versão de hoje. Pode levar um tempo. Se o computador abrir uma janela pedindo permissão ou a sua senha, digite a senha nessa janela. Nunca escreva a senha na conversa. Se ele pedir para você rodar um comando no Terminal, cole lá, espere terminar e responda "feito". 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. Ela para duas vezes para você decidir: no plano, uns 10 minutos depois do começo, e no fim, para publicar. 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. No plano Pro, use Sonnet com esforço Alto desde o começo: a página e o painel gastam o mesmo limite.

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. Veja o formato neste exemplo, de um negócio fictício. Se você não tem negócio e quer só treinar, copie o exemplo inteiro, com a última linha:

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.
Negócio fictício de teste: sim

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, o texto da página (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.

Quando ele mostrar o plano, cole:

Abre a imagem das três direções pra eu ver. Depois me pergunta, uma coisa por vez, o que eu preciso decidir no plano: as referências, a direção, a ordem das seções, o texto, anúncio e onde publicar. Quando eu responder tudo, marca o plano e segue sozinho.

O que esperar

  • Depois que você aprova o plano, ele constrói primeiro o topo da página, no computador e no celular, em poucos minutos. Para ver, peça: "me mostra o print do topo".
  • Do plano aprovado até o fim, ela leva cerca de 1 hora de trabalho dele. Ela segue sozinha, mesmo depois da aula, e no fim te chama para publicar. Deixe o computador ligado e o app aberto. Vá para o passo 4 só depois de aprovar o plano.
  • 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. Se sobrar só detalhe pequeno, ele conserta, confere no print e entrega.

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 o arquivo de exemplo de marketing que vem com o time (examples/marketing-60d.csv, na pasta do painel; ele termina hoje) e me diz onde ele está, pra eu escolher no assistente. 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 e cria a pasta meu-dash, na sua pasta de usuário, com dados de exemplo que terminam hoje.
  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, o tema e se você olha o painel todo dia ou uma vez por semana. Depois pergunta o modo dos dados: responda "ao vivo".
  5. Cria a estrutura na sua conta Cloudflare. Aqui abre uma tela de login no navegador. Na página da Cloudflare, clique em Allow (Permitir) logo. 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.

O assistente pede uma chave de administrador logo no começo. O Claude cria uma chave para o painel no seu computador e outra para o painel publicado. Peça: "me mostra a chave de administrador deste endereço". Depois de publicar, o assistente pode abrir de novo no endereço publicado: responda as mesmas coisas.

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 salva em .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). Assim 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 desse número. A meta vale por mês, a menos que você escolha outro período. Em 7 dias e 30 dias, a barra compara com a parte proporcional da meta. Meta de custo, como CPA, não muda com o período. A prévia aparece ao lado enquanto você escolhe.

Ainda não tem planilha? A mensagem acima usa o arquivo de exemplo de marketing que vem com o time, com dados fictícios até hoje: no assistente, escolha o arquivo e envie. Se for usar a sua planilha do Google, compartilhe como "Qualquer pessoa com o link" antes de colar o link.

No painel pronto, os atalhos Hoje, 7 dias e 30 dias comparam com o período anterior. No celular, eles ficam no botão Filtros. Em "Mais opções" você pode pôr uma senha no painel. Com senha, o endereço muda: use o link novo que ele mostra. Depois de criar dois ou mais painéis, o botão "Novo grupo" na lista junta todos num link só, em abas.

Quando o painel estiver no ar, volte na sessão da página. Se ela estiver esperando você publicar, é lá que ela te chama. O app avisa quando uma sessão para.

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

Primeiro feche o app Claude e abra de novo. Volte na mesma conversa pela barra lateral e cole:

Reabri o app. Confere de novo as ferramentas e continua de onde parou.
O Claude diz que o modo Auto bloqueou uma instalação 
Eu pedi essa instalação e autorizo. Tenta de novo. Se bloquear outra vez, me diz o comando, que eu troco para o modo Manual e aprovo.
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.