KIT VIBE CODING · GUIA INTERATIVO GRATUITO
Você tem a ideia. Faltam 6 peças.
Um guia para entender, na prática, o papel de cada ferramenta na construção de um app com IA. Da primeira tela à primeira assinatura, com um exemplo do começo ao fim.
- Gratuito e sem cadastro
- 6 ferramentas explicadas
- Assistente de decisão
01 · O MAPA
Um app tem partes. Cada ferramenta cuida de uma.
Cada vídeo indica uma ferramenta diferente, e fica difícil saber o que faz o quê. Ferramenta boa no lugar errado vira retrabalho. Este mapa organiza as peças por função.
Passe o mouse ou clique numa peça para ver as conexões.Toque numa peça para ver as conexões. abre a explicação. em foco · ver detalhes
COMO LER A PLACA
- Em cima, a tela. No meio, a lógica. Embaixo, os serviços.
- O Claude Code concentra a lógica e pode acionar Supabase, Resend e Stripe.
- O Supabase é onde os dados moram: telas, regras e pagamentos podem gravar nele.
- O GitHub guarda o histórico do código, não os dados do app.
Nenhuma trilha é automática: cada integração é uma escolha que você configura, e nem todo app precisa das seis peças.
EXEMPLO · UMA RESERVA NA BARBEARIA
- A tela recebe o pedido de horário.
- O código confere se o horário está livre.
- O banco guarda a reserva.
- O e-mail confirma para o cliente.
INTERFACELovable
Cria as telas que o usuário vê.
PODE SE CONECTAR A
- Claude Code as telas acionam as regras escritas no código
- Supabase as telas leem e gravam dados, depois que você conecta o projeto
- GitHub guarda o código das telas, se você ativar a sincronização
CÓDIGO E LÓGICAClaude Code
Implementa as regras e funções do app.
PODE SE CONECTAR A
- Lovable o código recebe os pedidos das telas
- Supabase o código consulta e grava os dados
- Resend o código decide quando cada e-mail sai
- Stripe o código cria a cobrança e trata os avisos de pagamento
- GitHub registra as mudanças que você aprova e envia
DADOS E LOGINSupabase
Guarda dados, usuários e arquivos.
PODE SE CONECTAR A
- Lovable as telas exibem e coletam o que fica guardado aqui
- Claude Code as regras leem e gravam os dados
- Stripe o código do app pode guardar aqui o status da assinatura
E-MAILSResend
Envia os e-mails automáticos.
PODE SE CONECTAR A
- Claude Code o código pede o envio na hora certa, como depois de uma reserva
PAGAMENTOSStripe
Cobra pagamentos e assinaturas.
PODE SE CONECTAR A
- Claude Code o código cria a cobrança e trata os avisos de pagamento
- Supabase o status da assinatura pode ficar no banco, gravado pelo código
HISTÓRICO DO CÓDIGOGitHub
Registra cada versão do código. Os dados do app não ficam aqui: eles moram no Supabase.
PODE SE CONECTAR A
- Lovable o código das telas, com a sincronização ativada
- Claude Code cada mudança que você aprova e envia
02 · AS FERRAMENTAS
O que cada peça faz, e como começar.
Abra uma ferramenta para ver o que ela é, quando vale a pena, um exemplo, os primeiros passos e os cuidados mais comuns.
01 · INTERFACE
Lovable
Cria o que o usuário vê, a partir de uma conversa.
O QUE É
Uma plataforma que cria aplicativos web a partir de descrições em texto. Você explica o que quer e ela gera as telas e o código. Depois, ajusta pedindo mudanças no chat ou selecionando partes da tela.
QUANDO VALE A PENA
Para tirar a ideia do papel rápido, testar um fluxo com pessoas reais e enxergar o que falta antes de investir em detalhes.
NO APP DA BARBEARIA
A agenda com os horários livres de cada barbeiro e o botão “Reservar”.
COMO COMEÇAR
- Crie uma conta no site do Lovable.
- Descreva a primeira tela em poucas frases: quem usa e o que precisa fazer.
- Ajuste uma coisa por vez no chat e confira o resultado na prévia.
CUIDADOS
- Peça uma mudança de cada vez. Pedidos grandes geram resultados difíceis de revisar.
- Tela pronta não é app pronto. Dados, regras e segurança ainda precisam de atenção.
- Conecte o projeto ao GitHub cedo, para ter o histórico do código.
LINKS OFICIAIS
Site do Lovable (nova aba) Documentação do Lovable (nova aba)
02 · CÓDIGO E LÓGICA
Claude Code
Um agente de programação que implementa o que você pede.
O QUE É
Um agente de programação da Anthropic. Ele lê o projeto, edita arquivos, roda comandos e implementa funcionalidades descritas em linguagem natural, inclusive lógica de backend e integrações. Funciona no terminal, em editores como o VS Code, no app desktop e no navegador.
Ele escreve o código, mas não hospeda o app. O código roda em outro serviço, como as funções do Supabase ou uma plataforma de hospedagem.
QUANDO VALE A PENA
Quando o app precisa de regras que vão além da tela: validações, integrações com outros serviços, testes e correção de erros.
NO APP DA BARBEARIA
A regra que impede dois clientes de reservar o mesmo horário.
COMO COMEÇAR
- Tenha uma assinatura do Claude ou uma conta no Console da Anthropic.
- Instale seguindo o guia oficial e abra a pasta do seu projeto.
- Peça algo pequeno e específico, e revise cada mudança antes de seguir.
CUIDADOS
- Revise o que ele propõe. A responsabilidade pelo código continua sendo sua.
- Dê contexto: como o app funciona e o que não pode quebrar.
- Peça testes para as regras importantes, como a de reserva duplicada.
LINKS OFICIAIS
03 · DADOS E LOGIN
Supabase
Guarda o que o app precisa lembrar.
O QUE É
Um backend pronto para usar: banco de dados PostgreSQL, login de usuários, armazenamento de arquivos e funções que rodam no servidor, tudo em um painel.
QUANDO VALE A PENA
Quando o app precisa lembrar coisas entre uma visita e outra: cadastros, reservas, preferências e arquivos.
NO APP DA BARBEARIA
As tabelas de clientes, barbeiros e horários marcados, e a foto de cada barbeiro.
COMO COMEÇAR
- Crie um projeto no site do Supabase.
- Liste o que o app precisa guardar e crie uma tabela para cada item.
- Conecte ao seu app. O Lovable, por exemplo, tem integração com o Supabase.
CUIDADOS
- Ative o RLS (Row Level Security) em cada tabela exposta. São as regras que dizem quem pode ver e alterar cada linha.
- Nunca coloque a chave secreta do projeto no código das telas.
- Confira no seu plano como funcionam os backups do banco.
04 · E-MAILS
Resend
Avisa o usuário quando algo acontece.
O QUE É
Um serviço para enviar e-mails a partir do código do app. É usado principalmente para os e-mails transacionais, que saem automaticamente depois de uma ação do usuário.
QUANDO VALE A PENA
Confirmações, lembretes, redefinição de senha e avisos sobre a conta.
NO APP DA BARBEARIA
“Seu horário de sábado, às 10h, está confirmado.”
COMO COMEÇAR
- Crie uma conta no site do Resend.
- Adicione o seu domínio e configure os registros DNS indicados para verificá-lo.
- Gere uma chave de API e envie um e-mail de teste a partir do servidor do app.
CUIDADOS
- Para enviar e-mails, você precisa de um domínio próprio verificado.
- A chave de API fica só no servidor, nunca no código das telas.
- E-mails de marketing exigem o consentimento de quem recebe.
05 · PAGAMENTOS
Stripe
Transforma usuário em cliente.
O QUE É
Uma plataforma de pagamentos online. Cuida do checkout, de cobranças avulsas e de assinaturas recorrentes.
QUANDO VALE A PENA
Quando o app vai cobrar por um produto, um serviço ou uma mensalidade.
NO APP DA BARBEARIA
Cada barbearia paga uma assinatura mensal para usar o app.
COMO COMEÇAR
- Crie uma conta no site do Stripe.
- Monte o checkout primeiro no ambiente de teste, com os cartões de teste do Stripe.
- Configure os webhooks: avisos automáticos que o Stripe envia ao app quando um pagamento é aprovado ou falha.
CUIDADOS
- Confirme o pagamento pelo webhook, no servidor, e não só pela tela de “obrigado”.
- Antes de lançar, confira taxas, meios de pagamento e exigências para o seu país.
- A chave secreta fica só no servidor.
06 · HISTÓRICO DO CÓDIGO
GitHub
O save point do seu código.
O QUE É
Um serviço que guarda o código em repositórios e registra cada mudança com o Git. Você vê o que mudou, quando e por quê, e pode voltar a uma versão anterior.
Ele guarda o código, não os dados do app. Clientes e reservas ficam no banco de dados, que precisa de backup próprio.
QUANDO VALE A PENA
Desde o primeiro dia. Principalmente quando você trabalha com IA, que pode alterar muitos arquivos de uma vez.
NO APP DA BARBEARIA
A agenda parou depois de uma alteração? Você compara as versões, encontra a mudança e desfaz.
COMO COMEÇAR
- Crie uma conta no site do GitHub.
- Conecte o projeto a um repositório. O Lovable sincroniza com o GitHub, e o Claude Code trabalha com Git.
- Salve versões com mensagens claras, como “bloqueia horário duplicado”.
CUIDADOS
- Nunca envie senhas ou chaves de API para o repositório.
- O GitHub pode fazer parte da publicação do app, mas isso não é obrigatório nem automático.
- Repositório não é backup do banco de dados.
LINKS OFICIAIS
03 · EXEMPLO APLICADO
Um app de agendamento para barbearias.
Siga uma reserva do começo ao fim e veja onde cada ferramenta entra. Algumas etapas acontecem na tela do cliente. Outras, nos bastidores.
EXEMPLO HIPOTÉTICO A Barbearia Navalha e as telas abaixo são ilustrações criadas para explicar o papel de cada peça. Não se trata de um app publicado.
TELA DO CLIENTE
Escolha o horário
Barbeiro: Rafa
- ServiçoCorte
- Duração30 min
TELA DE OUTRO CLIENTE
Escolha o horário
Barbeiro: Rafa
Conferindo se sáb, 10:00 ainda está livre…
BASTIDORES · BANCO DE DADOS
Tabela: reservas
Com as regras certas, cada cliente vê só as próprias reservas.
E-MAIL DO CLIENTE
para Ana
Seu horário está confirmado
Olá, Ana! Seu horário de sábado, às 10h, com o Rafa está confirmado.
- Quandosáb, 10:00
- BarbeiroRafa
- Serviçocorte
Precisa remarcar? É só responder a este e-mail.
Ver minha reservaPAINEL DA BARBEARIA
Assinatura do app
- Próxima cobrançadia 1º
- Pagamentocartão •••• 4242
Faturas
- Outubropaga
- Setembropaga
WEBHOOK pagamento aprovado → acesso liberado
BASTIDORES · REPOSITÓRIO
Histórico de versões
- corrige fuso horário da agendahoje
- envia e-mail de confirmaçãoontem
- bloqueia horário duplicado3 dias
- cria tela de agenda1 semana
- adiciona login de clientes2 semanas
- primeira versão3 semanas
ETAPA 1 · LOVABLE
A tela de agenda nasce de uma descrição: barbeiros, dias e horários livres. Ana escolhe sábado, às 10h, e toca em “Reservar”.
ETAPA 2 · CLAUDE CODE
Com o Claude Code, você implementa a regra no código. Antes de salvar, o app confere se o horário ainda está livre.
se o horário já tem reserva:
recusar e avisar o cliente
senão:
salvar a reservaETAPA 3 · SUPABASE
A reserva vira uma linha na tabela. As regras de acesso garantem que cada cliente veja só as próprias reservas, e a barbearia, só a agenda dela.
ETAPA 4 · RESEND
Assim que a reserva é salva, o servidor do app pede ao Resend para enviar a confirmação para o e-mail da Ana.
ETAPA 5 · STRIPE
Quem paga pelo app é a barbearia, com uma assinatura mensal. O webhook do Stripe avisa o app quando a cobrança é aprovada, e o acesso continua liberado.
ETAPA 6 · GITHUB
Cada alteração no código vira uma versão. Se a última mudança quebrar a agenda, dá para comparar, encontrar o problema e voltar para uma versão que funcionava.
COMO AS PEÇAS SE CONECTAM
- Tela recebe o pedido
- Código aplica as regras
- Banco guarda o resultado
- E-mail avisa o cliente
- Pagamento mantém a barbearia ativa
GitHub guarda o histórico de todo o código acima. Os dados ficam no banco.
04 · POR ONDE COMEÇAR
O que você precisa fazer no seu app?
Escolha uma opção e veja qual ferramenta conhecer primeiro.
Escolha uma opção e eu indico uma peça para começar, com o próximo passo.
05 · ANTES DE LANÇAR
Cuidados que evitam dor de cabeça.
As ferramentas aceleram o trabalho, mas não dispensam testes, segurança e configuração. Marque o que você já revisou. A marcação fica salva só neste navegador.
0 DE 6 REVISADOS
01Testes: como saber se o app funciona?
Use o app como alguém que nunca viu: cadastro, ação principal e pagamento. Depois, teste o que pode dar errado, como campo vazio, horário ocupado e cartão recusado. Peça a duas ou três pessoas para usar sem a sua ajuda e observe onde elas travam.
02Autenticação e permissões: quem pode ver e fazer o quê?
O login confirma quem é a pessoa. A permissão define o que ela pode fazer. Na barbearia, o cliente vê só as próprias reservas e cada barbearia vê só a própria agenda. No Supabase, essas regras são configuradas com RLS.
03Segurança dos dados: o que proteger primeiro?
Chaves secretas ficam no servidor, nunca no código das telas nem no GitHub. Peça só os dados de que o app precisa. No Brasil, dados pessoais são protegidos pela LGPD, então explique ao usuário o que você coleta e para quê.
04Backups: se algo der errado, dá para recuperar?
O GitHub guarda o código, não os dados. Confira se o plano do seu banco de dados inclui backups e com que frequência. Se possível, teste uma restauração antes de precisar dela.
05Custos de operação: quanto custa manter o app no ar?
Várias ferramentas têm planos gratuitos para começar. Outras cobram por uso, por assinatura ou por transação. Os custos crescem com usuários, e-mails enviados, armazenamento e pagamentos. Anote os preços atuais de cada serviço numa planilha simples antes de lançar.
06Publicação e domínio: como colocar o app no ar?
Publicar é deixar o app acessível num endereço da internet. Algumas ferramentas, como o Lovable, já oferecem a publicação. Um domínio próprio passa mais confiança e é necessário para enviar e-mails pelo Resend. Domínios .br são registrados no Registro.br.
CHECKPOINT
Agora você sabe o que faz o quê.
Este guia é um mapa, não um atalho. Testar, revisar e entender o que você constrói continua sendo com você. No Instagram, eu documento a minha jornada construindo apps com IA, com acertos e erros.
SEU PRÓXIMO PASSO
