MÓDULO 2.4

🎯 Do Protótipo ao Produto

Como coletar feedback de usuários reais, melhorar o design sem ser designer, adicionar banco de dados e login, e saber o momento certo de contratar um desenvolvedor.

7
Tópicos
35
Minutos
Básico
Nível
Prático
Tipo
1

🔍 A diferença entre protótipo e produto

Um protótipo funciona quando você faz exatamente o que planejou. Um produto funciona quando usuários reais, fazendo coisas que você não planejou, em dispositivos que você não testou, com dados que você não antecipou — ainda assim conseguem o que precisam.

🔬 Protótipo

  • • Funciona no seu fluxo específico
  • • Testado por você e talvez 1-2 pessoas
  • • Dados fictícios ou muito poucos
  • • Erros tolerados, esperados
  • • Interface "ok" para quem entende

🚀 Produto

  • • Funciona para qualquer usuário do público-alvo
  • • Testado por beta users externos
  • • Dados reais, volume crescente
  • • Erros tratados com mensagens claras
  • • Interface intuitiva sem explicação

💡 A transição não é binária

Você não acorda um dia e "vira" produto. É um processo de iteração: cada rodada de feedback transforma um aspecto do protótipo em produto. Após 3-5 rodadas com usuários reais, você chega a um produto confiável.

2

💬 Feedback de usuários — Como coletar e usar

O feedback mais valioso não vem de perguntas — vem de observação. Ver alguém usando o seu produto sem explicação é mil vezes mais informativo do que perguntar "O que você achou?". Mas quando você não pode observar pessoalmente, use as técnicas certas.

1

Observação direta (o mais valioso)

Sente-se ao lado de alguém, dê o celular ou mostre o computador. Não explique nada — deixe usar. Anote onde trava, onde confunde, onde funciona bem.

2

As 3 perguntas certas

Após usar: "Qual parte foi mais confusa?", "O que você esperava que acontecesse quando fez X?", "Usaria isso no dia a dia? Por quê?"

3

Traduzindo feedback em prompt

Feedback: "Não entendi onde salvar". Prompt para a IA: "O botão de salvar está confuso para usuários. Torne-o mais visível, com texto claro 'Salvar agendamento' e cor de destaque".

📊 Quantos usuários você precisa ouvir

  • 5 usuários revelam 85% dos problemas de usabilidade (pesquisa Nielsen Norman)
  • 3 rodadas de feedback são suficientes para a maioria dos MVPs
  • 1 usuário real vale mais que 10 opiniões de amigos que querem te agradar
3

🎨 Design sem designer — Pedindo melhorias de UX/UI

UX (User Experience) é como o usuário se sente usando o produto. UI (User Interface) é como o produto parece visualmente. Você não precisa de um designer para melhorar os dois — basta saber descrever o que está errado e o que ficaria melhor.

🗣️ Vocabulário de design que funciona em prompts

Para melhorar aparência:

  • • "Mais espaçamento entre os elementos"
  • • "Fonte maior e mais legível"
  • • "Botão mais chamativo, maior"
  • • "Menos poluído, mais minimalista"
  • • "Mais profissional, menos amador"

Para melhorar experiência:

  • • "Fluxo mais curto para chegar ao objetivo"
  • • "Mensagem de erro mais clara"
  • • "Confirmação visual quando salvar"
  • • "Ordenar por data, mais recente primeiro"
  • • "Botão de ação principal mais evidente"

💡 Peça inspiração em apps que você admira

Se você não sabe descrever o que quer, referencie. "Deixe o design parecido com o Notion — minimalista, muito branco, tipografia grande" funciona muito bem. A IA conhece a estética dos produtos mais famosos.

4

🗄️ Banco de dados — Guardando informações sem saber SQL

SQL é a linguagem usada para gerenciar bancos de dados. Você não precisa saber SQL — mas precisa entender o conceito para saber o que pedir. Pense em banco de dados como uma planilha do Excel: tem colunas (campos) e linhas (registros), e você pode buscar, filtrar e ordenar.

📊 Como pedir banco de dados para a IA

"Preciso salvar informações de clientes. Cada cliente tem: nome completo, telefone, email e data de cadastro."
"Cada agendamento deve registrar: qual cliente, qual serviço, data, hora e status (agendado/concluído/cancelado)."
"Preciso consultar todos os agendamentos de hoje, ordenados por horário."

Com Lovable (Supabase)

O banco é criado automaticamente conforme você descreve o que quer guardar. Lovable usa Supabase — banco de dados profissional, escalável, que você não precisa configurar manualmente.

Alternativas para iniciantes

Para começar mais simples, Google Sheets pode servir como banco de dados via API. O Airtable também funciona bem para MVPs sem complexidade.

5

🔐 Login e cadastro — Autenticação para leigos

Autenticação é o processo de identificar quem é o usuário. O famoso "entrar com Google" é autenticação. Para não-técnicos, a boa notícia é que o Lovable inclui autenticação pronta — você só precisa pedir.

🔑 Como pedir autenticação para a IA

"Adicione uma tela de login. O usuário entra com email e senha. Se não tiver conta, pode criar uma."
"Adicione opção de 'Entrar com Google' para simplificar o cadastro."
"Cada usuário deve ver apenas os dados que ele mesmo cadastrou."
"Adicione uma tela de recuperação de senha por email."

📊 Tipos de autenticação comuns

  • Email + senha: O mais simples. O usuário cria uma conta com email e senha.
  • Google/GitHub OAuth: "Entrar com Google". Mais rápido para o usuário, menos senhas a gerenciar.
  • Magic link: Usuário digita o email, recebe um link clicável. Sem senha.
  • Multi-tenant: Cada empresa tem seus próprios dados separados dos demais.
6

⚡ Performance básica — Quando o app fica lento

Performance é a velocidade com que o app responde. Um app lento perde usuários — pesquisas mostram que 53% dos usuários abandonam um site que demora mais de 3 segundos para carregar. A boa notícia: a maioria dos problemas de lentidão tem soluções simples.

Sintoma: Lista demora para carregar

Causa comum: busca todos os registros de uma vez. Solução:

"A lista de agendamentos está lenta. Mostre apenas os agendamentos dos próximos 7 dias. Adicione paginação para os mais antigos."

Sintoma: Imagens demoram para aparecer

Causa comum: imagens muito grandes sem otimização. Solução:

"As imagens do produto estão demorando para carregar. Otimize o carregamento das imagens e adicione um placeholder enquanto carregam."

Sintoma: Demora geral para abrir

Causa comum: muito JavaScript carregando de uma vez. Solução:

"O app está lento para abrir inicialmente. Otimize o carregamento inicial. Carregue apenas o essencial na primeira tela."
7

👩‍💻 Quando contratar um desenvolvedor

Vibe coding não substitui desenvolvedores — ele muda quando você os contrata. Em vez de contratar antes de validar a ideia, você contrata depois de ter receita, usuários e feedback real. Isso muda completamente a relação de poder na negociação.

🚨 Sinais de que chegou a hora

  • !Você tem mais de 500 usuários ativos e a performance começa a cair
  • !Um cliente corporativo exige SLA (garantia de disponibilidade) com penalidades
  • !Você precisa de integração com sistema legado de grande empresa (SAP, Oracle, etc.)
  • !A ferramenta de vibe coding não consegue implementar uma feature crítica após 3 tentativas
  • !Você vai receber regulação (LGPD compliance avançado, auditoria, etc.)

💡 Como contratar melhor por ter validado antes

Quando você leva um dev para uma conversa com receita comprovada, usuários reais e feedbacks documentados:

  • • O escopo é claro — menos chance de "scope creep" (trabalho sem fim)
  • • Você sabe o que realmente importa para o usuário
  • • Sua posição de negociação é mais forte
  • • O dev tem contexto para tomar decisões técnicas melhores

💡 O modelo híbrido que funciona

Use vibe coding para o produto core. Contrate um dev freelancer por horas para as partes que a ferramenta não consegue. Muitos fundadores não-técnicos bem-sucedidos operam assim indefinidamente — sem precisar de um CTO.

Resumo do Módulo 2.4

Protótipo vs. produto — produto funciona para qualquer usuário, em qualquer situação, sem explicação
5 usuários revelam 85% dos problemas — observe, não pergunte; feedback pago vale 10x mais
Design sem designer — descreva o que está errado, referencie apps que admira
Banco de dados em linguagem natural — descreva o que quer guardar e buscar, a IA cria o banco
Login e cadastro prontos — Lovable inclui autenticação; apenas descreva o que precisa
Contratar dev depois de validar — com receita e feedback, sua negociação é muito mais forte

Próximo Módulo:

2.5 — 🔌 Integrações: Conectando Tudo: APIs, pagamentos, WhatsApp e como adicionar IA dentro do seu produto