O que Lovable — Gerador de Aplicativos Full-Stack com IA faz?
Visão Geral
Lovable (lovable.dev) gera e edita aplicativos web a partir de prompts de chat no navegador. Os projetos usam Tailwind CSS e shadcn/ui; aplicativos criados desde maio de 2026 usam TanStack Start (renderizado no servidor), e os mais antigos usam React + Vite. Para o backend, você escolhe entre Lovable Cloud (banco de dados, autenticação, armazenamento, tempo real e funções integrados, construído sobre a pilha open source do Supabase) ou seu próprio projeto Supabase. O código pode ser sincronizado de duas maneiras com o GitHub, e os aplicativos são publicados em uma URL lovable ou em um domínio personalizado. Não há nada para instalar e nenhuma CLI; um agente ajuda escrevendo prompts adequados, revisando a saída e trabalhando no repositório sincronizado.
Instruções
1. Planeje antes do primeiro prompt
Responda quatro perguntas: o que é, quem usa, por que e qual é a ação principal. Descreva o aplicativo seção por seção com texto real, sem placeholders. Orientação do Lovable: um prompt de página inteira gera ruído, um prompt orientado a seções gera sinal. Defina uma direção de design ("minimalista", "premium", "divertido") para orientar a tipografia e o espaçamento.
2. Escolha o backend
- Novos projetos: Lovable Cloud (padrão) ou Supabase, escolhido quando o backend é ativado pela primeira vez.
- Projetos existentes conectados ao Supabase continuam funcionando. Não há migração do Supabase para o Cloud, nem movimento com um clique do Cloud para seu próprio projeto Supabase, portanto, decida cedo.
3. Trabalhe em modos
Lovable tem um modo Agente (constrói e modifica coisas) e um modo Chat (discutir, planejar, sem edições). O Modo Planejamento custa 1 crédito por mensagem; edições normais custam aproximadamente 0,5-1,7 créditos, dependendo da complexidade. Adicione "Pergunte-me quaisquer dúvidas que precisar antes de construir" para obter perguntas esclarecedoras. Coloque regras duráveis (stack, nomenclatura, tom) no conhecimento do projeto ou workspace para que persistam entre chats.
4. Revise a segurança
As tabelas geradas devem ter Row Level Security. Leia cada política, execute a verificação de segurança integrada e teste com dois usuários diferentes antes de publicar.
5. Sincronize e assuma o controle do código
Conecte o GitHub nas configurações do projeto. A sincronização é bidirecional para um branch por vez (o branch padrão, a menos que seja trocado); novos branches começam a partir do ativo. Você só pode exportar projetos Lovable para o GitHub, não importar um repositório existente, e arquivos com mais de 10 MB não podem ser editados pelo Lovable. Desconectar mantém ambas as cópias, mas reconectar cria um novo repositório.
6. Planos
Gratuito, Pro, Empresarial e Corporativo; o preço é por créditos, não por assentos. O Gratuito inclui 5 créditos de compilação diários (até 30 por mês) mais pequenos créditos Cloud. Verifique lovable.dev/pricing para preços atuais.
Exemplos
Exemplo 1: Aplicativo de lista de espera com referências
Solicitação: "Use Lovable para construir uma lista de espera SaaS: formulário de inscrição com contador, links de referência, um ranking e uma página de administrador."
Prompt para colar:
Construa um site de lista de espera para "Parcelly", uma ferramenta de etiquetas de envio para vendedores do Etsy.
Seções: hero ("Imprima etiquetas em 10 segundos") com um formulário de e-mail e um contador
de inscrições ao vivo; um ranking dos 10 principais indicadores; página /admin protegida
por login de e-mail que lista inscrições e exporta CSV.
Cada inscrição recebe um link de referência único (?ref=código) que credita o indicador.
Estilo: minimalista, modo escuro. Use Lovable Cloud para dados e autenticação.
Pergunte-me quaisquer dúvidas que precisar antes de construir.
Resultado: Lovable pergunta sobre e-mails de convite, depois cria páginas, uma tabela signups e políticas, e uma URL de pré-visualização. Um conjunto razoável de tabela e política para verificar em relação ao gerado:
create table public.signups (
id uuid primary key default gen_random_uuid(),
email text not null unique,
referral_code text not null unique default encode(gen_random_bytes(6), 'hex'),
referred_by uuid references public.signups(id),
created_at timestamptz not null default now()
);
alter table public.signups enable row level security;
create policy "qualquer um pode entrar" on public.signups for insert to anon with check (true);
-- ler todas as linhas deve ser limitado a administradores, por exemplo, via uma tabela user_roles
Exemplo 2: Iteração e sincronização com o GitHub
Solicitação: "Adicione um gráfico de inscrições ao longo do tempo e, em seguida, coloque o código no meu repositório para que eu possa continuar trabalhando no Cursor."
Prompt de chat: "Adicione um gráfico de linhas de inscrições por dia em /admin usando os dados existentes; mostre um estado vazio quando não houver inscrições." Em seguida: Configurações do projeto, GitHub, Conectar, escolha a conta e crie o repositório. Depois:
git clone [email protected]:parcelly-dev/parcelly-waitlist.git
cd parcelly-waitlist && npm install && npm run dev
Pushes para o branch sincronizado aparecem no Lovable; mantenha edições locais nesse branch (ou alterne o branch nas configurações do projeto).
Diretrizes
- Coloque cada funcionalidade principal no primeiro prompt, depois altere uma coisa por acompanhamento para que o histórico de versões permaneça útil; marque versões funcionais.
- Não cole chaves de API no chat; use os diálogos de segredos/integração. Chaves do lado do servidor pertencem a funções de backend, nunca no código do cliente.
- Nunca confie cegamente em RLS gerado: uma política
insert ... with check (true)é adequada para um formulário público, uma políticaselectnão é. - Créditos são consumidos por compilação, hospedagem e recursos de IA, e não são reembolsáveis; prefira o modo Chat/Planejamento para perguntas.
- Não é adequado para aplicativos mobile nativos, backends personalizados pesados ou monorepos complexos existentes: use um agente de codificação no repositório.