00:00:00Bem-vindos ao Vibe Coding 101. Se você não sabe programar, mas ainda assim quer
00:00:04dar vida a uma ideia, como um site de portfólio, um projeto paralelo ou algo que
00:00:10sempre quis construir, este vídeo é para você. Ao final, você conseguirá criar uma plataforma real
00:00:15sem escrever uma única linha de código. E se você for desenvolvedor, este vídeo também será útil
00:00:21porque, às vezes, você só quer resolver algo rápido sem complicar demais. Então, neste
00:00:26vídeo, vou te guiar pelo processo completo de Vibe Coding, as melhores práticas de cada etapa,
00:00:32e vamos construir um projeto real juntos. Para criar nosso app, usaremos o Abacus AI
00:00:37Deep Agent. Esta é minha plataforma favorita para qualquer tarefa de IA pois, com apenas uma assinatura,
00:00:43você pode criar apps, sites, apresentações e quase tudo. Eu uso principalmente para Vibe
00:00:50Coding porque notei que produz menos erros e é muito acessível em comparação a outros
00:00:54que já testei. Deixei o link na descrição, então não esqueça de conferir.
00:00:59Existem cinco etapas para fazer o Vibe Coding de um app do jeito certo. Muitos já conhecem esses passos,
00:01:05mas o problema é que não sabem as melhores práticas de cada etapa, e é por isso que
00:01:09recebem resultados ruins e inconsistentes da IA. Vamos corrigir isso. O primeiro passo é a
00:01:14fase de ideação. É aqui que você decide o que quer construir. Pode ser seu site de portfólio ou
00:01:19qualquer outra coisa. Se ainda não tiver uma ideia, pode usar a IA para obter sugestões. A que
00:01:25estou usando é o Abacus Chat LLM, que funciona muito bem para isso. Ele seleciona automaticamente o melhor
00:01:31modelo de IA com base na tarefa, garantindo melhores resultados sem que você precise escolher o
00:01:36modelo. Assim que tiver uma ideia, a próxima coisa a fazer é anotá-la. Abra o
00:01:42Google Docs ou Word e descreva sua ideia em linguagem simples. O que você está criando aqui se chama
00:01:47Documento de Requisitos do Produto. Não se assuste com o nome. Para o Vibe Coding, um PRD é apenas um
00:01:53documento de uma ou duas páginas explicando o que você quer criar. Esse documento será o seu prompt inicial.
00:01:59Estou usando um modelo simples de PRD deste artigo. Agradeço ao autor, e recomendo a leitura
00:02:05se quiser aprender mais sobre isso. Se quiser o modelo pronto para preencher, o
00:02:09link de download está na descrição. Vamos repassar as seções rapidamente. Na parte da
00:02:14descrição de uma frase, apenas descreva seu app em uma linha. Vamos criar um site de divisão de despesas
00:02:20para este vídeo. Nossa descrição pode ser algo assim. A próxima seção serve para
00:02:25descrever para quem é o produto e qual problema ele resolve. Depois, você incluirá os principais
00:02:31recursos da sua aplicação. Não precisa ser técnico, escreva o que deseja em linguagem
00:02:36comum e mencione apenas as funções principais. A próxima seção é para dizer o que não construir,
00:02:41evitando que o projeto saia do escopo. Se não tiver certeza, pode pular esta parte por enquanto.
00:02:47Em seguida, temos a seção de fluxo do usuário, que explica a navegação principal do app. Isso também
00:02:52é opcional. A última é a seção de critérios de sucesso. Aqui, você menciona o que define o sucesso
00:02:58dos seus recursos. Também é opcional. E pronto. Se isso parecer muita coisa,
00:03:03um atalho é preencher apenas a descrição de uma frase,
00:03:07colar o modelo no ChatLLM e pedir para ele completar o PRD para você. Feito isso,
00:03:13você está pronto para o passo dois. Nesta fase, você escolherá uma plataforma de vibe coding e colará seu PRD
00:03:19como prompt inicial. É fundamental escolher uma boa plataforma porque, obviamente,
00:03:25para ter ótimos resultados, você precisa de uma ótima ferramenta. Vou usar o Abacus AI
00:03:30Deep Agent. Tudo o que precisa fazer é copiar seu PRD e colá-lo na caixa de prompt. Se quiser seu app
00:03:36com um design específico, pode enviar o arquivo de design e pedir para usá-lo como referência. Mas lembre-se
00:03:41que não dá para enviar o arquivo do Figma diretamente. A outra forma é descrever o design em
00:03:47linguagem simples. Agora envie e aguarde. Após enviar o pedido, o agente pode fazer perguntas de acompanhamento.
00:03:53Geralmente não são técnicas, então apenas escreva sua preferência. Caso não entenda
00:03:59algo, pode pedir para a IA esclarecer o que aquilo significa. Após enviar suas preferências, o agente
00:04:05começará a programar sua aplicação. Esta é minha parte favorita, pois posso ficar vendo
00:04:10alguns reels enquanto assisto ele gerar o código para mim. Alguns momentos depois... Certo, acho que nosso app
00:04:17está pronto. Agora vamos para a próxima etapa. Esta fase é sobre testar o app, corrigir bugs,
00:04:23melhorar o design ou adicionar recursos. É aqui que a maioria das pessoas erra. Antes de falar
00:04:28sobre isso, vamos dar uma olhada na nossa plataforma. Nosso app está funcionando bem. Agora vamos falar
00:04:58sobre o que não fazer nesta fase de teste e refinamento. Um erro comum é
00:05:04listar tudo o que precisa ser corrigido e jogar em um único prompt gigante. A IA não funciona bem
00:05:09assim. A melhor prática é corrigir uma coisa por vez e ser bem específico no seu prompt.
00:05:15Digamos que um botão não esteja funcionando. Não escreva prompts assim. Em vez disso, use este
00:05:20modelo de prompt para corrigir os problemas. A seguir, vamos ver o processo de adicionar um novo recurso.
00:05:25Você já descreveu os recursos no seu PRD. Reutilize o mesmo formato. Por exemplo, em nosso site,
00:05:32vamos adicionar a divisão desigual de despesas. Atualmente, ao criar uma despesa, o custo é dividido
00:05:38igualmente. Mas com a distribuição desigual, posso controlar o custo por pessoa. Seguindo nosso modelo,
00:05:44criei uma descrição para o novo recurso. Vamos voltar ao agente e colá-la. Mas
00:05:50antes disso, certifique-se de adicionar esta linha e então cole sua descrição. Agora envie e
00:05:56vamos esperar. Nosso novo recurso está pronto. Vamos testar. E parece que está tudo certo. É isso
00:06:17nesta etapa. Adicione um recurso, teste e repita. Ainda há algumas coisas que quero pontuar
00:06:23antes de passarmos para o próximo passo. Primeiro, não hesite em reverter alterações antigas. Reverter
00:06:29significa voltar para uma versão anterior do seu código. Pode haver casos onde
00:06:33adicionar um recurso ou corrigir um bug acaba quebrando outra coisa. Nesse caso, basta enviar um prompt
00:06:39explicando que as novas mudanças quebraram o código e pedir para ele corrigir. Isso funciona na maioria das vezes.
00:06:44Mas se não funcionar, o melhor é reverter para a versão anterior. A outra coisa
00:06:49que quero dizer é: sinta-se à vontade para fazer alterações adicionais nos modelos de prompt que eu passei.
00:06:54Isso nos leva ao próximo passo: Validação Final. Após adicionar todos os recursos,
00:06:59você precisará fazer um teste final da sua aplicação. Nada complexo. Apenas navegue pela
00:07:04sua plataforma e teste cada função. Verifique se cada resultado está correto e se o comportamento
00:07:09é o esperado. Se encontrar problemas, volte para a fase de teste e refinamento. No fim,
00:07:14trata-se de garantir que tudo funcione antes de colocar no ar. O último passo é a
00:07:20implantação. Com o Abacus AI Deep Agent, o deploy leva apenas alguns cliques. Para publicar seu app,
00:07:27procure o botão “Deploy” no topo. Clique em deploy e verá três opções. Usar um
00:07:33domínio da Abacus AI, um domínio personalizado ou um subdomínio personalizado. Escolher o domínio da Abacus
00:07:40significa que a URL do site seguirá este padrão. Se optar por um domínio próprio, você precisará comprar um e
00:07:45apontá-lo para o Abacus via configurações de DNS. Um subdomínio é mais simples. Se você já tem um domínio, pode usar
00:07:51algo assim como subdomínio sem precisar comprar nada novo. Por hora, vamos usar o domínio da
00:07:57Abacus. Escolha o nome de sua preferência e este será o link do seu site após a publicação.
00:08:03E parabéns! Seu primeiro app feito via Vibe Coding está no ar. Você pode compartilhar este link
00:08:09para que outras pessoas também comecem a usar seu app. Antes de você ir criar seu próprio app, há uma
00:08:14última coisa que quero dizer. Apps feitos puramente por Vibe Coding não são ideais para produtos comerciais de larga escala.
00:08:20Eles são melhores para projetos pessoais, ferramentas pequenas, protótipos e poucos usuários. Isso porque
00:08:26pode haver problemas de segurança, desempenho e limitações de escalabilidade. Se planeja crescer muito,
00:08:32eventualmente precisará de desenvolvedores. E é isso. Os cinco passos do Vibe Coding com as melhores práticas
00:08:38que realmente funcionam. Não esqueça de conferir o Abacus AI Deep Agent. O link está na descrição.
00:08:44Se este vídeo foi útil para você, deixe seu like, compartilhe, se inscreva e comente o que achou
00:08:49aqui embaixo. Vejo você no próximo vídeo!