O que Construtor de Páginas de Destino faz?
Transforme um breve resumo em uma página de destino rápida, responsiva e auto-contida, pronta para ser implantada no GitHub Pages, Netlify ou qualquer hospedagem estática.
1. Coletar o resumo
Antes de escrever, certifique-se de ter estas informações. Pergunte apenas pelo que estiver faltando, em uma única mensagem.
| Campo | Exemplo |
|---|---|
| Produto / oferta | "LearnMizo – aprenda a língua Mizo online" |
| Público | "Pais da diáspora que querem que seus filhos falem Mizo" |
| Principal resultado para o visitante | "Manter uma conversa simples em 30 dias" |
| Chamada para ação principal | "Começar aula gratuita" + URL de destino |
| Prova que você realmente tem | Números reais, citações reais, logotipos (ou "nenhuma ainda") |
| Marca | Cores, fontes, tom (ou "escolha para mim") |
Se o usuário disser "apenas construa", faça suposições sensatas e liste-as no início da sua resposta.
2. Escreva o texto primeiro (antes de qualquer HTML)
Siga a estrutura em references/page-structure.md. Regras:
- Título = resultado, não característica. Máximo ~10 palavras. Teste: o público diria "sim, é isso que quero"?
- Subtítulo explica como em uma frase.
- Uma CTA principal, repetida (hero, meio da página, rodapé). Mesma redação sempre.
- Os benefícios são escritos como "Você pode…" ou "Chega de…", não como listas de características.
- Nunca invente provas. Sem depoimentos falsos, contagens de usuários, avaliações ou logotipos. Se a prova estiver faltando, use um placeholder claramente marcado:
<!-- TODO: adicionar uma citação real de cliente -->e um visível "Seu depoimento aqui" apenas em rascunhos. - Mantenha o nível de leitura simples (aprox. 6ª a 8ª série).
3. Construa a página
Comece a partir de assets/template.html e substitua os {{placeholders}}.
Requisitos técnicos:
- Arquivo único, todo CSS inline em
<style>; sem frameworks. JavaScript apenas se necessário (ex.: alternância de FAQ). - Mobile-first; teste larguras 360px, 768px, 1280px.
- HTML semântico: um
<h1>, seções com<h2>,<main>,<footer>. - Preencha
<title>(≤60 caracteres),meta description(≤155 caracteres), tags Open Graph. - Contraste de cores pelo menos WCAG AA (4.5:1 para texto do corpo).
- Botões com altura ≥ 44px; CTA visível sem rolagem no mobile.
- Imagens: use
loading="lazy", largura/altura definidos,altdescritiva.
4. Verificação de qualidade antes de entregar
Execute o checklist em references/checklist.md e corrija o que falhar. Depois, entregue:
- O arquivo HTML.
- Um resumo de 3 linhas: título escolhido, CTA, suposições feitas.
- Duas alternativas de título para teste A/B.