102.3K+Baixar
Ir para o guia de uso
Landing Page Generatorpor Alireza Rezvani

Landing Page Generator Skill.

Conecte uma proposta de produto real às seções da página antes de gerar os componentes.

  • Landing Pages
  • Copywriting
  • Frontend
Baixar OpenDesignVer guia de uso
Revisão da fonte · Landing Page GeneratorSKILL.md
Tarefa Landing Pages Produz • Seções de landing page em TSX para React ou Next.js, com estilos Tailwind • Variações de texto organizadas em torno de um framework de mensagem escolhido • Estrutura básica de título, descrição, canonical e dados estruturados Antes de começar Um projeto React ou Next.js compatível com Tailwind; os componentes de UI referenciados e as ferramentas opcionais de análise de marca podem exigir configuração separada.
Resumo editorial · fonte revisada 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Rascunhe uma landing page em React a partir de um briefing de produto

Um fluxo de trabalho que vai do briefing do produto ao TSX, combinando frameworks de copy, seções de landing page e checklists de SEO ou desempenho.

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

Como funciona

Landing Page Generator combina frameworks de copy de marketing com padrões de seção em React ou Next.js e estilos Tailwind. Ela reúne público, ponto de dor, benefício, preço e direção de design, e então redige o texto antes de montar a página. A fonte oferece padrões de hero, recursos, preços, FAQ e CTA, e seções irrelevantes são omitidas em vez de preenchidas automaticamente.

A fonte usa linguagem de conversão e desempenho como objetivos, não como resultados medidos de uma página gerada. Seus templates também incluem exemplos de depoimentos, garantias e afirmações sobre o produto, que devem ser substituídos por informações verificadas ou removidos. Metadados de SEO e dados estruturados são uma base útil, mas ainda precisam corresponder à página real e à política de rotas e indexação do site.

Entregas esperadas

  • Seções de landing page em TSX para React ou Next.js, com estilos Tailwind
  • Variações de texto organizadas em torno de um framework de mensagem escolhido
  • Estrutura básica de título, descrição, canonical e dados estruturados
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Reúna os fatos do produto

    Defina público, ação principal, benefício e preços reais. Separe as provas aprovadas das afirmações que não foram comprovadas.

  2. 02
    Escreva a mensagem primeiro

    Escolha uma narrativa de problema e solução ou de antes e depois que se encaixe no produto e depois decida quais seções são realmente necessárias.

  3. 03
    Construa e valide

    Gere os componentes no projeto existente, verifique o layout em dispositivos móveis e os metadados, e meça o desempenho real em vez de repetir as metas dos templates.

02 Quando usar

Quando usar

Um projeto React ou Next.js compatível com Tailwind; os componentes de UI referenciados e as ferramentas opcionais de análise de marca podem exigir configuração separada.

Bom para

  • Rascunhos de lançamento de produtoÚtil quando os fatos do produto já são conhecidos e é preciso uma primeira implementação coerente.
  • Variações de mensagemServe para explorar diferentes abordagens de título e CTA mantendo a mesma oferta verificada.

Limites a verificar

  • Sem garantia de conversãoUm framework de copy ou um template não demonstra conversão maior. Isso exige um plano de medição real e dados suficientes.
  • Sem provas inventadasDepoimentos, logos de clientes, garantias e benefícios numéricos devem vir de fontes aprovadas, não do componente de exemplo.

Traga estas informações

  • Produto e públicoInforme a oferta real, o cliente-alvo e a tarefa principal que a página deve apoiar.
  • Oferta e evidênciasForneça os preços atuais e quaisquer depoimentos, métricas ou garantias aprovados; indique quais provas não estão disponíveis.
  • Restrições do projetoEspecifique a configuração de React ou Next.js, as regras de marca e as convenções de SEO do site.

03 Decisões importantes

Decisões importantes

  1. Texto antes dos componentes

    Escrever primeiro a proposta ajuda a manter a escolha das seções ligada à oferta, e não a um inventário fixo de templates.

  2. SEO no rascunho

    Metadados, tratamento de canonical e estrutura semântica são considerados junto com o código da página, em vez de esquecidos até a entrega.

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

Carregue a Skill completa e adapte seus exemplos de componentes ao repositório. Não presuma que as importações de exemplo ou os arquivos de SEO do site já existam.

Arquivo de origem upstream
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md

Um projeto React ou Next.js compatível com Tailwind; os componentes de UI referenciados e as ferramentas opcionais de análise de marca podem exigir configuração separada.

Comece com uma 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-generator para rascunhar uma página Next.js para nosso produto de agendamento a partir do briefing fornecido. Use apenas os preços e benefícios que eu informar, omita depoimentos e garantias porque nenhum foi aprovado e preserve nossos tokens de marca. Escreva primeiro as variações de título e CTA e depois construa as seções relevantes. Adicione metadados e apenas dados estruturados compatíveis com o conteúdo, e informe separadamente o desempenho medido e as metas.

Inspecione o resultado

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

  • Todas as afirmações e detalhes de preço correspondem a uma informação aprovada.
  • A página tem uma ação principal clara e seções utilizáveis em dispositivos móveis.
  • Metadados e dados estruturados refletem o conteúdo visível, e os resultados de desempenho indicam o status da medição.

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 OpenDesignLer o início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixa da fonte indicada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
Alireza Rezvani
Repositório
alirezarezvani/claude-skills
Arquivo da skill
product-team/skills/landing-page-generator/SKILL.md
Licença
MIT
Versão revisada
2026-10-07 · 19392f7a0826
Resumo editorial da fonte
Um fluxo de trabalho que vai do briefing do produto ao TSX, combinando frameworks de copy, seções de landing page e checklists de SEO ou desempenho.

Resumo original de OpenDesign, baseado na fonte indicada. 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

Garante melhor conversão?

Não. A fonte oferece padrões de texto e layout; o efeito deles no negócio deve ser testado no produto e no público reais.

Toda página precisa incluir depoimentos e preços?

Não. O fluxo de trabalho permite expressamente pular seções irrelevantes, e provas sem respaldo não devem ser inventadas.

Os números de desempenho são resultados comprovados?

São metas declaradas na fonte. Meça a página resultante no ambiente real antes de informar uma métrica alcançada.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, material de origem e 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 OpenDesignExplorar skills de design
Arquivo de origem upstream
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md