0 de 11 etapas
Guia passo a passo · do zero absoluto

Construa do Zero

Seu primeiro sistema, etapa por etapa. Mesmo que você nunca tenha programado — cada ferramenta, cada prompt, na ordem certa, até ficar pronto.

Rodrigo Munhoz Reis · Diretor de Tecnologia · Vibecoding com Engenharia
Sem saber programar Prompts prontos Git ou só local Marque seu progresso

Como usar este guia

Siga as etapas na ordem, de cima para baixo. Em cada uma você verá o que fazer, o porquê, as ferramentas (com links) e o prompt pronto para colar na sua IA.

Clique em qualquer prompt para copiá-lo. E marque a caixa "concluí" ao terminar cada etapa — o guia guarda o seu progresso neste navegador, então você pode parar e voltar depois.

Você vai usar uma IA para construir — e na próxima seção você escolhe qual (Claude, VS Code + Copilot ou Claude Code). O guia se adapta à sua escolha. É a IA que escreve o código; você conduz, confere e decide. A decisão final é sempre sua.
Personalize o guia

Como você vai construir?

Existem três jeitos de construir com IA. Escolha o seu — o guia se adapta às suas etapas. Pode trocar quando quiser.

👆 Escolha uma ferramenta acima para o guia se adaptar a você.

0

Defina a ideia e peça o plano

Construir sem plano é construir dívida. Antes de qualquer código, transforme sua ideia num plano em fases — começando pelo mínimo que já funciona (o MVP).

Abra o ChatGPT, o Claude ou o Gemini (de graça, no navegador) e cole o prompt abaixo. Responda as perguntas que a IA fizer — é assim que ela entende o seu caso.

Prompt — O Arquiteto (clique para copiar)
Papel: Aja como um Arquiteto de Produto e CTO virtual sênior, especialista em transformar ideias em planos de software simples e seguros para quem está construindo com IA pela primeira vez.
Contexto: eu não sei programar e quero criar [descreva sua ideia em 1 frase], para [quem vai usar].
Objetivo: que você monte um plano em fases, começando pelo mínimo que já funciona (o MVP).
Como fazer: antes de começar, se faltar informação importante, me faça de 1 a 3 perguntas simples e espere minha resposta. Não invente nada. Explique cada termo técnico em linguagem simples.
Cuidados: cuide da segurança desde o início — nada de senhas no código.
Formato: entregue o plano em passos numerados, com uma frase de "por quê" em cada um e os nomes dos arquivos que vamos criar.
Refino: no fim, diga qual é o primeiro passo prático e ofereça começar por ele. A decisão é sempre minha.
1

Prepare o computador

As três ferramentas-base: a bancada onde você trabalha (VS Code), o motor que roda o projeto (Node.js) e o cozinheiro de IA que escreve o código (Copilot).

⬆️ Volte e escolha a sua ferramenta na seção acima — as instruções de instalação mudam conforme o seu jeito de construir.

Para usar o Claude
Como funciona: você cola os prompts na conversa do Claude, ele te entrega o código e as instruções, e você cola nos arquivos do VS Code. Simples e visual.
Instale (avançar, avançar, concluir)

Depois, no VS Code: clique no ícone de Extensões (os quadradinhos, na lateral), procure por GitHub Copilot e GitHub Copilot Chat, instale os dois e faça login com sua conta do GitHub.

O Copilot Chat é a janelinha onde você conversa com a IA, dentro do VS Code — é ali que você vai colar os próximos prompts.
Instale
  • Node.js (versão LTS): nodejs.org
  • Claude Code — o agente no terminal. Abra o terminal e rode npm install -g @anthropic-ai/claude-code — ou siga claude.com/claude-code. Depois faça login com sua conta Claude.
  • VS Code (opcional) — só para ver os arquivos: code.visualstudio.com
Como funciona: você abre o terminal na pasta do projeto, digita claude e conversa. Ele cria os arquivos e roda os comandos sozinho, pedindo a sua confirmação. É o jeito mais automático — você diz o que quer, ele executa.
2

Aprenda a falar com a IA (método P.R.O.M.P.T.E.R.)

Pedido vago gera resposta ruim. Todo bom prompt tem 8 partes — você não usa todas sempre, mas quando o resultado importa, são elas que fazem a diferença.
  • P — Papel: quem a IA deve ser ("aja como um engenheiro sênior…").
  • R — Realidade: seu contexto (o que você constrói, que é iniciante).
  • O — Objetivo: o que você quer, exatamente.
  • M — Marcha: peça pensar passo a passo e perguntar se faltar algo.
  • P — Proteção: nada de senhas no código; a decisão é sua.
  • T — Texto de saída: o formato e o tom da resposta.
  • E — Exemplos: mostre um modelo quando ajudar.
  • R — Refino: trate como conversa — ajuste até ficar bom.

Boa notícia: todos os prompts deste guia já vêm montados nesse método. É só preencher o que está [entre colchetes].

No Claude: cole cada prompt na conversa do claude.ai. Ele responde com o código e os passos — você aplica no VS Code.
No Copilot: cole cada prompt no Copilot Chat (o ícone de balão na lateral do VS Code).
No Claude Code: digite o prompt no terminal (depois de rodar claude na pasta do projeto). Ele age direto nos seus arquivos — você só confirma.
3

Crie a base do projeto

Agora você tira o plano do papel: cria a estrutura do projeto e o deixa rodando na sua tela pela primeira vez.

Use o prompt abaixo na sua ferramenta e siga os comandos que a IA mandar digitar no Terminal.

Claude: cole no chat; ele te dá o código (copie nos arquivos do VS Code) e os comandos (rode no Terminal: menu Terminal → Novo Terminal).
Copilot: cole no Copilot Chat; ele aplica no editor — revise antes de aceitar — e te passa os comandos do Terminal.
Claude Code: é só descrever no terminal — ele cria os arquivos e roda os comandos sozinho. Confirme cada ação.
Prompt — O Engenheiro (base) (clique para copiar)
Papel: Aja como um Engenheiro Full-Stack sênior e paciente, especialista em ensinar quem nunca programou.
Contexto: estou no VS Code com o Copilot e já tenho o Node.js instalado; vamos seguir o plano que você me deu. Stack padrão, se eu não definir outra: Next.js + Tailwind.
Objetivo: criar a base do projeto [nome] e deixá-lo rodando na minha tela.
Como fazer: pense passo a passo e me guie com os comandos exatos para eu digitar no terminal, explicando em 1 linha o que cada comando faz. Se algum passo costuma dar erro, me avise antes.
Cuidados: nunca coloque senhas ou chaves no código — use um arquivo de variáveis de ambiente (.env) e me explique como.
Formato: ao final, me diga como abrir o projeto no navegador para eu ver funcionando.
Refino: se eu colar um erro, explique a causa em português simples e a correção mais segura.
4

Construa as telas e funcionalidades

Uma de cada vez. Peça, confira, teste — e só então parta para a próxima. É assim que se constrói sem virar bagunça.

Repita este prompt para cada funcionalidade do seu plano (a tela inicial, um formulário, uma lista…).

Prompt — Construir uma funcionalidade (clique para copiar)
Papel: Aja como um Engenheiro Full-Stack sênior.
Contexto: o projeto [nome] já está rodando; agora quero construir [a funcionalidade — ex.: a tela inicial com um formulário].
Objetivo: que você implemente isso de forma limpa e simples.
Como fazer: antes, me explique em 1 parágrafo o que vai fazer e o que pode quebrar. Liste os arquivos que vai criar ou mudar e escreva o código comentado nos pontos importantes.
Cuidados: cuide de segurança e de dados pessoais (LGPD) se a tela coletar informações de gente. Faça só o que pedi, sem adicionar coisas extras.
Formato: no fim, me diga como testar.
Refino: ofereça ajustar o visual se eu quiser.
Quer um visual profissional? Acrescente ao prompt: "cuide do design — tema premium, com boa tipografia e espaçamento, sem cara de IA".
5

Banco de dados (opcional)

Só precisa disto se o seu sistema guarda informações (cadastros, mensagens, pedidos). Se for um site simples, pule para a etapa 6.
Ferramenta
Prompt — O Especialista em Firebase (clique para copiar)
Papel: Aja como um Engenheiro de Dados sênior, especialista em Firebase (Firestore, Authentication e regras de segurança), paciente com quem nunca usou banco de dados.
Contexto: estou criando [o sistema] e vou guardar [ex.: cadastros com nome, e-mail e telefone]; sou iniciante.
Objetivo: me guiar a conectar o Firebase com segurança — a configuração via variáveis de ambiente (nunca no código), o modelo dos dados e as regras de segurança restritivas (negar por padrão, liberar só o necessário), explicando cada regra em uma frase.
Como fazer: antes, me pergunte quais dados pessoais eu coleto e quem pode ler ou escrever cada coisa.
Cuidados: cuide da LGPD e me lembre de NÃO usar o "modo de teste" e de ativar o App Check.
Refino: no fim, me diga como testar se as regras estão bloqueando o acesso indevido.
Atenção, erro nº 1: ao criar o banco, comece em modo de produção, nunca em "modo de teste" — ele deixa seu banco aberto para o mundo por 30 dias.
6

Segurança: revise antes de seguir

Código de IA tem 2,74x mais vulnerabilidades. Antes de guardar ou publicar, peça uma revisão de segurança — é o que separa quem brinca de quem constrói de verdade.
Prompt — O Revisor de Segurança (clique para copiar)
Papel: Aja como um Engenheiro de Segurança de Aplicações (AppSec) sênior, paciente com iniciantes.
Contexto: vou guardar/publicar meu projeto e quero ter certeza de que não estou vazando nenhum segredo; sou iniciante.
Objetivo: que você (1) configure meu .gitignore para ignorar todos os arquivos .env e segredos; (2) verifique, no código que eu colar, se há alguma senha, chave ou token escrito direto; (3) me explique, em linguagem simples, o que encontrou e como corrigir.
Como fazer: pense passo a passo. Se eu já tiver subido algo, me diga como revogar a chave exposta.
Cuidados: não invente problema — se estiver tudo certo, confirme.
Formato: Código ou arquivos: [cole aqui].
As 3 regras de ouro: segredo nunca no código (sempre no .env) · o .env sempre no .gitignore · a IA escreve, você confere.
Escolha o seu caminho

🔀 Git ou só local?

Agora você decide. Não precisa subir para o GitHub nem publicar — às vezes você só quer rodar no seu computador. Escolha:

Caminho A

Só rodar no meu PC

Você não quer publicar nem usar Git agora. Tudo bem — é o suficiente para aprender, testar e usar você mesmo.

  • Para abrir de novo: abra a pasta no VS Code → Terminal → rode o comando que a IA te deu (ex.: npm run dev).
  • Faça backup manual: copie a pasta do projeto para um pendrive ou nuvem de vez em quando.
  • Quando quiser publicar no futuro, é só voltar e fazer o Caminho B.
Caminho B

Versionar e publicar (Git + Vercel)

Quer guardar com histórico, colaborar ou colocar no ar para o mundo. Crie a conta no GitHub e siga o prompt abaixo.

Prompt — O Especialista em Deploy (copiar)
Papel: Aja como um Especialista em Deploy (GitHub + Vercel) sênior, paciente com quem nunca publicou um site.
Contexto: tenho o projeto [nome] no meu computador e quero versioná-lo e publicá-lo de graça; sou iniciante.
Objetivo: me guiar, com os cliques e comandos exatos, a (1) criar o repositório no GitHub privado, (2) subir o projeto, e (3) publicá-lo na Vercel.
Cuidados: garanta que o .gitignore ignora todos os .env e segredos ANTES de subir; me lembre de SEMPRE dar "git pull" antes de enviar; e de cadastrar as chaves nas variáveis de ambiente da Vercel (nunca no código).
Como fazer: me avise do erro nº 1 de iniciante (esquecer uma variável de ambiente na Vercel).
Refino: no fim, me diga como ver o site no ar e como configurar um domínio próprio.
8

Deu erro? Saiba depurar

Erro é normal — até para experiente. O segredo é capturar a mensagem e devolver para a IA com contexto.
  • No navegador: aperte F12 → aba Console → copie o texto em vermelho (inteiro, com o arquivo e a linha).
  • No VS Code: o erro vermelho aparece no Terminal.
  • No site publicado: os erros ficam nos Logs da Vercel.
Prompt — O Engenheiro de Depuração (clique para copiar)
Papel: Aja como um Engenheiro Sênior de Depuração, paciente e especialista em explicar para quem não programa.
Contexto: estou construindo [o que é] com ajuda da IA e apareceu um erro; sou iniciante. Eu estava tentando [o que fazia quando quebrou].
Objetivo: que você descubra a causa e me dê a correção mais segura.
Como fazer: pense passo a passo: 1) explique a causa em português simples; 2) dê a correção pronta, mudando só o necessário (sem gambiarra); 3) diga como evitar que volte; 4) confirme que não cria risco de segurança.
Formato: O erro é: [cole o erro do console]. O código relacionado, se eu souber: [cole, ou "não sei"].
Cuidado: se aparecer alguma senha ou chave no meio do erro, troque por [XXXX] antes de colar em qualquer lugar.
9

Evolua sem quebrar

Seu sistema está de pé. Agora é melhorar aos poucos — pedindo cada novidade com cuidado para não estragar o que já funciona.
Prompt — Nova funcionalidade com cuidado (clique para copiar)
Papel: Aja como um Engenheiro Full-Stack sênior cuidadoso.
Contexto: meu sistema [nome] já funciona e está [local / publicado]. Quero adicionar [a novidade].
Objetivo: implementar isso sem quebrar o que já existe.
Como fazer: antes, me explique o que vai mudar e o que pode ser afetado. Mexa só no necessário. Se for arriscado, me avise e peça confirmação.
Cuidados: mantenha a segurança e os dados protegidos.
Refino: no fim, me diga como testar que o novo funciona E que o antigo continua funcionando.

🎉 Você construiu do zero

Se você marcou as etapas acima, saiu de "não sei nada" para um sistema de verdade — com a velocidade da IA e o cuidado de quem entende de engenharia. Esse é o método.

Continue com o time de IA do Rodrigo

Robôs especialistas (Arquiteto, Engenheiro, Revisor de Segurança, Depuração…) prontos para cada etapa, e o método completo no e-book.

Acessar os robôs grátis Mais materiais
Construa do Zero · Rodrigo Munhoz Reis · rodrigomunhozreis.com
A IA escreve; você confere e decide. Sempre.