tasteskill v2 – Direção de Arte para Sites

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 título centralizado em 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 nela está errado e nada foi realmente decidido.

Esta skill substitui esses padrões por decisões, de quatro formas:

1. Um script distribui as direções, você escolhe entre elas. Ao pedir para inventar um visual, um modelo escolhe o padrão da categoria sempre. O scripts/draw.mjs distribui três das vinte direções pesquisadas; você escolhe aquela que carrega a ideia do tema, e o script então distribui seu sistema tipográfico, paleta, composições de hero e seções a partir de uma biblioteca destilada de 247 sites reais.
2. A ideia vem do tema. 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 visual sem ornamentos, medido em um navegador real pelo scripts/inspect.mjs, para que as regras sejam verificadas, não apenas desejadas.
4. Você olha para o que fez. Capturas de tela em três larguras, uma rubrica de jurado, corrige, olha novamente.

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

Nos comandos abaixo <skill> é a pasta desta skill. 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 instalados, e não instalam nada. assets.mjs também precisa de acesso à rede; não usa chaves de API.

A execução

Faça estas etapas 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 tema, 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 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 tema, a rua, os materiais e a história estão em arquivos e museus abertos, livres 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 do produto).

Em seguida, inventarie o tema 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 como esse lugar se parece (seus azulejos, placas, cores de tinta, tipografia nas fachadas das lojas, sua luz, seu clima); os números no briefing (assentos, 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 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 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 hero, logos, três recursos, depoimento, preços, call to action.

3. Desenhe a direção

node <skill>/scripts/draw.mjs --sector <setor> --brief "<uma linha sobre o tema>" \
  --sections <papéis na ordem do seu argumento> [--tone <tom>] [--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 composição 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ê. Nos testes, uma única direção aleatória que não se adequava ao tema era a causa mais comum de uma página fraca. Em seguida, distribua a ficha 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: papéis de --list roles (features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact). O hero 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 (fotografias próprias do projeto do local, pessoas ou trabalho), product-photo (fotografias do produto específico, ou uma ferramenta de imagem que possa criá-las), product-ui (capturas de tela reais), illustration, video. Deixe de fora se você não tiver nenhum: o draw então evita composições que dependem deles e a ficha diz como preencher slots 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á em coleções abertas não são do próprio projeto; deixe-as de 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 papéis.

O comando imprime uma ficha 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 skill existe para prevenir.
• Redesenhe um slot (--redraw hero | type | palette | photos | section:<papel> | 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á um preço; quer cinco citações e não há nenhuma), não force o conteúdo a se encaixar. Liste as outras com --alternatives <papel>, escolha aquela cujas suposições correspondem ao conteúdo e aceite-a com --redraw section:<papel>=<id>.
• Verifique a paleta em relação ao tema. 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 entrarem em conflito com o material próprio do tema (pastéis doces para um uísque turfoso, neon para uma cabana na montanha), redesenhe a paleta uma vez; se o tema 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 tema, 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 forma de compor. A ideia é o que faz a página pertencer a este tema e a nenhum outro. Escreva esta frase em suas anotações e não comece a construir até que ambos os espaços sejam preenchidos a partir do próprio tema:

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

Lugares para procurar o primeiro espaço em branco:

• Seu resultado. O que a coisa produz? Coloque o resultado real na página como material. (Uma câmera que imprime poemas entregou seu texto como tiras de papel.)
• Seu objeto ou forma. Qual é sua aparência física, 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 conforme rola?
• Seu artefato. Que coisa impressa já existe em seu mundo: bilhete, cardápio, 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 é de todas as padarias; as sete portas da rua em homenagem à qual esta se chama são apenas desta. "Limpo e moderno" não é uma ideia. Os sites que o painel do estudo classificou como mais baixos 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 gravado 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 ambiente. Em testes cegos, toda página vencedora tinha uma e os jurados a nomearam primeiro. Regras: usa o conteúdo real do tema, funciona em um telefone com o 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 texto (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 no copy.md §2 antes de se comprometer com uma frase: cerca de 32 caracteres é seguro em todos os lugares com um tamanho confiante. Os heroes da galeria estudada têm uma mediana de 5 palavras e 32 caracteres.
• Uma frase de apoio. Uma ação primária, 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 quanto custa ou faz. Para uma pessoa: quem e o que faz. Cada seção pela qual o visitante veio (a programação, o cardápio, 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 cardápio 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 taxas 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: sem clientes, citações, avaliações, imprensa, logotipos ou estatísticas 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 concluída não está concluída. Ordem de trabalho:

1. Tokens. Papéis de cor e tipo da ficha como propriedades personalizadas CSS. Tudo a jusante referencia apenas tokens. <skill>/assets/base.css é uma base neutra da qual você pode partir (reset, nomes de tokens, etapas de tipo fluido, grade, estilos de foco e seleção, os auxiliares de movimento); não tem aparência própria.

2. O hero, exatamente como o blueprint o descreve, no desktop e na largura do telefone. Coloque o grande grande e o pequeno pequeno 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 tema. 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. próprias do projeto;
   2. geradas, se você tiver uma ferramenta de imagem;
   3. imagens reais do mundo do tema a partir de coleções abertas, sempre que uma honesta existir. Pesquise-as com node <skill>/scripts/assets.mjs "<consulta>" (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 ofício em gravuras, um objeto de museu de seu tipo, uma prancha botânica, um mapa estelar. Use-as grandes e com intenção: uma fotografia de arquivo como o hero, 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 produto, ambiente, prato, pessoa ou equipe do próprio cliente;
   4. desenhadas em HTML puro (formas, padrões repetidos, letras ampliadas como blocos, campos inteiros de cor), quantas forem necessárias para preencher os slots quando uma imagem encontrada não existir. A ficha de direção diz qual slot chama por uma imagem desenhada. Nunca use espaço reservado de imagem genérico; uma página de design com espaço reservado é uma maquete, não um site.

5. Navegação. Um link para cada seção real. Nada de links de navegação para seções que não estão na página. Na largura do telefone: um menu de tela cheia que mostra o conteúdo real da página (as cores do tema, as imagens reais) em vez de uma sobreposição em branco; um botão de hambúrguer que é o único ornamento na página porque tem um trabalho. O menu de navegação no desktop e no telefone mostra qual seção está na tela.

7. Meça

node <skill>/scripts/inspect.mjs --url <local, staging ou produção> --out .taste-skill/

Isso abre a página em um navegador real, tira medidas e as compara com as regras da ficha de direção. O relatório de inspeção .taste-skill/inspect.md mostra o que corresponde e o que não corresponde.

Corrija até que cada medição corresponda ou até que o relatório mostre um desvio deliberado com seu motivo registrado no relatório. O inspetor verifica:

• Tipo: O tipo do corpo está no tamanho alvo (medido como font-size computado)? As proporções de escala estão corretas (título para corpo)? A altura da linha do título está no alvo? A largura máxima do texto está correta? A duração do título (caracteres) está dentro do limite?
• Paleta: Os tokens de cor na página correspondem aos valores alvo? A frequência de cada papel de cor (fundo, tinta, campo) corresponde às proporções alvo?
• Espaçamento: O preenchimento da página está dentro de 5 % do alvo? As margens da seção estão acima de um valor mínimo? O espaçamento de grade entre os itens está no alvo?
• Composição: As relações de proporção das seções (hero, features, etc.) estão no alvo?
• Navegação: Todos os links de navegação direcionam para ids de seção que existem? O menu está visível?
• Imagens: Todas as tags img têm um alt não vazio? Todas as imagens carregam com tamanho de arquivo aceitável?

Registre cada verificação de inspeção que acionou uma correção no relatório.

8. Avalie

Abra .taste-skill/report.md e escreva uma avaliação honesta seguindo o modelo de relatório, baseada exclusivamente nas capturas de tela. Não avalie a partir do código ou da inspeção em tempo real. O processo é:

1. Abra .taste-skill/screenshots/ e veja as três larguras lado a lado.
2. Escreva uma avaliação para cada critério na rubrica (impacto visual, hierarquia, adequação da ideia ao tema, clareza do conteúdo, qualidade da tipografia, integridade da paleta, adequação das imagens, capacidade de resposta) em uma escala de 0 a 10. Apenas pontuações.
3. Some a pontuação total.
4. Escreva o que você mudaria, e somente o que você mudará.

Critique como se não tivesse construído. Se uma seção parece vazia (título sem suporte, bloco de conteúdo fino, imagem que não adiciona informação), marque-a como uma falha. A rubrica penaliza conteúdo fino mais do que qualquer outra falha.

Com base na avaliação: A página passa ou não? Um 6/10 ou mais conta como aprovado em um briefing difícil; 7/10 ou mais em um briefing padrão; qualquer coisa abaixo disso requer revisão antes da entrega.

9. Mova

Quando o conteúdo estiver completo, a direção seguida e a página funcionando em três larguras, adicione exatamente uma transição para cada ação do visitante:

• Rolagem: um efeito de paralaxe ou de revelação em rolagem por seção, apenas para os elementos que fazem parte da ideia (a mesma coisa que torna a página única).
• Hover: um efeito em links e botões, consistente em toda a página.
• Transições de página: uma transição de carregamento para a primeira cor de fundo aparecer; nenhuma animação de carregamento ou spinner.

A transição nunca é a parte principal da página. Se a página não funcionar sem uma animação específica, a página não está completa.

10. Relatório

Escreva .taste-skill/report.md se ainda não o fez. Inclua:

• O briefing e a interpretação (etapa 1).
• O inventário (etapa 1).
• A ficha de direção (etapa 3).
• A ideia e a única coisa viva (etapa 4).
• O deck de texto completo (etapa 5).
• A ordem de construção e qualquer decisão sobre tokens, hero, seções e imagens (etapa 6).
• Resultados da inspeção e quaisquer desvios listados (etapa 7).
• A avaliação com pontuações e notas (etapa 8).
• Qualquer redesenho com o motivo registrado (etapa 3).
• Uma lista de detalhes de amostra para o cliente confirmar (nomes de pratos, taxas de quartos, nomes de projetos).
• Atribuições de imagem e licenças.
• Uma captura de tela mostrando a página em cada uma das três larguras (telefone, tablet, desktop).

O relatório não é opcional. É a prova de que a página foi projetada, não gerada.

Referências

• references/copy.md – guia de estrutura de texto e regras de duração de título
• references/ideal-works.md – sete trabalhos ideais estudados para cada seção
• assets/base.css – base neutra CSS
• scripts/draw.mjs – distribui direções de design
• scripts/inspect.mjs – verifica regras visuais em navegador real
• scripts/assets.mjs – pesquisa imagens de arquivo em coleções abertas
• .taste-skill/report.md – modelo de relatório
• .taste-skill/screenshots/ – capturas de tela em três larguras

Instalação e dependências

• Node.js 22+
• Chrome, Edge ou Chromium instalado (para inspeção)
• Nenhum pacote npm é instalado; os scripts são independentes
• Acesso à internet para pesquisa de imagens em coleções abertas
• Sistema operacional: macOS, Linux ou Windows (com suporte a shell)

Comandos úteis

# Listar setores disponíveis
node <skill>/scripts/draw.mjs --list sectors

# Listar papéis de seção disponíveis
node <skill>/scripts/draw.mjs --list roles

# Reimprimir a ficha de direção atual
node <skill>/scripts/draw.mjs --show

# Pesquisar imagens de arquivo
node <skill>/scripts/assets.mjs "consulta"

# Baixar uma imagem de referência
node <skill>/scripts/assets.mjs --get <ref>

# Mostrar créditos de imagem
node <skill>/scripts/assets.mjs --credits

# Inspecionar página
node <skill>/scripts/inspect.mjs --url <url> --out .taste-skill/