Do zero ao seu primeiro SaaS no ar.

Vibe coding é descrever o que você quer em português e deixar a IA escrever o código. Seu trabalho deixa de ser digitar e passa a ser dirigir: dizer o que quer, conferir o resultado e pedir o ajuste. Na imersão, a gente constrói um SaaS: um sistema na internet que várias barbearias usam ao mesmo tempo, cada uma com a sua conta.

1. Olhe a planta: duas telas, um sistema. O cliente marca o horário no celular; o barbeiro vê a agenda num painel com login.
2. A cada capítulo, um print mostra o que ficou pronto. No final, os prints contam a construção inteira.
3. Pense em outro negócio que vive de horário marcado (salão, estúdio de tatuagem, pet shop): ele volta no capítulo 12.

Pronto quando: Você sabe o destino: um sistema de agendamento com login, banco de dados e no ar.

Dica: Mande no chat outro negócio que vive de horário marcado.

Na turma de 25/09 · 10h20

“Hoje a única linguagem que tu precisa saber é português.”

Os três usam IA, mas trabalham de jeitos diferentes. O chat (ChatGPT, Claude no navegador) responde: você copia a resposta e cola nos arquivos. O Claude Code executa: roda no terminal, dentro da pasta do projeto, e cria, testa e corrige os arquivos sozinho. O Overclock é um ADE: o escritório onde vários agentes (Claude Code, Codex, Gemini) trabalham ao mesmo tempo, cada um num painel que você vê. Ele não substitui o Claude Code: coordena os agentes que você já tem.

1. Mande o pedido deste capítulo no chat do navegador.
2. Mande o mesmo pedido num pane do Overclock.
3. Compare: o chat devolve um código pra você copiar; o pane cria o arquivo e abre sozinho.

Crie um arquivo chamado teste.html com um botão vermelho grande escrito "Funcionou!" e abra no navegador.

Pronto quando: No chat, um bloco de código pra copiar. No Overclock, o arquivo teste.html criado e aberto no navegador. Essa é a diferença.

Dica: O chat continua ótimo pra pensar e tirar dúvida. Pra construir, você quer um agente que mexe nos arquivos.

Na turma de 25/09 · 10h27

“Se você está começando do zero, saiba que você pode vibe codar inclusive dentro do chat. Copia e depois cola. Foi assim que eu comecei.”

O Overclock é um programa que você instala no seu computador, no Mac ou no Windows. Por baixo, cada agente roda um motor, a CLI: o do Claude é o único obrigatório hoje. Na primeira vez que você abre, o Modo Guiado confere os motores e pergunta onde guardar os arquivos.

1. Entre em overclock.sh, faça login e baixe a versão do seu computador: .dmg no Mac, .exe no Windows.
2. Mac: arraste o ícone pra pasta Aplicativos. Windows: Avançar, Instalar, Concluir.
3. Aviso na primeira vez é normal. Mac: Ajustes do Sistema › Privacidade e Segurança › Abrir mesmo assim. Windows: Mais informações › Executar mesmo assim.
4. Instale o motor do Claude com o comando do seu sistema, ou deixe o Modo Guiado instalar com um clique.
5. Abra o Overclock: boas-vindas, assistentes com ✓ e a pasta de trabalho. Crie uma pasta nova chamada navalha-agenda.

curl -fsSL https://claude.ai/install.sh | bash

irm https://claude.ai/install.ps1 | iex

Pronto quando: O Overclock aberto na tela principal, com o Claude marcado com ✓ e a pasta navalha-agenda escolhida.

Dica: Codex e Gemini são opcionais e pedem o Node (nodejs.org). Se preferir, o Modo Guiado instala com um clique.

Na turma de 25/09 · 10h44

“Instala o do Claude. Com o Claude instalado, tu copia a lista e diz pra ele: instala no terminal esses CLIs.”

O Overclock não traz um modelo próprio: ele usa as assinaturas que você já tem (Claude, Codex, Gemini), sem custo adicional de modelo além delas. Cada motor instalado aparece no Cockpit, na engrenagem ⚙️, em Providers. Dá até pra ter duas contas da mesma CLI: quando uma bate no limite, a outra continua.

1. Abra o Cockpit (a engrenagem ⚙️) e vá em Providers: os motores instalados aparecem sozinhos.
2. Abra um pane com o Claude: na primeira vez ele abre o navegador pra você fazer login.
3. Tem Codex ou Gemini? Faça o login deles também. Mais contas, mais fôlego de uso.

Oi! Me diga em uma frase quem você é, qual modelo está rodando e em qual pasta estamos trabalhando. Depois confira se o Node.js está instalado neste computador e, se não estiver, me explique como instalar.

Pronto quando: O agente responde com o modelo, a pasta navalha-agenda e se o Node.js está pronto.

Dica: Login e senha você digita na página de cada serviço. Nunca cole token ou senha no chat do agente.

Na turma de 25/09 · 11h08

“O Overclock não traz nenhum modelo próprio. Conforme você instala, cada motor vai aparecendo no cockpit.”

Você não precisa de terminal nem de editor de código. No Overclock cada agente vive num pane: um painel com um agente trabalhando. O workspace é a pasta do projeto. A missão agrupa o trabalho de um objetivo: a gente começa no modo Livre, onde você decide quantos panes abrir e qual agente vai em cada um.

1. Crie uma missão nova no modo Livre, com 2 panes.
2. Repare na grade: cada pane é um agente trabalhando.
3. Veja onde ficam o workspace (a pasta) e a missão.

Liste os arquivos desta pasta e me explique, em linguagem simples, o que é cada um. Se estiver vazia, diga que está vazia.

Pronto quando: O agente diz que a pasta está vazia. Ele enxerga os arquivos do seu projeto.

Dica: Um pedido por pane. Dois agentes mexendo no mesmo arquivo ao mesmo tempo é briga na certa.

Na turma de 25/09 · 11h11

“Amarelinho, ele tá ficando pronto. Verdinho, já está pronto. Vermelho, ele tá precisando da tua atenção.”

Primeiro prompt, primeiro resultado. A regra é pedir o resultado, não o código: quem usa, o que cada pessoa precisa fazer, o que acontece depois. O agente escolhe a tecnologia e instala o que precisar. Banco de dados e login ficam pro capítulo 11: agora é ver o fluxo funcionando.

1. Cole o prompt deste capítulo no pane.
2. Acompanhe: o agente cria o projeto, instala as dependências e sobe o app.
3. Abra o endereço que ele passar, marque um horário e veja aparecer no painel.

Crie um app web chamado "Navalha Agenda": um sistema de agendamento para barbearias. Use Next.js. Instale o que for preciso e deixe rodando no meu computador.

Duas telas:
1. Página de agendamento (para o cliente, no celular): escolher o serviço (corte, barba, corte + barba, sobrancelha), o dia, um horário livre, e informar nome e WhatsApp. No final, uma tela de confirmação.
2. Painel do barbeiro (/painel): a agenda do dia em ordem de horário, com nome, serviço e um botão de WhatsApp para falar com o cliente. Dá pra navegar entre os dias.

Regras:
- Horário de funcionamento: 9h às 19h, atendimentos de 30 minutos.
- Um horário já marcado não aparece mais como livre.
- Por enquanto, salve os agendamentos no próprio navegador. Banco de dados e login vêm depois.

Texto em português do Brasil. Quando terminar, me passe o endereço para abrir.

Pronto quando: Você marca um horário na página do cliente e ele aparece no painel do barbeiro. Feio? Talvez. Mas funciona.

Dica: Não corrija o visual ainda. O print de agora é o "antes" do capítulo 7.

Na turma de 25/09 · 11h31

“Meu cortador de cabelo gasta R$ 150 por mês pra ter esse aplicativo aqui. E a gente acabou de vibe codar.”

Todo agente chega sem memória. O CLAUDE.md é o arquivo que ele lê antes de começar: o que é o produto, quem usa, as regras, o que nunca fazer. Escreveu uma vez, vale pra sempre, pra qualquer agente que abrir esse projeto.

1. Rode o prompt deste capítulo pra criar o CLAUDE.md.
2. Abra o arquivo: é só texto, você pode editar à mão.
3. Abra um pane novo e pergunte "quem são os usuários desse sistema?". Ele já sabe.

Crie um arquivo CLAUDE.md na raiz deste projeto com as regras que qualquer agente deve seguir aqui:

- Produto: Navalha Agenda, sistema de agendamento para barbearias.
- Usuários: o dono da barbearia (usa o painel, no computador e no celular) e o cliente final (marca pelo celular, sem criar conta).
- Tom dos textos: direto, simples, sem jargão. Português do Brasil com acentos corretos.
- Técnica: Next.js. Banco de dados e login com Supabase (a partir do capítulo 11).
- Segurança: chaves e senhas só no arquivo .env, nunca no código, nunca no chat. Toda tabela nova com segurança por linha (RLS) ligada.
- Nunca: apagar agendamentos ou dados sem eu confirmar.
- Sempre: testar o fluxo completo no navegador (marcar como cliente, conferir no painel) antes de dizer que terminou.

Pronto quando: Um pane novo, sem contexto nenhum, descreve os dois tipos de usuário porque leu o CLAUDE.md.

Dica: A regra das chaves no .env evita o erro mais caro de quem está começando: senha vazada no código.

Na turma de 25/09 · 11h33

“Tu abre esse projeto, pergunta pra qualquer pane sobre o que ele é, e ele sabe dizer. Os dados estão guardados nesse arquivo.”

O modelo sozinho faz tela com cara de template. Uma skill de design é um manual de estilo que o agente carrega antes de desenhar: tipografia, espaçamento, estados de botão, movimento. É a mesma IA, só que com o manual de um estúdio na mão.

1. Abra o Marketplace no Cockpit (⚙️) e instale uma skill de design de interface.
2. Rode o prompt deste capítulo.
3. Compare com o print do capítulo 5: o antes e o depois.

Use a skill de design instalada para redesenhar as duas telas do Navalha Agenda.

Página de agendamento: pensada primeiro pro celular, um passo por vez (serviço → dia → horário → dados → confirmação), botões grandes, visual de barbearia clássica moderna: fundo escuro, detalhe em dourado envelhecido.

Painel do barbeiro: limpo e fácil de ler de relance, horários livres e ocupados bem diferentes, o próximo cliente em destaque.

Não mude o funcionamento, só o visual. Teste o fluxo completo depois.

Pronto quando: O mesmo sistema, com cara de produto profissional. A diferença salta aos olhos lado a lado.

Dica: Arraste a barra do antes e depois: a diferença é a skill.

Na turma de 25/09 · 12h43

“Só instalei aquela skill. Olha como é que já ficou melhor: ele já pensa o fluxo, já pensa a experiência de quem usa.”

O agente vai dizer "pronto!" mesmo quando não está. A defesa é mandar ele provar: abrir o app num navegador de verdade, usar como o cliente usaria e tirar print. Dizer que funciona não é prova. O print é.

1. Abra o navegador embutido do Overclock num pane.
2. Rode o prompt deste capítulo.
3. Confira os prints que o agente trouxe e o que ele corrigiu sozinho.

Abra o app no navegador e teste como um cliente real faria:

1. Em tela de celular (390px), marque um horário do começo ao fim.
2. Tente marcar o mesmo horário de novo: ele não pode aparecer como livre.
3. Abra o painel e confirme que o agendamento está lá, no dia e horário certos.
4. Teste o botão de WhatsApp do painel.
5. Tire prints do celular (390px) e do computador (1440px) das duas telas.

Corrija o que encontrar e teste de novo. Só diga que terminou quando o fluxo inteiro passar.

Pronto quando: O fluxo completo passando, prints das duas telas e uma lista curta do que o agente achou e corrigiu.

Dica: Ele disse que não achou nada? Peça: "tenta quebrar: marca dois horários iguais ao mesmo tempo".

Na turma de 25/09 · 12h11

“O agente sempre vai dizer que está pronto. A defesa é mandar ele provar.”

Tudo que o agente sabe fazer além do básico mora na pasta .claude. Um comando é um atalho: você digita /testar e ele roda uma receita inteira. Um hook é um gatilho automático: toda vez que X acontecer, faça Y.

1. Encontre a pasta .claude no projeto (o agente cria se não existir).
2. Rode o prompt deste capítulo pra criar o comando /testar.
3. Digite /testar: a receita inteira do capítulo 8 virou uma palavra.

Crie um comando personalizado chamado "testar" em .claude/commands/testar.md.

Quando eu digitar /testar, ele deve:
1. Subir o app se não estiver rodando.
2. Marcar um horário como cliente, em tela de celular.
3. Tentar marcar o mesmo horário de novo (tem que ser bloqueado).
4. Conferir o agendamento no painel.
5. Me devolver uma lista curta: o que passou e o que falhou, com print do que falhou.

Pronto quando: Digitar /testar dispara o teste do fluxo inteiro sem reescrever o prompt.

Dica: Comando é um atalho seu. Skill (capítulo 12) é conhecimento que qualquer agente carrega.

Na turma de 25/09 · 11h29

“Hooks são ações que acontecem automaticamente toda vez que tu roda um prompt: uma antes, outra depois.”

Cada mensagem custa tokens, e a conversa longa custa cada vez mais porque o agente relê tudo. Duas regras resolvem quase tudo: modelo forte pra pensar, modelo leve pra executar, e conversa nova pra assunto novo. E um truque: prompt em inglês gasta menos tokens que em português.

1. No pane, troque o modelo: forte pra planejar e mexer no banco, leve pra tarefas repetitivas.
2. Acompanhe o consumo da sessão com /usage: o custo aparece na tela.
3. Rode o prompt deste capítulo num pane com modelo leve.

Revise todos os textos que aparecem na tela do Navalha Agenda: botões, títulos, mensagens de confirmação e de erro. Corrija acentuação, deixe tudo curto e claro pra quem não entende de tecnologia, e troque qualquer mensagem de erro técnica por uma frase que diga o que a pessoa deve fazer. Não mexa no layout nem na lógica. No final, me diga quantos textos você alterou.

Pronto quando: Tarefa simples feita por modelo leve, com custo bem menor do que no modelo forte.

Dica: Assunto mudou? Abra um pane novo. Conversa curta é conversa barata.

Na turma de 25/09 · 11h22

“Tu não vai pedir pro diretor da empresa buscar um Red Bull na esquina. Tu pede pro motoboy.”

Sozinho, o agente só mexe em arquivos. Um MCP é uma tomada que liga ele numa ferramenta externa. Aqui a gente liga o agente no Supabase: um banco de dados com login pronto. É aqui que o app vira SaaS de verdade: os agendamentos saem do navegador e vão pra nuvem, e o painel passa a pedir senha.

1. Crie uma conta gratuita no Supabase e um projeto novo.
2. Conecte o MCP do Supabase no Overclock (o login é feito na página do Supabase, não no chat).
3. Rode o prompt deste capítulo.
4. Marque um horário, feche o navegador e abra de novo: o agendamento continua lá.

Use o MCP do Supabase para ligar o Navalha Agenda a um banco de dados de verdade:

1. Crie as tabelas: servicos (nome, duração, preço) e agendamentos (serviço, data, horário, nome do cliente, WhatsApp).
2. Ligue a segurança por linha (RLS) em todas as tabelas, com regras explícitas: o cliente só consegue criar agendamento; só o dono logado consegue ver e cancelar.
3. Garanta no banco que o mesmo horário não pode ser marcado duas vezes.
4. Troque o armazenamento no navegador pelo banco.
5. Coloque login por e-mail e senha no /painel. Sem login, o painel não abre.

As chaves do Supabase vão só no arquivo .env, nunca no código e nunca na tela. Teste o fluxo inteiro no final.

Pronto quando: O agendamento sobrevive a fechar o navegador, o painel pede login e um horário não pode ser marcado duas vezes.

Dica: RLS ligada em toda tabela não é opcional: sem ela, qualquer pessoa na internet lê a agenda inteira.

Na turma de 25/09 · 11h51

“Não se trava por segurança. Isola os dados, coleta o mínimo possível, terceiriza os problemas e ativa o RLS.”

Na turma de 25/09, o banco e a regra de horário único ficaram prontos; o login do painel ficou para depois.

Tudo que a gente acertou até aqui (fluxo, banco, segurança, teste) pode virar uma skill: uma receita que qualquer agente carrega. A partir dela, o sistema de agendamento pra salão, estúdio de tatuagem ou pet shop sai no mesmo padrão, sem repetir tudo do zero.

1. Rode o prompt deste capítulo pra transformar o projeto em skill.
2. Abra o arquivo da skill: é só um texto organizado.
3. Teste num pane novo com o negócio que você mandou no chat no capítulo 0.

Transforme tudo o que fizemos neste projeto numa skill reaproveitável chamada "agenda-para-negocio", em .claude/skills/agenda-para-negocio/SKILL.md.

A skill deve ensinar um agente a criar um sistema de agendamento para qualquer negócio de horário marcado:
- Perguntas que ele faz antes de começar (tipo de negócio, serviços, duração de cada um, horário de funcionamento, tom de voz).
- As duas telas (agendamento do cliente e painel do dono) e o fluxo passo a passo.
- As tabelas do banco, com RLS e a regra de horário único.
- As regras de segurança (chaves só no .env, login no painel).
- O teste obrigatório do fluxo completo antes de entregar.

Pronto quando: Um agente sem contexto cria o sistema pra outro tipo de negócio e ele sai no mesmo padrão.

Dica: A skill é o seu processo empacotado. É ela que você reaproveita a cada projeto novo.

Na turma de 25/09 · 13h03

“Uma skill é uma repetição de uma ação que tu fez. Tu dá o passo a passo e diz: agora transforma isso numa skill.”

Um agente sozinho faz uma coisa de cada vez. No Overclock cada ajudante vira um pane que você vê trabalhando. O pane principal vira maestro: divide o serviço e distribui. Enquanto um faz a tela de configurações, outro faz o relatório da semana.

1. Rode o prompt deste capítulo no pane principal.
2. Veja os panes novos abrindo sozinhos, cada um com sua parte.
3. Quando terminarem, o principal junta tudo e roda o /testar.

Divida em 3 trabalhos paralelos, cada um num pane separado, e me avise quando todos terminarem:

1. Configurações (/painel/configuracoes): o dono edita serviços, preços, duração e horário de funcionamento, e a página do cliente passa a usar esses dados.
2. Relatório (/painel/relatorio): agendamentos da semana, serviço mais pedido e total previsto em reais.
3. Lembrete: no painel, um botão por agendamento que abre o WhatsApp com uma mensagem pronta lembrando o cliente do horário.

Todos seguem o CLAUDE.md. No final, rode o /testar e confira que nada quebrou.

Pronto quando: Três panes trabalhando ao mesmo tempo e, no final, um painel com configurações, relatório e lembrete.

Dica: Só divida o que é independente. Tarefa que depende da outra fica num pane só.

Na turma de 25/09 · 11h17

“Ter mais de um pane não é pra ficar bonito. Serve pra acelerar o teu desenvolvimento e economizar.”

Até aqui o sistema atende uma barbearia. Um SaaS atende muitas, cada uma vendo só os próprios dados. É uma mudança grande, então vai pra uma squad: um time com funções definidas, um pane pro banco, um pras telas e um que só tenta fazer uma barbearia enxergar a agenda da outra.

1. Monte uma squad com três funções: banco, telas e revisão de segurança.
2. Rode o prompt deste capítulo.
3. Crie duas barbearias de teste e confira que uma não enxerga a agenda da outra.

Transforme o Navalha Agenda num sistema para várias barbearias, trabalhando em squad, um pane por função:

- Banco: crie a tabela barbearias e ligue cada serviço e agendamento a uma barbearia. Reescreva as regras de RLS para que cada dono só veja e altere os dados da própria barbearia.
- Telas: cadastro de barbearia (nome, endereço, WhatsApp) no primeiro login do dono, e uma página de agendamento própria para cada uma, em /b/nome-da-barbearia.
- Revisão de segurança: crie duas barbearias de teste e tente, de todas as formas, fazer uma ver ou alterar os agendamentos da outra. Só aprove quando não conseguir.

Ninguém termina antes da revisão de segurança aprovar.

Pronto quando: Duas barbearias no mesmo sistema, cada uma com seu link, e nenhuma enxerga os dados da outra.

Dica: O pane que só tenta quebrar a segurança é o mais importante do time.

Na turma de 25/09 · 12h37

“Pra vocês venderem site com esse squadzinho aqui, é um absurdo.”

Na turma de 25/09, o squad deste capítulo fez o site da barbearia (mais abaixo, nesta página), e o multi-barbearia ficou para depois.

Na dúvida entre duas ideias, não escolha no escuro. Um worktree é uma cópia paralela do projeto: dois agentes constroem duas versões sem um atropelar o outro, e você escolhe a vencedora.

1. Rode o prompt deste capítulo.
2. Abra as duas versões lado a lado e marque um horário em cada.
3. Escolha uma e peça pro agente juntar na versão principal.

Salve o estado atual do projeto no git.

Depois crie dois worktrees e trabalhe neles em paralelo, um pane para cada, mudando só a escolha de dia e horário da página de agendamento:
- versao-calendario: um calendário do mês, e ao tocar no dia aparecem os horários livres.
- versao-lista: os próximos horários livres em lista, agrupados por dia, sem calendário.

Me mostre as duas rodando lado a lado, em tela de celular. Não junte nada sem eu escolher.

Pronto quando: Duas versões completas rodando lado a lado, sem conflito. Você escolhe e o agente junta.

Dica: Teste as duas no celular, como o cliente vai usar, antes de escolher.

Na turma de 25/09 · 13h06

“São dois agentes construindo duas versões sem um atropelar o outro. Quando finaliza, tu pede pra juntar os dois.”

Sistema que só existe no seu computador ninguém usa. Deploy é publicar num endereço que qualquer pessoa abre. O app vai pra Vercel, o banco já está no Supabase, e as chaves vão nas configurações da hospedagem, nunca no código.

1. Crie uma conta gratuita na Vercel.
2. Rode o prompt deste capítulo: o agente guia o passo a passo.
3. Abra o link no celular, marque um horário e confira no painel publicado.

Quero publicar o Navalha Agenda na internet agora, na Vercel.

Me guie passo a passo, como se eu nunca tivesse feito isso. Faça você mesmo tudo o que puder pelo terminal. Quando precisar que eu faça login ou clique em algo, pare e me diga exatamente o que fazer.

As chaves do Supabase vão nas variáveis de ambiente da Vercel, nunca no código e nunca na tela. No final, abra o link publicado, marque um horário em tela de celular e confirme que ele aparece no painel publicado.

Pronto quando: Um link público: o cliente marca pelo celular e o agendamento aparece no painel, com login.

Dica: Login e senha você digita na página da Vercel e do Supabase, nunca no chat do agente.

Na turma de 25/09 · 13h11

“Ele já está fazendo o deploy pra Vercel. A gente já vai poder pegar o aplicativo pronto.”

O app entrou em produção às 13h16.

Você sai com um SaaS no ar: página de agendamento pro cliente, painel com login pro dono, banco com segurança por linha e várias barbearias no mesmo sistema. E com o jeito de trabalhar com agentes: pedir o resultado, dar regras no CLAUDE.md, mandar provar e dividir em paralelo.

1. Rode o prompt deste capítulo pra deixar o projeto fácil de continuar.
2. Use a skill agenda-para-negocio pra fazer o sistema de outro negócio.
3. Poste o que você construiu na comunidade no Discord.

Crie um arquivo COMO-CONTINUAR.md neste projeto, em linguagem simples, para quem nunca programou:

- Como o sistema está organizado (telas, banco, login), em poucas linhas.
- Como mudar textos, serviços e horários.
- Como publicar de novo depois de mudar algo.
- 5 ideias de próximos recursos (por exemplo: cancelamento pelo cliente, lista de espera, fotos dos cortes).

Para cada item, escreva também o prompt exato que eu posso mandar pro agente fazer a mudança por mim.

Pronto quando: Um guia do seu próprio sistema, com os prompts prontos pra continuar construindo.

Dica: Mande o link do seu sistema na comunidade até a próxima live.

Na turma de 25/09 · 12h44

“Pronto, está pronto o SaaS pra vocês poderem vender.”