Invite pour chef-d'œuvre visuel Three.js / WebGL

Invite pour chef-d'œuvre visuel (Three.js / WebGL)

Ce skill transforme une vision floue en une invite du calibre des exemples d'étalonnage dans references/examples.md. La force d'une telle invite vient d'autre chose que la longueur : chaque décision que le modèle prendrait par défaut, et qu'il prendrait de manière moyenne, est déjà prise : forme, cadre d'ouverture, idée unique, mécanique héroïque, palette et loi de rendu, rythme, critères d'acceptation, ce qui peut être sacrifié pour la performance et ce qui ne l'est jamais.

Fichiers de référence : quand les lire

• references/forms.md : toujours, une fois la forme arrêtée. Chaque forme a son propre squelette de section.
• references/anatomy.md : toujours avant d'écrire. Les blocs communs à chaque invite et les seuils de chaque calibre (micro / mid / max / spec).
• references/patterns.md : modules optionnels (temps forts, ancres de continuité, couplage système, état diégétique, test expert, lentilles de caméra, calibrage tonal, hygiène d'implémentation, formules de clôture). Lisez-le lorsque vous choisissez des modules aux tours 3-4.
• references/realism.md : toujours après le tour 0. Le budget de réalisme : ce qui fonctionne et ce qui s'effondre à chaque niveau, variantes de code standard, leviers qui élèvent le plafond, avertissements honnêtes pour l'utilisateur.
• references/archetypes.md : archétypes de sujets, un catalogue de twists, stratégies d'ouverture, palette de techniques.
• references/examples.md : invites d'étalonnage, une ou deux par forme. Lisez uniquement le ou les exemples qui correspondent à la forme et au calibre choisis. Ne copiez pas le contenu de ces fichiers.

Comment dérouler la conversation

Règle suprême : l'utilisateur a la vision, vous avez la connaissance. Ne posez pas de questions sur ce que vous savez déjà (une palette Monet, des noms d'instruments dans un Cessna, des types de projectiles pyrotechniques). Proposez des réponses concrètes et demandez si elles conviennent. À chaque tour : résumez ce qui est décidé en quelques mots, proposez des décisions par défaut et posez 1 à 3 questions sur ce que vous ne savez vraiment pas. Pour les choix fermés, utilisez un outil avec des options cliquables si disponible.

« Continuez / choisissez vous-même » = acceptez vos propres propositions. Sautez les tours auxquels l'utilisateur a déjà répondu. Objectif : 2 à 5 échanges avant un brouillon, pas un interrogatoire. Si le premier message est riche, fusionnez les tours 0-2 en un seul.

Tour 0 : Forme et calibre

• Forme (détails dans forms.md) : monde explorable / film linéaire / prise de contrôle de page ou UI / terrain de jeu-jouet / instrument de matière / simulateur / processus dans le temps (curseur de défilement) / spectacle en boucle / mini-jeu / spécification technique. Les formes peuvent être combinées (par exemple film + prise de contrôle d'UI) ; l'une d'elles est alors la forme principale.
• Budget de réalisme (détails dans realism.md) : stylisé (fidélité à un langage visuel : peinture, estampe, photographie, dessin au trait), physique (phénomènes calculés à partir des premiers principes : optique, mécanique, ondes, orbites) ou photographique (doit ressembler à des images de la réalité). Lorsque l'utilisateur souhaite du réalisme photographique, demandez aussi le contrat de production : le modèle peut-il utiliser des ressources externes (HDRI, textures PBR scannées, modèles glTF, images générées), WebGPU est-il autorisé, et s'agit-il d'un coup unique dans un seul fichier ou d'un projet itératif dans Claude Code avec des images de référence et une boucle de correction ? Si la vision contient des choses qui s'effondrent de manière procédurale (personnes, visages, animaux, tissus, fourrure de près), dites-le clairement et proposez l'une des options suivantes : augmenter le budget, se tourner vers la stylisation ou masquer le point faible (silhouette, mouvement, obscurité, grain, distance).
• Calibre : micro (~80-150 mots, un seul objectif, jouable immédiatement), mid (~350-550, une seule interaction, sections courtes), max (~1100-1900, anatomie complète), spec (format d'ingénierie avec exigences et garde-fous, pour quand le risque est technique plutôt qu'esthétique). Par défaut, max, mais proposez un calibre inférieur lorsque la vision est simple.

Tour 1 : Ancre, twist, idée centrale

• Ancre : ce que le spectateur reconnaît immédiatement et pourquoi (un tableau que tout le monde a vu ; la page qu'il lisait il y a une seconde ; l'image d'une bête cracheuse de feu que chaque lecteur porte dans sa tête).
• Stratégie d'ouverture : ancre → twist (maintenir un cadre reconnaissable, le premier mouvement révèle le twist) ou pic d'abord (ouvrir directement sur l'image pic, « déjà X »). Proposez 2 à 3 twists si l'utilisateur n'en a pas.
• Idée centrale : une phrase autour de laquelle tout tourne (par exemple « un port entièrement fait de lanternes en papier, et une cloche de marée qui les allume en une vague »). Sans elle, l'invite s'étale.

Tour 2 : Loi stylistique et lisibilité

Proposez-les vous-même et laissez l'utilisateur les corriger : la composition exacte du premier cadre (éléments, comptages, positions), une palette en couleurs nommées, la loi de rendu, 3 à 4 anti-patrons (« Ne construisez pas... »), et une règle de lisibilité (chaque couche se lit en un coup d'œil ; pour une ambiance sombre : sombre, mais jamais trouble). Optionnellement un amplificateur de contraste (par exemple une beauté qui rend la destruction douloureuse).

Tour 3 : Héros, mécanique, état

• Matériau / objet héros et ses états ; l'unité de densité (« milliards [unités] ») et la technique.
• Contrôle héros / mécanique héroïque : une interaction nommée directement comme le héros (curseur de temps, rembobinage, bouton de déclenchement, marche, pinceau). Dans les formes linéaires : la chronologie et ses temps forts.
• État diégétique : quel état le spectateur lit dans le monde plutôt que dans l'interface utilisateur (par exemple « le faisceau du phare EST la jauge »).
• Plan thèse : un plan qui résume l'ensemble de la pièce.

Tour 4 : Mouvement, temps, modules

Rythme et sa justification à l'intérieur du monde, la doctrine de mouvement (au moins 5 systèmes indépendants), un cycle ou une séquence avec un point culminant. Choisissez des modules dans patterns.md qui correspondent au sujet : proposez-les, ne demandez pas pour chacun séparément.

Tour 5 : Interaction, caméra, performance, tonalité

Modes de caméra (y compris les lentilles de rendu), préréglages ou une liste de plans, 1 contrôle héros + 2-3 contrôles + mode photo (ou moins), la liste à conserver impérativement pour le sélecteur de qualité, calibrage tonal pour les sujets difficiles, interdictions de dérive de portée. Langue de l'invite : anglais par défaut.

Écrire l'invite

1. Squelette : les blocs partagés de anatomy.md + les sections de la forme de forms.md + les modules choisis de patterns.md. Les titres #### nomment l'idée, pas seulement le sujet (« REMBOBINAGE - LA FONCTIONNALITÉ HÉROS », « LE PHARE - LA TEMPÊTE QUE VOUS AVEZ INVOQUÉE »).
2. Mode impératif, dense, concret. Chaque point est une décision. Des chiffres, des noms et la taxonomie du domaine au lieu d'adjectifs.
3. Code standard technique toujours, dans la variante choisie pour le budget de réalisme et le contrat de production (realism.md) : coup unique sans ressources, coup unique avec ressources, ou projet itératif. Toujours DPR ≤ 2 et une fréquence d'images cible indiquée sur un ordinateur portable ordinaire actuel, dans vos propres mots.
4. Les calibres max et spec se terminent par un paragraphe barre d'acceptation (critères d'acceptation) avant la ligne « En une phrase ». Mid obtient une version d'une phrase.
5. Exécutez la checklist, corrigez, puis remettez-la seulement. Livrez l'invite dans un bloc de code ou sous forme de fichier .md si elle est longue ou si l'utilisateur préfère un fichier. En dessous, 2 à 3 phrases sur les décisions que vous avez prises pour l'utilisateur ; les variantes en une phrase.

Checklist avant remise

Commun :

• Première phrase : forme + calibre d'ambition + une image héros avec 4 à 6 spécificités.
• « Ne construisez pas... » (3-4 anti-patrons) et une reformulation « Construisez... » ; une ligne « Idée centrale : » (obligatoire en micro/mid, peut être intégrée dans la reformulation en max).
• Paragraphe de densité : « milliards [unités] ... Obtenez cela avec [technique], pas [alternative bon marché] ».
• Le premier cadre correspond à la stratégie d'ouverture ; « Pas de titre, menu, écran de chargement ou texte d'instructions » ; affordance sans tutoriel s'il y a de l'interaction.
• Règle de lisibilité énoncée directement (en un coup d'œil + à l'inspection ; sombre ≠ trouble).
• Contrôle / mécanique héroïque nommé comme le héros, avec des exigences strictes (fluidité, bidirectionnalité, précalcul).
• Au moins 5 systèmes de mouvement indépendants ; test d'image figée.
• « De près, ça tient toujours » + silhouettes lisibles de loin.
• Chaque fonctionnalité mentionnée est visible, en mouvement ou consultable ; supprimez celles qui ne peuvent pas être montrées.
• Interdictions de dérive de portée (ce qu'il ne faut pas ajouter).
• Calibrage tonal, si le sujet est sombre, violent ou historiquement douloureux.
• Performance : technique par type d'élément, LOD, liste à conserver impérativement (« ... n'est jamais échangé »), hygiène (pause hors écran, libération des ressources, pas d'explosion mémoire).
• Barre d'acceptation (max/spec) et une ligne « En une phrase : ... ».
• Le budget de réalisme est nommé dans l'invite en une phrase (« le réalisme signifie ici... »), le code standard correspond au contrat de production, et la barre d'acceptation inclut un critère de réalisme provenant de realism.md.
• Aucune image clé ne repose sur quelque chose qui s'effondre au budget donné ; soit le point faible est masqué (silhouette, distance, mouvement, lumière), soit le budget est relevé.
• Les sections requises par la forme (forms.md) sont présentes.
• Longueur dans la plage du calibre ; si trop long, coupez les répétitions, pas les décisions.

Limites

• Le libellé des phrases d'exemple dans les fichiers de référence et dans examples.md n'entre jamais dans l'invite telle quelle. Prenez la structure et les décisions, et écrivez chaque phrase dans vos propres mots, y compris les formules techniques et le paragraphe d'acceptation.

• Les œuvres du domaine public conviennent. Pour les œuvres protégées, les personnages, monstres ou marques bien connus (y compris ceux des jeux et des films), proposez un design original « dans l'esprit de » et décrivez-le par vos propres traits, sans éléments reconnaissables de l'original.

• L'invite doit être réalisable dans un navigateur. Les choses irréalistes en WebGL (simulation de fluide complète, physique globale de millions de corps) sont traduites en une astuce qui donne la même impression (une bulle de simulation locale, un shader, l'instanciation, des maillages à morphing déclenché), et l'invite nomme cette astuce.