0 de 5 etapas concluídas 0%
Setup do time

Bem-vindo ao time de landings da C01

Em ~10 minutos você fica pronto pra criar e publicar landings via IA. Marca cada etapa conforme avança — o progresso fica salvo nesse navegador.

1

Instalar 2 apps

3 min

Você precisa de 2 apps. Os dois são gratuitos e têm versão pra Mac e Windows.

Baixar Claude Desktop Baixar GitHub Desktop

Depois de instalar, abre cada um e faz login:

  • Claude Desktop: login com a conta da Anthropic (ou cria uma)
  • GitHub Desktop: login com sua conta GitHub
2

Aceitar convite do GitHub

1 min

O Lauro precisa ter te adicionado como colaborador no repositório lauropilatti-c01/lp-c01. Você vai receber 2 emails do GitHub (de [email protected]) com assunto "lauropilatti-c01 invited you to collaborate".

Aceita os 2 convites clicando em "View invitation" e depois "Accept invitation" — um pra lp-c01 e outro pra claude-skills.

Se ainda não recebeu o convite, fala com o Lauro e passa o seu username GitHub (não o email).

Abrir notificações do GitHub
3

Clonar o repositório

2 min

No GitHub Desktop:

  1. Menu superior: File → Clone repository...
  2. Aba URL, cola:
https://github.com/lauropilatti-c01/lp-c01.git
  1. Em "Local path" deixa o padrão (~/Documents/GitHub/lp-c01) ou escolhe outro lugar — anota onde salvou, vai precisar no próximo passo.
  2. Clica Clone. Espera ~30s.
4

Configurar push automático (opcional, 5 min)

5 min

Sem esse setup, depois que o Cowork criar uma landing nova ele te avisa: "feito, abre GitHub Desktop e clica Push origin pra subir o preview". Com PAT configurado, ele pusha sozinho — você só vai abrir a URL preview pra aprovar.

4.1 — Cria um Personal Access Token (PAT) no GitHub:

Criar PAT no GitHub

Configura assim:

  • Token name: lp-c01-cowork
  • Expiration: 90 days (ou maior se preferir)
  • Repository access: "Only select repositories" → lauropilatti-c01/lp-c01
  • Permissions → Repository: Contents: Read and write + Metadata: Read-only

Clica Generate token e copia o token que começa com github_pat_... (só aparece uma vez).

4.2 — Configura o git pra usar o PAT. Abre o Terminal (Cmd+Space → "Terminal") e cola, trocando SEUUSERNAME pelo seu @ do GitHub e SEUTOKEN pelo PAT que copiou:

git config --global credential.helper "store --file=$HOME/.git-credentials" echo "https://SEUUSERNAME:[email protected]" > ~/.git-credentials chmod 600 ~/.git-credentials

Pronto. Pra testar:

cd ~/Documents/GitHub/lp-c01 && git ls-remote origin HEAD

Se imprimir um hash + "HEAD" sem pedir senha, tá OK.

5

Primeiro teste no Cowork

2 min

Abre o Claude Desktop:

  1. Aba Cowork (no topo)
  2. Clica + New task
  3. Em "Trabalhar em um projeto" → Selecionar pasta...
  4. Navega até a pasta lp-c01 que clonou no passo 3 e seleciona
  5. Cola este prompt como teste:
Lista todas as landings que estão no ar em lp.c01.com.br e me mostra o status de cada uma.

Se ele responder com uma tabela das landings ativas, você tá pronto. Manda print pro Lauro confirmar.

Quando quiser criar uma landing, é só conversar em português:

  • "Cria uma landing pra X em /slug"
  • "Adapta essa URL X em /slug"
  • "Edita /slug e troca Y por Z"
  • "Lista as landings ativas"
  • "Auditoria mobile da /slug"

Você não precisa saber HTML, CSS ou design system. O Cowork lê automaticamente as 8 fontes de conhecimento embutidas no projeto e aplica:

  • Identidade visual da marca (Petrobras Vitalício)
  • Quality bar Apple/Linear/Stripe (variação rítmica, page load orchestration, hover signature único, count-up, etc)
  • Copy persuasiva (frameworks AIDA/PAS/Hormozi/Halbert)
  • Voz da marca (3 públicos mapeados, vocabulário use/evite)
  • Anti-emoji, mobile-first, acessibilidade WCAG AA

Toda landing nova nasce em branch preview primeiro. Você abre URL preview, valida, fala "publica" → vai pra produção.

Detalhes técnicos: Pipeline no brandbook · Quality bar · SETUP.md no repositório.

Tudo pronto! 🎉

Você concluiu o setup. Daqui pra frente é só conversar com o Cowork pra criar landings. Se travar em alguma coisa, dá uma olhada no FAQ abaixo ou chama o Lauro.

Abrir o repositório no GitHub

Por trás do sistema

O que rola quando você fala com o Cowork — e por que isso muda tudo em comparação a usar IA "do nada".

O que acontece em ~2 minutos

  1. Você fala em português normal: "cria landing pra Maratona Petrobras Vitalício em /maratona".
  2. O Cowork detecta palavras-chave no prompt (ex: petrobras, vitalício) e ativa o knowledge base do produto correspondente.
  3. Lê automaticamente 13+ arquivos do repositório: regras gerais de copy/design + KB do produto (voz, oferta, provas, objeções) + design system visual.
  4. Gera HTML+CSS aplicando voz REAL do criador, oferta REAL, depoimentos REAIS — nada inventado.
  5. Cria branch preview/<slug>, faz commit, push pro GitHub.
  6. Cloudflare Pages gera URL preview em ~30s. CI roda audit-mobile + Lighthouse e posta scores no commit.
  7. Você abre a preview, valida, fala "publica" → merge na main → produção.

A diferença real: sem o sistema vs com o sistema

A mesma instrução ("cria landing pra Petrobras Vitalício") gera resultados muito diferentes dependendo se a IA tem ou não acesso ao knowledge do produto. Compare:

Sem o sistema · IA "pelada"

Hero genérico de IA

"Realize seu sonho de trabalhar na Petrobras! Aprovação garantida com nossa metodologia inovadora. Junte-se aos milhares de aprovados."
  • Persona inventada ("Maria, 32 anos, RJ")
  • Promessa falsa ("aprovação garantida")
  • Tom genérico de "guru motivacional"
  • Zero números reais
  • "Milhares" — quantos? Não sabe
  • Não soa como ninguém — soa como IA
Com o sistema · KB ativado

Hero com voz e provas reais

"Bruna era mãe de bebê recém-nascido. Estudou. Passou. Você não estuda PARA passar — estuda ATÉ passar. Acesso vitalício por 21x R$ 192,76. 198 aprovados em 2022."
  • Bruna é aluna real (depoimento da CPL 03)
  • "Estuda ATÉ passar" — frase do Will
  • Preço transparente, parcela exata
  • 198 aprovados — número real do C01
  • Quebra objeção de tempo sem inventar
  • Soa como o Will falando — porque foi ele

O que vive no repositório (não inventamos nada)

Toda decisão criativa, toda promessa, todo número que aparece em landing tem origem em um destes arquivos. Princípio de não-invenção: se não está documentado, não vai pra landing.

Regras gerais

  • frontend-quality-bar.md — barra Apple/Linear/Stripe
  • copy-rules.md — frameworks de copy (AIDA/PAS/Hormozi)
  • frontend-rules.md — HTML/CSS, mobile-first
  • brand-voice-rules.md — voz C01 (3 públicos)

KB do produto

  • big-idea.md — promessa central
  • tom-de-voz-will.md — voz REAL do Will
  • briefing.md — 6 personas + awareness
  • oferta.md — preços, parcelas, garantia
  • provas.md — depoimentos com nome próprio
  • objecoes.md — top 12 objeções + respostas
  • swipe-file.md — 100+ headlines prontas
  • historia.md — origem 2015 Engem Marinha
  • raw-cpls/ — transcrições brutas das aulas

Design system

  • tokens.css — cores, fontes, componentes
  • SYSTEM.md — regras de marca
  • EXAMPLES.md — como aplicar
  • icons.md — biblioteca SVG (anti-emoji)

Como o time melhora isso ao longo do tempo

O sistema é vivo. Cada landing nova, cada feedback, cada CPL gravada deixa o sistema um pouco melhor pra próxima geração.

Quando você cria landing nova

Se precisa de um componente que ainda não existe no design system (ex: card de aula com thumb, countdown, FAQ accordion), o Cowork cria local e propõe promover pro DS canônico no relatório final.

Ex: "Criei .btn-calendar. Promove pro DS pra outras landings usarem?"

Quando o Will grava CPL nova

Transcrições viram raw-cpls/ dentro do KB do produto. A síntese (oferta, provas, voz) é atualizada pra capturar coisas novas que ele falou.

Will grava → transcrição vira knowledge → próxima landing já usa as frases novas.

Quando uma copy converte muito

Se uma headline ou abertura performa bem em campanha paga, vira frase canônica no swipe-file.md. Próxima landing já considera ela como referência testada.

Quando aparece objeção nova

Lead pergunta algo que não tá em objecoes.md? Adiciona. Próxima landing já antecipa essa dúvida sem precisar refazer pesquisa.

Quando produto novo entra

Mesma estrutura de pasta replicada: docs/products/<produto>/ com os 9 arquivos. Skill detecta keywords novas e ativa o KB certo automaticamente.

Quando algo dá errado

Cowork inventou número? Copiou tom errado? Falhou em algo? Fala no chat. O Lauro atualiza a regra no arquivo certo. Erro vira regra.

Como você pode contribuir

  1. Quando ver landing publicada, dá um olhar crítico: "isso parece feito por IA preguiçosa?". Se sim, fala. Vira regra nova no brand-voice-rules.md.
  2. Quando ouvir o Will (ou outro criador) falar uma frase boa em live, CPL ou Instagram, manda pro Lauro. Vira swipe canônico.
  3. Quando aparecer pergunta nova de aluno/lead que a landing não responde, adiciona em objecoes.md ou avisa o Lauro pra adicionar.
  4. Quando converter algo (headline, oferta, ângulo de campanha), avisa. Vira referência testada pras próximas.
  5. Quando criar landing nova e o Cowork propor promoção de componente, decide rápido — não deixa o design system estagnar.

Resumindo: isso não é uma ferramenta que você usa, é um sistema que você ajuda a treinar. Quanto mais o time usa e dá feedback, melhor ele fica. Daqui a 6 meses, a primeira landing que sair vai ser visivelmente melhor que a de hoje — porque tudo que aprendermos no caminho vira knowledge persistente no repositório.

Perguntas comuns

O que é "branch preview"?

Toda landing nova é criada numa branch preview/<slug> primeiro. Isso gera uma URL temporária (ex: preview-minha-landing.lp-c01.pages.dev) pra você revisar antes de publicar em produção. Quando aprova, dá merge na main e a landing vai pra lp.c01.com.br.

2 pessoas podem trabalhar ao mesmo tempo?

Sim, desde que em landings diferentes. Cada landing fica numa branch separada, sem conflito. Mas evite editar a MESMA landing simultaneamente — combina no Slack/WhatsApp quem vai cuidar de cada uma.

Preciso fazer git pull antes de cada sessão?

Não. O Cowork roda git pull automaticamente como passo 0 de toda task — antes mesmo de criar a branch nova. Você não precisa fazer nada. O GitHub Desktop serve só pra visualizar histórico ou se você quiser dar Push manual quando o PAT não tá configurado.

Como funciona o fluxo de aprovação?

Toda landing nova é criada numa branch preview/<slug> primeiro — gera URL temporária pra você revisar. Você abre, valida, e quando quiser publicar, fala "publica" no Cowork. Aí ele faz merge na main e a landing vai pra lp.c01.com.br/<slug>. Se algo não tá bom, fala o que mudar e o Cowork edita na mesma branch preview.

Vou ver scores de qualidade automáticos?

Sim. Em ~1 minuto após o push, aparecem 2 comentários no commit em github.com:

  • Audit Mobile — score 0-100 (alvo ≥88) com lista de issues se houver
  • Lighthouse — performance / a11y / best-practices / SEO (alvo ≥85 em todas)

O Cowork também declara no relatório final dele um checklist de 12 itens de qualidade visual (variação rítmica, hover signature único, page load orchestration, count-up, etc). Mínimo 9/12.

O Cowork errou alguma coisa. Como ajusto?

Volta no chat e fala o que tá errado, em português normal. Ex: "o card 3 ficou com texto cortado no mobile, ajusta". Ele edita a mesma landing e faz novo commit.

O que faz se o audit-mobile vier abaixo de 85?

O comentário no commit em github.com lista os problemas. Cola eles no Cowork e fala "corrige esses issues do audit". Ele aplica os fixes e faz novo commit. O CI roda audit de novo automaticamente.

Posso publicar direto na produção, pulando preview?

Não recomendado. O ciclo preview → aprovar → publicar é a rede de proteção pra não subir página quebrada. Mas em emergência, fala com o Lauro — ele consegue mexer direto na main.

Onde fica o design system?

Na pasta docs/design-systems/ dentro do repositório. Cada produto/marca tem sua própria pasta com tokens, exemplos e ícones. Hoje temos petrobras-vitalicio ativo.

Eu preciso saber HTML/CSS pra usar isso?

Não. O Cowork escreve todo o código. Você descreve o que quer em português e ele monta. Se quiser entender o que tá rolando por baixo, dá uma olhada nos arquivos em public/<slug>/, mas não é obrigatório.