Curso Lovable

Parte 3 · Publicar 9min

06 Agora faça o seu

O qualificador está no ar. Agora é a vez do seu sistema: os mesmos três prompts, na mesma ordem. E o que vem depois, quando o sistema crescer com você.

O que acontece

  1. Retomamos o método: os cinco passos, agora que você viu cada um acontecer. Os três prompts e o de segurança estão na página Bônus, prontos.
  2. A única parte que é sua: a descrição do sistema, em três a seis linhas. Quem usa, o que a pessoa faz, o que você vê do outro lado.
  3. O que você tem agora: um jeito de trabalhar que serve para toda ideia daqui em diante. E o sistema cresce junto: WhatsApp, e-mail, CRM entram pelos conectores do Lovable, com o mesmo método.
Na tela

O qualificador no ar, o slide do método, a página Bônus com os prompts, e a frase final.

Do Lovable

Nada novo.

Você sai com

Os três prompts em mãos e o caminho para aplicá-los ao seu próprio sistema.

Na tela

2 slides nesta aula.

Apresentar ▶
  1. 01O método, de novo
  2. 02Você fez em uma tarde

Prompts

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.

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.