williamsnieves/landing-factory

tasteskill v2

Uma página construída por um modelo geralmente parece com a média de todas as páginas que o modelo já viu: um título centralizado com três linhas, um pequeno rótulo acima, uma fileira de cartões com ícones, um gradiente suave, algumas linhas finas e uma legenda monoespaçada. Nada está errado e nada foi decidido.

Esta habilidade substitui esses padrões por decisões, de quatro maneiras:

1. Um script distribui as direções, você escolhe entre elas. Ao inventar um visual, um modelo escolhe o padrão da categoria toda vez. scripts/draw.mjs distribui três de vinte direções pesquisadas; você escolhe aquela que carrega a ideia do assunto, e o script então distribui seu sistema de tipos, paleta, composições de herói e seções a partir de uma biblioteca destilada de 247 sites reais.
2. A ideia vem do assunto. No estudo, o que separou os melhores sites dos esquecíveis foi um conceito extraído da coisa em si, não da estilização.
3. Um estilo próprio sem ornamentos, medido em um navegador real por scripts/inspect.mjs, para que as regras sejam verificadas em vez de apenas esperadas.
4. Você olha para o que fez. Screenshots em três larguras, uma rubrica de jurado, corrija, olhe novamente.

Um aviso aprendido nos testes. Retirar os ornamentos é apenas metade do trabalho; uma página que perdeu seus rótulos, regras e cartões e não ganhou nada em seu lugar parece vazia, e jurados cegos preferem, com razão, uma página mais rica com sinais a uma página vazia sem eles. A outra metade é substância: tipo em tamanho maior, campos inteiros de cor, imagens reais deste mundo do assunto (encontradas ou desenhadas), e cada seção carregando seu conteúdo completo. A habilidade foi construída para te dar isso; não troque por contenção.

Nos comandos abaixo, <skill> é a pasta desta habilidade. Execute-os a partir da raiz do projeto, para que os arquivos de trabalho caiam em .taste-skill/ lá. Os scripts precisam de Node 22+ e um Chrome, Edge ou Chromium instalado, e não instalam nada. assets.mjs também precisa de acesso à rede; não usa chaves de API.

A execução

Faça estes em ordem. As etapas 1–5 levam alguns minutos e decidem se a página é boa.

1. Leia o briefing e o projeto

Descubra o que é real: o assunto, o público, a única coisa que a página deve fazer alguém fazer, a stack, qualquer marca existente (cores, fontes, logotipo) e, acima de tudo, quais imagens verdadeiramente existem: as próprias fotografias do projeto ou fotos de produto, uma interface real que pode ser mostrada, uma ferramenta de geração de imagem que você pode chamar, ou nada. Não planeje em torno de imagens que você não tem. Nada próprio raramente é nada: a cidade do assunto, rua, materiais e história estão em arquivos abertos e museus, gratuitos para usar com crédito (etapa 6, scripts/assets.mjs).

Se o pedido for vago, decida e declare sua leitura em uma linha em vez de perguntar. Pergunte apenas quando um fato ausente bloquear o trabalho (por exemplo, nenhum nome de produto).

Em seguida, inventarie o assunto em suas anotações: oito a doze coisas que pertencem a este cliente e a nenhum concorrente. Procure seu nome e o que o nome significa; seu endereço, número da porta, rua e bairro, e como esse lugar se parece (seus azulejos, letreiros, cores de tinta, tipografia em suas fachadas, sua luz, seu clima); os números no briefing (lugares, quartos, minutos para o mar, o preço, o ano); a restrição com a qual vive (apenas um lote por mês, fechado no inverno, com hora marcada); seus materiais e cores; seus rituais e horários (o forno aceso às cinco, a balsa às sete); as coisas impressas de seu mundo (um horário, um rótulo, um bilhete, uma placa). Esta lista é de onde a ideia vem na etapa 4. Em testes cegos, a página que venceu cada briefing foi construída a partir de um item dessa lista (o nome do cliente e o que significa, a rua em que está, a única restrição que o torna o que é), e as páginas que perderam tinham uma boa composição com uma ideia de categoria. A lista também é sua busca por imagens: cada lugar, material e coisa impressa nela é uma consulta para a etapa 6.

2. Escreva o argumento

Antes de qualquer design, liste a página como afirmações com sua prova, uma linha por seção, como mostra references/copy.md §1. As afirmações decidem quais seções existem e em que ordem. Exclua qualquer seção que não tenha afirmação. É assim que você evita a sequência padrão de herói, logotipos, três recursos, depoimento, preços, chamada para ação.

3. Distribua a direção

node <skill>/scripts/draw.mjs --sector <sector> --brief "<uma linha sobre o assunto>" \
  --sections <cargos na ordem do seu argumento> [--tone <tone>] [--have <assets>] [--keep palette,type] \
  --options 3

Isso distribui três direções e imprime um breve resumo de cada uma. Compare cada uma com seu inventário: qual maneira de compor pode carregar algo que apenas este cliente tem? Escolha essa, não a mais familiar, e escreva uma linha em suas anotações sobre o porquê. Em testes, uma única direção aleatória que não se adequava ao assunto era a causa mais comum de uma página fraca. Em seguida, distribua a folha completa:

node <skill>/scripts/draw.mjs <os mesmos argumentos, sem --options> --direction <id escolhido>

• --sector: node <skill>/scripts/draw.mjs --list sectors. Escolha o mais próximo.
• --sections: cargos de --list roles (features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact). O herói está implícito.
• --tone (opcional): quiet, bold, warm, technical, playful, luxury, editorial. Passe apenas quando o briefing claramente solicitar um.
• --have: ativos que realmente existem, separados por vírgulas: photography (as próprias fotografias do projeto do lugar, pessoas ou trabalho), product-photo (fotografias do produto específico, ou uma ferramenta de imagem que pode fazê-las), product-ui (capturas de tela reais), illustration, video. Deixe de fora se não tiver nenhum: o draw então evita composições que dependem deles e a folha diz como preender espaços de imagem honestamente (o software mostra sua própria interface construída em HTML; um produto sem fotografias é desenhado e colocado entre imagens reais de seu mundo, nunca uma foto falsa de produto). Imagens que você encontrará nas coleções abertas não são próprias do projeto; deixe-as fora de --have.
• --keep palette,type: quando a marca já fixa cores ou tipografia. O draw então distribui apenas a composição, e você mapeia os valores da marca nos cargos.

O comando imprime uma folha de direção. É a direção de arte para esta construção:

• Adote-a. Não a misture com o layout que você teria feito de qualquer maneira. Se parecer desconhecida, bom: o layout familiar é aquele que esta habilidade existe para prevenir.
• Redesenhe um slot (--redraw hero | type | palette | photos | section:<role> | direction) apenas por uma razão que você possa declarar: contradiz uma restrição de marca declarada, ou precisa de um ativo que não existe. Nunca redesenhe para obter algo mais confortável. Registre cada redesenho em seu relatório.
• Quando uma seção distribuída não puder conter o conteúdo real (compara três planos e há um preço; quer cinco citações e não há nenhuma), não dobre o conteúdo para caber. Liste os outros com --alternatives <role>, escolha aquele cujas suposições correspondem ao conteúdo, e pegue com --redraw section:<role>=<id>.
• Verifique a paleta em relação ao assunto. Uma paleta distribuída é um conjunto de proporções (um fundo, uma tinta, um acento, campos) tanto quanto um conjunto de cores. Se suas cores lutam contra o material próprio do assunto (pastéis doces para um uísque de turfa, neon para uma cabana de montanha), redesenhe a paleta uma vez; se o assunto tem cores inconfundíveis próprias (seu material, a tinta de sua rua, a paisagem fora de suas janelas), mantenha as proporções distribuídas e pegue as cores do assunto em vez disso, e diga isso no relatório.
• Reimprima-a a qualquer momento com node <skill>/scripts/draw.mjs --show. Em uma sessão longa, releia-a antes de cada seção que construir.

4. Encontre a ideia

A direção é uma maneira de compor. A ideia é o que faz a página pertencer a este assunto e a nenhum outro. Escreva esta frase em suas anotações e não comece a construir até que ambos os espaços em branco sejam preenchidos a partir do próprio assunto:

Nesta página, [algo que pertence ao assunto] se torna [o dispositivo que a direção pede].

Lugares para procurar o primeiro espaço em branco:

• Sua saída. O que a coisa produz? Coloque a saída real na página como material. (Uma câmera que imprime poemas entregou sua cópia como tiras de papel.)
• Seu objeto ou forma. Como ela se parece fisicamente, em corte transversal, em silhueta? Amplie, corte, torne-a o quadro ou o único motivo.
• Seu nome. As letras podem conter uma fotografia, empilhar em uma parede, dividir em dois cantos?
• Seu lugar. Existe uma vista que faz alguém querer estar lá?
• Seu ritual. Existe uma sequência que a página pode executar enquanto rola?
• Seu artefato. Qual coisa impressa já existe em seu mundo: bilhete, menu, rótulo, recibo, convite, pasta, manual?
• Seu oposto. Qual outra categoria possui o sentimento que esta não tem?

Preencha o primeiro espaço em branco do seu inventário (etapa 1), não da categoria. O teste do concorrente: coloque o concorrente real mais próximo na frase (a padaria a duas ruas de distância, outro fabricante de móveis de carvalho, outra cabana na mesma montanha). Se a frase ainda funcionar, a ideia pertence à categoria: um pão é toda padaria; as sete portas da rua em homenagem à qual esta se chama são apenas esta. "Limpo e moderno" não é uma ideia. Os sites que o painel do estudo classificou mais baixo foram aqueles cuja ideia foi registrada como "nenhuma além da fórmula padrão".

Uma coisa viva. Dê à página uma coisa que o visitante possa fazer, ou que seja diferente a cada visita, feita a partir da ideia: escolha uma madeira e veja a cadeira nela; digite seu nome e veja-o cortado nas letras da fundição; defina o empréstimo e leia o valor mensal real; veja se o fogão da cabana está aceso agora e quanto tempo até a última balsa; escolha um tamanho e veja-o contra o quarto. Em testes cegos, toda página vencedora tinha uma e os jurados a nomearam primeiro. Regras: usa o conteúdo real do assunto, funciona em um telefone com um polegar, tem uma alternativa simples sem script, nunca bloqueia a leitura, e é uma coisa, não um playground. É construída na etapa 6 como parte da página, não adicionada como movimento na etapa 9.

5. Escreva as palavras

Escreva a página inteira como um deck de cópia (texto simples) antes da marcação, seguindo references/copy.md:

• Cada título cabe em duas linhas ou menos em todas as larguras. Faça a aritmética em copy.md §2 antes de se comprometer com uma frase: cerca de 32 caracteres é seguro em todos os lugares em um tamanho confiante. Os heróis da galeria estudada têm uma mediana de 5 palavras e 32 caracteres.
• Uma frase de apoio. Uma ação principal, nomeada pelo que faz, como um botão real na primeira tela.
• A primeira tela responde à primeira pergunta do visitante em tipo grande. Para um evento: o que é, quando e onde (as datas pertencem ao título ou ao segundo tamanho, nunca apenas em texto pequeno). Para um produto: o que é e o que custa ou faz. Para uma pessoa: quem e o que fazem. Toda seção para a qual o visitante veio (a programação, o menu, os quartos, o preço) tem seu próprio título e seu próprio lugar na navegação.
• Escreva o conteúdo completo. Toda seção que o briefing pede entrega suas informações completamente: o menu inteiro com preços, cada quarto com seus próprios detalhes, cada palestrante e palestra, o preço com o que inclui, uma resposta para cada pergunta real. Seções finas são a razão mais comum pela qual uma página limpa perde para uma mais movimentada.
• Detalhes de amostra são esperados onde o briefing deixa lacunas (nomes de pratos, nomes e tarifas de quartos, títulos de projetos) para que o design seja visto em densidade total; liste-os no relatório para o cliente confirmar. A prova nunca é inventada: nenhum cliente, citação, avaliação, imprensa, logotipo ou estatística de negócios.

6. Construa, ainda

Construa a página com o movimento desligado em sua cabeça; uma página que precisa de animação para parecer acabada não está acabada. Ordem de trabalho:

1. Tokens. Papéis de cor e tipo da folha como propriedades personalizadas CSS. Tudo a jusante referencia apenas tokens. <skill>/assets/base.css é uma base neutra da qual você pode começar (reset, nomes de tokens, etapas de tipo fluido, grade, estilos de foco e seleção, os auxiliares de movimento); não tem visual próprio.
2. O herói, exatamente como o blueprint o descreve, em desktop e em largura de telefone. Deixe a coisa grande grande e as coisas pequenas pequenas antes que qualquer outra coisa exista.
3. Cada seção a partir de seu blueprint, com o conteúdo deste projeto. Mantenha a geometria, mude o assunto. Seções vizinhas não devem compartilhar um layout. Carregue a ideia em cada seção, incluindo preços, FAQ e rodapé: a falha mais comum no estudo, mesmo entre bons sites, é uma primeira tela distinta seguida por blocos padrão.
4. Imagens, nesta ordem de preferência:
   1. as próprias do projeto;
   2. geradas, se você tiver uma ferramenta de imagem;
   3. imagens reais do mundo do assunto das coleções abertas, sempre que uma honesta existir. Pesquise-as com node <skill>/scripts/assets.mjs "<query>" (Openverse, Wikimedia Commons, Art Institute of Chicago e Met; apenas licenças que permitem uso comercial, por padrão). Pesquise o inventário, não a categoria: sua rua em cartões-postais antigos, um mapa antigo do bairro, seu material de perto, seu comércio em gravuras, um objeto de museu de seu tipo, uma placa botânica, um mapa estelar. Use-as grandes e com intenção: uma fotografia de arquivo como o herói, uma gravura ampliada no motivo da página, o mapa real da rua como a seção de contato. Olhe para cada uma antes de escolher; --get <ref> baixa-a em assets/ e registra sua fonte e licença, e --credits imprime a linha de crédito para o rodapé. Uma imagem encontrada mostra o mundo ao redor do cliente e nunca é apresentada como o próprio produto, quarto, prato, pessoa ou equipe do cliente;
   4. desenhadas em SVG, quando nenhuma outra opção existe e a ideia pede uma forma abstrata.
5. Alternâncias de layout. O gutter, as colunas e a ordem da seção anterior em cada largura de tela.

7. Inspecione o estilo próprio

node <skill>/scripts/inspect.mjs <url de desenvolvimento> [--viewport "<largura>"|"<largura> <altura>"]

Mede o HTML e CSS renderizados contra as regras em config/rules.json (copie para .taste-skill/ e edite se necessário). A saída lista cada regra e seu resultado (PASS | FAIL | WARN). As regras centrais marcam:

• Nenhuma seção compartilha o layout da seção anterior (section-layout-alternation).
• Nenhum card, sombra de caixa ou gradiente suave semântico (refrain-from-box-shadow, refrain-from-card, refrain-from-soft-gradient).
• Nenhum rótulo ornamento minúsculo acima de um título (no-ornament-labels).
• A largura do texto não encolhe em viewports estreitas sem um gutter maior (no-text-shrink-on-narrow).
• Nenhuma fonte monoespaçada falsa de código definida como corpo (no-code-body-font).
• As razões de contraste passam WCAG AA (text-color-contrast, bg-color-contrast).
• A altura da linha é pelo menos 1.4 para texto corrido, 1.1 para títulos (line-height-text, line-height-heading).
• A primeira tela tem um link de navegação interno interno que corresponde à primeira seção do argumento (hero-internal-link).
• A primeira ligação de navegação na primeira tela é um link interno para a primeira seção abaixo ou a seção de conteúdo a seguir (first-link-internal).
• A página tem um <h1> (has-h1).
• Texto centralizado não excede 70 caracteres por linha e é quebrado em um limite de palavra antes disso (centered-text-line-length).
• A página tem uma tag <meta name="description"> (has-description).
• Nenhum gutter de zero (no-zero-gutter é pular?)

Corrija todas as falhas antes de passar para a etapa 8.

8. Microinterações

Agora que a página funciona como HTML, dê a ela uma interação pequena que a ideia pede. Uma. A partir do seu inventário: o que o visitante pode fazer com esta coisa? (a fundição: digitar seu nome e vê-lo cortado nas letras deles; a cabana: ver se o fogão está aceso; o carpinteiro: escolher uma madeira e ver a cadeira nela). Regras como na etapa 4: usa conteúdo real, funciona em telefone, tem um fallback simples, nunca bloqueia a leitura. Adicione como aprimoramento progressivo: JavaScript puro, nenhuma dependência.

9. Capturas de tela e revisão final

Use o script compare.js (na raiz) para comparar entre estados de construção ou de antes/depois (veja compare.js --help).

Em seguida, capture a página finalizada em três larguras (qualidade para impressão, 2×). A ferramenta é node scripts/diff.mjs (que também suporta referência de antes/depois):

node <skill>/scripts/diff.mjs <url de desenvolvimento> --viewport 1440 1024 --output .taste-skill/review-desktop.png
node <skill>/scripts/diff.mjs <url de desenvolvimento> --viewport 768 1024 --output .taste-skill/review-tablet.png
node <skill>/scripts/diff.mjs <url de desenvolvimento> --viewport 375 812 --output .taste-skill/review-mobile.png

Revise cada captura de tela contra estes critérios, anotando suas descobertas em .taste-skill/review.md:

1. Hierarquia: a primeira coisa que você vê é a única coisa na primeira tela que importa?
2. Intenção: cada elemento parece ter sido colocado lá de propósito?
3. Densidade: a página parece preenchida com conteúdo real ou parece fina?
4. Ritmo: os olhos se movem suavemente pela página ou saltam?
5. Propriedade: esta página poderia pertencer a outra empresa?
6. O ornamento: há alguma coisa que pode ser removida sem perda de significado?

Se alguma captura de tela falhar em qualquer critério, anote a correção e execute as etapas 6–9 novamente. O relatório de revisão é a saída desta habilidade.

Tabela de referência

Propósito	Comando
Listar setores	node <skill>/scripts/draw.mjs --list sectors
Listar cargos	node <skill>/scripts/draw.mjs --list roles
Reimprimir folha	node <skill>/scripts/draw.mjs --show
Imagens	node <skill>/scripts/assets.mjs "<query>"
Baixar imagem	node <skill>/scripts/assets.mjs --get <ref>
Créditos	node <skill>/scripts/assets.mjs --credits
Inspecionar	node <skill>/scripts/inspect.mjs <url>
Comparar antes/depois	node <skill>/scripts/diff.mjs <url> (veja --help)