Curso Lovable

Material bônus

Os prompts que construíram o sistema.

Não é um material escrito à parte. São os prompts exatos usados nas aulas, os mesmos que produziram o sistema que você viu na tela. Cada um é adicionado aqui na aula em que aparece.

#ItemAula
1Prompt 102 · Explique o sistema pra IA (o PRD)
2A descrição do sistema do curso02 · Explique o sistema pra IA (o PRD)
3Modelo de PRD02 · Explique o sistema pra IA (o PRD)
4Prompt 203 · O que o sistema precisa lembrar (o banco)
5Schema do qualificador03 · O que o sistema precisa lembrar (o banco)
6Prompt 304 · Cole no Lovable e veja o app nascer
7PRD e schema prontos para usar04 · Cole no Lovable e veja o app nascer
8Como reportar um erro ao Lovable04 · Cole no Lovable e veja o app nascer
9Prompt "Antes de publicar"05 · Publique no seu domínio, com os dados protegidos
10Checklist de publicação05 · Publique no seu domínio, com os dados protegidos
11O pacote completo06 · Agora faça o seu

Os três prompts principais

Os três prompts do curso

O método inteiro cabe aqui. Você troca a descrição do sistema no Prompt 1 e usa os três na ordem. Os dois primeiros vão em uma IA de conversa (Claude ou ChatGPT), na mesma conversa. O terceiro vai no Lovable.


Prompt 1 — o PRD

PRD significa Product Requirements Document, o documento de requisitos do produto. É um guia detalhado que descreve a solução, as funcionalidades, os objetivos e o público de um produto ou funcionalidade que será desenvolvido. É o que você entrega ao Lovable no lugar de um pedido de uma linha.

Cole na IA de conversa. Substitua apenas o trecho entre colchetes.

Quero construir um sistema e preciso do PRD dele antes de abrir a
ferramenta que vai construir. O sistema vai ser construído no Lovable,
que já cuida de login, banco de dados, hospedagem e da chamada de IA.

O sistema:
[Descreva em 3 a 6 linhas: o que ele faz, para quem, e o que a pessoa
faz nele do começo ao fim. Escreva como se estivesse explicando para
um amigo. Não precisa de termos técnicos.]

Quero um produto completo e agradável de usar, não um esqueleto.
Tudo o que estiver no PRD precisa funcionar de verdade na primeira
versão. Escreva o PRD com estas seções:

1. O que o sistema faz, em uma frase.
2. Para quem é e qual problema resolve.
3. Quem usa: os papéis, e quais precisam de login.
4. O percurso de cada papel, do começo ao fim, em passos numerados.
5. As telas. Para cada uma: o nome, o que aparece, o que a pessoa faz,
   e o que acontece em cada clique. Inclua os estados de carregando,
   vazio, sucesso e erro. Descreva a experiência com cuidado: o que
   a pessoa vê primeiro, o que é destaque, o que é secundário.
6. O conteúdo pronto. Tudo o que o sistema precisa já ter ao nascer:
   textos das telas, as perguntas com suas opções de resposta, mensagens
   de confirmação e de erro, e exemplos realistas para preencher as
   telas antes de haver dados de verdade.
7. Como a IA trabalha, se houver IA: o que ela recebe, o que ela
   devolve, os critérios que usa, e um exemplo completo de entrada e
   saída.
8. Regras que não são óbvias: limites, exceções, o que acontece quando
   algo dá errado, quem pode ver o quê.
9. O que fica para uma próxima versão. Só o que depende de serviço
   externo (e-mail, WhatsApp, pagamento, CRM) ou o que é um produto
   à parte.

Regras para escrever:
- Em português, de forma direta, sem código.
- Não deixe nada "a definir". Onde faltar informação, decida pela
  opção mais simples e registre a decisão na seção 8.
- Decida cada coisa uma vez só. Antes de terminar, releia o documento
  e confira que nenhuma seção contradiz outra.
- Enquanto a pessoa preenche um formulário, nada é salvo no servidor:
  só quando ela envia. Se ela fechar a página no meio, perde e
  recomeça. Não crie rascunho, sessão ou salvamento parcial.
- Não pergunte nada: escreva o PRD completo com as decisões tomadas
  e liste no fim o que você decidiu por conta própria.

A descrição do sistema — o exemplo do curso

É o texto que vai no trecho entre colchetes do Prompt 1. Este é o do qualificador de leads, o sistema construído nas aulas. Se quiser reproduzir o mesmo sistema, copie e cole. Se for fazer o seu, use como modelo: o que faz, para quem, o que a pessoa faz nele do começo ao fim.

Um qualificador de leads com IA para quem presta serviço ou tem uma
agência. A pessoa interessada entra numa página pública, responde seis
perguntas sobre a situação do negócio dela, uma por vez, e deixa nome,
e-mail, empresa e WhatsApp. Na hora, ela recebe na tela um diagnóstico
escrito por IA sobre o momento dela e o que fazer primeiro. Do outro
lado, eu entro num painel com login e vejo esse lead numa lista
ordenada por temperatura (quente, morno, frio), com busca e filtro,
abro o lead e vejo as respostas dele, a nota, o resumo interno feito
pela IA dizendo como abordar, e marco se já entrei em contato. As seis
perguntas já vêm prontas, e no painel eu posso editar o texto delas.

Para escrever a sua: responda em três a seis linhas, como se explicasse para um amigo. Quem usa o sistema? O que a pessoa faz nele, do primeiro clique ao resultado? O que você, dono, vê do outro lado? Não precisa de termo técnico.

Depois que a IA responder: leia o documento. Ela acerta a estrutura, mas erra o que não tem como saber sobre o seu negócio. Corrija na própria conversa, por exemplo: "na seção 8, o lead nunca vê a nota" ou "as perguntas 2 e 5 são assim".


Prompt 2 — o schema

Na mesma conversa, logo depois do PRD.

Com base nesse PRD, crie o schema Prisma do banco de dados do sistema.

- Uma model para cada coisa que o sistema precisa guardar, incluindo
  o conteúdo pronto da seção 6 do PRD (por exemplo, as perguntas e
  suas opções vivem no banco, não no código).
- As relações entre as models explícitas.
- Cada campo com tipo, se é obrigatório ou não, e valor padrão
  quando fizer sentido.
- id, createdAt e updatedAt em toda model.
- Enum para todo campo que tem uma lista fixa de valores (status,
  tipo, temperatura, etc.).
- Nomes em inglês nas models e nos campos, como é o padrão.

O login é feito pela própria plataforma (Lovable Cloud). Não crie
tabela de usuário, de sessão nem de senha. Não pergunte sobre
autenticação, infraestrutura ou tecnologia: essas decisões já estão
tomadas.

Entregue o schema como um arquivo para download chamado
`schema.prisma`, só o código. Se não conseguir criar arquivo, entregue
num bloco de código.

Depois do arquivo, escreva em português, em poucas linhas, o que cada
model guarda e como elas se ligam.

Não pergunte nada. Se algo no PRD estiver ambíguo ou contraditório,
escolha a opção mais simples, siga com ela, e liste no fim o que você
decidiu. Não invente tabela para algo que o PRD não pede.

Depois que a IA responder: baixe o arquivo. A explicação em português, logo abaixo dele, é a parte que importa para quem não programa. Se ela não corresponder ao que você imaginava, o schema está errado, e não você. Ajuste na conversa.


Prompt 3 — construir no Lovable

Crie um projeto novo no Lovable. Cole este texto com o PRD e o schema no final. A cor entre colchetes é a da Conversão Extrema; troque pela cor da sua marca, se quiser.

Quero construir o sistema descrito abaixo, completo e funcionando de
ponta a ponta. Seguem o PRD e o schema do banco de dados.

O que eu espero:

1. Construa tudo o que está no PRD: todas as telas, todos os fluxos,
   todos os estados (carregando, vazio, sucesso, erro). Nada pode ser
   enfeite: todo botão faz o que o PRD diz.
2. Use o Lovable Cloud desde o início. Crie as tabelas exatamente como
   o schema descreve, insira os dados iniciais que o PRD lista na
   seção 6 (as perguntas com opções, os textos, e três ou quatro
   exemplos realistas), e ligue todas as telas ao banco. Nenhuma tela
   pode funcionar com dados falsos no lugar do banco.
3. Login com e-mail e senha pelo Lovable Cloud para a área do dono.
   As páginas públicas não pedem login. Crie a conta do dono para mim
   e me diga o e-mail e a senha iniciais.
4. A IA usa o Lovable AI, executada no backend, nunca no navegador.
   Ela devolve uma resposta estruturada, com todos os campos que o PRD
   pede, e o sistema valida antes de salvar. Se a IA falhar, siga a
   regra do PRD para esse caso.
5. Proteja os dados: só o dono logado lê e altera o que é do painel.
   As páginas públicas só conseguem inserir o que o PRD permite.
6. Onde o PRD não disser como algo deve ser, escolha a opção mais
   simples e me avise o que escolheu. Não adicione funcionalidades
   que não estão no PRD.
7. Antes de terminar, teste cada fluxo do começo ao fim como se fosse
   o usuário, corrija o que não funcionar, e me entregue uma lista do
   que testou.

Visual: quero um produto bonito e moderno, com cara de produto pronto,
seguindo este padrão à risca:
- Use os componentes prontos do projeto (shadcn/ui). Não invente
  componentes próprios.
- Fonte: Geist (do Google Fonts), com Geist Mono para números, datas e
  identificadores. Nenhuma outra família.
- Cores: fundo da página #FCFCFC, cartões #FFFFFF, texto principal
  #171717, texto de apoio #525252, texto fraco #737373. Uma cor forte
  só: [#10b981], usada no botão principal, no item de menu ativo, no
  foco e em detalhes pequenos. Nada mais é colorido.
- Separação por borda fina de 1px na cor #ECECEC, nunca por sombra.
  Cantos com 12px de raio nos cartões e 8px nos campos. Botões em
  formato de pílula.
- Estado (quente, morno, frio; contatado ou não) é um ponto de 6px
  colorido com o texto ao lado, em cinza. Sem etiquetas coloridas
  grandes.
- Tipografia calibrada para aplicação: título de página 28px, título
  de seção 18px, texto 14px, rótulo 12px. Hierarquia por peso e
  tamanho, não por cor.
- Espaço generoso e consistente: 8, 12, 16, 24px. Nada apertado, nada
  gigante.
- Página pública: uma coluna centralizada de no máximo 640px, uma
  pergunta por vez, barra de progresso fina, botão de voltar, transição
  suave. Tela de diagnóstico limpa, com o texto em boa leitura.
- Painel: barra de topo simples com o nome do sistema e os itens de
  menu, lista de leads em linhas com hairline entre elas, busca e
  filtro discretos no topo, e o detalhe do lead em tela própria.
- Estados de carregando (skeleton), vazio (com uma frase e o que fazer)
  e erro (com o que aconteceu e como tentar de novo) desenhados.
- Tudo funcionando bem no celular.

--- PRD ---
[cole o PRD]

--- SCHEMA ---
[cole o conteúdo de schema.prisma]

Depois que ele terminar: entre como lead, preencha, veja o diagnóstico. Entre como dono, veja o lead no painel. Se algo não funcionar, cole o erro no chat com o modelo abaixo.


Antes de publicar

Cole no chat antes de clicar em Publicar. É o mesmo para qualquer sistema. Ele revisa a proteção dos dados e conta o que fechou.

Vou publicar o sistema. Antes disso, proteja os dados:
- Só o dono logado pode ver, editar e apagar o que está no painel.
- Quem não está logado só consegue fazer o que a página pública
  permite, e nada mais.
- Ninguém sem login consegue ler nenhum dado de outra pessoa.
Revise tudo, corrija o que estiver aberto, e me diga o que mudou.

Como reportar um erro ao Lovable

Quando algo quebrar, você não precisa entender o erro. Copie e cole no chat, do jeito que apareceu, dizendo o que estava fazendo. O Lovable lê e conserta.

Cliquei em [o que você fez] e apareceu este erro:

[cole o erro exatamente como apareceu]

Conserte sem mudar o que já está funcionando.

Se depois de duas ou três tentativas ainda estiver ruim, pare: volte para a última versão boa pelo histórico e peça de outro jeito.