> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Lance uma página inicial
> Construa e publique uma página inicial com uma oferta clara, um call to action e um formulário funcional que captura respostas.
export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
const ensureLZString = () => {
if (typeof document === "undefined") return;
if (window.LZString) return;
if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
const s = document.createElement("script");
s.src = LZ_SRC;
s.async = true;
document.head.appendChild(s);
};
const handleCopy = async e => {
const btn = e.currentTarget;
if (!prompt) return;
try {
await navigator.clipboard.writeText(prompt);
} catch {
const ta = document.createElement("textarea");
ta.value = prompt;
document.body.appendChild(ta);
ta.select();
try {
document.execCommand("copy");
} catch {}
document.body.removeChild(ta);
}
const original = btn.dataset.label || btn.innerText;
btn.dataset.label = original;
btn.innerText = "Copied!";
setTimeout(() => {
if (btn.isConnected) btn.innerText = original;
}, 1500);
};
const handleBuild = () => {
if (!prompt || typeof window === "undefined") return;
const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
let url;
if (window.LZString) {
const encoded = window.LZString.compressToEncodedURIComponent(prompt);
url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
} else {
url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
}
window.open(url, "_blank", "noopener,noreferrer");
};
ensureLZString();
const baseButtonStyle = {
display: "inline-flex",
alignItems: "center",
gap: "6px",
padding: "8px 16px",
borderRadius: "8px",
fontSize: "14px",
fontWeight: 500,
cursor: "pointer",
lineHeight: 1.2,
fontFamily: "inherit",
textDecoration: "none"
};
return
;
};
export const RACHEL_JONES_PROMPT = `Crie um site de uma página para uma treinadora de fitness online chamada Rachel Jones. Deve parecer premium, como uma propaganda de revista — escuro, sombrio e luxuoso, com preto e ouro quente como as únicas cores. Títulos grandes e em negrito, muito espaço vazio e acentos serif elegantes. Sem cores vibrantes, sem vibes de "startup tech" arredondada.
Aqui está o que deve estar na página, de cima para baixo:
Uma barra de cabeçalho com um pequeno logo dourado "RJ" à esquerda, as palavras "RACHEL JONES — FITNESS COACH" ao lado, alguns links de menu no meio (Sobre, Coaching, Programas, Histórias de Sucesso, Recursos) e um botão dourado "Agende uma Consulta Grátis" à direita.
Uma seção hero enorme com uma foto dramática em close-up de uma mulher forte e em forma iluminada com luz dourada quente contra um fundo preto. No lado esquerdo sobre a área escura, coloque um título gigante de três linhas:
"CORPO MAIS FORTE. MENTE CONFIANTE. VOCÊ IMPARÁVEL." — com a última linha em dourado.
Abaixo: "Coaching personalizado. Estratégias comprovadas. Resultados reais que duram." Em seguida dois botões: um dourado "Trabalhe com Rachel" e um delineado "Assista à História de Rachel" com um ícone de play. Abaixo disso, mostre 4 pequenas fotos circulares de clientes e 5 estrelas douradas com a linha "Confiada por mais de 500 mulheres no mundo todo."
No lado direito, sobreposta à foto, escreva "Rachel Jones" em uma fonte cursiva dourada elegante, com "CERTIFIED FITNESS COACH" abaixo, e uma lista de credenciais com pequenos ícones dourados: NASM Certified, Precision Nutrition Level 1, Women's Fitness Specialist, 10+ Years Experience.
Uma faixa "Destaque na Mídia" — uma linha fina mostrando logos fictícios de revistas escritos em fontes diferentes e elegantes: Women's Health, Oxygen, Forbes, mindbodygreen, Fit Pregnancy, Shape.
Uma seção "Abordagem Holística" — título centralizado "Uma Abordagem Holística. Resultados Reais." em um serif elegante. Abaixo, quatro colunas lado a lado, cada uma com um pequeno ícone dourado, um título e uma descrição de uma linha: Treino Personalizado, Orientação Nutricional, Coaching de Mentalidade, Responsabilidade.
Uma seção "Histórias de Sucesso" — à esquerda, o título "Mais Forte por Fora. Mais Forte por Dentro." com um botão "Ver Mais Histórias de Sucesso". À direita, três fotos de transformação antes/depois de mulheres, cada uma com um grande número de resultado dourado abaixo ("−24 KG em 16 semanas", "+18 KG de músculo", "−20% de gordura corporal em 14 semanas"), uma curta citação em itálico e o primeiro nome da cliente.
Um painel final de call to action — um card escuro largo dividido em três partes. À esquerda: um retrato simpático de Rachel. No meio: título "Você Não Precisa de Mais Motivação. Você Precisa do Plano Certo." com um botão dourado "Agende Sua Consulta Grátis". À direita: três pequenos benefícios com ícones — "Ligação de Estratégia 1:1", "Plano Personalizado", "Comece Sua Transformação".
Para as fotos, gere-as — quero uma mulher em forma com iluminação dramática dourada quente em um fundo preto, muito cinemático. As fotos antes/depois devem ser de corpo inteiro no mesmo estilo de estúdio escuro.
Faça parecer uma marca de coaching real e profissional — não um template. Não adicione formulários, cadastros ou páginas extras — apenas esta bela página inicial.`;
Uma página inicial dá a uma ideia, campanha, lista de espera, evento ou oferta um lugar focado para existir.
## O que você vai aprender
Você vai aprender como:
* Transformar um público, uma oferta e um call to action em uma página.
* Pedir ao Agent textos de página, layout e comportamento de formulário.
* Verificar se a página está clara antes de compartilhá-la.
* Testar um formulário na URL publicada.
* Melhorar a página com base na qualidade das respostas.
## Refine e explore alternativas no Canvas
Depois que o Agent terminar a primeira construção, abra o Canvas para dar feedback visual e pedir ao Agent direções alternativas sem reescrever o prompt.
Copie o prompt e cole-o na caixa de prompt em [replit.com](https://replit.com), ou clique em **Construir no Replit** para abrir o Replit com o prompt pré-preenchido.
Quando o Agent terminar, o painel direito muda para **Preview** para que você possa interagir com a página inicial em tempo real. Role o hero, clique nos calls to action e verifique se o texto e as imagens correspondem ao que você pediu antes de começar a refinar.
Selecione o botão **Canvas** abaixo das abas Preview e Tools para mudar o painel direito de Preview para Canvas.
Use as ferramentas **Texto** e **Desenho** do Canvas para adicionar notas e setas no espaço vazio ao redor do mockup, depois aponte-as para o elemento específico que você quer que o Agent altere. Anotações colocadas no canvas — fora da prévia — ficam anexadas ao seu feedback para que o Agent possa lê-las junto com o design.
Mantenha cada anotação focada em uma mudança. Notas curtas e específicas ("Reduza a largura deste botão") funcionam melhor do que feedback aberto.
Selecione com marquee suas anotações junto com o frame da prévia, digite um prompt curto em **Chat sobre itens selecionados** e envie. O Agent lê as anotações e o design como um único contexto, para que saiba a qual elemento cada nota se refere.
Mantenha a mensagem do chat geral — algo como "Aplique as alterações das anotações." Deixe as anotações carregarem os detalhes específicos.
Clique no design no Canvas, selecione **Reimaginar** e escolha **Explorar abordagens diferentes** para pedir ao Agent direções visuais alternativas.
Aguarde o Agent terminar de gerar. **Explorar abordagens diferentes** atualiza o mesmo artefato com novas variantes — alterne entre elas no dropdown de artefato acima do mockup. **Explorar vibes diferentes** gera mockups visuais separados que aparecem no canvas ao lado do original.
Quando as variantes chegarem, escolha uma direção e continue iterando. Adicione outra anotação no frame escolhido, selecione-o com marquee junto com o design e envie uma nova solicitação — por exemplo, "Aplique as alterações solicitadas das anotações." O Agent usa o contexto da variante mais suas novas anotações como um único prompt.
Quando a página funcionar no Preview, clique em **Publicar** (ou **Republicar** nos deploys subsequentes) no canto superior direito do workspace para enviar a versão mais recente à sua URL pública. Abra a URL publicada em uma nova aba e envie uma resposta de teste para confirmar que a página ao vivo a captura antes de compartilhar.
## Próximos passos
Envie e-mails de acompanhamento ou sincronize respostas com um CRM.
Dê à página uma URL de campanha com marca antes de compartilhá-la.
Armazene respostas mais estruturadas que você pode classificar e exportar.
Crie uma segunda variante e compare as mensagens lado a lado — altere um elemento por rodada para saber o que fez a diferença.
## Relacionado
* [Adicionar integrações](/build/add-integrations)
* [Adicionar um domínio personalizado](/build/add-custom-domain)
