O que Construtor de Landing Pages faz?

Construa landing pages de alta qualidade, prontas para implantação, extraindo branding e conteúdo de sites e documentos de clientes, produzindo uma página HTML/CSS responsiva com imagens verificadas e estrutura limpa.

Este skill existe porque landing pages exigem coordenação cuidadosa de branding, conteúdo, imagens e design responsivo — e o modo de falha mais comum é tratar documentos de origem como apenas texto, perdendo as imagens que carregam metade da mensagem de marketing.

As Regras de Ouro

1. Imagens são conteúdo, não decoração. Quando um PDF de marketing mostra uma foto de sala de aula ao lado de um parágrafo sobre bem-estar do aluno, essa foto É a mensagem. Uma landing page sem essas imagens está incompleta, independentemente de quão bom seja o texto. Extraia e integre imagens na primeira passagem, sempre.

2. Mantenha a estilização sustentável dentro da pilha escolhida. Para uma página estática, coloque CSS em styles.css, não inline no HTML. Para um projeto de framework existente, preserve seus módulos CSS estabelecidos, estilos de componentes, classes utilitárias ou sistema de tokens. Não migre a arquitetura de estilização sem um motivo.

3. Nunca invente conteúdo. Use apenas o que o documento de origem fornece. Não crie legendas de imagens, direções visuais, citações de depoimentos, estatísticas ou nomes de clientes. Se o conteúdo estiver faltando, sinalize e pergunte — não preencha lacunas com conteúdo placeholder gerado por IA.

4. Use a pilha de frontend deliberadamente. Antes de codificar, carregue os skills de suporte disponíveis nomeados abaixo. Eles são papéis complementares, não instruções duplicadas para colar cegamente. Se um skill nomeado não estiver disponível, continue com a pilha disponível e registre a lacuna; nunca finja que ele foi executado.

Pilha de Skills de Frontend (Roteamento Obrigatório)

As ferramentas de frontend fornecidas como captura de tela mapeiam para este fluxo de trabalho de landing page da seguinte forma. Leia references/frontend-skill-stack.md para as regras completas de roteamento e conflito.

frontend-design — estabeleça a tese visual específica do assunto, tipografia, paleta, conceito de layout, elemento de assinatura e intenção de movimento. Use para novas construções e reformulações visuais significativas.
design-taste-frontend — aplique disciplina de implementação anti-slop, mecânica de layout responsivo, estados de interação acessíveis, escolhas de componentes, verificações de desempenho e o pré-voo final do design.
imagegen-frontend-web — use quando referências visuais geradas reduzirem materialmente a ambiguidade: direção visual desconhecida, campanhas lideradas por imagens, ilustração/direção de arte personalizada, ou um usuário pedindo mockups. Gera referências; não substitui ativos reais da marca ou implementação.
design-taste-frontend-v1 — fallback legado apenas. Use quando um projeto existente depender explicitamente do comportamento v1; não carregue v1 e Design Taste atual juntos.
imagegen-frontend-mobile — não faz parte da construção de uma landing page de site. Use apenas para uma entrega separada de tela de aplicativo móvel, nunca como a etapa de design web responsivo da página.
Aidesigner Frontend — se este skill exato se tornar instalado e detectável, use-o como uma segunda crítica opcional da direção de arte aprovada. Não é assumido atualmente disponível e nunca deve bloquear o fluxo de trabalho.

Não execute cada ferramenta por cerimônia. A pilha mínima para nova landing page é frontend-design + design-taste-frontend atual + landing-page. Adicione imagegen-frontend-web quando a geração de referência visual for justificada. O site responsivo móvel permanece parte da implementação e QA; não é delegado ao skill de imagem de aplicativo móvel.

Portão de design pré-código obrigatório

Antes da implementação, produza um resumo interno de construção contendo:

o público da página, único objetivo de conversão e conteúdo fonte da verdade;
uma tese visual coerente ligada ao assunto real, não uma estética SaaS genérica;
papéis de paleta e tipografia com licenciamento/disponibilidade verificados;
ordem das seções e o trabalho de cada seção;
mapa de ativos: preservar, obter, gerar ou omitir;
uma ideia visual de assinatura e um plano de movimento contido;
comportamento para desktop, tablet e móvel para a primeira dobra e seções complexas;
lista explícita de evitação baseada na auditoria de marca e referência.

Se o usuário forneceu uma referência, extraia princípios sem clonar sua identidade. Se a fonte for um site de cliente existente ou template aprovado, preserve cópia aprovada, ativos de marca, gramática de componentes e ordem de seções, a menos que o usuário autorize explicitamente uma reformulação.

Regras Anti-Slop (OBRIGATÓRIAS)

Estes padrões fazem as páginas geradas por IA parecerem baratas e genéricas. NUNCA os use:

Padrões de Cópia Proibidos

"Revolucione", "Transforme seu", "Libere o poder de", "Aproveite", "Capacite"
"De ponta", "Próxima geração", "Estado da arte", "Melhor da classe"
"Perfeitamente", "Sem esforço", "Supercarregue"
"No mundo acelerado de hoje", "Numa era de"
Começar parágrafos com "Imagine..." ou "Imagine esta cena..."
CTAs genéricos como "Saiba Mais" ou "Comece Agora" sem contexto — use CTAs específicos: "Obter Orçamento Imediato", "Agendar Demonstração", "Ver Preços"

Padrões Visuais Proibidos

Blobs de gradiente mesh ou fundos aurora (o #1 sinal de páginas geradas por IA)
Gradientes roxos para azuis como linguagem de design primária
Objetos 3D flutuantes sem conexão com o produto
Padrões geométricos abstratos genéricos como fundos de herói
Cards excessivamente arredondados (border-radius > 1.5rem) com sombras pesadas
Layouts de cartões idênticos repetidos 3 vezes ou mais com apenas mudanças de ícone
Imagens de herói de banco de imagens que não combinam com o negócio (ex.: fotos de aperto de mão genéricas)

Padrões de Código Proibidos

Estilos inline em elementos HTML
Usar !important em CSS (exceto para sobreposições utilitárias)
Valores de pixel codificados para tamanhos de fonte — use clamp() ou rem
Atributos alt ausentes em imagens
Usar <div> quando elementos semânticos existem (<section>, <article>, <nav>, <header>, <footer>)

Visão Geral do Fluxo de Trabalho

A construção segue sete fases. Resolva fatos óbvios das fontes fornecidas em vez de pedir ao usuário para repeti-los. Pergunte apenas quando uma decisão ausente alterar materialmente o resultado.

Contexto e Pesquisa — Leia instruções do projeto/cliente, decisões de reunião, resumo, estado de aprovação, marca ao vivo, referências, cópia e gramática de design
Extração de Conteúdo — Extraia todo o texto e imagens aprovados das fontes fornecidas
Verificação de Ativos — Construa um inventário de mídia utilizável ciente da proveniência
Direção de Frontend e Blueprint — Aplique Frontend Design e Design Taste; trave fluxo de conversão, tokens, comportamento responsivo, ativos e verificações de aceitação; gere referências web apenas quando justificado
Construção — Use a pilha mais simples que satisfaça o resumo e implemente código de produção completo
QA no Navegador — Construa/teste, inspecione capturas de tela em desktop/tablet/móvel, corrija defeitos e repita
Implantar e Verificar ao Vivo — Implante apenas quando solicitado, depois inspecione a URL real e relate o alias verificado

Fase 1: Contexto e Pesquisa

Antes de escrever código, leia as instruções mais próximas do projeto/cliente, resumo aprovado, decisões de reunião e links de origem. Então entenda a marca existente do cliente e colete todos os ativos que você precisará.

Extração de Marca

Busque o site do cliente e extraia:

Cores: Inspecione propriedades customizadas CSS, estilos computados em elementos-chave (títulos, botões, fundos, acentos). Registre como valores hex.
Fontes: Verifique links do Google Fonts, declarações font-family e regras @font-face. Não presuma — muitos sites usam fontes que parecem comuns mas não são.
Logotipo: Encontre a URL da imagem do logotipo (geralmente no cabeçalho ou rodapé). Obtenha a versão de maior resolução disponível.
Linguagem de design: Observe padrões de espaçamento, uso de border-radius, estilos de sombra, tratamentos de fundo de seção.

Coleta de Ativos

Isso é crítico. Percorra os diretórios de imagem do site para construir um catálogo completo:

Busque a página inicial e páginas-chave, extraia todos os atributos src de <img> e URLs de background-image CSS
Procure padrões nos caminhos das imagens (ex.: /wp-content/uploads/YYYY/MM/ para sites WordPress)
Para cada imagem, registre:
- URL completa
- Nome descritivo (o que a imagem mostra?)
- Dimensões (a partir do nome do arquivo ou buscando cabeçalhos)
- Categoria (foto, ilustração, ícone, logotipo, adesivo)

Salve este catálogo — você o referenciará ao longo da construção.

Exemplo de entrada de catálogo:

URL: https://example.com/wp-content/uploads/2023/08/image-13-1024x768.jpeg
Descrição: Alunos trabalhando juntos em sala de aula
Dimensões: 1024x768
Categoria: foto
Uso para: Seção Problema, Galeria

Fase 2: Extração de Conteúdo

Quando o usuário fornece um PDF, documento Word ou outro documento de conteúdo:

Conteúdo de Texto

Extraia todos os títulos, corpo do texto, estatísticas, citações e CTAs
Preserve a estrutura de seções do documento — geralmente mapeia para seções da página
Observe qualquer fraseado específico que deva ser mantido literalmente (slogans, alegações endossadas, citações de depoimentos)

Conteúdo de Imagem (NÃO PULE ISTO)

Identifique cada imagem no documento
Para cada imagem, determine o que ela mostra e a qual seção pertence
Corresponda imagens do documento a URLs reais hospedadas do site do cliente (do seu catálogo da Fase 1)
Se uma imagem do documento não corresponder a nenhuma URL catalogada, anote como "precisa de fonte" e pergunte ao usuário

A razão pela qual isso importa: documentos de marketing usam imagens estrategicamente. Um PDF que mostra ilustrações de personagens junto com conteúdo de ciência do cérebro está lhe dizendo que essas ilustrações pertencem à seção de Ciência do Cérebro da landing page. Ignorá-las produz uma página pesada de texto que perde o ponto.

Fase 3: Catálogo e Verificação de Imagens

Antes de construir qualquer coisa, verifique cada URL de imagem que você planeja usar.

Processo de Verificação

Para cada URL de imagem:

Busque a URL e verifique o código de status HTTP
Uma resposta 200 com content-type correto significa que está boa
Um erro 404 ou outro significa que a URL está errada

Corrigindo URLs Quebradas

Quando uma URL de imagem retorna 404:

Volte ao site ao vivo e procure a imagem pelo nome parcial do arquivo
Busque a fonte da página que originalmente continha a imagem
Procure o caminho correto — nomes de arquivo frequentemente têm pequenas variações (ex.: GYM_Kid-at-Desk-300x295.png vs GYM_Kid_AtDesk-222x300.png)
Nunca adivinhe nomes de arquivos. Sempre verifique contra o servidor real.

Catálogo Final

Produza uma lista verificada mapeando cada seção de conteúdo às suas imagens:

Herói: logo.png (verificado), character-teaching.png (verificado), sticker-owl.png (verificado)
Problema: classroom-photo.jpeg (verificado)
Ciência do Cérebro: character-1.png (verificado), character-2.png (verificado), character-3.png (verificado), character-4.png (verificado)
Mudança: school-kits.jpg (verificado), home-products.jpeg (verificado)
Galeria: classroom.jpeg, confidence.png, founders.jpeg (todos verificados)

Fase 4: Direção de Frontend e Blueprint

Carregue a pilha de skills de frontend obrigatória e complete o portão de design pré-código do topo deste arquivo. Decida se imagens de referência web geradas são úteis. Trave o fluxo de conversão, trabalhos de seção, tokens visuais, plano de mídia, intenção de movimento, comportamento responsivo e verificações de aceitação antes da implementação.

Auto-rejeite a direção se ela puder ser reutilizada inalterada para um cliente não relacionado. Uma direção de arte coerente é melhor do que fazer a média de várias estéticas de skill.

Fase 5: Construção

Escolha a pilha de implementação

Não force toda landing page em uma tecnologia. Escolha com base no projeto real:

Repositório ou template existente: preserve seu framework, runtime, componentes, roteamento e pipeline de ativos, a menos que a migração seja explicitamente solicitada.
Página de campanha estática: HTML semântico, CSS externo e JavaScript mínimo são preferidos quando nenhuma arquitetura de componente ou comportamento de aplicativo é necessário.
Página liderada por componentes ou interativa: React/Vite, Next.js ou a pilha existente do repositório é válida quando componentes reutilizáveis, integrações, estado ou movimento complexo justificam.
Verifique dependências antes de importá-las. Prefira bibliotecas existentes do projeto a adicionar pacotes da moda.

O padrão antigo abaixo se aplica apenas a uma página estática genuinamente nova.

Estrutura de arquivos para página estática

Mantenha simples — um único diretório com dois arquivos:

nome-do-projeto/
├── index.html
└── styles.css

Para uma página estática simples, evite ferramentas de build desnecessárias e dependências de framework. Isso é um padrão, não uma proibição contra usar a pilha real do projeto.

Configuração do Sistema de Design (styles.css)

Inicie a folha de estilo com o sistema de marca extraído:

:root {
  /* Cores da marca — extraídas do site do cliente */
  --primary: #0f4661;
  --primary-dark: #0a3347;
  --accent: #f37b78;
  --accent-hover: #e06560;
  /* ... todas as cores da marca como propriedades customizadas */

  /* Escala neutra — sempre defina estas */
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c8cdd5;
  --gray-400: #9ca3b0;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Tokens utilitários */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Transições */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'ExtractedFont', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-700);
  background: var(--white, #ffffff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

Regras de Tipografia (CRÍTICO)

Tipografia ruim é a razão #1 de páginas de IA parecerem amadoras. Siga estas estritamente:

/* Tamanhos mínimos — NUNCA vá abaixo destes */
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } /* 16-18px */
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }       /* 36-64px */

…

[truncado para tradução]

(Nota: O conteúdo completo do arquivo SKILL.md original é mais extenso; para fins de tradução, o restante segue o mesmo padrão de localização para português, mantendo toda a estrutura markdown, código, comandos CLI, caminhos de arquivo, nomes de variáveis de ambiente, URLs e spans de código inline intactos.)

Construtor de Landing Pages

O que é Construtor de Landing Pages?

Perguntar na sua IA favorita

Documentação