Como criar apps com IA só conversando: 5 ideias para começar no Vibe Coding
Por Marcelo Fischer Salvatico |
Uma nova geração de ferramentas de inteligência artificial permite criar aplicativos, sites e calculadoras sem escrever código, apenas descrevendo em texto o que se quer construir. O método, chamado de vibe coding, inverte a lógica tradicional de desenvolvimento: em vez de começar pela linguagem de programação, o usuário começa pela intenção.
Plataformas como Claude com Artifacts, Replit Agent, Lovable e Bolt.new transformam essas descrições em interface, lógica de funcionamento e, dependendo do caso, banco de dados e publicação.
Abaixo, o Canaltech preparou um guia de como começar a criar aplicativos com vibe coding, com exemplos práticos de prompts para utilizar. No texto, você confere:
- O que é vibe coding
- Planejamento antes de abrir a ferramenta de IA
- Qual ferramenta usar em cada projeto
- Passo a passo para criar um app com vibe coding
- Ideias de projeto para começar
O que é vibe coding
Vibe coding é o processo de criar software por meio de diálogo com uma IA. O usuário informa o que quer construir, quais regras o projeto deve seguir, qual aparência deseja e como a ferramenta deve se comportar.
A inteligência artificial converte essas instruções em código e interface. Mas isso não elimina a necessidade de revisão. Projetos que lidam com pagamentos, dados sensíveis, login, informações de saúde ou de clientes exigem testes e checagem técnica antes de irem ao ar.
Planejamento antes de abrir a ferramenta de IA
A qualidade do pedido inicial é essencial para o bom resultado de um projeto criado por vibe coding. Quanto mais específico for o prompt, menos a IA precisa adivinhar sobre o funcionamento esperado do aplicativo.
Um modelo simples de planejamento ajuda a organizar essas informações antes da primeira interação com a ferramenta. Ele funciona como um roteiro que reúne objetivo do projeto, público-alvo, dados de entrada, resultado esperado, aparência e o que não precisa existir na primeira versão.
Confira um exemplo de como esse planejamento pode ser estruturado, aplicado a um gerador de orçamentos para freelancers:
- Meu projeto é: um gerador de orçamentos para freelancers.
- Ele serve para: calcular preço de serviços e gerar um texto pronto para enviar ao cliente.
- Quem vai usar: designers, redatores, social media ou prestadores autônomos.
- Dados de entrada: tipo de serviço, prazo, horas estimadas, valor por hora, urgência e desconto.
- Resultado esperado: valor final, detalhamento do cálculo e texto de proposta.
- Visual desejado: simples, claro, responsivo e com botão para copiar o orçamento.
- Primeira versão deve ter: formulário, cálculo automático e área de resultado.
- Não precisa ter agora: login, pagamento, cadastro de clientes ou emissão fiscal.
Esse roteiro preenchido já pode virar o primeiro prompt enviado à IA.
Qual ferramenta usar em cada projeto
Nem toda plataforma de vibe coding serve para o mesmo tipo de aplicativo. A escolha depende da complexidade do projeto e de quanto o usuário pretende publicar ou editar depois.
O Claude com Artifacts funciona como porta de entrada para protótipos, calculadoras e ferramentas de uso imediato dentro da própria conversa.
Replit Agent é indicado para quem quer mais do que o protótipo. A plataforma integra bancos de dados, autenticação e hospedagem diretamente no fluxo de criação, segundo a documentação oficial do Replit.
O Lovable se conecta ao Supabase — uma plataforma que gerencia a infraestrutura de dados e a segurança das aplicações — para lidar com autenticação, armazenamento e dados de usuários, conforme a documentação da própria ferramenta, e é voltado a quem quer construir interfaces web com aparência mais profissional.
Já o Bolt.new roda em uma tecnologia chamada WebContainers, que executa um ambiente Node.js inteiro dentro do navegador e permite instalar pacotes e rodar aplicações completas sem configuração local, de acordo com o repositório oficial do projeto no GitHub.
Por fim, o Cursor é indicado para quem já tem familiaridade com o processo e quer editar código com mais controle, funcionando melhor como segunda etapa do que como primeira ferramenta para quem nunca programou.
Passo a passo para criar um app com vibe coding
Após fazer o planejamento e escolher onde vai trabalhar, você pode seguir o roteiro abaixo com quatro passos para criar aplicações "conversando" com a IA.
Passo 1: descreva a ideia pela primeira vez
O primeiro prompt deve conter objetivo, público, funcionalidades, aparência, restrições e o que precisa estar pronto na primeira versão. Ele não precisa ser perfeito, apenas claro o suficiente para gerar uma versão testável.
Um modelo de prompt-base para essa etapa é:
"Quero criar um [tipo de projeto] para [público]. Ele deve resolver [problema]. A primeira versão precisa ter [funcionalidades principais]. A interface deve ser [estilo visual]. Evite complexidade desnecessária. Crie uma versão simples, funcional e fácil de testar."
Passo 2: teste como usuário, não como programador
Nessa etapa, o usuário deve clicar em tudo, preencher campos e tentar identificar falhas no sistema. Quando algo não funcionar como esperado, o ideal é descrever exatamente o que aconteceu e o que deveria ter acontecido.
Um prompt de iteração para relatar problemas pode seguir este modelo:
"Testei a ferramenta e encontrei este problema: [descrever o problema]. Eu esperava que acontecesse [resultado esperado], mas aconteceu [resultado real]. Corrija isso sem mudar o restante da interface."
Passo 3: peça melhorias em camadas
Pedir tudo de uma vez costuma gerar confusão e retrabalho. A lógica recomendada é evoluir em etapas: primeiro fazer o projeto funcionar, depois melhorar o visual, depois adicionar recursos e só então publicar.
Um prompt de melhoria visual pode ser:
"Agora que a versão básica funciona, melhore apenas a experiência visual. Deixe a interface mais clara, responsiva e agradável, mas mantenha as mesmas funcionalidades."
Passo 4: publique para usar de verdade
Publicar significa transformar o projeto em um link acessível, seja pela própria plataforma, por integração com hospedagem ou por exportação do código. Antes de compartilhar publicamente, vale testar em celular, revisar textos e verificar se nenhum dado sensível ficou exposto.
Um prompt para essa revisão final pode ser:
"Revise este projeto antes da publicação. Procure textos confusos, botões sem função, campos desnecessários, falhas de usabilidade em celular e qualquer risco de expor dados. Sugira correções antes de eu gerar o link público."
Ideias de projeto para começar
Caso ainda não saiba o app que quer criar com ferramentas de vibe coding, abaixo estão algumas ideias de projeto para teste (ou até uso próprio).
1 - Gerenciador de tarefas personalizado
Um gerenciador de tarefas é um bom ponto de partida por ser um projeto familiar e fácil de testar. A ideia permite adaptar a ferramenta à rotina de quem vai usá-la, seja para estudos, trabalho doméstico ou produção de conteúdo.
O Claude com Artifacts atende bem uma versão rápida e visual. O Replit Agent é mais indicado se o usuário quiser salvar as tarefas em um banco de dados e acessá-las depois em outro dispositivo.
Prompt inicial sugerido:
"Crie um gerenciador de tarefas simples para uma pessoa que trabalha em casa. Ele deve permitir cadastrar tarefas, marcar prioridade, definir prazo, filtrar por status e mostrar uma visão do que preciso fazer hoje. Quero uma interface limpa, em português, fácil de usar no celular."
2 - Gerador de orçamentos para freelancers
Esse projeto conecta IA a uma necessidade prática de quem presta serviços de forma autônoma. Um freelancer pode criar uma ferramenta para padronizar propostas comerciais e evitar cálculos manuais repetidos.
O Claude com Artifacts resolve bem uma calculadora rápida. O Lovable ou o Bolt.new são alternativas melhores quando o objetivo é uma página com formulário e resultado compartilhável.
Prompt inicial sugerido:
"Crie um gerador de orçamentos para freelancers. O usuário deve informar tipo de serviço, valor por hora, horas estimadas, prazo, nível de urgência e desconto opcional. A ferramenta deve calcular o preço final, mostrar o detalhamento e gerar um texto de proposta pronto para copiar e enviar ao cliente."
3 - App "O que tem na geladeira?"
Esse tipo de aplicativo recebe os ingredientes disponíveis em casa e devolve sugestões de receitas simples. A abordagem funciona bem para reduzir desperdício de alimentos e estimular a criatividade na cozinha, sem substituir orientação nutricional profissional.
O Claude com Artifacts serve como protótipo interativo. O Replit Agent entra em cena se o projeto evoluir para salvar receitas favoritas, ingredientes recorrentes e histórico de uso.
Prompt inicial sugerido:
"Crie um app simples chamado 'O que tem na geladeira?'. O usuário deve digitar ingredientes que tem em casa, restrições alimentares e tempo disponível. A ferramenta deve sugerir três receitas fáceis, com modo de preparo, tempo estimado e uma nota dizendo quais ingredientes opcionais poderiam melhorar o prato."
4 - Landing page para um negócio próprio
Uma landing page bem construída ajuda a explicar uma oferta, gerar confiança e levar o visitante a uma ação, como um clique para contato. O projeto atende autônomos, pequenos empreendedores e criadores que precisam de presença digital rápida.
O Lovable e o Bolt.new são indicados para uma interface moderna. O Cursor entra depois, para quem quiser ajustar detalhes específicos no código já gerado.
Prompt inicial sugerido:
"Crie uma landing page para um negócio de [tipo de negócio]. A página deve ter título forte, subtítulo, descrição do serviço, benefícios, seção 'como funciona', depoimentos fictícios claramente marcados como exemplo, perguntas frequentes e botão de contato pelo WhatsApp. Use visual moderno, responsivo e em português."
5 - Quiz interativo para redes sociais
Um quiz simples pode ser usado para entretenimento, engajamento ou como ferramenta de marketing em redes sociais. O formato costuma ter bom potencial de compartilhamento por ser curto e visual.
O Claude com Artifacts permite criar e testar o quiz rapidamente. O Bolt.new ou o Lovable ajudam a transformá-lo em uma página compartilhável com aparência mais profissional.
Prompt inicial sugerido:
"Crie um quiz interativo em português com 7 perguntas sobre [tema]. Cada pergunta deve ter 4 alternativas. No final, mostre uma pontuação e um resultado personalizado em tom divertido. Inclua um botão para reiniciar e uma frase curta para o usuário copiar e compartilhar nas redes sociais."
Confira outros assistentes de programação que podem ajudar com o vibe coding no dia a dia.