prompt-para-cena-visual-threejs

Prompt para cena visual emblemática (Three.js / WebGL)

Este skill transforma uma visão vaga em um prompt no nível dos exemplos de calibração em references/examples.md. A força de tal prompt vem de algo diferente do comprimento: cada decisão que o modelo tomaria por padrão, e tomaria de forma mediana, já está tomada: forma, quadro de abertura, ideia única, mecânica heroica, paleta e lei de renderização, ritmo, critérios de aceitação, o que pode ser sacrificado pelo desempenho e o que nunca é.

Arquivos de referência: quando ler

• references/forms.md: sempre, assim que a forma for definida. Cada forma tem seu próprio esqueleto de seção.
• references/anatomy.md: sempre antes de escrever. Os blocos compartilhados por todo prompt e os limites de cada nível (micro / mid / max / spec).
• references/patterns.md: módulos opcionais (batidas, âncoras de continuidade, acoplamento de sistemas, estado diegético, teste de especialista, lentes de câmera, calibração de tom, higiene de implementação, fórmulas de fechamento). Leia quando escolher módulos nas rodadas 3-4.
• references/realism.md: sempre após a rodada 0. O orçamento de realismo: o que funciona e o que desmorona em cada nível, variantes de boilerplate, alavancas que elevam o teto, avisos honestos para o usuário.
• references/archetypes.md: arquétipos de tópicos, um catálogo de reviravoltas, estratégias de abertura, a paleta de técnicas.
• references/examples.md: prompts de calibração, um ou dois por forma. Leia apenas o(s) exemplo(s) que correspondem à forma e nível escolhidos. Não copie conteúdo deles.

Como conduzir a conversa

Regra geral: o usuário tem a visão, você tem o conhecimento. Não pergunte sobre o que você já sabe (uma paleta de Monet, nomes de instrumentos em um Cessna, tipos de projéteis pirotécnicos). Proponha respostas concretas e pergunte se elas servem. A cada rodada: resuma o que está definido em poucas palavras, proponha decisões padrão e faça 1-3 perguntas sobre o que você realmente não sabe. Para escolhas fechadas, use uma ferramenta com opções clicáveis, se disponível.

"Continue / escolha você mesmo" = aceite suas próprias propostas. Pule rodadas que o usuário já respondeu. Objetivo: 2-5 trocas antes de um rascunho, não um interrogatório. Se a primeira mensagem for rica, mescle as rodadas 0-2 em uma só.

Rodada 0: Forma e nível

• Forma (detalhes em forms.md): mundo explorável / filme linear / página ou UI dominada / brinquedo-playground / instrumento material / simulador / processo ao longo do tempo (scrubber) / show em loop / minigame / especificação técnica. Formas podem ser combinadas (por exemplo filme + UI dominada); então uma delas é a forma principal.
• Orçamento de realismo (detalhes em realism.md): estilizado (fidelidade a uma linguagem visual: pintura, impressão, fotografia, arte linear), físico (fenômenos computados a partir de primeiros princípios: óptica, mecânica, ondas, órbitas) ou fotográfico (deve parecer gravação da realidade). Quando o usuário quer fotográfico, também pergunte sobre o contrato de produção: o modelo pode usar assets externos (HDRI, texturas PBR escaneadas, modelos glTF, imagens geradas), WebGPU é permitido, e é um projeto único em um único arquivo ou um projeto iterativo no Claude Code com quadros de referência e um loop de correção. Se a visão contém coisas que desmoronam proceduralmente (pessoas, rostos, animais, tecidos, pelos de perto), diga isso claramente e proponha uma das opções: aumentar o orçamento, mudar para estilização ou esconder o ponto fraco (silhueta, movimento, escuridão, granulação, distância).
• Nível: micro (~80-150 palavras, um objetivo, jogável imediatamente), mid (~350-550, uma interação, seções curtas), max (~1100-1900, anatomia completa), spec (formato de engenharia com requisitos e guardrails, para quando o risco é técnico em vez de estético). Padrão é max, mas proponha um nível mais baixo quando a visão for simples.

Rodada 1: Âncora, reviravolta, ideia central

• Âncora: o que o espectador reconhece imediatamente e por quê (uma pintura que todos viram; a página que leram um segundo atrás; a imagem de uma besta cuspidora de fogo que todo leitor carrega na cabeça).
• Estratégia de abertura: âncora → reviravolta (segure um quadro reconhecível, o primeiro movimento revela a reviravolta) ou pico primeiro (abra diretamente na imagem de pico, "já X"). Proponha 2-3 reviravoltas se o usuário não tiver nenhuma.
• Ideia central: uma frase em torno da qual tudo gira (por exemplo "um porto feito inteiramente de lanternas de papel, e um sino de maré que as acende em uma onda"). Sem ela, o prompt se espalha.

Rodada 2: Lei de estilo e legibilidade

Proponha estas você mesmo e deixe o usuário corrigi-las: a composição exata do primeiro quadro (elementos, quantidades, posições), uma paleta em cores nomeadas, a lei de renderização, 3-4 antipadrões ("Não construa..."), e uma regra de legibilidade (cada camada se lê rapidamente; para um clima escuro: escuro, mas nunca turvo). Opcionalmente, um amplificador de contraste (por exemplo, beleza que faz a destruição doer).

Rodada 3: Herói, mecânica, estado

• Material / objeto herói e seus estados; a unidade de densidade ("bilhão [unidades]") e a técnica.
• Controle herói / mecânica herói: uma interação nomeada diretamente como a heroína (controle deslizante de tempo, retroceder, botão de gatilho, andar, pincel). Em formas lineares: a linha do tempo e suas batidas.
• Estado diegético: qual estado o espectador lê do mundo em vez da interface (por exemplo "o feixe do farol É o medidor").
• Cena tese: uma cena que resume a peça inteira.

Rodada 4: Movimento, tempo, módulos

Ritmo e sua justificativa dentro do mundo, a doutrina de movimento (pelo menos 5 sistemas independentes), um ciclo ou sequência com um clímax. Escolha módulos de patterns.md que se encaixam no tópico: proponha-os, não pergunte sobre cada um separadamente.

Rodada 5: Interação, câmera, desempenho, tom

Modos de câmera (incluindo lentes de renderização), predefinições ou uma lista de tomadas, 1 controle herói + 2-3 controles + modo foto (ou menos), a lista de itens obrigatórios para o seletor de qualidade, calibração de tom para tópicos difíceis, proibições de aumento de escopo. Idioma do prompt: inglês por padrão.

Escrevendo o prompt

1. Esqueleto: os blocos compartilhados de anatomy.md + as seções da forma de forms.md + os módulos escolhidos de patterns.md. Os cabeçalhos #### nomeiam a ideia, não apenas o tópico ("REBOBINAR - A FUNÇÃO HERÓI", "O FAROL - A TEMPESTADE QUE VOCÊ INVOCUOU").
2. Modo imperativo, denso, concreto. Cada ponto é uma decisão. Números, nomes e a taxonomia do domínio em vez de adjetivos.
3. Boilerplate técnico sempre, na variante escolhida para o orçamento de realismo e o contrato de produção (realism.md): one-shot sem assets, one-shot com assets, ou projeto iterativo. Sempre DPR ≤ 2 e uma taxa de quadros-alvo declarada em um laptop comum atual, em suas próprias palavras.
4. Níveis max e spec terminam com um parágrafo barra de aceitação (critérios de aceitação) antes da linha "Em uma frase". Mid recebe uma versão de uma frase.
5. Execute a lista de verificação, corrija, e só então entregue. Entregue o prompt em um bloco de código ou como um arquivo .md se for longo ou o usuário preferir um arquivo. Abaixo dele, 2-3 frases sobre as decisões que você tomou para o usuário; variantes em uma frase.

Lista de verificação antes de entregar

Comum:

• Primeira frase: forma + nível de ambição + uma imagem herói com 4-6 especificidades.
• "Não construa ..." (3-4 antipadrões) e uma reformulação "Construa ..."; uma linha "Ideia central:" (obrigatório em micro/mid, pode ser incorporado na reformulação em max).
• Parágrafo de densidade: "bilhão [unidades] ... Alcance isso com [técnica], não [alternativa barata]".
• Primeiro quadro corresponde à estratégia de abertura; "Sem título, menu, tela de carregamento ou texto de instrução"; affordance sem tutorial se houver interação.
• Regra de legibilidade declarada diretamente (à primeira vista + sob inspeção; escuro ≠ turvo).
• Controle / mecânica herói nomeado como o herói, com requisitos rigorosos (suavidade, bidirecionalidade, pré-computação).
• Pelo menos 5 sistemas de movimento independentes; teste de quadro congelado.
• "De perto ainda se sustenta" + silhuetas legíveis à distância.
• Cada recurso mencionado é visível, em movimento ou visualizável; remova aqueles que não podem ser mostrados.
• Proibições de aumento de escopo (o que não adicionar).
• Calibração de tom, se o tópico for sombrio, violento ou historicamente doloroso.
• Desempenho: técnica por tipo de elemento, LOD, lista de itens obrigatórios ("... nunca é trocado"), higiene (pausa fora da tela, descarte, sem explosão de memória).
• Barra de aceitação (max/spec) e uma linha "Em uma frase: ..." .
• O orçamento de realismo é nomeado no prompt em uma frase ("realismo aqui significa..."), o boilerplate corresponde ao contrato de produção, e a barra de aceitação inclui um critério de realismo de realism.md.
• Nenhum quadro-chave depende de algo que desmorona no orçamento dado; ou o ponto fraco está escondido (silhueta, distância, movimento, luz) ou o orçamento foi aumentado.
• As seções exigidas pela forma (forms.md) estão presentes.
• Comprimento dentro da faixa do nível; se muito longo, corte repetições, não decisões.

Limites

• A redação das frases de exemplo nos arquivos de referência e em examples.md nunca entra no prompt como está. Pegue a estrutura e as decisões, e escreva cada frase com suas próprias palavras, incluindo fórmulas técnicas e o parágrafo de aceitação.

• Obras em domínio público são permitidas. Para obras protegidas, personagens, monstros ou marcas conhecidos (incluindo de jogos e filmes), proponha um design original "no espírito de" e descreva-o através de suas próprias características, sem elementos reconhecíveis do original.

• O prompt deve ser viável em um navegador. Coisas irrealistas em WebGL (simulação de fluido completa, física global de milhões de corpos) são traduzidas em um truque que dá a mesma impressão (uma bolha de simulação local, um shader, instanciação, malhas de morfismo acionadas), e o prompt nomeia esse truque.