Exemplos de vibe coding: 10 tipos de app reais, prompts e o que deu errado

Os exemplos mais comuns de vibe coding são apps web pequenos e úteis: controles, páginas de agendamento, ferramentas internas, portais de clientes, landing pages, quizzes, dashboards e ferramentas simples de IA. Abaixo estão dez deles. Para cada um você vê quem cria, o primeiro prompt, o que costuma dar errado e o prompt de correção.

São composições dos projetos que as pessoas mais levam a criadores de apps com IA, não estudos de caso de uma pessoa só. Os prompts podem ser copiados. As falhas são as que aparecem sempre, e por isso são a parte mais útil. Se o vibe coding ainda é novidade para você, comece por o que é vibe coding.

1. Um controle de orçamento pessoal

Quem cria: pessoas que tentaram planilhas e desistiram.

Primeiro prompt:

Crie um controle de orçamento mensal. Eu adiciono despesas com valor, categoria (comida, aluguel, transporte, lazer, outros), data e uma observação. Mostre o total do mês por categoria em um gráfico de barras e uma lista das despesas recentes. Posso definir um orçamento por categoria e ver quanto ainda resta.

O que deu errado: o gráfico contava todas as despesas já lançadas, não só as do mês, então no segundo mês toda categoria parecia estourada. Além disso, valores digitados com vírgula ("1,200") eram salvos como 1.

Prompt de correção:

O gráfico e os totais devem incluir apenas as despesas do mês selecionado. Adicione um seletor de mês no topo, com o mês atual como padrão. Aceite também valores digitados com vírgulas ou espaços e guarde-os como números.

Lição: "este mês" é uma regra. Diga as regras em voz alta.

2. Uma página de agendamento para um salão pequeno

Quem cria: donos de pequenos negócios cansados de agendar por telefone e DM.

Primeiro prompt:

Crie uma página de agendamento para o meu salão. Os clientes escolhem um serviço, uma data e um horário livre, e depois informam nome e telefone. Tenho uma página de administração privada, com login, que mostra os agendamentos por dia.

O que deu errado: dois clientes marcaram o mesmo horário das 10:00 com um minuto de diferença, porque a página só verificava a disponibilidade quando carregava pela primeira vez. Além disso, uma coloração de 90 minutos não bloqueava os horários seguintes.

Prompt de correção:

Quando um cliente enviar um agendamento, verifique no servidor se todos os horários que ele cobre ainda estão livres e rejeite com "Esse horário acabou de ser ocupado" se não estiverem. Um serviço bloqueia toda a sua duração, então um agendamento de 90 minutos às 10:00 bloqueia 10:00, 10:30 e 11:00.

Lição: tudo o que duas pessoas podem fazer ao mesmo tempo precisa de uma verificação no servidor. Veja como criar um app de agendamento para a versão completa.

3. Um cardápio de restaurante com QR code

Quem cria: donos de cafés e restaurantes que reimprimem o cardápio com frequência demais.

Primeiro prompt:

Crie um site de cardápio para celular para o meu café. Seções de café da manhã, almoço, bebidas e sobremesas, cada item com nome, preço, descrição curta e etiquetas alimentares (vegano, sem glúten). Preciso de uma página de administração para editar itens e marcá-los como esgotados. Mostre um QR code que eu possa imprimir e que leve ao cardápio.

O que deu errado: nada quebrou, mas o cardápio ficou lento no Wi-Fi do café porque fotos de celular em tamanho original eram carregadas para cada item.

Prompt de correção:

As fotos do cardápio estão pesadas demais. Redimensione as imagens enviadas para no máximo 800px de largura, comprima-as e carregue-as sob demanda conforme o visitante rola a página.

Lição: teste em uma conexão lenta, não só no seu escritório.

4. Um controle de equipamentos ou estoque para uma equipe

Quem cria: o pessoal de operações que quer substituir uma planilha compartilhada.

Primeiro prompt:

Crie uma ferramenta de inventário para a equipe do nosso depósito. Os itens têm nome, SKU, quantidade, local e um nível mínimo. A equipe entra com login e pode adicionar estoque, retirar estoque informando o motivo e ver uma lista de itens abaixo do mínimo destacados em vermelho. Guarde um histórico de cada alteração e de quem a fez.

O que deu errado: o histórico mostrava "usuário 3" em vez de nomes, e retirar mais estoque do que havia deixava a quantidade negativa.

Prompt de correção:

Mostre o nome da pessoa no histórico, não o ID. Não permita uma retirada que leve a quantidade abaixo de zero; mostre "Só há 4 em estoque" no lugar.

Lição: descreva o que deve ser impossível, não só o que deve ser possível. Nosso guia sobre como criar um app de controle de estoque cobre o resto.

5. Um portal de clientes para um freelancer ou estúdio

Quem cria: designers, contadores, consultores e agências.

Primeiro prompt:

Crie um portal de clientes. Eu convido clientes por e-mail. Cada cliente entra com login e vê apenas os próprios projetos, arquivos e faturas, e pode deixar comentários. Eu entro como administrador e vejo tudo.

O que deu errado: esta é a falha mais importante da lista. As páginas mostravam a cada cliente apenas os próprios projetos, mas o servidor devolvia qualquer projeto se você mudasse o número na barra de endereço. Navegar como um único cliente nunca revelava isso.

Prompt de correção:

Revise todas as rotas do servidor que devolvem projetos, arquivos, comentários ou faturas. Cada uma deve confirmar que o cliente logado é dono do registro e, caso contrário, responder "não encontrado". Depois teste: entre como cliente A e tente abrir o projeto do cliente B pelo ID.

Lição: esconder algo na tela não é o mesmo que protegê-lo. Mais sobre isso em vibe coding é seguro?.

6. Uma página de lançamento com lista de espera

Quem cria: fundadores que testam uma ideia antes de construí-la.

Primeiro prompt:

Crie uma landing page para um app que ajuda professores particulares a agendar aulas e receber pagamentos. Título principal, subtítulo, cadastro por e-mail, três benefícios, uma seção de como funciona e um FAQ. Salve os cadastros em um banco de dados com a data e me deixe baixá-los em CSV em uma página privada.

O que deu errado: em poucos dias a lista se encheu de cadastros falsos de bots, e a página não tinha título nem descrição, então links compartilhados mostravam uma prévia em branco.

Prompt de correção:

Adicione proteção básica contra bots ao formulário de cadastro (um campo honeypot oculto e um limite de 5 cadastros por IP por hora). Adicione título da página, meta description e uma imagem para compartilhamento social.

Lição: um formulário público sempre é encontrado. Veja como criar uma página de lista de espera.

7. Um app de quiz para um professor

Quem cria: professores e instrutores que querem algo mais leve que um LMS.

Primeiro prompt:

Crie um app de quiz para a minha turma. Eu crio quizzes com perguntas de múltipla escolha e uma resposta correta cada. Os alunos entram com um código e o primeiro nome, respondem às perguntas e veem a pontuação no final. Eu vejo uma tabela de resultados por quiz.

O que deu errado: as respostas corretas eram enviadas ao navegador junto com as perguntas, então um aluno curioso podia lê-las no código-fonte da página. Os alunos também podiam reenviar até tirar 100%.

Prompt de correção:

Não envie as respostas corretas ao navegador. Confira as respostas no servidor depois do envio. Permita um envio por nome de aluno por quiz e avise o professor se alguém tentar de novo.

Lição: o navegador pertence ao usuário. Tudo o que está nele pode ser lido.

8. Uma pequena ferramenta de IA

Quem cria: profissionais de marketing, redatores e fundadores que querem um assistente de IA focado.

Primeiro prompt:

Crie uma ferramenta que transforme a descrição de um produto em cinco posts de redes sociais em tons diferentes (amigável, especialista, divertido, curto, longo). Use uma API de IA. Eu colo a descrição, escolho uma plataforma e recebo os posts com botões de copiar.

O que deu errado: a primeira versão chamava o serviço de IA direto do navegador, com a chave de API dentro da página, onde qualquer pessoa podia copiá-la e gerar uma conta enorme.

Prompt de correção:

Mova a chamada de IA para o servidor. Guarde a chave de API como segredo, nunca no código do frontend. Limite cada visitante a 20 gerações por dia.

Lição: chaves pertencem a segredos no servidor. Veja como manter chaves de API seguras e como adicionar recursos de IA ao seu app.

9. Um site de negócios em árabe e inglês

Quem cria: empresas do Golfo e do mundo árabe em geral que atendem em dois idiomas.

Primeiro prompt:

Crie um site para a minha empresa de design de interiores em árabe e inglês, com um seletor de idioma. Páginas: início, serviços, portfólio, sobre e contato. O árabe deve ser totalmente da direita para a esquerda.

O que deu errado: o texto em árabe estava alinhado à direita, mas o layout não foi espelhado: as setas continuavam apontando para o lado errado e o menu ficava no lado errado. Números de telefone também apareciam invertidos em alguns pontos.

Prompt de correção:

Em árabe, espelhe o layout inteiro: defina a direção da página como da direita para a esquerda, coloque o menu à direita, inverta os ícones direcionais e mantenha telefones e e-mails da esquerda para a direita dentro do texto em árabe.

Lição: da direita para a esquerda é um layout, não um alinhamento. O Mythex lida com árabe e outros layouts da direita para a esquerda, e você pode escrever os prompts direto em árabe.

10. Um controle que vira app de celular

Quem cria: treinadores, academias e grupos comunitários cujos usuários vivem no celular.

Primeiro prompt:

Crie um diário de treino para os meus alunos de personal training. Cada aluno entra com login, vê o plano que atribuí para a semana, marca os exercícios feitos e registra as cargas. Eu vejo o progresso de cada aluno em um gráfico.

O que deu errado: o app web funcionava, mas no celular os botões eram pequenos demais para tocar no meio do treino e o gráfico ficava ilegível.

Prompt de correção:

Projete isto para uso com uma mão no celular: áreas de toque grandes na parte de baixo da tela, um exercício por tela com botões grandes de Próximo e Feito e um gráfico simples de progresso semanal.

Lição: se as pessoas vão usar no celular, projete primeiro para o celular. No Mythex Pro, o app publicado pode então virar um app Android para o Google Play e um app de iPhone enviado ao TestFlight; o app de celular abre seu app publicado, então cada Publish o atualiza. Veja a página do criador de apps para celular.

Os padrões por trás desses exemplos

Nos dez casos, as falhas se dividem em poucos grupos:

Nenhum desses casos exige que você leia código. Exigem que você teste como um usuário curioso e um pouco hostil, e que descreva com precisão o que vê.

Experimente um você mesmo

Escolha o exemplo mais próximo da sua ideia, copie o primeiro prompt e mude os detalhes. Depois use o prompt de correção como checklist antes de compartilhar. Nossa folha de prompts de vibe coding tem mais 30, e como criar um app com vibe coding acompanha um projeto da ideia ao app publicado. Quando estiver pronto, comece no criador de apps com IA ou veja os templates para sair na frente.

Perguntas