Diretor de Landing Pages

O que Diretor de Landing Pages faz?

Crie landing pages por meio de decisões de design explícitas, em vez de estilização livre. A qualidade vem do sequenciamento: entender o briefing, restringir a direção visual, travar um sistema, criar referências, traduzi-las fielmente e inspecionar o resultado renderizado.

Este skill é dono do fluxo de trabalho de landing pages. Skills auxiliares de imagem, tradução, teste, marca, cópia ou framework podem contribuir com trabalho especializado, mas não devem substituir este fluxo de trabalho ou introduzir uma segunda direção de arte concorrente.

Execução padrão

Use este diretor para direção de arte e o loop completo de construção/revisão. Se design-harness estiver instalado e configurado, carregue-o para implementação isolada, contexto salvo, evidência do navegador e revisão limitada. Caso contrário, execute e registre esses estágios diretamente; não afirme que verificações executáveis do harness foram realizadas. O usuário não precisa invocar um segundo skill. Um filho atribuído a um único estágio deve retornar ao seu pai sem iniciar outro loop de orquestração.

Compatibilidade

Use a geração de imagens embutida para referências visuais e uma ferramenta de inspeção com capacidade de navegador para o QA visual final. Coordene imagegen-frontend-web, image-to-code, brand-consistency e playwright-visual-testing quando estiverem disponíveis. Padrão para coreografia GSAP em construções completas de landing pages e redesigns substanciais, com CSS para feedback de interação local. Respeite solicitações estáticas explícitas, restrições de preservação e sistemas de movimento obrigatórios existentes.

Contrato central

• Trate cópia aprovada, alegações factuais, logotipos, ativos de marca, ordem de página e requisitos de modelo de origem como travados.
• Pergunte pelo site do cliente, fonte de conteúdo, guia de marca, logotipos, fontes, mídia fornecida, imagens de produto e referências relevantes quando eles ainda não estiverem disponíveis; nunca presuma que nenhum material de origem existe apenas porque nenhum foi anexado à primeira mensagem.
• Leia e faça um inventário de cada documento, URL, imagem, arquivo de marca e repositório de origem fornecido antes de propor direção de arte.
• Nunca invente estatísticas, depoimentos, prêmios, clientes, certificações, locais, detalhes de contato, capturas de tela de produto ou provas.
• Torne as informações ausentes visíveis com [A CONFIRMAR] quando elas não puderem ser omitidas com segurança.
• Estabeleça uma linguagem visual coerente antes da implementação.
• Assuma decisões rotineiras de direção de arte e seleção de referências, a menos que o usuário solicite pontos de verificação de aprovação visual. Registre honestamente as referências selecionadas pelo agente; nunca as chame de aprovadas pelo usuário. Leve incertezas de conteúdo e conflitos com requisitos travados para escalonamento, não escolhas de design comuns.
• Prefira hierarquia controlada e legível sobre espetáculo: um resultado premium não deve depender de tipografia gigante, heróis lotados, marcas ornamentais ou branding superdimensionado.
• Trate o movimento como parte dessa linguagem visual: dê a ele um propósito, personalidade, sistema de temporização e contraparte de movimento reduzido.
• Use exatamente uma direção de gosto primária. Não misture vários skills de estilo ou moodboards.
• Gere e revise criticamente as referências visuais antes de codificar, quando a qualidade visual for central.
• Construa uma página funcional, não um mock-up de aparência estática com controles inertes.
• Inspecione a página real renderizada em larguras de desktop e mobile antes de relatar a conclusão.

Máquina de estados do fluxo de trabalho

Siga os estágios em ordem. Pule um estágio apenas quando o usuário já tiver fornecido tudo o que esse estágio estabeleceria. Não peça ao usuário para repetir informações já presentes no briefing, arquivos, conversa, kit de marca ou URL de referência.

1. Leia e classifique o briefing

Faça um inventário de tudo já presente na conversa e no espaço de trabalho antes de pedir qualquer coisa ao usuário. Leia guided-intake.md e execute sua verificação prévia de material de origem quando o conjunto de origem estiver ausente ou incompleto.

O inventário de origem cobre:

• Nome do cliente, URL atual do site ou página de origem, e se a tarefa é uma nova página, redesign, clone ou extensão
• Documento de conteúdo aprovado, status da cópia, ordem de página/seção necessária, alegações, texto legal e conversão primária
• Guia de marca, logotipos, marcas, especificações de cor, arquivos de fonte e licenças, sistemas de ícones e materiais anteriores
• Fotografia, vídeo, ilustração, diagramas, capturas de tela de produto, capturas de UI, depoimentos, provas e material de conformidade fornecidos
• Referências de concorrentes ou inspiração, incluindo o que o cliente gosta e não gosta
• Repositório existente, framework, sistema de componentes, restrições técnicas, destinos de análise/formulário e expectativas de implantação

Se nada existir, registre que o projeto é greenfield e prossiga sem fingir que ativos foram fornecidos. Se o usuário indicar que um site, documento, pasta ou conjunto de ativos existe, mas está inacessível, solicite a URL, anexo, caminho ou permissão antes de tomar decisões que dependam dele.

Classifique a tarefa:

• Nova e visualmente indefinida: execute intake guiado e seleção de direção.
• Nova com um briefing visual explícito: confirme o briefing compilado e prossiga para referências.
• Liderada por referência ou clone: analise a referência e preserve a estrutura, conteúdo e modelo de interação solicitados.
• Redesign: audite a página atual antes de propor uma direção; preserve a funcionalidade funcional e a cópia travada.

Inspecione o repositório e seus arquivos de instrução antes de alterar o código. Preserve o framework existente, gerenciador de pacotes, convenções de componentes e runtime, a menos que o usuário solicite explicitamente uma migração.

2. Execute o intake guiado quando necessário

Quando as decisões de design são delegadas, escolha preferências visuais não resolvidas a partir do contexto do cliente e registre seu raciocínio, em vez de realizar uma entrevista. Use as perguntas abaixo apenas quando o usuário desejar seleção colaborativa de direção ou um requisito material não puder ser inferido com segurança.

A verificação prévia de material de origem acontece antes do questionamento de design e não conta para o limite de perguntas de design. Não pergunte por material já encontrado na conversa, espaço de trabalho, site atual ou fonte conectada.

Faça uma pergunta de cada vez. Cada pergunta deve conter duas ou três opções mutuamente exclusivas, coloque a opção recomendada primeiro, explique seu efeito visual ou comercial em uma frase e permita uma alternativa de formato livre. Mantenha um senso visível de progresso, como "Direção 1 de 4".

Priorize apenas decisões não resolvidas. Um briefing vago típico precisa de quatro decisões:

1. Direção visual
2. Clima de cor
3. Caráter tipográfico
4. Estrutura do herói/layout

Pergunte sobre imagens, movimento ou arquitetura de conversão apenas quando o briefing não os tornar inferíveis. Quando o movimento for comercial ou narrativamente importante, pergunte se a experiência deve parecer contida, expressiva ou liderada por rolagem e explique a compensação de desempenho. Mantenha a entrevista em seis perguntas ou menos, a menos que o usuário solicite um workshop mais aprofundado.

Não comece a codificar enquanto uma escolha de direção material permanecer não resolvida.

3. Apresente três direções nomeadas

Para uma direção de marca indefinida, proponha três rotas genuinamente diferentes — não três variações de cor do mesmo layout. Cada direção deve especificar:

• Um nome memorável
• A ideia estratégica e a impressão do público
• Par de fontes ou categoria tipográfica
• Clima de paleta com funções de cor representativas
• Composição do herói
• Densidade do herói, faixa de escala do título, orçamento de conteúdo na primeira viewport, e o que é deliberadamente deixado abaixo da dobra
• Tratamento de imagens
• Tratamento do logotipo na navegação e rodapé, incluindo tratamento de fundo e pegada visual máxima
• Caráter de superfície, borda, raio e sombra
• Tratamento do CTA e como a conversão primária se torna visualmente dominante sem desordem decorativa
• Caráter do movimento
• A principal compensação

Quando o design for delegado, compare as rotas brevemente, escolha a mais forte e gere sua referência de herói. Caso contrário, recomende uma rota e apresente as alternativas para o ponto de verificação colaborativo solicitado. Evite gerar três direções completas quando uma rota selecionada resolverá a tarefa.

4. Compile e trave o brief de design

Leia design-brief-schema.md. Escreva DESIGN-BRIEF.md dentro do projeto usando essa estrutura.

Leia visual-calibration.md para estabelecer um alvo visual concreto e o loop de correção. Isso é especialmente importante quando o briefing diz apenas "premium", "moderno" ou "melhore".

Traduza escolhas em regras prontas para implementação: fontes nomeadas, pesos, escala tipográfica, tokens de cor, grade, larguras máximas, ritmo de espaçamento, raios, bordas, sombras, regras de imagens, ritmo de seção, interações, tokens de movimento, redução de movimento e transformações de ponto de quebra.

Também trave as restrições práticas de composição que comumente causam rejeição em estágio avançado:

• Largura máxima do título do herói e tamanho em desktop e mobile
• Ordem de prioridade na primeira viewport e orçamento de densidade para texto, mídia, provas e ações
• Altura do cabeçalho mais altura e largura máxima do logotipo; use um ativo genuinamente transparente quando a marca deve ficar sem fundo
• Proeminência do CTA primário por escala, contraste, posicionamento e contexto de suporte
• Folga mínima entre índices, divisores, bordas, ícones e texto
• Regras de composição específicas de seção para que seções de prova, sucesso, processo e conversão não se tornem variações da mesma grade de cartões
• Tratamentos aprovados explícitos, tratamentos não apreciados e motivos rejeitados que não devem reaparecer mais tarde na página

Separe três tipos de informação:

• Travado: cópia aprovada, fatos da marca, ativos fornecidos, direção selecionada.
• Derivado: tokens de design, comportamento responsivo, regras de composição.
• Não resolvido: informações ainda aguardando confirmação.

Execute node scripts/validate_design_brief.mjs <project>/DESIGN-BRIEF.md quando o script agrupado deste skill estiver acessível. Corrija seções ausentes ou de espaço reservado antes de continuar.

5. Crie referências de seção focadas em imagem

Carregue imagegen-frontend-web, depois use a capacidade de geração de imagens embutida.

Planeje a narrativa da página. Gere e revise criticamente a referência do herói primeiro, corrigindo a composição fraca antes de estendê-la para as outras seções. Gere uma imagem de referência grande e horizontal separada para cada seção planejada. Uma página com sete seções recebe sete imagens de seção. Gere novas referências de detalhes em vez de recortar pequenos fragmentos de uma composição de página inteira.

Mantenha estes constantes em cada referência:

• Paleta e funções de cor
• Par de fontes e personalidade tipográfica
• Lógica de grade e ritmo de espaçamento
• Linguagem de borda, raio, ícone e superfície
• Tratamento de imagem e direção de arte

Varie a composição da seção deliberadamente. Evite repetir texto à esquerda/imagem à direita, grades de cartões, contêineres bento e títulos centrados superdimensionados por padrão.

Salve as referências vinculadas ao projeto sob design-references/ com nomes ordenados, como 01-hero.png, 02-proof.png e 03-product.png. Trate as referências aprovadas como a fonte da verdade visual.

Revise as referências em um recorte de viewport realista, não apenas como quadros isolados. Antes da implementação, confirme que:

• O herói tem uma mensagem dominante, uma ação dominante e nenhum cluster concorrente de prova, imagens, rótulos ou dispositivos decorativos.
• O tipo de exibição parece confiante no tamanho normal de visualização, em vez de superdimensionado para a tela.
• O logotipo do cabeçalho é opticamente subordinado à navegação e não introduz um retângulo branco acidental ou fundo incompatível.
• A seção de conversão final é um momento projetado com contraste e peso visual suficientes, não apenas cópia centralizada e um botão.
• Linhas numeradas, etapas de linha do tempo e listas com régua têm espaço para respirar em ambos os lados de suas linhas.
• Nenhum símbolo decorativo está sendo usado como substituto para composição ou significado.

A seleção de direção e a revisão de referências são pontos de verificação separados. Uma rota nomeada não estabelece que sua execução seja boa. Se o usuário rejeitar uma referência, revise-a; não comece a codificar a partir da composição rejeitada.

Imagens estáticas não podem especificar totalmente a temporização. Adicione anotações de movimento concisas ao brief de design para cada seção que se move: gatilho, sequência, mudança espacial, duração, easing, repetição, adaptação mobile e resultado de movimento reduzido. Não invente animação apenas porque uma referência contém profundidade ou imagens em camadas.

Se o usuário solicitou aprovação visual, mostre as referências e espere nesse ponto de verificação. Caso contrário, selecione as referências após revisão crítica e continue de forma autônoma. Neste fluxo de trabalho, as referências aceitas pelo agente podem servir como fonte da verdade para implementação, mas não devem ser descritas como aprovadas pelo usuário.

6. Traduza referências em código

Carregue image-to-code e analise cada referência aprovada para tipografia, espaçamento, cor, composição, imagens, componentes, intenção responsiva e dicas de interação.

Antes de compor seções, implemente tokens semânticos para:

• Cores de fundo, primeiro plano, texto suave, destaque, borda e superfície
• Famílias de fonte de exibição e corpo
• Escala tipográfica e relações de altura de linha
• Ritmo de espaçamento e larguras de conteúdo
• Níveis de raio, borda e sombra
• Duração e easing do movimento

Implemente o cabeçalho e o herói como a primeira fatia visual e inspecione-os em 1440 e 390 pixels antes de traduzir as seções restantes. Corrija a escala e o fundo do logotipo, densidade do herói, quebra de título, peso do CTA e composição da dobra neste ponto, para que uma primeira tela fraca não se propague pela página.

Use ativos de imagem transparentes intrínsecos para logotipos quando disponíveis. Mistura CSS, contêineres brancos, clipping ou filtros não são substitutos para remover um fundo integrado indesejado. Dimensione logotipos pela sua marca visível, não apenas pelas dimensões do bitmap de origem.

Em componentes com régua ou numerados, reserve espaçamento explícito entre o número e o divisor ou borda do conteúdo. Verifique a folga óptica no resultado renderizado; o preenchimento matematicamente igual ainda pode parecer apertado perto de réguas finas.

Construa componentes semânticos e acessíveis de acordo com as regras de composição travadas no brief de design. Evite duplicar decisões de composição no código quando elas já estão definidas nos tokens.

7. Inspecione visualmente o resultado renderizado

Carregue uma ferramenta de inspeção com capacidade de navegador. Inspecione a página renderizada em 1440 px e 390 px. Verifique:

• Contraste de cor e legibilidade do texto
• Comportamento e redimensionamento do logotipo
• Quebra de texto e comprimento de linha
• Funcionalidade de interação (hover, foco, estados ativos)
• Rolagem suave e comportamento de rolagem
• Visibilidade de foco e navegação por teclado
• Aderência aos tokens de design
• Densidade e hierarquia da primeira viewport
• Funcionalidade e clareza do CTA

Use um verificador de contraste de cor se disponível. Teste a navegação por teclado para elementos interativos. Verifique se as animações respeitam as preferências de movimento reduzido do sistema.

Se playwright-visual-testing estiver instalado, execute seus testes de regressão visual e registre os resultados.

Não marque a tarefa como concluída até que a inspeção visual em ambas as larguras mostre resultados aceitáveis que correspondam às referências aprovadas dentro de desvios razoáveis de renderização do navegador.

Tratamento de erros

Se um estágio falhar, registre o motivo e retorne ao estágio anterior. Se uma referência for rejeitada, revise a referência em vez de pular para a implementação. Se tokens de design não puderem ser extraídos de uma referência, retorne ao estágio de compilação do brief e preencha as lacunas.

Considerações de segurança

• Não modifique arquivos fora do diretório do projeto, a menos que explicitamente instruído.
• Não execute comandos que modifiquem dependências do sistema ou instalações globais.
• Não acesse sites ou recursos externos não autorizados pelo usuário.
• Não compartilhe ou exponha chaves de API, tokens ou credenciais.

Termos e métricas de sucesso

• Qualidade visual: o resultado final corresponde às referências aprovadas dentro de desvios razoáveis de renderização do navegador.
• Coerência da marca: tokens de design são aplicados consistentemente em toda a página.
• Funcionalidade: todos os elementos interativos funcionam conforme esperado em desktop e mobile.
• Acessibilidade: navegação por teclado, contraste de cor e preferências de movimento reduzido são respeitados.
• Revisões: o número de revisões é minimizado por meio de referências completas antes da implementação.