Como Criar um App com Vibe Coding: da Ideia ao App Publicado

Para criar um app com vibe coding, escreva uma descrição de uma página da primeira versão, entregue-a a um construtor de apps com IA como seu primeiro prompt e depois cresça o app em pequenos passos testados: dados, login, o fluxo principal, acabamento, uma revisão de segurança e, por fim, a publicação. Este guia acompanha um projeto de exemplo, um app de reservas de aulas para um pequeno estúdio de yoga, em cada etapa, com os prompts usados em cada uma.

Se você nunca construiu nada dessa forma, nosso tutorial de vibe coding para iniciantes começa mais devagar. Para uma visão mais ampla que não está presa ao vibe coding, veja como criar um app com IA.

O projeto

Imagine uma dona de estúdio de yoga, a Sara, que oferece oito aulas por semana. As reservas chegam pelo WhatsApp; ela mantém uma lista em papel para cada aula e muitas vezes vende vagas em excesso. Ela quer:

• Que os alunos vejam a grade da semana e reservem uma vaga.
• Que cada aula tenha uma capacidade.
• Uma lista por aula que ela possa conferir na porta.
• Que os alunos possam cancelar até duas horas antes.

Essa é toda a primeira versão. Sem pagamentos, sem pacotes de aulas, sem loja de aplicativos. Isso pode vir depois, ou nunca.

Etapa 1: escreva uma especificação de uma página

Antes de abrir qualquer ferramenta, escreva a primeira versão em palavras simples. Dez minutos aqui economizam horas de ida e volta. Um formato útil:

• Quem usa: alunos (reservam e cancelam), Sara (gerencia as aulas e vê as listas).
• Telas: grade semanal, detalhe da aula, minhas reservas, aulas do administrador, lista de alunos por aula.
• Dados: aulas (nome, professor, horário de início, duração, capacidade), reservas (aluno, aula, status), alunos (nome, e-mail, telefone).
• Regras: nada de reservar uma aula lotada; uma reserva por aluno por aula; cancelamento até duas horas antes; só a Sara acessa as páginas de administração.
• Fora da v1: pagamentos, pacotes de aulas, lista de espera, lembretes.

A lista de “fora da v1” é o que mais importa. É ela que mantém a construção viável. Nosso guia sobre como escrever um documento de requisitos de produto com IA vai além, se você quiser uma especificação mais completa.

Etapa 2: escolha uma ferramenta que cuide do ciclo inteiro

Para um app com banco de dados, logins e uma URL pública, use um construtor de apps com IA que executa o código, conecta um banco de dados e publica, em vez de um assistente de chat que entrega arquivos. Nossa comparação de ferramentas de vibe coding lista as opções. Vamos usar a Mythex aqui porque cobre cada etapa em um só lugar: chat, prévia ao vivo, banco de dados e armazenamento de arquivos reais e publicação com um clique.

Etapa 3: o primeiro prompt

Transforme a especificação em um parágrafo. Não cole o documento inteiro de uma vez com todos os detalhes; dê o núcleo e acrescente o resto em etapas.

Crie um app de reservas de aulas para o meu estúdio de yoga. Alunos se cadastram com nome, e-mail e telefone, veem a grade desta semana e reservam uma vaga em uma aula. Cada aula tem nome, professor, horário de início, duração e capacidade; uma aula lotada mostra “Lotada” e não pode ser reservada. Os alunos veem as próprias reservas e podem cancelar até duas horas antes da aula. Eu sou o administrador: posso adicionar e editar aulas e ver a lista de quem reservou cada uma. Design calmo e simples que funcione bem no celular.

Se você não tiver certeza de que a ferramenta entendeu, peça um plano primeiro. Na Mythex, o modo Plano descreve as telas e os dados antes de escrever o código, e você aprova.

Etapa 4: faça o ciclo principal funcionar

O ciclo principal é a única coisa para a qual o app existe: um aluno reserva uma aula, e a Sara a vê. Teste apenas isso:

1. Cadastre-se como aluno e reserve uma aula.
2. Abra a visão de administrador. A reserva está lá?
3. Reserve a mesma aula de novo. Ela deve recusar.
4. Defina a capacidade de uma aula como 2, reserve com duas contas de alunos e tente uma terceira.

Nesse ponto, dois problemas costumam aparecer. A grade mostra horários no fuso do servidor, e não no fuso do estúdio. E a verificação de “Lotada” acontece apenas na página, então um clique duplo rápido cria duas reservas.

Mostre todos os horários das aulas no fuso horário do estúdio, [Asia/Dubai], independentemente da configuração do dispositivo do visitante.

Verifique a capacidade e as reservas duplicadas no servidor quando uma reserva for criada, e não apenas na página. Se duas requisições chegarem juntas para a última vaga, apenas uma deve ter sucesso.

Corrija o ciclo principal antes de acrescentar qualquer coisa. Todo o resto depende dele.

Etapa 5: adicione as regras restantes, uma por mensagem

Agora percorra as regras da especificação uma de cada vez:

Os alunos podem cancelar uma reserva até duas horas antes do início da aula. Depois disso, oculte o botão de cancelar e recuse o cancelamento no servidor com uma mensagem clara.

Só a minha conta pode abrir as páginas de administração. Garanta que isso seja verificado no servidor para cada ação administrativa, e não apenas escondendo o menu.

Depois de cada uma, teste e avance apenas quando funcionar. Se uma mudança quebrar algo, volte ao último checkpoint bom e tente um pedido mais claro, em vez de empilhar correções por cima.

Etapa 6: refine o que os usuários reais vão notar

Usuários reais percebem pequenos detalhes. Uma lista curta para o app da Sara:

• Estados vazios: “Nenhuma aula esta semana ainda” em vez de uma página em branco.
• Confirmação: “Você está reservada para Vinyasa, terça-feira às 18h” depois de reservar.
• Layout no celular: botões grandes, a grade legível em uma tela de 375 px.
• Vagas restantes: “3 vagas restantes” em cada aula, para que os alunos reservem mais rápido.

Em cada cartão de aula, mostre as vagas restantes, por exemplo “3 de 12 restantes”. Depois de reservar, mostre uma confirmação com o nome da aula, o dia e o horário e um botão para minhas reservas.

Etapa 7: teste como um estranho

Antes que qualquer outra pessoa use, passe meia hora tentando quebrá-lo:

Você também pode pedir à IA que percorra casos extremos:

Liste dez coisas que um aluno real poderia fazer e que talvez quebrem a reserva ou o cancelamento, teste cada uma e corrija o que falhar. Diga o que você mudou.

Etapa 8: uma revisão de segurança

Este app armazena nomes, e-mails e telefones, então uma revisão rápida de segurança vale a pena. As principais perguntas:

• Um aluno consegue ver as reservas ou os dados de contato de outro?
• Há chaves ou senhas em código que roda no navegador?
• O formulário de cadastro está protegido contra bots?
• Existe um backup dos dados?

Nossa página sobre se o vibe coding é seguro explica cada verificação e traz prompts para elas, e a lista de segurança para apps criados com IA é a versão completa.

Etapa 9: publique

Quando o ciclo principal, as regras e as verificações passarem, publique. Na Mythex é um clique, e o app recebe uma URL pública com o banco de dados e a hospedagem já configurados. No Pro você pode conectar um domínio próprio, como book.sarasyoga.com; veja como conectar um domínio personalizado.

Antes de enviar o link, confira a versão publicada mais uma vez. Reserve uma aula pelo celular. A versão de produção e a prévia devem se comportar da mesma forma, mas confirme.

Etapa 10: primeiros usuários e a próxima versão

Envie o link primeiro para cinco alunos frequentes, e não para todos. Peça que reservem a próxima aula por ele e que digam o que foi confuso. Depois corrija os três principais pontos que eles mencionarem.

Depois de algumas semanas de uso real, uma lista de v2 para um app assim costuma se escrever sozinha: uma lista de espera para aulas lotadas, lembretes por e-mail na véspera e pacotes de aulas pagos online. Cada item recebe o mesmo tratamento: especifique em poucas linhas, escreva o prompt, teste, publique. Para adicionar pagamentos, veja como adicionar pagamentos ao seu app. Para divulgar o app, como lançar um app e conseguir os primeiros usuários.

Transformando em app para celular

Muitos estúdios querem um ícone no celular dos alunos. No plano Pro da Mythex, o app publicado pode virar um app Android (um arquivo que você envia ao Google Play) e um app para iPhone enviado ao TestFlight com a sua própria chave do App Store Connect, sem precisar de Mac. O app do celular abre o app web publicado, então toda vez que você publica uma atualização, o app do celular também a recebe.

O que levar daqui

A construção em si foi a parte curta. O que tornou o app utilizável foi a lista de “fora da v1” da especificação, testar primeiro o ciclo principal, regras de capacidade e acesso no servidor, e cinco usuários reais antes de cinquenta. É isso que o vibe coding parece quando o app precisa funcionar para outras pessoas.

Pronto para tentar o seu? Escreva a sua especificação de uma página e cole o primeiro parágrafo no construtor de apps com IA. Se quiser ver mais tipos de app e os prompts por trás deles, leia nossos exemplos de vibe coding.

Perguntas