Landing Page Design: estrutura antes dos efeitos

ANÁLISE EDITORIAL

Landing Page Design é uma Skill documental para organizar a criação de uma página de destino desde o briefing até a entrega. Ela pede uma oferta, um público e uma ação principal, propõe uma sequência de seções, orienta a redação e aplica um sistema visual opinativo para tipografia, espaçamento, cantos, cores e movimento.

O nome e a descrição upstream falam em páginas de alta conversão. Isso não é um resultado comprovado. O arquivo não mede conversão, não consulta analytics, não entrevista usuários e não executa teste A/B. Seu valor está em transformar decisões espalhadas em uma sequência revisável. Desempenho comercial só pode ser avaliado depois, com tráfego, objetivo, consentimento, instrumentação e comparação válidos.

O que esta Skill faz de verdade

A primeira parte funciona como roteiro de produto e conteúdo. O agente deve confirmar qual é a ação principal, o que a oferta entrega, quem é o público, quais objeções existem, de onde vem o tráfego, quais provas reais estão disponíveis e quais restrições de marca precisam ser preservadas.

Com esse material, a Skill sugere quatro estruturas: página clássica com hero e seções, narrativa longa, página mínima para tráfego de alta intenção e página de comparação. O fluxo separa headline, subtítulo, chamada para ação, prova, benefícios, funcionamento, perguntas frequentes e fechamento. Antes de escrever código, a saída prevista inclui esboço, textos principais, benefícios, passos, FAQ, recomendação de indexação e justificativa do layout.

A segunda parte impõe um sistema visual específico. Ela restringe fontes, escala tipográfica, espaçamentos, raios, fundos, ícones e transições. Também exige estados de hover, foco, carregamento, vazio e erro, além de itens de entrega como links legais, página 404, validação de formulário, metadados sociais, texto alternativo e HTML semântico.

Essas regras são opiniões do mantenedor, não padrões universais. Algumas podem ajudar a reduzir decisões improvisadas; outras podem conflitar com o design system, a identidade da marca, o framework, a política de cookies, a acessibilidade ou o orçamento de desempenho do projeto.

Para quem serve

Serve a designers, desenvolvedores, profissionais de marketing e equipes pequenas que começam uma landing page do zero e querem revisar estrutura, conteúdo e estados antes de implementar. É útil quando o pedido chega vago, por exemplo “faça uma página para este serviço”, e falta um roteiro para descobrir oferta, público, prova e ação principal.

Ela não substitui pesquisa com usuários, redação jurídica, auditoria de acessibilidade, teste em dispositivos, revisão de marca ou análise de conversão. A Open Design Critique ajuda a criticar um artefato existente. A Draw.io Skill produz diagramas editáveis. A Audit Website AEO examina sinais de um site publicado. Landing Page Design começa antes disso, organizando a página nova e o seu primeiro rascunho.

Compatibilidade e pré-requisitos

O README fixado documenta uso com Claude Code, Cursor, Codex, Windsurf, Cline, clientes genéricos e projetos do Claude.ai. Os métodos são diferentes. Para Claude Code, o mantenedor sugere copiar a pasta para .claude/skills. Para Cursor, propõe usar o arquivo como regra. Para Codex e outros clientes, o README orienta incorporar o conteúdo ao arquivo de instruções aceito pelo projeto.

Isso não garante descoberta automática nem compatibilidade completa. A especificação pública de Agent Skills ajuda a conferir frontmatter e organização, mas cada cliente define caminhos, precedência e limites próprios. Consulte a documentação atual do seu agente e teste se a Skill é carregada no escopo esperado.

• Um agente capaz de ler Markdown como Skill ou instrução de projeto.
• Objetivo, oferta, público e ação principal definidos ou confirmáveis.
• Design system, identidade visual e componentes existentes inventariados.
• Provas, depoimentos, preços, garantias e métricas reais aprovados para uso.
• Ambiente de teste separado da produção.
• Responsável humano por conteúdo, acessibilidade, privacidade e publicação.

Instalação recomendada

Baixe primeiro o pacote documental do Bastidores em uma pasta de teste. O ZIP contém exatamente três arquivos: SKILL.md, LICENSE e ORIGEM.md. Ele não contém aplicação, componentes, Tailwind, fontes, bibliotecas de ícones, scripts, dependências, executáveis, dados, credenciais ou segredos.

Para comparar com a origem, clone o repositório oficial e fixe o commit auditado:

git clone https://github.com/elayadesign/ai-design-skills.git
git -C ai-design-skills checkout 1c1e97cb9878e236552c772092dda7adcdddbcb2

O diretório auditado contém apenas o SKILL.md fixado. Leia o arquivo inteiro antes de copiá-lo para o local aceito pelo cliente. Se o projeto já possui regras de marca, acessibilidade ou componentes, registre qual instrução tem precedência.

Configuração antes do primeiro uso

Não aceite silenciosamente as escolhas visuais upstream. A Skill aprova quatro famílias tipográficas, proíbe outras, fecha uma escala de espaçamento, restringe cores escuras, determina conjuntos de ícones e exige uma seção animada de frase principal. Trate tudo isso como ponto de partida editável.

Crie uma cópia e substitua fontes, tokens, paleta, raios e movimento pelo design system real. Defina o comportamento para prefers-reduced-motion, orçamento de JavaScript, navegadores suportados e critérios de contraste. A Skill recomenda IntersectionObserver para revelações, mas a presença de animação ainda precisa ser justificada e testada.

Liste também os dados proibidos. O arquivo upstream manda evitar placeholders genéricos e sugere nomes e números com aparência orgânica. Isso pode transformar ficção em algo que parece evidência. Instrua o agente a usar somente conteúdo fornecido e aprovado, ou rótulos claramente visíveis como “Exemplo ilustrativo”. Nunca invente depoimentos, marcas, telefones, percentuais, preços ou resultados.

Primeiro uso seguro

Comece sem permitir escrita. Entregue um briefing pequeno de um produto fictício identificado como teste e peça apenas os sete itens que a Skill exige antes do código. Assim você avalia a estrutura sem modificar arquivos, instalar pacotes ou publicar uma página.

Use Landing Page Design somente para planejar.
Não escreva nem altere arquivos.
Marque todo conteúdo fictício como "Exemplo ilustrativo".
Não invente métricas, clientes, depoimentos, preços ou garantias.
Mostre conflitos com o design system antes de recomendar mudanças.

Depois da revisão, libere uma única seção em uma branch ou cópia isolada. Renderize a página, confira desktop e celular, navegue por teclado, teste foco, contraste, formulário, carregamento e redução de movimento. Só então avance para a próxima seção.

Como o fluxo deve funcionar

1. Confirmar uma oferta, um público e uma ação principal.
2. Separar fatos aprovados de exemplos e campos ainda vazios.
3. Inventariar design system, componentes, marca e requisitos legais.
4. Escolher uma estrutura e explicar por que ela atende à origem do tráfego.
5. Produzir esboço, hero, benefícios, passos, FAQ e metadados antes do código.
6. Revisar cada afirmação, prova, preço, garantia e chamada para ação.
7. Aplicar tokens reais em uma cópia da Skill.
8. Implementar uma seção por vez, preservando diffs pequenos.
9. Renderizar e testar responsividade, teclado, foco, contraste e movimento.
10. Publicar somente após revisão humana e instrumentação autorizada.

Uma ação principal não significa esconder informação importante. Preço, condições, cancelamento, privacidade e riscos precisam continuar claros. Da mesma forma, reduzir chamadas concorrentes não autoriza padrões manipulativos ou consentimento ambíguo.

Resultado esperado

Antes do código, a entrega deve mostrar a ordem das seções, texto do hero, benefícios, três passos, perguntas frequentes, decisão de indexação e tipo de layout. Depois, a implementação deve evoluir por seções, com estados completos e critérios de entrega visíveis.

Um bom resultado também registra lacunas. Se não existe depoimento aprovado, a página deve dizer que a prova está pendente, não criar uma pessoa convincente. Se não há política de reembolso, o agente não deve prometer cancelamento ou garantia. Se analytics ainda não foi configurado, conversão permanece não medida.

A Skill organiza um primeiro sistema coerente. Ela não assegura qualidade estética, acessibilidade, conformidade jurídica, desempenho técnico nem vendas. Esses resultados dependem do projeto, dos testes e das pessoas responsáveis.

Permissões, privacidade e riscos

O arquivo é documental e não executa código sozinho. O agente que o interpreta, porém, pode ler o repositório, editar componentes, instalar fontes ou bibliotecas, criar imagens, alterar metadados e preparar formulários. Conceda permissões por diretório e etapa. Exija aprovação separada para dependências, serviços externos, analytics e deploy.

Formulários podem coletar nome, email, telefone ou dados sensíveis. A Skill lembra validação no cliente, mas isso não cobre minimização, base legal, retenção, segurança, envio, consentimento ou resposta a incidentes. Defina o fluxo de dados antes de publicar.

As regras rígidas também podem apagar decisões válidas do projeto. Proibir fontes, hifens ou gradientes de forma universal não é requisito de acessibilidade. Sobrescrever o design system aumenta inconsistência. Sempre faça a instrução do projeto e a necessidade do usuário prevalecerem.

Erros comuns

Tratar “alta conversão” como evidência. Estrutura organizada não substitui medição nem experimento controlado.

Inventar prova com aparência real. Nomes variados e números quebrados continuam falsos quando não vieram de uma fonte aprovada.

Aplicar a paleta upstream sobre a marca. Tokens da Skill são opinião do autor e devem ser reconciliados com o projeto.

Usar animação sem alternativa. Respeite redução de movimento e teste custo em dispositivos modestos.

Confundir validação no navegador com segurança. O servidor também precisa validar, limitar abuso e proteger os dados enviados.

Publicar a página inteira em uma mudança. O próprio fluxo recomenda trabalhar por seção para manter revisão e rollback compreensíveis.

Versão, licença e origem verificadas

A API oficial do GitHub foi consultada em 04/09/2026. O repositório elayadesign/ai-design-skills registrava 1.727 estrelas, estava público, não arquivado e declarava licença MIT. Estrelas mostram atenção relativa, não segurança, compatibilidade, acessibilidade ou conversão.

A curadoria fixou o commit 1c1e97cb9878e236552c772092dda7adcdddbcb2. A Skill não declara número de versão no frontmatter auditado, por isso o commit é a referência reproduzível.

O diretório fixado, o SKILL.md, o README e a licença MIT foram revisados. A licença permite redistribuição com preservação do aviso. O ZIP local contém três arquivos e tem SHA-256 f27403d68626bb8681a78b3e3eb568c6cb70d1836df5dec257e30cf6ed167014.

Checklist antes de automatizar

• Fixe o commit e confirme onde o cliente carrega instruções.
• Leia o SKILL.md inteiro antes de instalar.
• Troque tokens opinativos pelo design system aprovado.
• Use somente fatos, preços, provas e depoimentos verificáveis.
• Marque exemplos fictícios de forma visível.
• Restrinja edição, dependências, analytics e deploy por etapa.
• Teste teclado, foco, contraste, responsividade e redução de movimento.
• Meça conversão somente com objetivo e instrumentação válidos.

Fontes primárias

• Repositório oficial do mantenedor.
• Commit auditado.
• Diretório Landing Page Design fixado.
• SKILL.md auditado.
• Compatibilidade e instalação descritas pelo mantenedor.
• Licença MIT do repositório.
• Especificação pública de Agent Skills.