tasteskill v2 — Direção de Arte Anti-Slop

tasteskill v2

Uma página construída por um modelo normalmente parece 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 nela está errado e nada nela 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. Pedir para inventar um visual, um modelo escolhe o padrão da categoria toda vez. scripts/draw.mjs distribui três das 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 separava os melhores sites dos esquecíveis era um conceito extraído da própria coisa, não da estilização.
3. Um estilo de casa sem ornamentos, medido em um navegador real por scripts/inspect.mjs, para que as regras sejam verificadas em vez de 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 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 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 gráfico 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 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 a 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 do projeto ou fotos de produtos, uma interface real que pode ser mostrada, uma ferramenta de geração de imagens 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 e museus abertos, gratuitos para uso 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 faltante 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 como é esse lugar (seus azulejos, placas, cores de tinta, tipografias em suas fachadas de lojas, sua luz, seu clima); os números no briefing (lugares, quartos, minutos até o mar, o preço, o ano); a restrição com a qual ele vive (apenas um lote por mês, fechado no inverno, mediante agendamento); 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 onde 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 a argumentação

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 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. Sorteie a direção

node <skill>/scripts/draw.mjs --setor <setor> --brief "<uma linha sobre o assunto>" \
  --secoes <funções na ordem de sua argumentação> [--tom <tom>] [--ter <ativos>] [--manter paleta,tipo] \
  --opcoes 3

Isso distribui três direções e imprime um breve resumo de cada uma. Compare cada uma com 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ê. Nos 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 --opcoes> --direcao <id escolhido>

• --setor: node <skill>/scripts/draw.mjs --listar setores. Escolha o mais próximo.
• --secoes: funções de --listar funcoes (recursos, vitrine, como-funciona, depoimento, prova, estatísticas, preços, faq, cta, rodapé, intro, sobre, trabalho, galeria, lista, contato). O herói está implícito.
• --tom (opcional): quieto, ousado, caloroso, técnico, lúdico, luxo, editorial. Só passe quando o briefing pedir claramente um.
• --ter: ativos que realmente existem, separados por vírgula: fotografia (as próprias fotografias do projeto do lugar, pessoas ou trabalho), foto-produto (fotografias do produto específico, ou uma ferramenta de imagem que possa fazê-las), ui-produto (capturas de tela reais), ilustracao, video. Deixe de fora se não tiver nenhum: o sorteio então evita composições que dependem delas e a folha diz como precher 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 próprias do projeto; deixe-as de fora de --ter.
• --manter paleta,tipo: quando a marca já fixa cores ou tipos de letra. O sorteio então distribui apenas a composição, e você mapeia os valores da marca nas 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 desconhecida, bom: o layout familiar é aquele que esta habilidade existe para evitar.
• Redesenhe um espaço (--redesenhar heroi | tipo | paleta | fotos | secao:<funcao> | direcao) 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 dobre o conteúdo para caber. Liste as outras com --alternativas <funcao>, escolha aquela cujas suposições correspondem ao conteúdo, e pegue-a com --redesenhar secao:<funcao>=<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 entrarem em conflito com o material do próprio assunto (pastéis doces para um uísque de turfa, neon para uma cabana na montanha), redesenhe a paleta uma vez; se o assunto tem cores inconfundíveis próprias (seu material, a tinta de sua rua, a paisagem do lado de 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 --mostrar. 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 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 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 sua cópia como tiras de papel.)
• Seu objeto ou forma. Como ela é fisicamente, em corte transversal, em silhueta? Amplie-a, corte-a, torne-a 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. Há uma vista que faz alguém querer estar lá?
• Seu ritual. Há uma sequência que a página pode executar enquanto rola?
• Seu artefato. Que coisa impressa já existe em seu mundo: bilhete, cardápio, 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 a partir 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 desta. "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 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 texto de cópia (texto simples) antes da marcação, seguindo references/copy.md:

• Cada título cabe em duas linhas ou menos em cada largura. Faça a aritmética em copy.md §2 antes de se comprometer com uma frase: cerca de 32 caracteres é seguro em qualquer lugar 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 primária, nomeada pelo 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 no 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 para a 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 sua informação 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 quando o briefing deixa lacunas (nomes de pratos, nomes de quartos e tarifas, títulos de projetos) para que o design seja visto na 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-a, ainda

Construa a página com o movimento desligado em sua mente; uma página que precisa de animação para parecer acabada não está acabada. 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 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 herói, exatamente como o blueprint o descreve, em desktop e em largura de telefone. Coloque a coisa grande grande e as coisas pequenas pequenas antes de qualquer outra coisa existir.
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 "<consulta>" (Openverse, Wikimedia Commons, o 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 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 herói, uma gravura ampliada no motivo da página, o mapa real da rua como seção de contato. Olhe para cada uma antes de escolher; --pegar <ref> baixa-a em assets/ e registra sua fonte e licença, e --creditos 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. desenhada em HTML/CSS, usando as cores e formas do projeto.