Que fait 3D Studio ?
Exécute un ensemble de compétences 3D web en un seul workflow. La requête se trouve dans $ARGUMENTS. Si votre agent a laissé cet espace réservé non renseigné, la requête est ce que l'utilisateur a écrit avec cette compétence.
1. Choisir les compétences
Chacune de celles-ci est une compétence distincte. Chargez-la comme votre agent charge les compétences, sous exactement le nom indiqué : l'outil Skill dans Claude Code, ou en lisant son SKILL.md dans Codex et Antigravity. Ses instructions s'appliquent alors en parallèle de ce workflow. La section 4 liste où trouver les dossiers.
Chargez toujours ces trois-là : taste-skill (direction artistique ; elle peut être installée sous le nom design-taste-frontend), apple-design (mouvement physique fluide, matériaux et profondeur), threejs-fundamentals (scène, caméra, rendu, boucle).
Ajoutez une ligne lorsque la requête le nécessite :
| La requête implique | Charger |
|---|---|
| Tout ce qui bouge | animate, threejs-animation |
| Formes construites en code, instancing, nombreux objets | threejs-geometry |
| Surfaces, bois, métal, brillance | threejs-materials, threejs-textures |
| Éclairage, ombres, réflexions | threejs-lighting |
| Clics, glissements, orbite, sélection de parties | threejs-interaction |
| Effets visuels personnalisés | threejs-shaders, threejs-postprocessing |
| Chargement ou compression de fichiers de modèles 3D | threejs-loaders, threejs-asset-pipeline |
| Modélisation ou exportation depuis Blender | blender-mcp (vérifiez d'abord que Blender est installé) |
| Un projet React | threejs-react-three-fiber, r3f-fundamentals |
| Lenteur, saccades, toile blanche, mémoire | threejs-performance, threejs-debug-profiler |
| Figures isométriques, diagrammes ou explications montrant le fonctionnement de quelque chose, ou une affiche A4 imprimée de l'un d'eux | anatomy |
| Un film ou une vidéo rendu | Remotion, voir section 3 |
Ensemble, ces compétences représentent des milliers de lignes, et les charger toutes consomme la mémoire de travail dont la construction a besoin. C'est pourquoi le tableau est la valeur par défaut.
- Avec
--all, chargez chaque compétence du tableau quelle que soit la requête. - Avec
--plan, listez les compétences que vous chargeriez et pourquoi, ne chargez rien de plus, et arrêtez-vous.
Dites en une ligne quelles compétences vous chargez. Si une compétence ne se charge pas, nommez-la et continuez avec les autres plutôt que de vous arrêter.
Chargez chaque compétence au moment où ce workflow en a besoin. Si une compétence commence par une étape de configuration, ou demande une salutation qui interromprait le travail, sautez cette partie.
2. Travailler dans cet ordre
- Décidez de l'idée. Suivez
taste-skillpour la direction artistique : lisez le brief, dessinez une direction, écrivez le texte. L'idée doit venir du sujet. - Gardez la logique hors de la 3D. Tout ce qui a des règles réelles (arithmétique, simulation, tarification) va dans des modules simples sans Three.js, couverts par des tests, afin de pouvoir être fiable sans rien rendre.
- Construisez la 3D en fonction de l'état. Le code géométrique place les parties à partir d'une pose et ne connaît rien des règles. Un mouvement doit être une fonction pure de sa progression, afin de pouvoir s'exécuter en arrière, être inversé à mi-chemin, ou sauter à la fin pour un mouvement réduit.
- Rendre à la demande. Dessinez seulement quand quelque chose a bougé, et pas du tout hors écran, afin qu'une page inactive ne coûte rien et qu'un téléphone reste au frais.
- Rendez-le pleinement utilisable. Il faut de vrais boutons à côté du canvas, une utilisation au clavier, un mouvement réduit, un repli sans WebGL, et une mise en page qui fonctionne à la largeur d'un téléphone.
3. Remotion
Aucune compétence Remotion ne fait partie de cet ensemble, utilisez donc le paquet remotion directement dans le projet.
- Rendez en important le même code de construction de scène que celui utilisé par le site, afin que le film et le site ne puissent pas dévier.
- Chaque image doit être une fonction pure du numéro d'image. N'utilisez pas de minuteries ou de ressorts qui dépendent des images précédentes.
- Rendez avec
remotion render <entrée> <composition> <sortie.mp4> --gl=angle --codec=h264 --crf=24. - Une scène modifiée ne change pas un film déjà rendu. Re-rendez-le, ou dites à l'utilisateur qu'il est obsolète.
4. Vérifiez avant de déclarer terminé
Les vérifications utilisent des scripts dans deux des compétences. Trouvez le dossier de chaque compétence en cherchant son nom, dans cet ordre, dans .claude/skills/ et .agents/skills/ du projet, puis ~/.claude/skills/, ~/.agents/skills/ et ~/.gemini/config/skills/. Ci-dessous, <anatomy> et <taste> représentent ces dossiers. <taste> est nommé soit taste-skill soit design-taste-frontend.
Utilisez node <anatomy>/scripts/drive.mjs <url> --actions steps.json pour piloter un vrai navigateur avec de vrais clics et glissements. Les deux scripts nécessitent Node 22 ou ultérieur et un Chrome, Edge ou Chromium installé.
- Les images fixes et les flux sont des exécutions séparées. Une action
shotpeut figer l'animation jusqu'à la prochaine capture. Prenez des images fixes avec--reduced, qui saute à l'état final, et testez les flux animés avec des vérificationsevalet sans captures d'écran au milieu de l'exécution. Si une image sort vide ou obsolète, reprenez-la avant de la traiter comme un bug. - Testez les vrais contrôles. Préférez cliquer sur les boutons réels plutôt que de définir l'état directement, et incluez l'inversion et l'interruption en milieu d'animation.
- Vérifiez le design. Exécutez
node <taste>/scripts/inspect.mjs <url> --widths 1440,390, puis regardez les captures d'écran vous-même. Passer l'inspecteur est le minimum, pas la note. - Exécutez les tests et lisez la console. Ensuite, répétez le flux principal sur la version de production, pas seulement sur le serveur de développement.
Signalez ce qui a été vérifié et, clairement, ce qui ne l'a pas été : les vrais appareils, le son et le mouvement vu à pleine vitesse sont généralement hors de portée ici.
5. Installer quelque chose de nouveau
Si une compétence du tableau manque, l'utilisateur peut installer l'ensemble complet avec npx github:mithulpranav24012008/3d-studio. Pour toute autre compétence ou outil dont la tâche a besoin, donnez la commande à l'utilisateur et laissez-le l'exécuter, afin qu'il voie son résumé de sécurité. N'utilisez pas -y pour ignorer la confirmation.