tasteskill v2 – habilidade de direção de arte anti-slop

tasteskill v2

Uma página construída por um modelo geralmente se parece com a média de todas as páginas que o modelo já viu: um cabeçalho centralizado com três linhas, um pequeno rótulo acima, uma fileira de cartões com ícones, um gradiente suave, algumas regras 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 ser solicitado a inventar um visual, um modelo sempre escolhe o padrão da categoria. 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 tipo, 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 separava os melhores sites dos esquecíveis era um conceito extraído da própria coisa, não da estilização.
3. Um estilo próprio sem ornamentos, medido em um navegador real pelo scripts/inspect.mjs, para que as regras sejam verificadas, não apenas esperadas.
4. Você olha para o que fez. Capturas de tela em três larguras, uma rubrica de jurado, corrige, olha novamente.

Um aviso aprendido durante os 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 em indícios do que uma página vazia sem eles. A outra metade é substância: tipografia maior, campos inteiros de cor, imagens reais do mundo deste assunto (encontradas ou desenhadas), e cada seção carregando seu conteúdo completo. A habilidade foi construída para lhe dar isso; não troque isso por moderaçã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 isso 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, que imagens realmente existem: as próprias fotografias ou fotos de produtos do projeto, uma interface real que possa ser mostrada, uma ferramenta de geração de imagens que você possa chamar, ou nada. Não planeje em torno de imagens que você não possui. Nada de seu raramente é nada: a cidade, a rua, os materiais e a história do assunto estão em arquivos e museus abertos, gratuitos para uso com crédito (etapa 6, scripts/assets.mjs).

Se o pedido for vago, decida e declare sua interpretação 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 por seu nome e o que o nome significa; seu endereço, número da porta, rua e bairro, e a aparência desse lugar (seus azulejos, placas, cores de tinta, tipografia nas frentes de suas lojas, 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 ele 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 ingresso, 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 se encontra, 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 pesquisa de 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 suas provas, 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 uma afirmação. É assim que você evita a sequência padrão de herói, logotipos, três recursos, depoimento, preços, call to action.

3. Sorteie a direção

node <skill>/scripts/draw.mjs --sector <sector> --brief "<uma linha sobre o assunto>" \
  --sections <funções 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. Avalie cada uma contra seu inventário: qual forma 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 foi 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: funções 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 pedir claramente por um.
• --have: ativos que realmente existem, separados por vírgula: 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 possa fazê-las), product-ui (capturas de tela reais), illustration, video. Deixe de fora se não tiver nenhum: o sorteio então evita composições que dependem deles e a folha diz como preencher os espaços de imagem honestamente (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 de produto falsa). Imagens que você encontrará nas coleções abertas não são do próprio projeto; deixe-as de fora de --have.
• --keep palette,type: quando a marca já define cores ou tipografia. O sorteio então distribui apenas a composição, e você mapeia os valores da marca para as funções.

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 desconhecido, bom: o layout familiar é aquele que esta habilidade existe para evitar.
• Redesenhe um slot (--redraw hero | type | palette | photos | section:<role> | direction) apenas por um motivo 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 (ela compara três planos e há apenas um preço; ela quer cinco citações e não há nenhuma), não dobre o conteúdo para caber. Liste as outras com --alternatives <role>, escolha aquela cujas suposições correspondem ao conteúdo e aceite-a 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 destaque, campos) tanto quanto um conjunto de cores. Se suas cores entrarem em conflito com o material do próprio assunto (pastéis de doces para um uísque de turfa, neon para uma cabana na montanha), redesenhe a paleta uma vez; se o assunto tiver 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, 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 você construir.

4. Encontre a ideia

A direção é uma forma de compor. A ideia é o que torna a página pertencente 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] torna-se [o dispositivo que a direção exige].

Lugares para procurar o primeiro espaço em branco:

• Sua produção. O que a coisa produz? Coloque a produção real na página como material. (Uma câmera que imprime poemas entregou sua cópia como pedaços de papel.)
• Seu objeto ou forma. Como é fisicamente, em corte transversal, em silhueta? Amplie, corte, torne-o o quadro ou o único motivo.
• Seu nome. As letras podem conter uma fotografia, empilhar-se em uma parede, dividir-se 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. Que coisa impressa já existe em seu mundo: ingresso, menu, etiqueta, recibo, convite, pasta, manual?
• Seu oposto. Qual outra categoria possui o sentimento que falta a esta?

Preencha o primeiro espaço em branco a partir de 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 é nomeada são apenas desta. "Limpo e moderno" não é uma ideia. Os sites com a pontuação mais baixa no painel do estudo foram aqueles cuja ideia foi registrada como "nenhuma além da fórmula padrão".

Uma coisa ao vivo. 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 falta para 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 um fallback 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 qualquer largura. 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 de galeria estudados têm uma mediana de 5 palavras e 32 caracteres.
• Uma frase de apoio. Uma ação primária, nomeada para o que faz, como um botão real na primeira tela.
• A primeira tela responde à primeira pergunta do visitante em letras grandes. 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 faz. Cada seção que o visitante procurou (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. Cada 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 rasas são a razão mais comum pela qual uma página limpa perde para uma mais movimentada.
• Exemplos de detalhes 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 mente; uma página que precisa de animação para parecer finalizada não está finalizada. Ordem de trabalho:

1. Tokens. Funções de cor e tipo da folha como propriedades personalizadas CSS. Tudo a jusante referencia apenas tokens. <skill>/assets/base.css é uma fundação neutra da qual você pode partir (reset, nomes de tokens, passos de tipo fluido, grade, estilos de foco e seleção, os ajudantes de movimento); não tem aparência própria.
2. O herói, exatamente como o blueprint descreve, em desktop e em largura de telefone. Coloque 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 sites bons, é uma primeira tela distinta seguida por blocos padrão.
4. Imagens, nesta ordem de preferência:

   1. as do próprio projeto;

   2. geradas, se você tiver uma ferramenta de imagem;

   3. imagens reais do mundo do assunto das coleções abertas, sempre que uma imagem honesta existir. Pesquise-as com node <skill>/scripts/assets.mjs "<consulta>" (Openverse, Wikimedia Commons, Art Institute of Chicago e o 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 ofício em gravuras, um objeto de museu de seu tipo, uma placa botânica, um mapa estelar. Use-os grandes e com intenção: uma fotografia de arquivo como herói, uma gravura ampliada no motivo da página, o mapa real da rua como seção de contato. Olhe para cada um antes de escolher; --get <ref> baixa-o para assets/ e registra sua fonte e licença, e --credits os lista para o rodapé. As coleções abertas são grandes; nunca use uma imagem de banco de imagens (que é uma fotografia de outra pessoa de outra coisa) ou uma imagem gerada por IA como substituto para uma imagem real.

   4. Ferramentas de imagem. Se você tiver acesso a uma ferramenta de geração de imagens, use-a para desenhar o produto (não a cena ao redor), retratar uma cena de contexto realista da perspectiva do assunto (o balcão visto do banco, a vista da janela do quarto), ou fazer uma ilustração (apenas a) para a seção de herói. Não a use para substituir um retrato de arquivo de uma pessoa real. Gere em uma proporção que corresponda ao slot do blueprint.

5. Construa o conteúdo de cada seção em HTML que é correto para sua função (botões de link reais para a, lista para passos, definições para preços, figure para imagens, q para citações inline, blockquote para citações em bloco, etc.) Eu sei que você difere de um desenvolvedor humano: você não usará <p> para tudo ou esquecer a semântica de formulário. A página é navegável e legível sem CSS ou JavaScript.
6. O arranjo de conteúdo em cada seção: o conteúdo de cada seção preenche o espaço que seu blueprint define, sem sobra vazia e sem transbordamento. Adicione um contêiner de largura fixa para o conteúdo de cada seção se o blueprint pedir um (com sua página de margem implícita), ou deixe-o fluir na largura total se pedir.
7. A única coisa ao vivo. Construa-a como HTML/JS inline, embrulhada em <script type="module">. A página funciona sem ela.

Não estilize antes que todo o conteúdo esteja no lugar.

7. Estilize-o

Depois que o conteúdo estiver completo e geometricamente correto, aplique estilo para corresponder ao blueprint: cor, tipo, espaçamento, alinhamento. Use tokens CSS para ambos:

:root {
  --color-ground: <cor>;
  --color-ink: <cor>;
  --color-accent: <cor>;
  --color-field: <cor>;
  --font-heading: <família de fontes>;
  --font-body: <família de fontes>;
  --font-mono: <família de fontes>;
}

O blueprint da direção pode definir detalhes adicionais; adicione-os sob a mesma estrutura. A página nunca usa nenhuma cor, fonte, raio de borda, sombra ou regra que não esteja em um token.

8. Inspecione

O nó scripts/inspect.mjs abre a página em um navegador real com um viewport preciso e relata o que realmente está lá, não o que você espera:

node <skill>/scripts/inspect.mjs <url> [--viewport 1440 | 768 | 375] [--ruleset direction] [--json]

Executa verificações:

• Alinhamento vertical: cabeçalhos e conteúdo centralizados são evitados a menos que estritamente exigidos pelo blueprint. Se qualquer elemento de nível de bloco tiver text-align: center e não for o herói ou um slot especificamente definido como centralizado, é sinalizado.
• Ritmo: espaçamento vertical consistente entre as seções (padrão clamp(2rem, 4vw, 4rem)), sem lacunas ou compressões inesperadas.
• Hierarquia: apenas um <h1>, níveis de cabeçalho sequenciais, espaço para conteúdo abaixo de cada um.
• Cores: verifica se --color-ground e --color-ink são usados para fundo e texto, e que nenhuma cor mágica aparece.
• Contraste de fundo do herói: o fundo do herói deve estar dentro de uma faixa de contraste aceitável (0,8–1,0 de luminância relativa) para evitar que pareça cinza ou sujo.
• Comprimento da linha de texto: parágrafos com mais de 75 caracteres por linha são sinalizados.
• Apenas links reais: sinaliza qualquer rótulo não-ancorado que pareça um link (cor, sublinhado).

Use --ruleset direction para verificar se as propriedades CSS reais correspondem à folha de direção distribuída (tamanhos de tipo, pesos de fonte, cores, proporções de layout).

Corrija quaisquer sinalizações antes de prosseguir.

9. Adicione movimento (opcional)

Se a direção exigir, adicione movimento mínimo que realce a ideia: transition de CSS para hover e foco, uma animação de scroll que lentamente move o herói (não mais rápida que 5 segundos), mudanças sutis de cor em interação. Sempre acionado por uma ação do usuário ou visibilidade de scroll, nunca autoplay. A página é finalizada e legível sem ele.

10. Capture e avalie

node <skill>/scripts/screenshot.mjs <url> --width 1440,768,375 --dir .taste-skill

Isso salva capturas de tela em .taste-skill/. Em seguida, avalie cada uma contra esta rubrica, escrevendo seu veredito em .taste-skill/review.md:

Critério	Nota (0–3)	Notas
O herói tem um elemento grande e inconfundível (uma palavra enorme, uma cor de campo, uma imagem que ocupa a tela)
A primeira tela responde à pergunta principal do visitante
A ideia (não a composição) é visível em cada seção, incluindo preços/FAQ/rodapé
A paleta corresponde ao assunto (não uma paleta genérica de categoria)
A tipografia é dimensionada com confiança (cabeçalhos com pelo menos 4–6% da largura do viewport no mínimo)
Nenhuma seção parece vazia ou com apenas um parágrafo
Nenhuma regra decorativa, gradiente ou sombra desnecessária
Nenhum ícone a menos que o blueprint o exija
Nenhuma seção de logotipos falsos
A página funciona sem JavaScript
A página parece pertencer a este assunto, não a qualquer negócio de sua categoria
Pontuação total	/33

Se a pontuação total estiver abaixo de 24, ou qualquer critério estiver em 0, revise. A página não está finalizada até que sua pontuação esteja em 27+ com nenhum critério abaixo de 2. Escreva uma lista de correções, corrija, re-inspecione, re-capture, re-avalie. Repita até que a pontuação seja aprovada.