PLUGUE IA Construtor de Sites // TUT-04
Solução TUT-04 · Plugue IA Hub

Construtor de
Sites.

4 perguntas. Um mega-prompt. Você cola no Lovable e em ~2 minutos tem um site profissional no ar — com a sua marca, sua copy e design pronto.

Abrir guia →
Tempo

~ 5 min

4 perguntas · mega-prompt + .txt

Entregável

Site no Lovable

mega-prompt · design system · copy real

Pré-requisito

ChatGPT + Lovable

free serve · 5 créditos/dia

// COMO USAR ESTE GUIA

Este documento explica o que o agente faz, como usar e como levar o mega-prompt pro Lovable. Use as setas do teclado ou os botões de navegação pra avançar entre as seções.

Seção 01

O que faz.

Site profissional em minutos. Sem programar.

Esse agente cria um site profissional pro seu negócio sem programar, sem designer, sem saber nada de código. Você responde 4 perguntas e sai com duas coisas:

// ARTEFATO 1
Mega-prompt de site — um super prompt estruturado de 2000-3000 palavras, pronto pra colar no Lovable. Copy real do seu negócio, design system completo (cores, fontes, tamanhos), seções na ordem, depoimentos realistas, imagens por seção.
// ARTEFATO 2
Arquivo site-prompt.txt — o mesmo mega-prompt, limpo pra download. Você baixa, abre, cola no Lovable e em ~2 minutos tem um site no ar com a sua marca, sua copy e design pronto.

O diferencial: traz um site que você admira (de qualquer segmento) e o agente decodifica a vibe — paleta, tipografia, layout, ritmo — e adapta pro seu negócio. Não é cópia. É leitura do sistema visual.

Agência cobra R$3-10 mil e leva semanas.
Aqui sai na hora.

4
perguntas
~5
minutos
~2
min no Lovable
// PRÉ-REQUISITO

ChatGPT (gratuito ou Plus) — o agente roda em ambos. O mega-prompt e o arquivo .txt saem igual nos dois planos.

Lovable (conta gratuita) — gera o site a partir do mega-prompt. Plano gratuito: 5 créditos por dia (~30/mês), até 5 projetos, domínio lovable.app. Pro (US$25/mês): domínio próprio e sem badge. Compara com agência (R$3-10 mil).

GoFullPage (extensão gratuita do Chrome) — printa a página inteira de qualquer site. Você usa pra capturar a referência visual e subir pro agente. Instala na Chrome Web Store em 10 segundos.

// ATALHO

Se já usou o Analista Estratégico e o Designer de Imagens, traz o Passaporte de Negócio + Briefing Visual. O agente pula contexto e usa o estilo como base do design do site. Não tem? Sem problema — o agente pergunta tudo no fluxo e oferece 4 estilos prontos (Clean, Premium, Vibrante, Tech).

Seção 02

Como usar.

5 passos. Do clique ao mega-prompt pronto.
1

Abra o agente

Clique no botão abaixo. O agente abre direto no ChatGPT.

Abrir Construtor de Sites →
2

Escolha o quebra-gelo

O agente abre com dois caminhos. Escolha o que se aplica:

// "TENHO O PASSAPORTE DE NEGÓCIO"
Cola o Passaporte (e o Briefing Visual, se tiver) na mensagem seguinte. O agente confirma em uma linha e vai direto pra referência de site.
// "SEGUIR SEM PASSAPORTE DE NEGÓCIO"
O agente começa a coleta normal — pergunta sobre o seu negócio e depois segue pro fluxo de referência. Funciona igual, só leva um pouco mais.
3

Responda as 4 perguntas

O agente pergunta uma por vez, na ordem. Cada resposta muda o resultado — quanto mais específico, melhor.

#PerguntaO que ele quer saber
1Referência de siteUm site que você admira — de qualquer segmento. Link + print da página inteira (GoFullPage). O agente decodifica a vibe.
2Tipo + objetivoInstitucional, landing de captura ou landing de vendas. Presença ou conversão.
3ConteúdoEm 1 frase o que faz e pra quem, 3 produtos/serviços, botão de ação (WhatsApp, agendar, etc.).
4ConfirmaçãoResumo de tudo — confere e dá o OK.
// SOBRE A REFERÊNCIA (Pergunta 1)

O agente pede duas coisas: o link e o print da página inteira. O print é o que garante a decodificação visual completa — o link nem sempre o agente consegue abrir, mas o print ele sempre lê.

Instala o GoFullPage no Chrome, abre o site de referência, clica no ícone da extensão, baixa o PNG e sobe no chat. Se não tem referência em mente, o agente sugere buscar — vale garimpar 2 minutos.

4

Confirme o resumo

O agente mostra tudo que coletou. Confere e dá o OK.

5

Receba o mega-prompt

Primeiro no chat (em code block, com toda a estrutura do site), depois como arquivo site-prompt.txt pra download.

// ARQUIVO PRA DOWNLOAD

O arquivo site-prompt.txt contém o mega-prompt completo, pronto pra colar no Lovable sem editar. Copy real, design system, seções na ordem, queries de imagem — tudo dentro.

// DICA

Responda por áudio. O ícone de microfone no ChatGPT transcreve o que você fala. É mais rápido e mais natural — principalmente pra descrever o negócio e a referência visual.

Seção 03

No Lovable.

6 passos. Do prompt ao site no ar.

Depois que o agente entrega o mega-prompt, ele mostra o passo a passo abaixo. Aqui no guia, destacamos os 3 avisos que mais travam na prática.

1

Abra o Lovable

Acesse lovable.dev e faça login. Conta gratuita funciona.

2

Cole o mega-prompt

Na home, use o campo de chat central ("Ask Lovable to build...") — não existe botão "New Project", você começa digitando ali. Cole o conteúdo de site-prompt.txt.

3

Suba o print de referência (se tiver)

Clique no + (Additional actions) → AttachFile → suba o screenshot do GoFullPage. O Lovable usa como referência visual junto com o texto.

// AVISO — SCREENSHOT PESADO

Sites com scroll infinito (Pinterest, feeds de rede social) geram PNGs enormes que travam o upload. Prefira sites com página finita. Se o arquivo ficou muito pesado, recorte só a parte principal (topo + 2-3 seções) antes de subir.

4

Ative o modo Plan

Ao lado do botão de envio tem um seletor (padrão "Build"). Troque pra Plan (atalho Cmd+.).

// AVISO — MODO PLAN

No modo Build o Lovable gera o site direto e gasta créditos sem te mostrar o plano. No modo Plan ele discute a estrutura antes — você revisa, ajusta e aprova. Sempre use Plan no primeiro disparo.

5

Envie e aprove

O Lovable mostra o plano com as seções que vai gerar. Leia, ajuste se precisar, e aprove — é a aprovação que dispara a geração. No modo Plan ele não gera até você aprovar.

// AVISO — IA REESCREVE

Se o Lovable começar a reescrever ou resumir seu prompt (aparece texto diferente do que você colou), descarte e cole de novo. Você quer o SEU mega-prompt completo, não uma versão resumida pela IA do Lovable.

6

Aguarde

~2 minutos. O site renderiza na tela. Salve o link.

// INTERFACE VIVA

O Lovable atualiza a interface com frequência. Se algum botão estiver com nome diferente ou em outro lugar, procure o equivalente — a lógica (campo de chat → anexar referência → modo Plan → revisar → gerar) continua a mesma.

// DOIS CANAIS COMPLEMENTARES

O print de referência trabalha duas vezes: primeiro o agente decodifica a vibe via Vision e traduz pro mega-prompt. Depois, você sobe o mesmo print no Lovable junto com o texto — o Lovable usa como referência visual extra. Dois canais, mesmo arquivo.

Seção 04

Refino e dicas.

O salto de "gerado por IA" pra "parece agência".

O salto de qualidade

O site já sai bom no primeiro disparo. Mas o salto de qualidade vem de 2-3 ajustes no Lovable:

// MAIOR IMPACTO

Suba seus assets reais. Logo, fotos do negócio, imagens que gerou no Designer de Imagens. Substituir as fotos genéricas do Unsplash pelas suas muda completamente a cara do site. Esse é o ajuste que mais faz diferença.

// AJUSTES NO CHAT

O Lovable entende comandos em português: "troca a imagem do topo", "reduz o espaço entre as seções", "muda a cor do botão pra dourado". Cada ajuste gasta 1 crédito — por isso o modo Plan é importante.

// PLACEHOLDERS

O mega-prompt marca com colchetes o que só você sabe: [seu WhatsApp], [seu endereço], [seu Instagram]. Use o Visual Edit do Lovable — o modo que deixa você clicar em qualquer texto ou imagem e editar direto, sem precisar de comando — e troque pelos dados reais.

Modo refino (volta no agente)

Se o site saiu mas quer ajustar algo específico, volta na mesma conversa do agente e descreve: "o topo ficou fraco", "quero a seção de serviços mais escura", "muda a fonte do título".

O agente gera um comando de refino pronto pra colar no chat do Lovable — cita a seção e a mudança específica. Você cola, o Lovable executa. Um ajuste por vez pra não gastar créditos à toa.

Referência de outro segmento funciona

Um exemplo real: a OVERLABEL usou um site de moda premium como referência pra criar o site da própria agência de comunicação. O visual de moda — paleta restrita, tipografia serif arejada, fotos editoriais full-bleed, blocos de texto centrado alternando com imagem — virou a base do site de comunicação.

Não copiou o conteúdo. Decodificou o sistema visual (paleta + tipografia + ritmo de seções) e adaptou. Quando o agente pergunta "tem um site que admira?", pode ser de qualquer ramo. O que importa é a vibe — o agente traduz pro seu negócio.

Referência visual não é cópia.
É leitura do sistema.

Mais dicas

// MOBILE

Teste o site no celular. O Lovable gera responsivo por padrão, mas vale conferir. Abre o link no celular e navega como se fosse cliente.

// PASSAPORTE + BRIEFING

Guarde os dois blocos juntos — Passaporte de Negócio + Briefing Visual. São dois blocos que você cola em qualquer agente novo. Se ficarem enterrados em conversas antigas, perdem a utilidade. Note fixo, arquivo de texto — desde que ache em 5 segundos.

// SALVE O LINK

Salve o link do site. Vai ser útil na Imersão e nos próximos passos do Plugue IA.

Abrir Construtor de Sites →
PLUGUEIA

Construir antes de vender.

plugueiahub.com.br