Landing Page Designpor elayadesign

Landing Page Design Skill.

Conecte o argumento da página e suas regras visuais em torno de uma única conversão pretendida.

Landing Pages
Copywriting
Web Design

Revisão da fonte · Landing Page DesignSKILL.md

Tarefa Landing Pages Produz • Um esboço da página, texto do hero, benefícios, fluxo de trabalho e rascunho de FAQ. • Uma recomendação de index/noindex com título e descrição, quando apropriado. • Uma implementação seção por seção usando o layout e as regras visuais selecionados. Antes de Começar Nenhum runtime de aplicação específico é necessário; os exemplos de implementação fazem referência a valores do Tailwind, IntersectionObserver e ferramentas opcionais de animação.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Construa uma Landing Page em Torno de uma Única Ação

Planeje a oferta, o texto, a estrutura e o tratamento de SEO e, depois, aplique as regras visuais detalhadas da fonte onde fizerem sentido para o projeto.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A Abordagem de Trabalho

Landing Page Design começa com uma oferta, um público e uma ação principal. Na primeira metade, reúne meta de conversão, objeções, contexto de tráfego, provas e restrições, e então propõe a sequência de seções e o texto antes de construir. Na segunda metade, prescreve um sistema visual detalhado para tipografia, espaçamento, raios, heroes, ícones, animações e estados de componentes.

É uma Skill incomumente opinativa, não uma checklist neutra. Inclui escolhas restritas de fontes e espaçamento, uma seção obrigatória de revelação do slogan e convenções específicas de animação. Essas escolhas podem entrar em conflito com um sistema de marca já estabelecido ou com requisitos de acessibilidade, e não devem substituí-los silenciosamente. Seu enquadramento de alta conversão é uma intenção, não evidência de melhoria de conversão medida.

Entregas Esperadas

Um esboço da página, texto do hero, benefícios, fluxo de trabalho e rascunho de FAQ.
Uma recomendação de index/noindex com título e descrição, quando apropriado.
Uma implementação seção por seção usando o layout e as regras visuais selecionados.

Ver o briefing de exemplo

Do Briefing à Revisão

01
Esclareça a Oferta
Reúna em uma única etapa o público, a ação, as objeções, a origem do tráfego e os materiais de prova reais.
02
Escolha o Argumento
Selecione um hero clássico, uma narrativa longa, uma página mínima de conversão ou uma estrutura comparativa e explique o motivo.
03
Redija Antes de Construir
Produza o esboço, o texto, o tratamento de SEO e a recomendação de layout antes da implementação.
04
Construa e Revise por Seção
Percorra a página em ordem, verificando estados, links, semântica, metadados e restrições da marca.

02 Quando usar

Quando Usar

Nenhum runtime de aplicação específico é necessário; os exemplos de implementação fazem referência a valores do Tailwind, IntersectionObserver e ferramentas opcionais de animação.

Bom Cenário de Uso

Campanhas de Oferta ÚnicaÚtil quando o visitante deve dar um próximo passo claramente definido.
Da Estratégia à ImplementaçãoConecta texto e tratamento de objeções a decisões concretas de layout e de estados.

Limites a Verificar

Sem Garantia de ConversãoA fonte fornece regras de design e de texto, não resultados de um experimento com a sua oferta.
As Regras da Marca Podem ConflitarAs fontes, gradientes, animações e capitalização de texto prescritos não são requisitos universais para produtos existentes.
As Provas Devem Ser ReaisEstatísticas com aparência específica, nomes de clientes ou garantias nunca devem ser inventados como evidência factual.

Traga Estas Informações

Oferta e ConversãoInforme o que os visitantes recebem e qual ação conta como sucesso.
Público e ObjeçõesForneça o contexto do visitante, a origem do tráfego e os motivos reais de hesitação.
Provas e Restrições da MarcaForneça capturas de tela aprovadas, depoimentos, dados, termos e requisitos de design-system.

03 Decisões importantes

Decisões que Importam

Estrutura Antes da Decoração
O argumento da página é escolhido antes das regras visuais, reduzindo o risco de polir seções sem função persuasiva.
A Intenção do Tráfego Importa
Uma página curta de download para tráfego de alta intenção precisa de um argumento diferente de uma landing page educativa vinda de busca.
Revise os Padrões
A especificidade da fonte só é útil quando suas fortes premissas visuais combinam com o projeto.

04 Exemplo de briefing

Experimente um Briefing Focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a Configuração

Use o método de instalação atual do repositório e inclua a pasta completa da Skill. A fonte é um conjunto de regras de design, não um construtor de páginas hospedado.

Arquivo da fonte original

https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

Nenhum runtime de aplicação específico é necessário; os exemplos de implementação fazem referência a valores do Tailwind, IntersectionObserver e ferramentas opcionais de animação.

Comece com uma Única Entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de Exemplo

Use landing-page-design para planejar uma página perene para o nosso produto design-review. O público são pequenas agências e a ação é solicitar uma demonstração. Use apenas as capturas de tela fornecidas e provas verificadas. Retorne o esboço, o texto do hero, um FAQ orientado por objeções, a recomendação de SEO e a escolha de layout antes de programar. Preserve nossos tokens de marca existentes e os requisitos de movimento reduzido.

Inspecione o Resultado

Compare o resultado real com estes critérios observáveis.

Uma única ação principal se mantém consistente do hero ao CTA final.
Todo ponto de prova factual vem de evidências fornecidas.
As regras visuais são conciliadas com a marca existente e com os requisitos de acessibilidade.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o Guia Rápido

05 Fonte e licença

Fonte e Licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Responsável pela fonte: elayadesign
Repositório: elayadesign/ai-design-skills
Arquivo da Skill: skills/landing-page-design/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 1c1e97cb9878

Resumo Editorial da Fonte

Planeje a oferta, o texto, a estrutura e o tratamento de SEO e, depois, aplique as regras visuais detalhadas da fonte onde fizerem sentido para o projeto.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas Antes de Começar

Ela foi pensada apenas para homepages?

Não. Sua distinção central é que uma landing page atende a uma oferta e a uma intenção, ao contrário de uma homepage, que atende a vários públicos ou objetivos.

Todas as recomendações devem ser seguidas em um site existente?

Não. O próprio escopo reconhece instruções explícitas do usuário, e uma marca estabelecida ou um requisito de acessibilidade deve ser resolvido, não sobrescrito silenciosamente.

Adicionar o FAQ dela garante visibilidade na busca?

Não. Ela recomenda conteúdo útil de perguntas e respostas e metadados apropriados; indexação e desempenho na busca são resultados separados.

OpenDesign

Abra Espaço para a Próxima Iteração de Design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar Skills de Design