Guia prático
Este tutorial de vibe coding para iniciantes mostra como criar uma página simples de lista de tarefas. Descreva o que ela deve fazer, confira o resultado e use o que observar para orientar a próxima mudança.
Uma página simples de lista de tarefas é suficiente para praticar o ciclo completo. Você não precisa planejar um aplicativo inteiro antes de escrever seu primeiro prompt.
Use este ciclo curto sempre que praticar vibe coding: peça um resultado específico, teste você mesmo e, depois, solicite uma correção pontual.
Peça uma página de lista de tarefas com um campo de texto, um botão para adicionar tarefas, caixas de seleção e uma forma de limpar as tarefas concluídas. Diga o que deve acontecer após atualizar a página e mantenha o pedido visual simples.
Adicione uma tarefa, marque-a como concluída, limpe as tarefas concluídas e recarregue a página. Anote exatamente qual ação falha, em vez de julgar o projeto inteiro pela aparência.
Descreva a ação que falha e o comportamento esperado: por exemplo, as tarefas desaparecem após atualizar a página, mas deveriam permanecer. Teste a mesma ação novamente após a alteração.
Os itens obrigatórios mantêm este tutorial focado no comportamento observável. Os itens opcionais facilitam a identificação de problemas.
Um navegador no qual você possa abrir e interagir com a página gerada — Você precisa clicar nos controles e recarregar a página para verificar o comportamento.
Uma descrição da sua página de lista de tarefas em uma frase — Indique a ação do usuário e o que deve acontecer em seguida.
Uma lista curta de testes: adicionar, concluir, limpar e atualizar — Repita as mesmas verificações após cada alteração relevante.
Exemplos de nomes de tarefas sem informações privadas — Experimente primeiro um texto comum, depois uma entrada vazia e uma entrada longa.
Uma janela estreita do navegador, como em um celularopcional — Use-a para verificar se os botões e o texto das tarefas continuam fáceis de usar.
Quando esta pequena página estiver funcionando, passe para um projeto com um novo desafio, em vez de adicionar todos os recursos de uma vez.
As ferramentas mudaram, mas o hábito útil deste tutorial continua o mesmo: examine um resultado antes de pedir outro.
A prévia técnica do GitHub Copilot levou sugestões de código por IA ao fluxo de trabalho no editor. O desenvolvedor ainda precisava ler a sugestão e decidir se ela era adequada.
O lançamento público do ChatGPT facilitou a descrição de uma tarefa de programação em linguagem cotidiana e a formulação de perguntas sobre o resultado.
Ferramentas que geram prévias de interfaces facilitaram a comparação entre a tela solicitada e o que apareceu, permitindo então descrever uma mudança concreta.
Andrej Karpathy popularizou o termo vibe coding. Para quem está começando, a lição prática não é aceitar todos os resultados: execute a página e relate o que realmente acontece.
Trate um resultado inesperado como informação para o próximo prompt. Essas verificações são mais confiáveis do que pedir repetidamente uma versão melhor.
1
Clique em Adicionar após digitar o nome de uma tarefa curta. Se nenhuma nova linha aparecer, diga ao Vibe Code em qual botão você clicou, o que digitou e o que esperava ver. Peça que essa interação funcione antes de solicitar mudanças visuais. Após a correção, tente também adicionar uma tarefa sem nome: a página deve rejeitá-la claramente ou tratá-la de forma intencional.
2
Primeiro, confirme que adicionar e concluir tarefas funciona antes de recarregar a página. Depois, atualize-a e observe se a lista reaparece. Se ela desaparecer, peça que as tarefas sejam mantidas durante a sessão do navegador ou no dispositivo local e especifique que as ações de adicionar e concluir que já funcionam devem continuar funcionando. Isso torna a correção verificável e ajuda a evitar que ela prejudique outro controle.
3
Reduza a largura do navegador e procure botões cortados, nomes de tarefas que ultrapassam os limites ou controles próximos demais uns dos outros. Descreva o problema específico na tela em vez de pedir uma reformulação completa. Depois das mudanças no layout, teste novamente as ações das tarefas em larguras estreitas e largas; mudanças visuais podem afetar acidentalmente as áreas clicáveis.
Uma demonstração funcional é um marco útil, não uma prova de que todos os casos extremos foram resolvidos. Tenha essas limitações em mente ao ampliá-la.
A página da lista de tarefas pode parecer completa mesmo que uma caixa de seleção, a ação de limpar ou o comportamento ao atualizar a página não funcione.
O que fazer em vez disso
Repita a mesma lista de testes com quatro ações após cada alteração e registre exatamente qual ação falha.
Um pequeno exercício local não pode comprovar que o código gerado é seguro para dados sensíveis ou para publicação.
O que fazer em vez disso
Use tarefas fictícias como exemplo, evite inserir informações sigilosas e providencie uma revisão separada do código e da segurança antes de lidar com dados reais de usuários.
Campos vazios, textos muito longos e cliques repetidos podem produzir resultados diferentes dos esperados no fluxo normal.
O que fazer em vez disso
Adicione os casos extremos à sua lista de testes, um de cada vez, e solicite uma correção específica para cada falha.
O fato de as tarefas permanecerem após atualizar a página em um dispositivo não significa que aparecerão em outro navegador ou dispositivo.
O que fazer em vez disso
Decida se o acesso entre dispositivos é realmente necessário antes de solicitar recursos de armazenamento ou de conta.
Use o prompt da lista de tarefas para começar e depois teste cada ação por conta própria. Este tutorial de vibe coding para iniciantes é mais útil quando cada solicitação seguinte descreve um problema observado e um resultado que pode ser testado.
Crie uma página de lista de tarefas com um campo de entrada, um botão Adicionar, caixas de seleção e uma ação para limpar as tarefas concluídas. Cada controle produz um resultado visível, o que torna mais fácil testar a página do que um aplicativo grande e descrito de forma vaga.
Você pode começar descrevendo a página em linguagem comum e testando seus controles em um navegador. Aprender a ler mensagens de erro básicas e reconhecer as partes de uma página ajudará você a fazer correções mais precisas.
Dê um nome à página, liste seus controles essenciais e diga o que cada um deve fazer. Inclua um requisito importante, como manter as tarefas após atualizar a página, mas deixe os detalhes decorativos para uma etapa posterior.
Descreva a ação que você realizou, o que aconteceu e o que esperava que acontecesse. Por exemplo, diga que clicar em Adicionar depois de digitar uma tarefa não cria uma nova linha. Então, peça para corrigir essa interação e teste-a novamente.
Neste exercício, ele estará concluído quando você conseguir adicionar uma tarefa, marcá-la como concluída, limpar as tarefas concluídas e atualizar a página sem perder tarefas inesperadamente. Teste também uma entrada vazia e uma tela estreita antes de considerar a primeira versão pronta.