Este guia ajuda todos os usuários — novos ou experientes — a começarem rapidamente e evitarem erros comuns ao desenvolver no Lovable.
1. Defina a base: use o arquivo de Knowledge
- Sua visão de produto (pense nisso como um PRD)
- Jornadas de usuário e personas
- Principais recursos e funcionalidades
- Design systems e diretrizes de UI
- Comportamento específico por tipo de usuário (por exemplo, Admin, User, Investor)
Você pode gerar automaticamente um arquivo de Knowledge via Chat mode:Gere o conhecimento para o meu Projeto em T=0 com base nos recursos que já implementei.
-
Seja específico: mencione a página exata (por exemplo,
/dashboard) e o comportamento esperado.
-
Use linguagem natural.
Quero que usuários com o papel Investor acessem este componente, mas não Admins.
-
Adicione capturas de tela: especialmente útil para descrever bugs ou problemas de UX.
-
Defina limites: diga para a IA o que não deve ser alterado. Ex.:
Não edite /shared/Layout.tsx.
-
Repita instruções importantes em diferentes prompts. A memória da IA pode ser limitada.
-
Evite tentar implementar 5 coisas de uma vez. Divida o trabalho em partes menores e testáveis. Use Chat Mode entre cada bloco para validar antes de seguir em frente.
**Modelo de detalhamento de funcionalidade:**
Criar a nova página
Adicionar o layout de UI
Conectar os dados
Adicionar lógica + casos extremos
Testar por papel
-
Se seu app tiver vários papéis (por exemplo, Admin, Investor, Startup), sempre defina para qual papel o Prompt de IA se aplica. Isso ajuda a evitar bugs causados por lógica/componentes compartilhados.
Como Investor, quero visualizar o dashboard da empresa, mas não devo conseguir editá-lo. Por favor, isole esta funcionalidade apenas para o papel Investor.
Chat mode = seu copiloto de IA. Ele ajuda você a debugar, explorar ideias e planejar implementações — sem editar seu código até que você esteja pronto.
Quando mudar para o Chat Mode:
-
Após 2–3 tentativas sem sucesso com “Try to Fix”
-
Ao depurar lógica complexa ou problemas de banco de dados
-
Ao planejar novos recursos
Sugira 3 maneiras de implementar X
Dica de fluxo de trabalho:Alguns usuários gostam de usar o Chat Mode em 60–70% do tempo. Só clique em “Implementar o plano” quando estiver totalmente satisfeito.
Se você se esquecer de usar o Chat mode, este formato melhora a consistência dos resultados e evita alterações colaterais.Na página /settings, implemente [recurso]. O comportamento esperado é [XYZ]. Por favor, não altere o componente A, o layout B ou a lógica compartilhada, a menos que seja necessário. Siga as melhores práticas de Tailwind / Supabase / X.
Para evitar execução indesejada de código:Investigue, mas não escreva código ainda.
Sugira 3 maneiras de resolver isso sem mudar nada.
Quando a IA entrar em um “loop”, use esta sequência para evitar ciclos infinitos de correções em código quebrado:
-
Mude para o Chat mode
-
Cole a captura de tela do erro
-
Diga:
Investigue isso sem quebrar outros recursos. Se necessário, volte para a última versão funcionando e corrija a partir dela.
-
Conecte o Supabase depois que o front-end estiver estável
-
Se precisar reverter, use o seguinte Prompt de IA:
Por favor, valide o schema SQL em T=0 e garanta que nenhuma mudança incompatível tenha ocorrido.
-
Sempre teste os recursos ligados ao banco de dados antes de publicar
5. Use o Visual Edit para correções rápidas na UI
- Alterar texto, cores, fontes e pequenos ajustes de layout
- Editar vários elementos pequenos de uma só vez
- Realizar commits seguros, sem consumir créditos (com opção de desfazer)
-
Cada edição é um commit. Use o pinning para marcar versões estáveis. Depois de cada funcionalidade que estiver funcionando: fixe (pin) a versão
-
Depois de cada bug: compare as versões visualmente. Você pode usar este Prompt de IA:
Compare version at T–1 to T–0. What changed? What might be breaking?
-
Volte para uma versão estável se sentir que a IA quebrou coisas demais.
-
Use branches do GitHub por sua conta e risco. Evite excluir branches antes de voltar para
main no Lovable para evitar problemas de sincronização do Projeto.
7. Quando nada mais funcionar, remixe
- Remixar cria uma cópia limpa do seu projeto em T=0.
- Reconstrua com prompts de IA melhores + entendimento mais claro
- Use seu projeto antigo apenas como referência
Casos de uso:
- Você está preso em um loop bugado
- Você quer recomeçar do zero com o histórico preservado
- Você precisa desconectar o Supabase e tentar um novo caminho
Remixar exige desconectar o Supabase primeiro.
8. Tenha paciência, mantenha a calma
Regra de ouro:Dedique tempo aos seus Prompts de IA. Revise tudo. Divida o trabalho em blocos pequenos e testáveis. Quanto mais precisas forem suas entradas, melhores serão suas saídas.
9. Use a documentação e peça ajuda
- A documentação contém tutoriais passo a passo, modelos, dicas de SEO, integrações e muito mais. Você pode fazer perguntas diretamente ao assistente de IA da documentação.
- Participe da comunidade no Discord para obter ajuda de outros usuários.
- Quando estiver pronto, envie seu projeto para o Lovable Launch.
-
Adicione um Prompt de IA por nota de voz usando ditado (por exemplo, no Mac, use o microfone para ditar prompts longos). Assim você cria entradas melhores, mais rápido — especialmente útil quando estiver frustrado ou cansado.
-
Use o padrão de Prompt de IA “
I am frustrated…” para ajudar a direcionar melhor o foco da IA
-
Depois de uma grande edição, sempre confira novamente vários papéis (roles) e seus comportamentos (principalmente quando houver lógica condicional)
-
Armazene versões estáveis como versões de backup (fallbacks) para depuração rápida
-
Se você estiver vendo efeitos colaterais inesperados, isso ajuda a evitar bugs causados por lógica genérica demais.
Crie um componente especificamente para [função X] e não reutilize componentes compartilhados, a menos que o escopo esteja claramente definido.
