Construtor de Landing Page Premium

Você constrói landing pages que passam por uma avaliação de designer sênior. O piso não é "funciona e está bonito". O piso é indistinguível de uma página feita por um time de produto que se importa.

Este arquivo é o método: as regras que anulam todas as outras, os 11 portões do processo e a entrega. O detalhe técnico de cada portão está em references/. Siga na ordem.

Como usar esta skill

Carregue só o que o portão pede. Cada portão abaixo termina com uma linha Leia, que aponta o arquivo de referência daquele momento. Não abra todas as referências de uma vez: elas somam quase 4 mil linhas, e o que importa em cada etapa cabe em uma ou duas.

A numeração é a mesma em todos os arquivos. Quando um texto diz "ver 10.4" ou "seção 12.7", procure no mapa do fim deste arquivo qual referência contém aquela seção. As seções 0, 1, 3 e 19 estão aqui; as outras, em references/.

Os scripts fazem a verificação pesada. Rode em vez de reescrever:

Script	Para quê	Precisa de
`scripts/contraste.py`	Medir os pares de contraste dos tokens antes de aplicar (portão 4)	Python 3.8+
`scripts/checar-texto.py`	Revisão anti-slop, botões e ritmo do texto (portões 2 e 10)	Python 3.8+
`scripts/auditar-responsivo.mjs`	Auditoria por largura, de 320 a 1920 px, com zoom de 200% e movimento reduzido (portão 9)	Node 18+ e Playwright

Os caminhos são relativos à pasta desta skill. Se o ambiente não permite rodar um script (por exemplo, sem navegador para o Playwright), diga ao usuário qual verificação ficou pendente e entregue o comando exato para ele rodar na máquina dele. Nunca declare uma verificação que não foi executada.

Os exemplos de código estão em HTML, CSS e JavaScript puros. Em React, Next.js, Astro, Tailwind, Webflow ou outro construtor, traduza mantendo os nomes de token, os estados e as regras.

0. Antes de qualquer pixel

Quatro regras que anulam todas as outras se forem quebradas:

Nenhum pixel sem briefing fechado (portão 1). A maior parte do retrabalho vem de começar a desenhar antes de saber o que se está desenhando.
Nenhum valor por impressão visual. Toda medida de tipografia, cor, espaço e duração sai de token, de medição ou de tabela. Nunca de "parece bom".
Faça o que foi pedido, nada além. Se você tem uma ideia melhor, implemente o pedido e ofereça a ideia em separado. Efeito extra aplicado por conta própria é retrabalho garantido.
Nunca reaproveite a identidade de outro projeto. Cada página nasce da marca do seu projeto. Copiar paleta, tipografia ou assinatura visual de um exemplo produz exatamente a página genérica que a seção 1 proíbe.

0.1 O que é método e o que é identidade

Esta é a distinção mais importante do documento. O método não muda. A identidade muda em todo projeto.

Invariante: use sempre	Variável: colete do projeto
O processo de 11 portões	Paleta e o papel de cada cor
A estrutura de tokens, ou seja, os nomes	Os valores dos tokens
Escala fluida com `clamp()` e parcela em `rem`	Famílias tipográficas e a razão da escala
Regra de agrupamento, base de 8 px, `minmax(0,1fr)`	Largura do contêiner e densidade
Sombra em camadas, com teto de dois tokens	Matiz e intensidade da sombra
Vocabulário de movimento: uma curva, duas faixas	Intensidade do movimento e assinatura de hover
Material visual próprio, nunca de banco	Qual técnica de material combina com a marca
Acessibilidade WCAG 2.2 AA e o QA das seções 12 e 16	Nada. Isto não é negociável
As regras anti-slop da seção 1	Nada. Isto não é negociável

Todo valor concreto neste documento é exemplo de preenchimento, não padrão a copiar. Os exemplos vêm de um projeto real já validado e servem para mostrar o nível de rigor esperado, não a aparência a reproduzir. Uma marca de moda, um banco e um estúdio de jogos preenchem os mesmos campos com valores completamente diferentes e chegam ao mesmo nível de qualidade.

Se duas páginas feitas com esta skill parecem irmãs, a skill foi usada errado.

1. Regra raiz: zero AI slop

"AI slop" é o conjunto de marcas que denunciam conteúdo gerado sem critério. Uma página pode estar tecnicamente correta e ainda assim ser recusada por isso. Esta seção tem prioridade sobre qualquer outra escolha estética.

1.1 Slop visual: proibido

Proibido	Por quê	O que fazer
Gradiente roxo ou índigo para azul	Assinatura visual de template de IA	Paleta derivada da marca, com papel definido por cor
Glassmorphism em tudo	Efeito aplicado sem função	Blur só em navegação flutuante e sobreposição
Ícone de robô, cérebro, circuito, holograma, chip	Clichê de "IA"	Ícone do objeto real do domínio (agenda, mensagem, gráfico)
Foto de banco de imagens	Genérica e reconhecível	Textura procedural, UI do produto, ilustração técnica
Imagem gerada por IA	Detectável e inconsistente com a marca	Mesma alternativa acima
Emoji como ícone de interface	Infantiliza e quebra a composição	SVG de traço no sistema de ícones
Cards brancos idênticos com borda cinza, em grade 3×2	Molde mais comum de template	Pegadas diferentes, conteúdo visual dentro do card
Lista de check verde repetida em toda seção	Preguiça de composição	Variar: lista, comparação, miniatura, dado
Números 01 02 03 grandes sem nada ao lado	Decoração que não informa	Número com miniatura do que acontece naquele passo
Blob colorido de fundo	Enfeite sem função	Textura com relação com a marca, ou nada
Sombra única grande e cinza	Parece borrão, não profundidade	Sombra em camadas (ver 4.5)
Topo de nebulosa escura com feixe vertical de luz e florescência azul e violeta	Assinatura de uma safra inteira de páginas de ferramenta técnica. Copiar é anunciar de que ano e de que nicho você copiou	Atmosfera derivada da marca: a textura, o ângulo e a cor do projeto
Título em gradiente de branco para lavanda e rosa	Deixou de ser acabamento e virou marcador de template	Gradiente só quando as paradas saem da paleta do projeto, e usado uma vez na página
Manchete do tipo "substitui A, B, C e D"	Só funciona para um produto que de fato substitui quatro categorias, com dado aberto para provar. Em qualquer outro caso lê como bravata	Ver os padrões de manchete em 10.4

1.2 Slop de texto: proibido

Pontuação banida, sem exceção:

Caractere	Nome	Substituir por
`—`	travessão	ponto, vírgula ou dois-pontos
`–`	meia-risca	ponto, vírgula ou "a" em intervalo
`·`	ponto médio	vírgula, ou quebra em dois elementos
`…` como reticência decorativa		ponto final

O travessão é a marca número um de texto gerado por máquina. Reescreva a frase, não troque o caractere por um hífen solto com espaços, que tem o mesmo efeito.

Em bloco de código e especificação, não use ponto médio como separador: quebre em linhas com rótulo.

Fórmulas de frase banidas:

"Não é X. Não é Y. É Z."
"Imagine [situação]"
"No mundo de hoje", "Na era digital", "Cada vez mais"
"Transforme", "Revolucione", "Eleve", "Desbloqueie", "Potencialize"
"Mergulhe", "Vamos explorar", "Descubra como"
Tríade em tudo: três adjetivos, três bullets, três colunas em toda seção
Exclamação em texto institucional
Hedge empilhado: "pode ajudar a potencialmente melhorar"

Regras positivas:

Frase curta e concreta, na linguagem do leitor, não do produto.
Verbo no lugar de substantivo abstrato: "responde em 5 minutos", não "agilidade no atendimento".
Número só com origem. Sem dado real, descreva o que será medido.
Acentuação completa e correta. Nunca troque caractere acentuado por ASCII.

1.3 Slop estrutural: proibido

O erro mais difícil de ver: toda seção com o mesmo molde.

rótulo → título → parágrafo → três cards iguais
rótulo → título → parágrafo → três cards iguais
rótulo → título → parágrafo → três cards iguais

Isso é template, mesmo com tokens bons e animação boa.

Regra de variação: nenhum formato de seção se repete em sequência. Alterne entre pelo menos cinco formatos ao longo da página:

grade de cartões com miniatura de interface
lista vertical com palco sincronizado ao lado
abas com captura de produto
composição em bento com um bloco dominante
comparação em duas colunas
linha do tempo ou passo a passo
bloco escuro com ilustração técnica
tabela ou painel de dados

1.4 Slop de processo: proibido

Implementar tipografia e componentes de memória, sem medir referência.
Entregar sem abrir em navegador e sem rodar a verificação.
Entregar com erro no console.
Copiar valores de um projeto anterior sem recalcular contraste.

1.5 Teste do slop

Antes de entregar, responda. Qualquer "sim" reprova:

Alguma seção usa o mesmo molde da anterior?
Existe travessão, meia-risca ou ponto médio em algum texto visível?
Alguma imagem veio de banco ou de gerador de IA?
Algum ícone representa "tecnologia" em vez de representar a coisa?
Trocando o logotipo e a paleta, a página serviria para qualquer empresa?
Algum número aparece sem origem?

A pergunta 5 é a mais severa. Se a resposta for sim, o problema é de conceito, não de acabamento.

3. Processo em 11 portões

Nenhum portão pode ser pulado. Cada um tem critério de saída objetivo.

Calibragem de prazo, a partir do que estúdios de referência publicam: redesenho focado de 4 a 6 semanas; página de produto sob medida de 6 a 8; site de empresa ou de software de 8 a 12. Um caso documentado de marca nova mais página completa levou 7 semanas e cerca de 600 horas, divididas em 4 semanas de marca e desenho e 3 de animação e construção. Terminaram dois dias antes do prazo, e usaram esses dois dias para ajustar texto, não layout.

Escopo não se mede em páginas. Um site de 30 páginas com poucos moldes reutilizáveis é mais simples que uma experiência de 5 páginas em que cada uma tem estrutura própria, narrativa sob medida e interação complexa. Oriente a estimativa pela quantidade de composições distintas, não de URLs.

Quatro hábitos de processo que valem para qualquer porte:

Texto genérico de preenchimento custa caro. Um layout construído para um parágrafo curto deixa de funcionar quando o texto real precisa explicar recursos, públicos e benefícios. O retrabalho aparece na fase mais cara. Por isso o portão 2 existe, e por isso os mockups usam texto real.
A fase visual não começa pela página inteira. Começa por uma ou duas composições-chave que contenham os elementos mais importantes do sistema futuro, para resolver tipografia, cor, imagem, composição, componente e movimento sem desenhar tudo.
Código junto do design, não depois. Onde o resultado é melhor, não há passagem de bastão: o mesmo grupo que cria o sistema visual entrega a experiência interativa, e performance é tratada como parte do design. Muito detalhe só ganha vida na implementação, com nuance que não aparece em vetor estático. Dias na ferramenta de design produzem boas ideias, e ideia não se entrega.
Teste com conteúdo real. Manchete longa, texto traduzido, proporção estranha de imagem e mídia faltando revelam problemas que ficam invisíveis em arquivo de design polido.

Portão 1. Briefing e identidade

Não desenhe nada antes de fechar este portão. Pergunte ao usuário. Para cada item sem resposta, proponha duas ou três opções e peça confirmação. Nunca assuma em silêncio, e nunca herde a identidade de um exemplo.

1.1 Negócio e objetivo

Quem lê a página, e qual decisão precisa tomar?
Qual é a ação única que a página deve gerar?
Existem restrições legais no setor (saúde, finanças, educação, jurídico, alimentos)?
Há dados reais de resultado, ou é proibido citar número?

1.2 Identidade visual: colete ou proponha

Campo	Pergunta ao usuário	Se não houver resposta
Cores da marca	Quais são as cores, em hexadecimal? Qual é a principal?	Proponha 2 ou 3 direções da seção 4.2 e peça escolha
Cor de ação	Que cor os botões devem usar?	Derive da cor da marca, escurecendo até passar em 4,5:1 com branco
Tipografia	Que fontes a marca usa? Há licença para web?	Proponha 2 pareamentos da seção 4.3 e peça escolha
Tom visual	A marca é sóbria, calorosa, técnica, elegante ou enérgica?	Pergunte. Isso define textura, raio, densidade e movimento
Logotipo	Tem arquivo em SVG, ou PNG com fundo transparente?	Peça. Sem ele, use o nome em texto na tipografia escolhida
Manual de marca	Tem manual, brandbook ou guia de identidade? Pode enviar?	Peça. É a fonte mais rica. Sem ele, trabalhe com o logotipo e as cores
Grafismos da marca	A marca tem padrão gráfico, textura, forma recorrente, grade ou assinatura visual própria? Pode enviar os arquivos?	Peça imagens ou vetores. Eles viram a base das texturas da seção 7
Peças existentes	Há apresentação, post, embalagem, catálogo ou site antigo?	Peça 3 a 5 peças. Elas mostram a marca aplicada, o que o manual nem sempre mostra
Material do produto	Há telas, fotos próprias ou diagramas?	Defina pela seção 7 o que será criado
Referências	Há páginas de referência?	Havendo, meça no portão 3. Não havendo, proponha uma direção
O que evitar	Há cor, estilo ou elemento proibido pela marca?	Pergunte. É mais barato saber agora
Nível de movimento	Discreto, equilibrado ou expressivo?	Padrão: equilibrado
Tom de voz	Formal ou direto? Trata por você ou por senhor?	Pergunte

1.3 Ficha de identidade

Registre as respostas. Esta ficha é a fonte dos tokens no portão 4.

PROJETO
Objetivo da página:
Ação única:
Público:

IDENTIDADE
Cor principal:            #
Cor de ação:              #          contraste com branco: ___:1
Acento secundário:  

…

[truncado para tradução]

精品落地页