Vibe Coding na Prática: Crie um App de Gerador de Ideias de Presente em 20 Minutos

Categoria: Tecnologia & IA Tempo de leitura: 10 minutos Nível: Iniciante

---

No post anterior, você aprendeu o que é vibe coding e criou sua primeira landing page do zero. Hoje vamos subir o nível: vamos construir um app interativo real — um gerador de ideias de presente personalizado.

Você vai digitar informações sobre a pessoa que quer presentear e o app vai sugerir ideias criativas e personalizadas. Funcionalidade real. Design bonito. Zero código escrito por você.

Preparado? Vamos lá.

---

O que vamos construir

Nome do app: IdeaPresente 🎁

Funcionalidade:

1. O usuário preenche um formulário simples (nome, idade, interesses, orçamento)

2. Clica em "Gerar Ideias"

3. O app exibe 5 sugestões criativas de presentes com descrição e faixa de preço

Tecnologias envolvidas (que a IA vai usar, não você):

• HTML + CSS para a interface

• JavaScript para a lógica interativa

• Uma lista de lógica condicional para sugerir presentes com base nos inputs

---

Por que este projeto é especial?

Na landing page, criamos algo estático — uma página que não muda. Agora vamos criar algo dinâmico: o app reage ao que o usuário digita e gera uma resposta diferente a cada vez.

Isso é um salto conceitual importante no vibe coding. Você começa a pensar não só em como as coisas parecem, mas em como elas se comportam.

E a boa notícia? O processo é igualmente simples.

---

Ferramentas necessárias

• Claude.ai (gratuito) — claude.ai

• Um navegador qualquer

• Bloco de Notas ou qualquer editor de texto simples

Nada para instalar. Nada para configurar. Só isso.

---

Construindo o IdeaPresente

Etapa 1: O prompt inicial

O segredo é começar com um prompt completo e bem estruturado. Não tenha medo de ser detalhista — quanto mais contexto você der, menos rodadas de ajuste você vai precisar.

Abra o Claude e envie este prompt:

Quero criar um app web chamado "IdeaPresente" — um gerador de ideias de 
presente personalizado.

INTERFACE:
- Fundo gradiente suave em tons de roxo e rosa (estilo moderno)
- Logo simples com emoji 🎁 e o nome "IdeaPresente"
- Um card central com o formulário
- Design responsivo para mobile

FORMULÁRIO (dentro do card):
- Campo: "Nome de quem vai receber" (texto livre)
- Campo: "Idade" (número)
- Campo: "Interesses" (checkboxes com opções: Esportes, Tecnologia, Culinária, 
  Leitura, Música, Viagens, Arte, Bem-estar, Games, Natureza)
- Campo: "Orçamento" (slider de R$50 a R$500, mostrando o valor em tempo real)
- Botão: "Gerar Ideias 🎁" (roxo vibrante, grande)

LÓGICA DE GERAÇÃO:
- Quando o botão for clicado, exibir abaixo do formulário um card de resultados
- Mostrar 5 sugestões de presentes
- Cada sugestão deve ter: emoji representativo, nome do presente, 
  descrição de 1 linha, faixa de preço estimada
- As sugestões devem ser baseadas nos interesses selecionados e no orçamento
- Adicionar animação de "carregando" por 1,5 segundo antes de mostrar os resultados
  (para dar a sensação de processamento)

EXEMPLOS de lógica:
- Interesses: Culinária + Orçamento: R$100-150 → Sugerir: kit de especiarias 
  gourmet, livro de receitas, avental personalizado, etc.
- Interesses: Tecnologia + Games → Controle sem fio, suporte ergonômico, 
  headset, etc.
- Se o orçamento for acima de R$300 e o interesse for Viagens → Mala 
  de viagem, fone com cancelamento de ruído, kit de organização de mala

Crie toda a lógica de sugestões embutida no JavaScript, com pelo menos 
5 sugestões específicas por combinação de interesse principal.

Use Google Fonts (Poppins para tudo). Interface elegante e moderna.

---

Etapa 2: Teste o que foi gerado

Salve o código como ideapresente.html e abra no navegador. Verifique:

✅ Checklist de qualidade:

• O formulário está aparecendo corretamente?

• O slider de orçamento está funcionando e mostrando o valor?

• Os checkboxes respondem ao clique?

• O botão "Gerar Ideias" aciona alguma coisa?

• Os resultados aparecem abaixo do formulário?

• O app parece bom no celular? (Teste reduzindo a janela do navegador)

Se algo não funcionar, não entre em pânico. Apenas descreva o problema para o Claude:

"O slider de orçamento não está mostrando o valor em tempo real. Corrija isso."

"Quando clico em 'Gerar Ideias' sem selecionar nenhum interesse, o app quebra. Adicione uma validação que avise o usuário para selecionar ao menos um interesse."

---

Etapa 3: Refinamentos de UX (Experiência do Usuário)

Agora vem a parte divertida. Você vai adicionar toques que fazem o app parecer muito mais profissional. Envie estes prompts em sequência:

Refinamento 1 — Animação nos cards de resultado:

Adicione uma animação de entrada nos cards de resultado: 
cada card deve aparecer com um leve efeito de "slide up + fade in", 
com um delay crescente (0ms, 100ms, 200ms, 300ms, 400ms) 
para que apareçam um por um, em cascata.

Refinamento 2 — Botão de copiar resultados:

Adicione um botão "📋 Copiar lista" no topo da seção de resultados. 
Quando clicado, ele copia todas as 5 sugestões formatadas como texto 
simples para a área de transferência e muda temporariamente para 
"✅ Copiado!" por 2 segundos.

Refinamento 3 — Contador de presentes gerados:

Adicione um pequeno contador discret no rodapé: 
"🎁 X ideias geradas hoje" onde X aumenta a cada vez que o botão 
é clicado (usando localStorage para persistir o número entre recarregamentos).

---

Etapa 4: Deixando o app com sua cara

Agora é hora de personalizar. Estes prompts te ajudam a ajustar identidade visual:

Para mudar as cores:

Troque o gradiente de roxo/rosa por um gradiente em tons de verde-esmeralda 
e dourado. Atualize o botão principal para verde-esmeralda escuro.

Para adicionar sua marca:

Adicione uma linha de crédito discreta no rodapé: 
"Feito com ❤️ por [Seu Nome]" com um link para [seu site ou redes sociais].

Para deixar mais divertido:

Adicione confetes animados em CSS caindo pela tela por 3 segundos 
quando os resultados aparecem. Use apenas CSS e JavaScript, 
sem bibliotecas externas.

---

Entendendo o que aconteceu (sem precisar de código)

Mesmo sem saber programar, vale entender conceitualmente o que o app faz:

ElementoO que éPara que serveHTMLA estruturaDefine os campos, botões e seçõesCSSO estiloDefine cores, fontes, animaçõesJavaScriptA lógicaFaz os cálculos e gera as sugestõeslocalStorageA memóriaLembra o contador entre sessões

Não precisa memorizar isso. Mas ter essa visão geral te ajuda a descrever melhor o que quer quando fizer pedidos à IA.

---

Problemas comuns e como resolver

"A IA gerou um código enorme e eu me perdi"

Não tente entender tudo. Foque no resultado visual. Se algo não está certo, descreva o que você vê de errado — não tente adivinhar qual parte do código está com problema.

✅ Certo: "O botão está saindo da tela no celular."
❌ Evitar: "Acho que o CSS do button está com o width errado."

"O app funcionava e depois parou"

Peça para a IA gerar o arquivo completo novamente do zero. Às vezes é mais fácil recomeçar do que consertar.

"Algo na última edição quebrou o app. Por favor, gere o arquivo HTML completo e funcional novamente com todas as funcionalidades que desenvolvemos."

"Quero adicionar algo mas não sei descrever"

Encontre um app ou site com a funcionalidade que você quer e mostre para a IA:

"Quero um efeito de loading parecido com o do Spotify — um skeleton screen cinza que pulsa antes de mostrar o conteúdo. Adicione isso na seção de resultados."

---

Próximos passos: onde ir daqui?

Você criou um app interativo funcional. O que vem depois?

🟡 Nível seguinte — Conectar com IA de verdade:
Em vez de sugestões pré-programadas, você pode conectar o app à API do Claude ou do ChatGPT para gerar sugestões realmente dinâmicas baseadas em linguagem natural. Custo baixo, resultado impressionante.

🟠 Nível avançado — Publicar como produto:
Com um domínio (~R$40/ano) e hospedagem gratuita no Netlify, seu app pode estar no ar como um produto real. Adicione um campo para o usuário deixar o e-mail e você tem uma lista de espera.

🔴 Nível expert — Adicionar banco de dados:
Ferramentas como Supabase permitem salvar os dados dos usuários sem saber programar de verdade. A IA pode te guiar por esse processo também.

---

O mindset do vibe coder

Vibe coding tem uma filosofia própria que vale internalizar:

"Eu sou o designer. A IA é o desenvolvedor."

Seu trabalho é ter visão clara do que você quer construir, saber avaliar qualidade, e iterar com clareza. Habilidades que você já tem — só estava usando em outros contextos.

O erro mais comum de iniciantes é desistir cedo demais. O primeiro resultado raramente é perfeito. O quinto geralmente é ótimo. A persistência nas iterações é o que separa quem constrói coisas incríveis de quem desiste no primeiro obstáculo.

---

Conclusão

Em menos de 20 minutos de conversa com uma IA, você:

• ✅ Criou um formulário interativo completo

• ✅ Implementou lógica de negócio real (sugestões baseadas em inputs)

• ✅ Adicionou animações e microinterações profissionais

• ✅ Construiu uma funcionalidade de persistência com localStorage

• ✅ Fez tudo isso sem escrever uma linha de código

Isso é vibe coding. E você acabou de provar que consegue fazer.

Na próxima parte da série, vamos explorar como conectar seus apps a APIs reais — incluindo IA generativa — para criar ferramentas que realmente impressionam.

Compartilhe seu IdeaPresente nos comentários! Adoraria ver as versões que vocês criaram. 🎁