Vibe coding para iniciantes: crie seu primeiro app com IA
Você tem uma ideia de aplicativo, mas não sabe programar? O vibe coding permite começar descrevendo o que deseja em uma conversa com inteligência artificial. A ferramenta cria as telas e o código, enquanto você testa o resultado e pede correções.
Neste passo a passo, vamos usar o Lovable, a plataforma mais intuitiva do mercado. O ideal é começar com uma ideia simples, usamos aqui como exemplo criar uma lista de tarefas. A Lovable foi desenvolvida para transformar instruções escritas de forma simples em sites e aplicativos web, sem exigir conhecimento técnico.
O resultado poderá ser aberto no computador ou no celular por meio de um link. Ele não será enviado automaticamente para a App Store ou para o Google Play.
O que dá para fazer gratuitamente
O plano gratuito permite criar projetos privados dentro do editor, o aplicativo em um endereço como nomedoprojeto.lovable.app. O site publicado pode ser acessado por qualquer pessoa que tenha o link.
A principal limitação está nos créditos, unidades consumidas quando a inteligência artificial constrói ou modifica o projeto.
A conta gratuita recebe cinco créditos de construção por dia, até o teto de 30 por mês. Os créditos diários não acumulam. Ao alcançar o limite mensal, é necessário esperar o mês seguinte ou contratar um plano. Ela também oferece mensalmente:
- 20 créditos para a infraestrutura de nuvem;
- quatro créditos para recursos de IA que funcionem dentro do aplicativo.
Essas franquias podem sustentar testes e projetos pequenos. Caso o uso ultrapasse os limites, não é possível comprar créditos adicionais sem migrar para um plano pago.
Na prática, a versão gratuita serve para criar um protótipo, fazer algumas rodadas de ajustes e publicar um aplicativo simples no endereço fornecido pelo Lovable.
O que muda no plano Pro
O Pro custa US$ 25 por mês, cerca de R$ 128, e inclui 100 créditos mensais. No pagamento anual, são cobrados US$ 250, aproximadamente R$ 1.284, equivalentes a cerca de US$ 21, ou R$ 107, por mês.
Além dos créditos contratados, o plano recebe cinco créditos gratuitos por dia sem o teto mensal.
O Pro também permite:
- conectar um domínio próprio;
- remover a marca “Edit with Lovable”;
- acessar o editor de código;
- baixar o projeto;
- comprar créditos extras;
- ativar recargas automáticas;
- receber suporte por e-mail.
Os 20 créditos mensais de nuvem e os quatro destinados a recursos de IA continuam incluídos.
O plano pago faz mais sentido para quem pretende corrigir e ampliar o aplicativo com frequência, usar um endereço profissional ou evitar que o trabalho pare quando os créditos gratuitos acabam.
Ele não transforma o projeto em um aplicativo nativo para iPhone ou Android.
Passo 1. Escolha uma ideia pequena
Comece por algo que possa ser conferido sem conhecimento técnico. Uma lista de tarefas é adequada porque você consegue testar se os botões adicionam, concluem e apagam itens.
Evite iniciar com pagamentos, prontuários, informações de clientes ou uma rede social. Esses projetos exigem regras de segurança, privacidade e funcionamento mais complexas.
Passo 2. Crie a conta e abra um projeto
Entre no site do Lovable, faça o cadastro e localize a caixa usada para descrever um novo projeto. A plataforma cria automaticamente um espaço de trabalho gratuito.
Use preferencialmente um computador no primeiro teste. A tela maior facilita acompanhar a conversa e visualizar o aplicativo ao mesmo tempo.
Passo 3. Envie um pedido detalhado
Cole o comando abaixo na caixa de criação:
Prompt para copiar
Crie um aplicativo web chamado “Minhas Tarefas”.
Ele deve ser simples para uma pessoa sem familiaridade com tecnologia e funcionar bem no celular e no computador.
Inclua:
- Um campo para digitar a tarefa.
- Um botão “Adicionar”.
- Opções para marcar a tarefa como concluída ou excluí-la.
- Filtros para mostrar todas, pendentes ou concluídas.
- Armazenamento local no navegador, para manter a lista depois que a página for atualizada.
Use português brasileiro, letras legíveis, bom contraste e botões fáceis de reconhecer.
Não crie login, pagamentos, notificações ou integrações externas. Não acrescente funções que não foram solicitadas. Ao terminar, verifique se todos os botões funcionam.
Um comando detalhado reduz as decisões deixadas para a IA e evita gastar créditos com diversas correções pequenas.
Passo 4. Teste antes de pedir mudanças
Crie três tarefas. Marque uma como concluída, exclua outra, teste os filtros e atualize a página. Confira também a visualização para celular.
Quando houver um erro, não escreva apenas “não funciona”. Informe a ação realizada, o resultado esperado e o que aconteceu.
Prompt para relatar um erro
Encontrei um problema.
Ação realizada: [descreva o que fez].
Resultado esperado: [explique o que deveria acontecer].
Resultado obtido: [conte o que apareceu].
Corrija somente esse erro. Não altere o visual nem outras funções. Depois, teste novamente o mesmo fluxo.
O Lovable também oferece testes no navegador. A IA pode preencher campos, clicar em botões e verificar o comportamento em diferentes tamanhos de tela. Ainda assim, faça uma conferência manual.
Passo 5. Ajuste o visual
Quando as funções estiverem corretas, peça mudanças na aparência separadamente.
Prompt para melhorar o visual
Mantenha todas as funções atuais. Altere somente o visual.
Use fundo claro, espaços maiores, títulos destacados e botões legíveis. As tarefas concluídas devem continuar visíveis, mas precisam ter uma indicação por texto e uma aparência diferente.
Garanta bom contraste e funcionamento em telas pequenas.
Alterar uma parte por vez facilita identificar qual pedido provocou um problema.
Passo 6. Revise a segurança
Antes de publicar, elimine nomes, e-mails, documentos e outros dados reais usados nos testes.
A empresa informa que dados do cliente que não identifiquem uma pessoa podem ser usados no treinamento de modelos. Usuários dos planos Free e Pro podem solicitar a exclusão desse uso entrando em contato com o suporte.
Ao abrir a janela de publicação, o Lovable executa verificações de segurança. Elas ajudam a localizar problemas, mas não substituem uma revisão profissional em aplicativos que armazenem dados pessoais, recebam pagamentos ou sejam usados comercialmente.
Passo 7. Publique
Clique em Publish, escolha o endereço gratuito e confirme. Quando o processo terminar, abra o link em outra aba e repita os testes.
As alterações posteriores não entram no ar automaticamente. Depois de editar o projeto, use Publish e Update.
No Free, o endereço termina em lovable.app e mantém a marca da plataforma. No Pro, é possível usar domínio próprio e remover o selo.
Em ambos os planos, a publicação gera um aplicativo web. Para entrar na App Store ou no Google Play, são necessárias etapas e ferramentas adicionais.
