tasteskill v2

O que tasteskill v2 faz?

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 sobre três linhas, uma pequena etiqueta acima, uma fileira de cartões com ícones, um gradiente suave, algumas linhas finas e uma legenda em monoespaço. 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. Ao pedir que um modelo invente um visual, ele 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 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. Capturas de tela em três larguras, uma rubrica de jurado, corrija, olhe novamente.

Um aviso aprendido nos testes. Remover os ornamentos é apenas metade do trabalho; uma página que perdeu suas etiquetas, regras e cartões e não ganhou nada em seu lugar parece esparsa, e jurados cegos preferem, com razão, uma página mais rica com marcas a uma página vazia sem elas. A outra metade é substância: tipo em tamanho 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 por contenção.

Nos comandos abaixo, <habilidade> é 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; ele não usa chaves de API.

A execução

Faça estes passos 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, qual imagem realmente existe: as próprias fotografias ou fotos de produtos do projeto, 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, rua, materiais e 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 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 de suas lojas, sua luz, seu clima); os números no briefing (assentos, quartos, minutos até 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, uma etiqueta, um ingresso, uma placa). Esta lista é de onde vem a ideia 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 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, conforme a seção §1 de references/copy.md. 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 <habilidade>/scripts/draw.mjs --sector <setor> --brief "<uma linha sobre o assunto>" \
  --sections <papéis na ordem do seu argumento> [--tone <tom>] [--have <ativos>] [--keep palette,type] \
  --options 3

Isso distribui três direções e imprime um resumo curto de cada uma. Compare cada uma com seu inventário: qual modo de compor pode carregar algo que só 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 <habilidade>/scripts/draw.mjs <os mesmos argumentos, sem --options> --direction <id escolhido>

• --sector: node <habilidade>/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 herói está implícito.
• --tone (opcional): quiet, bold, warm, technical, playful, luxury, editorial. Passe apenas quando o briefing pedir claramente 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 desenho então evita composições que dependam deles e a folha diz como preencher 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 --have.
• --keep palette,type: quando a marca já fixa cores ou tipos de letra. O desenho então distribui apenas a composição, e você mapeia os valores da marca nos papéis.

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 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 (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 <papel>, escolha aquele cujas suposições correspondem ao conteúdo, e assuma-o com --redraw section:<papel>=<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 turfoso, 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, e diga isso no relatório.
• Reimprima a qualquer momento com node <habilidade>/scripts/draw.mjs --show. Em uma sessão longa, releia antes de cada seção que construir.

4. Encontre a ideia

A direção é um modo 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 se parece fisicamente, em corte transversal, em silhueta? Amplie, recorte, torne-a o quadro ou o motivo único.
• 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. Qual 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 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 duas ruas depois, 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 que 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 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 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 deck de cópia (texto simples) antes da marcação, seguindo references/copy.md:

• Todo título cabe em duas linhas ou menos em todas as larguras. Faça a aritmética na seção §2 de copy.md 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 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 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 que o visitante veio buscar (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 sua informação 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 para uma página limpa perder para uma mais movimentada.
• Detalhes de exemplo são esperados onde o briefing deixa lacunas (nomes de pratos, nomes de quartos e tarifas, 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. <habilidade>/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 descreve, no desktop e na largura do telefone. Coloque a coisa grande grande e as coisas pequenas pequenas antes que qualquer outra coisa exista.
3. Cada seção 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, preços, FAQ e rodapé incluídos: 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 <habilidade>/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 comércio em gravuras, um objeto de museu do 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 antes de escolher; --get <ref> baixa para 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. desenhada pelo script com scripts/draw.mjs --draw-section <papel> ou gerada por um modelo de imagem, nunca uma fotografia de banco de imagens genérica: --have já exclui esse caminho.
5. A coisa viva (escrita na etapa 4) integrada à página, funcional em HTML/JS.
6. Cada seção de navegação interna: âncoras e links de navegação reais.
7. Seções de rodapé: créditos de imagem e tipo (a licença da folha de direção lista a fonte do tipo), um ano, e links reais.

7. Verifique o estilo

node <habilidade>/scripts/inspect.mjs

Isso abre cada URL em pages.txt em um navegador real, mede as regras na seção §3 de references/style.md e mostra falhas em vermelho. Corrija cada falha e verifique novamente. O inspetor não impõe gosto; impõe as regras que tornam uma página reconhecível como pertencente a este projeto.

Regras adicionais que o inspetor não verifica:

• Sem em. Nunca use em para qualquer coisa: nem para font-size (use rem), nem para padding, margin, width, height, border-radius, gap (use rem ou a unidade real). A única exceção: line-height: 1 (sem unidade) e letter-spacing e word-spacing (use em, as regras de CSS).
• Largura máxima de caractere. O corpo do texto nunca excede 65 caracteres por linha. Títulos nunca excedem 45 caracteres por linha.
• Sem rolagem horizontal. Nada causa overflow horizontal em qualquer largura de viewport acima de 320 px.
• Os botões são grandes. O alvo de toque mínimo para qualquer elemento interativo é 44 × 44 px.
• As entradas são legíveis. O tamanho da fonte do input nunca é menor que 16 px (para evitar o zoom do iOS em inputs pequenos).
• Nada de apenas emoji em uma interação.

8. Visualize o que você construiu

node <habilidade>/scripts/visualize.mjs

Isso faz capturas de tela em três larguras de viewport, em screenshots/. Em seguida, abra references/rubric.md e pontue cada critério para cada captura de tela. Anote suas pontuações. Qualquer critério com 0 ou 1 precisa de correção. Qualquer seção com conteúdo fino precisa de mais. Corrija e visualize novamente.

9. Adicione movimento, por último

Apenas depois que a página está completa estática, adicione movimento quando ele serve à compreensão ou à sensação do assunto. Movimento nunca preenche um vazio. Sempre pergunte: o que isso explica? A animação de um diagrama na seção how-it-works explica o fluxo. O brilho de um botão na noite explica que é o caminho para casa. O que não explica, remova.

Use os auxiliares de movimento em assets/base.css: data-motion como um atributo de gatilho de scroll, e um pequeno conjunto de classes de transição que respeitam prefers-reduced-motion. Movimento nunca repete, pulsa ou distrai. Transições de página são uma janela de 300 ms para o conteúdo aparecer, não um espetáculo.

10. Relatório

Escreva REPORT.md na raiz do projeto contendo:

• Uma linha do briefing
• A ideia (da etapa 4) e por que ela pertence a este assunto
• A direção escolhida e o porquê
• Qualquer redesenho, com o motivo
• Conteúdo de exemplo que precisa de confirmação do cliente
• A coisa viva e como funciona
• A maior mudança entre o primeiro rascunho e a versão final
• Pontuações da rubrica e as correções que elas exigiram
• Uma linha sobre o que ainda não está resolvido
• Uma linha de "você sabia" para o cliente (o fato surpreendente em que o design se baseia)

Scripts

Script	Uso
draw.mjs	Distribui e mostra direções.
inspect.mjs	Inspeciona o HTML em busca de violações de estilo.
visualize.mjs	Tira capturas de tela em três larguras.
assets.mjs	Pesquisa imagens de domínio público e licenciadas.

Execute qualquer script com --help para obter argumentos completos.