Exemplos de vibe coding: 10 tipos de app reais, prompts e o que correu mal

Os exemplos mais comuns de vibe coding são apps web pequenas e úteis: controlos, páginas de reserva, ferramentas internas, portais de clientes, páginas de destino, questionários, painéis e ferramentas simples de IA. Abaixo ficam dez deles. Para cada um vai ver quem o constrói, o primeiro prompt, o que normalmente corre mal e o prompt de seguimento que o corrige.

São compostos dos projetos que as pessoas mais levam aos criadores de apps com IA, e não estudos de caso de uma pessoa concreta. Os prompts podem ser copiados. As falhas são as que voltam a aparecer uma e outra vez, e por isso é que são a parte útil. Se o vibe coding é novidade para si, comece por o que é o vibe coding.

1. Um controlo de orçamento pessoal

Quem o constrói: particulares que já tentaram folhas de cálculo e desistiram.

Primeiro prompt:

Crie um controlo de orçamento mensal. Acrescento despesas com montante, categoria (alimentação, renda, transportes, lazer, outros), data e uma nota. Mostre o total do mês atual por categoria num gráfico de barras e uma lista das despesas recentes. Posso definir um orçamento por categoria e ver quanto resta.

O que correu mal: o gráfico contava todas as despesas já introduzidas, e não só as deste mês, por isso, ao segundo mês, todas as categorias pareciam ultrapassadas. Além disso, os montantes escritos com vírgula (“1,200”) eram guardados como 1.

Prompt de correção:

Os gráficos e os totais devem incluir apenas as despesas do mês selecionado. Adicione no topo um seletor de mês, com o mês atual por defeito. Aceite também montantes escritos 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 reservas para um pequeno salão

Quem o constrói: pequenos empresários cansados de marcar por telefone e por mensagens privadas.

Primeiro prompt:

Crie uma página de reservas para o meu salão. Os clientes escolhem um serviço, uma data e um horário livre, depois introduzem o nome e o telefone. Tenho uma página de administração privada, atrás de um início de sessão, que mostra as reservas por dia.

O que correu mal: duas clientes reservaram o mesmo horário das 10:00 com menos de um minuto de diferença, porque a página só verificava a disponibilidade quando era carregada pela primeira vez. Uma reserva de cor de 90 minutos também não bloqueava os horários seguintes.

Prompt de correção:

Quando um cliente submete uma reserva, verifique no servidor que todos os horários que ela ocupa continuam livres, e recuse-a com “Esse horário acabou de ser ocupado” se não estiverem. Um serviço bloqueia toda a sua duração, por isso uma reserva de 90 minutos às 10:00 bloqueia 10:00, 10:30 e 11:00.

Lição: tudo o que duas pessoas possam fazer ao mesmo tempo precisa de uma verificação do lado do servidor. Veja como criar uma app de reservas para a versão completa.

3. Uma ementa de restaurante com código QR

Quem o constrói: donos de cafés e restaurantes que reimprimem as ementas com demasiada frequência.

Primeiro prompt:

Crie um site de ementa para telemóvel para o meu café. Secções para pequeno-almoço, almoço, bebidas e sobremesas, cada prato com nome, preço, descrição curta e etiquetas alimentares (vegan, sem glúten). Preciso de uma página de administração para editar os pratos e marcá-los como esgotados. Mostre um código QR que possa imprimir e que aponte para a ementa.

O que correu mal: nada avariou, mas a ementa era lenta na rede Wi-Fi do café porque eram carregadas fotografias de telemóvel em tamanho real para cada prato.

Prompt de correção:

As fotografias da ementa estão demasiado pesadas. Redimensione as imagens carregadas para um máximo de 800 px de largura, comprima-as e carregue-as de forma preguiçosa à medida que o visitante desce na página.

Lição: teste numa ligação lenta, e não apenas no seu escritório.

4. Um controlo de equipamento ou de stock para uma equipa

Quem o constrói: pessoas de operações que substituem uma folha de cálculo partilhada.

Primeiro prompt:

Crie uma ferramenta de inventário para a nossa equipa de armazém. Os artigos têm nome, referência (SKU), quantidade, localização e um nível mínimo. A equipa inicia sessão e pode acrescentar stock, retirar stock com um motivo e ver uma lista dos artigos abaixo do mínimo, destacados a vermelho. Mantenha um histórico de cada alteração e de quem a fez.

O que correu mal: o histórico mostrava “utilizador 3” em vez de nomes, e retirar mais stock do que o disponível tornava a quantidade negativa.

Prompt de correção:

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

Lição: descreva o que deve ser impossível, e não apenas o que deve ser possível. O nosso guia sobre como criar uma app de gestão de inventário cobre o resto.

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

Quem o constrói: designers, contabilistas, consultores e agências.

Primeiro prompt:

Crie um portal de clientes. Convido os clientes por email. Cada cliente inicia sessão e vê apenas os seus próprios projetos, ficheiros e faturas, e pode deixar comentários. Eu entro como administrador e vejo tudo.

O que correu mal: esta é a falha mais importante da lista. As páginas só mostravam a cada cliente os seus próprios projetos, mas o servidor devolvia qualquer projeto se alterasse o número na barra de endereços. Navegar como um cliente não revelava o problema.

Prompt de correção:

Verifique cada rota do servidor que devolva projetos, ficheiros, comentários ou faturas. Cada uma deve confirmar que o cliente com sessão iniciada é o proprietário do registo, e devolver “não encontrado” caso contrário. Depois teste: inicie sessão como cliente A e tente abrir o projeto do cliente B pelo seu ID.

Lição: esconder algo no ecrã não é o mesmo que protegê-lo. Saiba mais em o vibe coding é seguro?.

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

Quem o constrói: fundadores que testam uma ideia antes de a construir.

Primeiro prompt:

Crie uma página de destino para uma app que ajuda explicadores a marcar aulas e a receber pagamentos. Título principal, subtítulo, inscrição por email, três benefícios, uma secção de como funciona e um FAQ. Guarde as inscrições numa base de dados com a data, e permita-me descarregá-las em CSV a partir de uma página privada.

O que correu mal: em poucos dias a lista encheu-se de inscrições falsas feitas por robôs, e a página não tinha título nem descrição, por isso as ligações partilhadas mostravam uma pré-visualização em branco.

Prompt de correção:

Adicione uma proteção básica contra robôs ao formulário de inscrição (um campo oculto de armadilha e um limite de 5 inscrições por IP por hora). Acrescente um título de página, uma meta descrição e uma imagem para partilha nas redes sociais.

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

7. Uma app de questionários para um professor

Quem o constrói: professores e formadores que querem algo mais leve do que um LMS.

Primeiro prompt:

Crie uma app de questionários para a minha turma. Eu crio questionários com perguntas de escolha múltipla e uma única resposta correta em cada uma. Os alunos entram com um código e o primeiro nome, respondem às perguntas e veem a sua pontuação no fim. Vejo uma tabela de resultados por questionário.

O que correu mal: as respostas corretas eram enviadas para o navegador juntamente com as perguntas, por isso um aluno curioso podia lê-las no código-fonte da página. Os alunos também podiam voltar a submeter até obterem 100%.

Prompt de correção:

Não envie as respostas corretas para o navegador. Verifique as respostas no servidor depois da submissão. Permita uma submissão por nome de aluno e por questionário, e mostre ao professor quando alguém tentar de novo.

Lição: o navegador pertence ao utilizador. Tudo o que lá está pode ser lido.

8. Uma pequena ferramenta de IA

Quem o constrói: 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 publicações para redes sociais, em tons diferentes (simpático, especializado, brincalhão, curto, longo). Use uma API de IA. Colo a descrição, escolho a plataforma e recebo as publicações com botões de cópia.

O que correu mal: a primeira versão chamava o serviço de IA diretamente a partir do navegador, com a chave da API dentro da página, onde qualquer pessoa a podia copiar e fazer disparar a fatura.

Prompt de correção:

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

Lição: as chaves pertencem a segredos no servidor. Veja como manter as chaves de API seguras e como acrescentar funcionalidades de IA à sua app.

9. Um site empresarial em árabe e inglês

Quem o constrói: empresas do Golfo e do mundo árabe em geral que servem 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, portefólio, sobre nós e contacto. O árabe deve ser totalmente da direita para a esquerda.

O que correu mal: o texto árabe estava alinhado à direita, mas o layout não foi espelhado: as setas continuavam a apontar para o lado errado e o menu ficava do lado oposto. Os números de telefone também apareciam invertidos em alguns sítios.

Prompt de correção:

Em árabe, espelhe todo o layout: defina a direção da página como da direita para a esquerda, coloque o menu à direita, inverta os ícones direcionais e mantenha os números de telefone e os emails da esquerda para a direita dentro do texto árabe.

Lição: a direita para a esquerda é um layout, e não apenas um alinhamento. O Mythex suporta árabe e outros layouts da direita para a esquerda, e pode escrever os prompts diretamente em árabe.

10. Um controlo que se torna uma app para telemóvel

Quem o constrói: treinadores, ginásios e grupos comunitários cujos utilizadores vivem no telemóvel.

Primeiro prompt:

Crie um registo de treinos para os meus clientes de treino personalizado. Cada cliente inicia sessão, vê o plano que lhe atribuí para a semana, assinala os exercícios e regista os pesos. Vejo o progresso de cada cliente num gráfico.

O que correu mal: a app web funcionava, mas nos telemóveis os botões eram demasiado pequenos para tocar durante o treino e o gráfico era ilegível.

Prompt de correção:

Desenhe isto para uso com uma mão num telemóvel: alvos de toque grandes na parte inferior do ecrã, um exercício por ecrã com botões grandes de Seguinte e Feito, e um gráfico semanal de progresso simples.

Lição: se as pessoas vão usar no telemóvel, desenhe primeiro para o telemóvel. No Mythex Pro, a app publicada pode depois tornar-se uma app Android para o Google Play e uma app iPhone enviada para o TestFlight; a app para telemóvel abre a sua app publicada, por isso cada publicação a atualiza. Veja a página do criador de apps para telemóvel.

Os padrões por detrás destes exemplos

Em todos os dez, as falhas dividem-se em alguns grupos:

Nenhuma destas falhas exige ler código. Exige testar como um utilizador curioso e um pouco hostil, e descrever com precisão o que vê.

Experimente você mesmo

Escolha o exemplo mais próximo da sua ideia, copie o primeiro prompt e altere os detalhes. Depois, use o prompt de correção como lista de verificação antes de partilhar. O nosso guia de prompts de vibe coding tem mais 30, e como criar uma app com vibe coding percorre um projeto desde a ideia até à app publicada. Quando estiver pronto, comece no criador de apps com IA ou explore os modelos para ganhar tempo.

Perguntas