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: