Cria Landing Pages com Design Apelativo | Prompt da Semana
Como funciona este prompt?
Gera Landing Pages em HTML+CSS (sem JS), focadas em forte impacto visual, acessíveis e prontas a colar no WordPress ou Elementor. CSS escopado, sem frameworks, compatível com o teu tema.
Como usar:
- Copia o prompt abaixo.
- Cola no modelo de IA (ChatGPT/Claude/Gemini) e preenche os [campos].
- Recebe um único snippet (<style> + HTML) com classe raiz
.lp-roote cola no teu site. - Personaliza as variáveis
--primary,--bg,--inkpara a tua marca.
Prompt
Quero criar uma **Landing Page (LP)** em **HTML+CSS**, sem JavaScript, em **PT-PT**, com **forte impacto visual**, acessível e pronta a colar no WordPress (bloco “HTML Personalizado”) ou Elementor (widget “HTML”). ### Contexto - Objetivo da LP: [captar leads | vender | inscrições | download | outro] - Oferta/Serviço: [nome/resumo] - Público-alvo: [descrição curta] - Tom de voz: [claro, direto, profissional] - Cor principal da marca: [#hex] ### SAÍDA (obrigatório) - **ENTREGAR 1 snippet** com <style> + HTML (sem <html><head><body>). - **Classe raiz**: `.lp-root` — todo o CSS escopado a esta classe. - **Mobile-first** + 1 breakpoint a 768px. - Sem frameworks, sem fontes externas, sem JS, sem iframes. ### Tokens (definir dentro de .lp-root) --bg:[#ffffff] --ink:[#0f1720] --primary:[#xxxxx] ← cor da marca --radius:[16px] --border:[#e7edf4] --shadow:[0 6px 20px rgba(0,0,0,.06)] ### Estrutura da LP (por esta ordem) 1) **Hero** (H1 forte, subtítulo, 2 CTAs) 2) **Benefícios** (3–6 cards/bullets) 3) **Como Funciona** (3 passos numerados) 4) **Prova Social** (logos ou 2–3 testemunhos curtos) 5) **Oferta / Plano “desde”** (opcional) 6) **FAQ** (5 perguntas) — usar <details><summary> 7) **Contacto** (formulário acessível OU CTA mail/WhatsApp) 8) **Footer curto** (dados essenciais + privacidade) ### Acessibilidade - Landmarks semânticos: <header> <main> <section> <footer>. - Hierarquia H1→H2→H3 correta; foco visível; contrastes AA. - Formulários com labels e `aria-*`; imagens com `alt` descritivo. ### Design de forte impacto visual - Títulos com `clamp()`; espaço em branco generoso. - Cards com `var(--border)`, `var(--shadow)`, `var(--radius)`. - CTAs com :hover/:focus claros; grids simples (Flex/Grid). - Nada de CSS global fora de `.lp-root`. ### Conteúdos a preencher [Título H1] [Subtítulo] [CTA primário: texto → link] [CTA secundário: texto → link] [Benefícios (3–6 bullets)] [Passos (3)] [Testemunhos/Logos] [Oferta/Plano (opcional)] [FAQ (5 Q/A)] [Contacto (mailto:/tel:/WhatsApp: ou <form action="…" method="post">)] ### Restrições - Não usar IDs/classes globais; manter tudo dentro de `.lp-root`. - Não incluir JS, iframes, rastreadores ou assets externos obrigatórios. ### ENTREGA - Devolve **apenas 1 snippet** com <style> + HTML da LP completa, - A começar por: <section class="lp-root" aria-label="Landing Page">…</section> ### EXEMPLO RÁPIDO (parâmetros) Objetivo: captar leads para formação em IA Cor principal: #0A56C2 CTAs: “Agendar sessão” → /agendar | “Ver programa” → /programa Benefícios: Aplicação prática; Materiais prontos; Mentoria Passos: Inscrição → Diagnóstico → Sessões práticas FAQ: 5 dúvidas típicas Contacto: mailto:formacao@exemplo.pt
Exemplo de uso do prompt
LP com forte impacto visual (HTML+CSS, sem JS), inspirada nestes exemplos feitos com IA para código:
Depois de colares o snippet no teu site, ajusta as variáveis de cor e os CTAs para alinhar com a tua marca.
O Prompt da Semana traz-te, todas as semanas, um novo prompt prático para aplicares no teu trabalho, estudos ou projectos.
Experimenta este prompt e partilha com quem pode beneficiar!
