tasteskill v2

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

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

1. Um script apresenta as direções, você escolhe entre elas. Ao ser solicitado a inventar um visual, um modelo escolhe o padrão da categoria todas as vezes. scripts/draw.mjs apresenta três de vinte direções pesquisadas; você escolhe aquela que carrega a ideia do assunto, e o script então apresenta seu sistema de tipos, paleta, composições de herói e seção 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 retirado da própria coisa, não do estilo.
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 esperadas.
4. Você olha o que fez. Capturas de tela em três larguras, uma grade de jurado, corrija, olhe novamente.

Um aviso aprendido em testes. Remover os ornamentos é apenas metade do trabalho; uma página que perdeu seus rótulos, linhas e cartões e não ganhou nada em seu lugar parece fina, e jurados cegos preferem corretamente uma página mais rica com pistas em vez de uma página vazia sem elas. 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 é construída para lhe dar isso; não a troque 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 fiquem em .taste-skill/ lá. Os scripts precisam do Node 22+ e de um Chrome, Edge ou Chromium instalado, e não instalam nada. assets.mjs também precisa de acesso à rede; ele não usa chaves de API.

A execução

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

1. Leia o resumo 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 pilha, qualquer marca existente (cores, fontes, logotipo) e, acima de tudo, quais imagens realmente existem: as próprias fotografias ou fotos de produtos do projeto, 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, a rua, os materiais e a história estão em arquivos abertos e museus, livres para usar com crédito (etapa 6, scripts/assets.mjs).

Se a solicitação for vaga, 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 seu nome e o que o nome significa; seu endereço, número da porta, rua e bairro, e como é esse lugar (seus azulejos, letreiros, cores de tinta, tipografias nas fachadas de suas lojas, sua luz, seu clima); os números no resumo (assentos, 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, 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, um letreiro). Esta lista é de onde vem a ideia na etapa 4. Em testes cegos, a página que venceu cada resumo foi construída a partir de um item em tal lista (o nome do cliente e o que ele 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 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 suas provas, uma linha por seção, da maneira que references/copy.md §1 mostra. 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, chamada para ação.

3. Desenhe a direção

node <skill>/scripts/draw.mjs --sector <sector> --brief "<one line about the subject>" \

…