Do Zero ao Protótipo
Etapa 0 de 6

Do Zero ao Protótipo
em Duas Semanas

Programa de mentoria individual que guia você desde a concepção de uma ideia até a publicação de um protótipo funcional, utilizando IA como acelerador do desenvolvimento.

2 Semanas
6 Etapas
10 Dias úteis
1

Atividades

  • Sessão de brainstorming guiado: qual problema o mentorado quer resolver?
  • Definir o público-alvo do protótipo
  • Escrever uma frase que resuma o produto (pitch de uma linha)
  • Listar as 3-5 funcionalidades essenciais (MVP)
  • Diferenciar o que é essencial do que é "bom ter"

Boas Práticas

  • Usar a técnica "Explica pra mim como se eu tivesse 10 anos" — se o mentorado não consegue explicar a ideia de forma simples, ela ainda não está clara
  • Validar a ideia com uma pergunta direta: "Alguém pagaria por isso?" — não precisa ser sim, mas precisa fazer o mentorado pensar no valor real
  • Limitar o escopo brutalmente: se tem mais de 5 funcionalidades, está grande demais para 2 semanas
  • Escrever o "anti-escopo" — listar explicitamente o que o protótipo NÃO vai fazer evita derrapagens

Pulo do Gato

  • Comece pelo fim: peça ao mentorado para descrever o momento em que alguém usa o protótipo pronto. Essa visão concreta clareia tudo mais rápido do que ficar listando funcionalidades
  • Use a IA já nessa etapa: cole a ideia no ChatGPT/Claude e peça "Me faça 10 perguntas para refinar essa ideia". A IA faz o papel de "advogado do diabo" e encontra furos que o mentorado não vê
  • Template de uma frase: "[Produto] ajuda [público] a [resolver problema] através de [como]". Se não cabe nessa frase, precisa simplificar

Entregável

Documento de visão do produto (1 página) contendo: problema, solução, público e funcionalidades core

2

Atividades

  • Apresentação das ferramentas de vibe coding (Cursor, Claude Code, Bolt, v0, Lovable, etc.)
  • Avaliar qual ferramenta se encaixa melhor no tipo de protótipo
  • Configurar o ambiente de trabalho junto com o mentorado
  • Primeiro contato prático: gerar um "Hello World" com IA

Boas Práticas

  • Não deixar o mentorado escolher sozinho — a paralisia por excesso de opções trava iniciantes. O mentor deve pré-selecionar 2 opções e deixar o mentorado escolher entre elas
  • Testar a ferramenta com um mini-projeto descartável antes de começar o projeto real
  • Criar uma "cola" com os comandos/atalhos mais usados da ferramenta escolhida
  • Garantir que o mentorado consiga fazer o ciclo completo sozinho: escrever prompt > ver resultado > ajustar

Pulo do Gato

  • Regra de ouro para escolha: se o projeto é visual (landing page, dashboard, portfólio), use Bolt/Lovable/v0. Se tem lógica de negócio (cálculos, fluxos, integrações), use Cursor/Claude Code. Essa decisão simples economiza dias de frustração
  • Conta criada antes da sessão: peça ao mentorado para já chegar com as contas criadas (GitHub, ferramenta de IA, Vercel). Configuração de conta durante a mentoria é tempo morto
  • Grave a tela da configuração: o mentorado VAI esquecer como configurou. Um vídeo curto de 2 minutos gravando a tela resolve isso para sempre
  • Tenha um projeto-modelo pronto: mostre um protótipo já feito com a ferramenta escolhida. Ver o resultado final antes de começar gera motivação e dá referência concreta

Entregável

  • Ambiente configurado e funcionando
  • Mentorado familiarizado com a ferramenta escolhida
3

Atividades

  • Criar wireframes simples (pode ser rascunho no papel ou ferramenta como Excalidraw)
  • Definir o fluxo de navegação do usuário
  • Listar as telas/páginas necessárias
  • Escrever os requisitos em linguagem simples (histórias de usuário)
  • Criar o prompt principal para a IA gerar a base do projeto

Boas Práticas

  • Wireframe no papel primeiro, sempre — é mais rápido, menos intimidador e mais fácil de jogar fora e refazer
  • Numerar as telas e conectar com setas. O fluxo do usuário precisa ser linear e óbvio
  • Escrever requisitos como "Eu quero [ação] para [motivo]" — essa estrutura força clareza
  • Revisar o escopo: se o planejamento revelou que é maior do que parecia, cortar funcionalidades AGORA, não depois

Pulo do Gato

  • Prompt em camadas: não jogue tudo de uma vez para a IA. Monte o prompt em 3 blocos: (1) contexto do projeto, (2) stack e estrutura, (3) primeira tela/funcionalidade. Prompts menores e sequenciais geram resultados muito melhores do que um prompt gigante
  • Use a IA para gerar os requisitos: descreva a ideia para a IA e peça "Gere uma lista de histórias de usuário para esse projeto". Depois é só revisar e cortar o que não faz sentido
  • Crie um documento PRD com IA: peça para a IA transformar suas anotações em um PRD estruturado. Esse documento vira a "fonte da verdade" do projeto e pode ser alimentado de volta para a IA durante o desenvolvimento
  • Fotografe os wireframes de papel e alimente na IA: ferramentas como Claude e GPT-4 leem imagens. O rascunho de papel vira input direto para gerar código — pula a etapa de wireframe digital

Entregável

  • Wireframes das telas principais
  • Lista de requisitos organizados por prioridade
  • Prompt estruturado pronto para uso
4

Atividades

  • Dia 6: Gerar a estrutura base do projeto com IA e criar as telas principais
  • Dia 7: Implementar a lógica das funcionalidades core
  • Dia 8: Integrar as partes, ajustar layout e navegação
  • Dia 9: Refinamentos, correções e polimento visual

Boas Práticas

  • Trabalhar em ciclos curtos: pedir à IA, revisar, ajustar, iterar
  • Salvar versões a cada progresso significativo (commit no Git ou cópia da pasta)
  • Não buscar perfeição — buscar funcionalidade. "Feito é melhor que perfeito"
  • Documentar os prompts que funcionaram bem em um arquivo separado
  • Uma funcionalidade por vez: não tente fazer duas coisas ao mesmo tempo
  • Testar cada funcionalidade IMEDIATAMENTE após implementar, antes de seguir para a próxima
  • Se a IA gerar algo errado 2 vezes seguidas, mude a abordagem do prompt em vez de insistir no mesmo caminho

Pulo do Gato

  • Regra dos 15 minutos: se ficou travado por mais de 15 minutos no mesmo problema, pare. Mude o prompt, peça à IA para explicar o erro, ou pule para outra funcionalidade e volte depois. Tempo travado é o maior inimigo do protótipo
  • Screenshot do erro para a IA: quando algo quebrar, tire print da tela com o erro e cole direto na IA. É mais rápido e preciso do que tentar descrever o problema com palavras
  • Biblioteca de prompts prontos: tenha prompts-modelo para tarefas comuns: "Crie um formulário com campos X, Y, Z", "Adicione navegação entre páginas", "Crie um componente de lista com dados mockados". Reutilizar prompts que já funcionaram é muito mais rápido do que escrever do zero
  • Dados falsos primeiro: não perca tempo com banco de dados real no protótipo. Use dados mockados (hardcoded) para tudo. O objetivo é mostrar que funciona, não que armazena
  • Copy-paste inteligente: achou um componente bonito em outro site? Use a IA para replicar: "Crie um componente visual parecido com [descrição/screenshot]". Não reinvente a roda
  • Commit a cada vitória: funcionou? Commit. Antes de mudar qualquer coisa, commit. Isso cria pontos de retorno seguros e evita perder progresso

Entregável

Protótipo funcional rodando localmente

5

Atividades

  • Testar todos os fluxos principais como usuário final
  • Identificar e corrigir bugs críticos
  • Pedir para outra pessoa testar (teste de usabilidade informal)
  • Ajustar textos, cores e detalhes visuais
  • Verificar responsividade (funciona no celular?)

Boas Práticas

  • Criar um roteiro de teste simples: lista de passos que o usuário faria (ex: "1. Abrir a página, 2. Clicar em cadastrar, 3. Preencher o formulário...")
  • Priorizar bugs por impacto: se não impede o uso, não corrige agora
  • Testar em pelo menos 2 navegadores (Chrome + um outro)
  • Testar com dados reais (ou realistas), não só com "teste123"
  • Pedir feedback para alguém que NÃO sabe o que o projeto faz — se essa pessoa conseguir usar, está bom

Pulo do Gato

  • Teste do "mãe/pai": peça para alguém sem contexto técnico usar o protótipo sem explicação nenhuma. Onde essa pessoa travar, é onde o UX está confuso. Esse teste vale mais que horas de revisão técnica
  • Use a IA como QA: cole o código na IA e peça "Encontre possíveis bugs e problemas de usabilidade nesse código". A IA pega problemas que olho humano cansado não vê
  • Checklist de 5 minutos antes de publicar: (1) Todos os links funcionam? (2) Não tem texto "Lorem ipsum" ou "teste" visível? (3) As imagens carregam? (4) Funciona no celular? (5) O título da página está correto? — Esses 5 itens pegam 80% dos problemas vergonhosos
  • Não conserte tudo: em protótipo, um bug cosmético é aceitável. Um bug que impede o fluxo principal não é. Saiba a diferença e gaste energia só no que importa

Entregável

  • Lista de bugs encontrados e corrigidos
  • Protótipo testado e estável
6

Atividades

  • Escolher plataforma de deploy (Vercel, Netlify, Railway, etc.)
  • Realizar o deploy junto com o mentorado
  • Configurar domínio (opcional)
  • Testar o protótipo publicado
  • Sessão de encerramento: retrospectiva e próximos passos

Boas Práticas

  • Fazer o deploy com o mentorado compartilhando tela — ele precisa entender o processo, não apenas assistir
  • Testar a URL publicada em um dispositivo diferente (celular, outro computador)
  • Preparar um "elevator pitch" de 30 segundos: o mentorado deve saber apresentar o que construiu
  • Documentar o passo a passo do deploy para o mentorado conseguir repetir sozinho

Pulo do Gato

  • Vercel/Netlify com GitHub = deploy em 3 cliques: conectar o repositório GitHub na Vercel e pronto. Cada push atualiza automaticamente. Não perca tempo com deploy manual ou configuração de servidor
  • Ensaie o deploy ANTES do dia final: faça um "deploy de teste" no dia 8 ou 9 com o protótipo incompleto. Isso revela problemas de configuração com tempo de sobra para resolver. Descobrir problema de deploy no último dia é receita para frustração
  • Link compartilhável com QR Code: gere um QR Code da URL do protótipo. O mentorado pode mostrar para qualquer pessoa só apontando a câmera — muito mais impactante do que enviar link por mensagem
  • Grave um vídeo de demonstração de 1 minuto: mesmo que o protótipo esteja no ar, um vídeo curto mostrando o funcionamento é muito mais fácil de compartilhar e gera mais impacto em redes sociais e LinkedIn
  • Momento de celebração: publicar o primeiro protótipo é um marco. Tire um print, poste no LinkedIn, comemore. Esse momento de orgulho reforça a confiança e motiva o mentorado a continuar

Entregável

  • Protótipo publicado e acessível via URL
  • Mentorado com autonomia para fazer ajustes futuros