Vibe coding para principiantes: como começar, passo a passo

O vibe coding para principiantes resume-se a cinco passos: escolher uma ferramenta que executa a app por si, descrever uma pequena app em palavras simples, experimentá-la como um utilizador, pedir uma correção de cada vez e publicar quando funcionar. Não precisa de saber programar. Este tutorial percorre cada passo com um primeiro projeto real, os prompts exatos a escrever e os erros que quase todos os principiantes cometem na primeira semana.

Se quiser primeiro o contexto, onde surgiu o termo e porque é que as pessoas discutem sobre ele, leia o que é o vibe coding. Esta página é a parte prática.

O que precisa antes de começar

Menos do que imagina:

• Um navegador e uma conta numa ferramenta de vibe coding. Os principiantes devem escolher um criador de apps com IA, que escreve o código, o executa e o aloja, em vez de um assistente de programação que espera que gira você mesmo os ficheiros e os servidores.
• Uma ideia pequena. Não a sua startup. Uma ferramenta para uma pessoa (você) com um ou dois ecrãs.
• Uma ou duas horas sem interrupções. A primeira sessão ensina-lhe o ritmo.

E pronto. Sem instalações, sem curso de programação, sem terminal.

Que ferramenta escolher como principiante

A ferramenta importa menos do que os hábitos, mas deve fazer três coisas: mostrar uma pré-visualização em direto enquanto constrói, permitir desfazer uma alteração má e publicar num link que possa partilhar. A nossa comparação das melhores ferramentas de vibe coding cobre as principais opções com honestidade. O Mythex é uma delas: descreve a app no chat, ele constrói uma app full-stack real com pré-visualização em direto, acrescenta uma base de dados quando a app precisa de guardar informação, e publica com um clique. O plano gratuito não exige cartão.

Passo 1: escolha um primeiro projeto que consiga terminar

Os principiantes costumam falhar por ambicionarem demasiado. Um bom primeiro projeto:

• É útil para si, para o poder testar a sério.
• Cabe em um ou dois ecrãs.
• Guarda uma pequena quantidade dos seus próprios dados.
• Não tem pagamentos, equipas nem dados pessoais sensíveis.

Bons primeiros projetos:

Vamos usar a lista de leitura no resto deste tutorial.

Passo 2: escreva o seu primeiro prompt

A primeira mensagem define a forma de tudo. Diga para quem é, o que faz e como deve parecer. Mantenha-a num parágrafo curto.

Um primeiro prompt fraco:

Faça-me uma app de livros.

Um bom primeiro prompt:

Crie uma app de lista de leitura para mim. Posso acrescentar um livro com título, autor e estado (quero ler, a ler, terminado). Mostre os livros como cartões agrupados por estado, com os mais recentes primeiro. Posso alterar o estado de um livro ou apagá-lo. Mantenha-a limpa e simples: fundo branco, uma cor de destaque, funciona bem no meu telemóvel. Guarde os livros para que continuem lá depois de eu atualizar a página.

Repare no que o segundo faz. Indica os campos, as ações, o layout e uma regra que os principiantes quase sempre esquecem: guardar os dados para que sobrevivam a uma atualização da página. Sem essa frase, muitas ferramentas criam uma página que parece terminada, mas esquece tudo quando a recarrega.

Para mais pontos de partida, veja o nosso guia de prompts de vibe coding.

Peça um plano quando não tiver a certeza

Se não tiver a certeza de como descrever algo, peça à IA que planeie antes de construir:

Antes de construir fosse o que fosse, diga-me em palavras simples que ecrãs vai criar, que dados vai guardar e o que precisa que eu decida.

No Mythex, é para isto que serve o modo Plano: o agente apresenta a abordagem e você aprova-a antes de qualquer ficheiro ser alterado.

Passo 3: teste como um utilizador, e não como quem a construiu

Quando a pré-visualização aparecer, não se limite a admirá-la. Use-a:

1. Acrescente três livros, incluindo um com um título muito longo.
2. Altere um estado. O cartão passa para o grupo certo?
3. Atualize a página. Os livros continuam lá?
4. Tente acrescentar um livro com o título vazio. O que acontece?
5. Abra a pré-visualização no telemóvel, ou reduza a janela do navegador.

Escreva o que está errado em palavras simples. “O título longo parte o layout do cartão” é um relatório de erro perfeito. “Está avariado” não é.

Passo 4: corrija uma coisa de cada vez

Este é o hábito que separa quem termina de quem desiste. Envie uma alteração, verifique-a e só depois envie a seguinte.

O título longo “The Hitchhiker's Guide to the Galaxy: The Complete Trilogy” sai do cartão. Quebre os títulos longos em duas linhas e corte o resto com “…”.

Depois:

Se submeter o formulário com o título vazio, não acontece nada e não aparece nenhuma mensagem. Mostre “Escreva um título” por baixo do campo e não guarde o livro.

Porquê uma de cada vez? Quando pede cinco alterações numa única mensagem, a IA pode fazer quatro bem e estragar outra coisa sem fazer barulho, e não saberá qual das alterações causou o problema. Os passos pequenos também tornam útil o desfazer: se uma alteração correr mal, volte à versão imediatamente anterior e tente um pedido mais claro.

Quando algo se parte

Vai acontecer. Todos os criadores apresentam erros. Copie o texto exato do erro, ou descreva o que clicou e o que viu, e cole-o de volta:

Quando clico em Apagar num cartão, aparece “Algo correu mal” e o livro continua lá. Descubra porquê e corrija. Diga-me qual foi a causa.

Pedir a causa é importante. Ensina-o a perceber como funcionam as apps e impede a IA de adivinhar. O nosso guia sobre como depurar uma app criada com IA vai mais fundo.

Passo 5: torne-a sua

Depois de funcionar, melhore-a nos mesmos pequenos passos:

• “Acrescente uma classificação de 1 a 5 estrelas que apareça nos livros terminados.”
• “Acrescente uma caixa de pesquisa por cima dos cartões que filtre por título ou autor.”
• “Use um fundo branco-quente e um verde-escuro como cor de destaque.”
• “Acrescente um contador no topo: livros terminados este ano.”

Cada uma é uma alteração única e testável.

Passo 6: publique e partilhe

Quando fizer o que precisa, publique-a. No Mythex, isso é um clique, e obtém um URL público que pode abrir em qualquer dispositivo ou enviar a um amigo. Se mais tarde quiser o seu próprio domínio, isso é uma funcionalidade do Pro, e o nosso guia sobre como ligar um domínio personalizado explica como.

Antes de partilhar algo para além de alguns amigos, leia o vibe coding é seguro?. Para uma lista de leitura pessoal, o risco é baixo. Para uma app em que desconhecidos se registam e guardam dados, há verificações que precisa de fazer primeiro.

Erros de principiante a evitar

• Pedir tudo de uma vez. “Crie-me um Goodreads” produz algo que parece impressionante mas funciona mal. Comece pela versão mais pequena que seja útil.
• Não testar a atualização. Dados que desaparecem ao recarregar são a surpresa mais comum dos principiantes.
• Reescrever o pedido do zero de cada vez. Diga o que mudar e o que manter: “Mantenha o layout, altere apenas as cores.”
• Confiar em “está corrigido”. A IA costuma dizer que um erro está corrigido. Verifique você mesmo sempre.
• Colar palavras-passe ou chaves de API no chat. Se a sua app precisar de uma chave para um serviço externo, coloque-a nas definições de segredos da ferramenta, nunca numa mensagem ou no código. Veja como manter as chaves de API seguras.
• Desistir ao primeiro erro. Os erros são normais. Cole-os de volta e peça a causa.

O que aprender pelo caminho

Não precisa de um curso, mas algumas ideias tornam cada pedido mais preciso. Peça à IA que as explique no contexto da sua própria app:

• Frontend e backend: o que corre no navegador do visitante e o que corre num servidor. (Frontend vs backend)
• Base de dados: onde a sua app guarda os dados. (O que é uma base de dados?)
• Autenticação: como a app sabe quem é cada pessoa.
• Segredos: chaves privadas que a app usa e que os visitantes nunca devem ver.

Um bom prompt para isto: “Explique como a minha lista de leitura guarda um livro, desde clicar em Acrescentar até os dados ficarem armazenados. Use palavras simples e refira os ficheiros reais.”

O seu segundo e terceiro projetos

Depois da primeira app, escolha algo um degrau mais difícil. Um registo de hábitos com um gráfico semanal. Um formulário de reservas que lhe envie um email. Um pequeno painel que lê de uma Folha de Google. Os nossos exemplos de vibe coding mostram tipos de app reais com os prompts por detrás e o que correu mal, e como criar uma app com vibe coding leva um projeto maior desde a ideia até uma app publicada com utilizadores.

Quando estiver pronto para começar, abra o criador de apps com IA, cole o prompt da lista de leitura acima e altere-o para a sua própria ideia.

Perguntas