/breakdown : votre produit, démonté, chaque pièce étiquetée
L'utilisateur joint une photo de produit et/ou nomme un produit. Vous déterminez de quoi il est fait, le décrivez sous forme de pièces 3D simples (tailles en millimètres), vérifiez deux images, le faites tourner, se démonter et s'étiqueter, et remettez un MP4 silencieux (environ 6 secondes).
${CLAUDE_SKILL_DIR} ci-dessous est le dossier de ce skill (celui qui contient ce SKILL.md). Si votre environnement ne le remplit pas, utilisez le chemin de ce dossier. Enregistrez tout dans le dossier actuel de l'utilisateur, ou dans le dossier qu'il nomme. La page 3D charge three.js depuis Internet, elle a donc besoin d'une connexion.
0. Vérification de la configuration
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Cela prend quelques secondes ; exécutez-le si vous n'êtes pas sûr que cet ordinateur soit configuré. "ready": true signifie que tout est prêt. Sinon, exécutez les commandes listées sous "fix", en informant l'utilisateur qu'il s'agit d'une installation unique : python3 -m pip install playwright (le pilote de navigateur), python3 -m playwright install chromium (uniquement si Google Chrome ou Edge n'est pas installé, environ 150 Mo) et python3 -m pip install imageio-ffmpeg (uniquement si ffmpeg est manquant). Si pip refuse avec un message "environnement géré de manière externe", créez un environnement privé une fois et utilisez son Python pour chaque commande : python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, puis ~/.animate-skills/bin/python -m playwright install chromium si nécessaire. Sous Windows, utilisez py au lieu de python3. Pas de navigateur possible ici (par exemple le sandbox de l'application Claude) ? Voir la fin de ce fichier.
1. Déterminer le produit
- À partir de la photo : forme générale, proportions, couleurs et finitions (verre brillant, métal brossé, plastique mat, tissu), et disposition des détails visibles (objectifs d'appareil photo, boutons, ports). Ne reproduisez pas les logos de marque.
- Ses principales pièces réelles, dans l'ordre d'assemblage d'un côté à l'autre : 5 à 9 pièces dignes d'être étiquetées (couvercle, écran, cadre, batterie, carte, puce, haut-parleur, moteur, coussin...). Utilisez ce que ce type de produit contient réellement ; si vous n'êtes pas sûr d'un modèle spécifique, utilisez les pièces que sa catégorie a toujours, et n'inventez pas de pièces exotiques.
- Le kit construit des produits à partir de formes simples, il excelle donc sur les objets faits de couches et de pièces dures (téléphones, claviers, casques, haut-parleurs, manettes, montres, appareils photo, électroménager). Les produits organiques et mous (chaussures, vêtements, nourriture) donnent un résultat jouet : dites-le si l'utilisateur en demande un.
- Tailles réelles approximatives en mm (un téléphone fait ~72 x 150 mm et 8 mm d'épaisseur ; un clavier complet ~440 x 130 mm).
2. Écrire les spécifications
Enregistrez breakdown-<produit>.json. Chaque pièce est une forme simple placée là où elle se trouve dans le produit assemblé ; level indique la distance qu'elle parcourt lorsque le produit se démonte (0 reste en place, 1 se déplace d'un pas, 2 de deux pas ; les pièces avec le même niveau se déplacent ensemble ; les moitiés comme 3.5 fonctionnent, et les niveaux négatifs se déplacent dans l'autre sens). Exemple (examples/smartphone.json, raccourci) :
{
"title": "À l'intérieur d'un smartphone",
"theme": "dark",
"parts": [
{"name": "Verre de protection", "shape": "slab", "size": [72, 0.7, 150], "radius": 10.5, "material": "glass", "y": 0, "level": 0},
{"name": "Écran", "shape": "slab", "size": [69, 0.7, 147], "radius": 9, "material": "black", "color": "#232428", "y": 0.8, "level": 1},
{"name": "Cadre", "shape": "frame", "size": [72, 7.4, 150], "radius": 10.5, "wall": 2.5, "material": "aluminum", "y": 0.9, "level": 2},
{"name": "Batterie", "shape": "slab", "size": [62, 4, 86], "radius": 5, "material": "battery", "text": "Li-ion|5 000 mAh", "pos": [0, 2, 24], "level": 3},
{"name": "Carte mère", "shape": "slab", "size": [62, 1, 44], "radius": 4, "material": "pcb", "pos": [0, 2, -48], "level": 3},
{"name": "Appareils photo", "shape": "lens", "radius": 4.6, "size": [9.2, 4.2, 9.2], "copies": [[-23.2, -62.2], [-23.2, -45.5], [-8, -53.8]], "y": 6.6, "level": 4},
{"name": "Verre arrière", "shape": "slab", "size": [72, 0.9, 150], "radius": 10.5, "material": "glass-tint", "color": "#3d5571", "y": 8.4, "level": 5}
]
}
Coordonnées : size est [largeur x, hauteur y, profondeur z] en mm ; y est vers le haut. pos: [x, y, z] (ou simplement "y") est l'endroit où se trouve le centre inférieur de la pièce dans le produit assemblé. Les pièces peuvent légèrement se chevaucher ; ce n'est pas grave.
Formes : slab (plaque rectangulaire arrondie ; radius = rayon des coins), frame (une slab avec un trou ; épaisseur wall), box (coins droits), cylinder/disc (radius, hauteur = size[1]), ring (radius, inner), lens (un objectif d'appareil photo avec son anneau métallique), sphere (mise à l'échelle par size), capsule, cone (radiusTop), torus/cushion (radius, tube ; repose à plat avec son trou pointant vers le haut : coussins d'écouteurs, joints toriques, pneus), band (radius, tube, arc : un arc vertical au-dessus du haut : arceaux de casque, poignées, prise d'une bouilloire), tube (une tige de from: [x, y, z] à to: [x, y, z], avec radius et optionnellement radiusTo : tubes de cadre, pieds de chaise et de table, pailles), lathe (profile : [[radius, y], ...] tourné autour de l'axe vertical : bouteilles, tasses, boutons, cônes de haut-parleur, dômes ; les deux côtés sont dessinés, donc l'ordre des points n'a pas d'importance). arc (degrés, 360 par défaut) crée un ring, torus, band ou lathe partiel (il commence du côté +x ; tournez-le avec rot). spokes: n sur un ring ou torus ajoute n rayons et un moyeu (roues, ventilateurs). stretch: [x, y, z] met à l'échelle une pièce (un coussin ovale : [0.85, 1, 1.15]). rot: [x, y, z] degrés tourne une pièce autour de son centre inférieur ([90, 0, 0] place un cylindre sur le côté, [0, 90, 0] tourne une slab pour que son texte imprimé se lise sur l'autre côté).
Répétitions : copies: [[x, z], ...] (ou [x, y, z]) place la même pièce plusieurs fois (appareils photo, vis, boutons) ; une copie peut aussi être {"pos": [x, y, z], "rot": [x, y, z]} pour tourner chacune d'elles (les oreillettes gauche et droite faisant face vers l'extérieur). grid: {"nx": 14, "nz": 5, "pitch": 19} dispose une grille (touches de clavier, cellules, LED). Le point d'étiquette se trouve sur la première copie.
Matériaux : glass (transparent), glass-tint (verre coloré), aluminum, steel, gold, copper, black, white, plastic (toute color), ceramic, rubber, foam, fabric (grille en mesh), wood, leather, pcb (circuit imprimé vert), chip, battery (cellule foncée ; text est imprimé dessus, | pour les nouvelles lignes), coil (bobine de charge sans fil en cuivre), lens, screen (un écran lumineux), magnet, emissive (brille). color (hex) teinte la plupart d'entre eux. text imprime une étiquette sur la face supérieure d'une slab. L'éclairage de studio éclaircit un peu les couleurs : comparez la première image de vérification avec la photo et assombrissez la color si elle semble délavée. Pour le métal foncé, utilisez steel ou black (aluminum est pour les teintes argentées), et pour un produit principalement noir, utilisez le thème clair pour que ses pièces ne disparaissent pas dans le fond sombre.
La photo de l'utilisateur : utilisez-la pour obtenir la forme, les couleurs et la disposition correctes. Si elle montre une face plane de face (le dos ou l'écran d'un téléphone, une carte, un couvercle), vous pouvez également la mapper sur cette pièce : "photo": "chemin/vers/photo.jpg" au niveau supérieur, puis "texture": "photo" sur la pièce, avec "crop": [x0, y0, x1, y1] (fractions 0-1 de la photo) autour de cette face. Pour une photo en angle ou en perspective, utilisez uniquement les couleurs et la disposition.
Étiquettes : chaque pièce est étiquetée avec son name (gardez les noms courts : jusqu'à ~14 caractères restent en taille réelle) ; "label": "Autre texte" le change, "label": false le cache (utilisez-le pour les petites pièces décoratives afin que seules 5 à 9 étiquettes s'affichent).
La vue : le produit tourne sur un plateau tournant : son angle en radians est spin - spinSpeed × secondes (par défaut 0.95 et 0.07, il se termine donc autour d'une vue aux trois quarts). L'angle 0 regarde directement le côté +z du produit ; les angles positifs le tournent pour que vous voyiez plus de son côté -x (1.57 regarde l'extrémité -x). Pour les objets longs et plats où les pièces se cachent mutuellement, terminez de côté : par exemple "spin": 1.9, "spinSpeed": 0.06. elevation0/elevation1 sont la hauteur de la caméra en degrés (38 → 24 par défaut). zoom (1 par défaut, par exemple 1.2) agrandit le produit s'il semble petit. Les produits longs ou larges (un vélo, un canapé, une chaussure à plat) sortent petits dans une vidéo verticale : utilisez "size": "1080x1080" ou "1920x1080", ou zoom. Les étiquettes conservent un ordre (l'ordre des pièces dans la vue éclatée finale).
Produits qui ne sont pas un empilement (casque, bouilloire, manette) : le démontage vers le haut remplit au mieux une vidéo verticale, alors disposez le produit de manière à ce que ses couches s'empilent verticalement. Pour les casques circum-auriculaires, posez-les sur le côté (l'axe des oreillettes à la verticale) et démontez les couches d'une oreillette vers le haut (coussin, mesh, haut-parleur, carte, batterie, coque) tandis que l'arceau et l'autre oreillette restent assemblés ; utilisez explode: [x, y, z] par pièce pour un déplacement exact.
Autres champs : title (par exemple "À l'intérieur d'un..."), subtitle, theme (dark par défaut, light), axis ("y" démonte vers le haut, par défaut ; "x" ou "z" démonte sur le côté, pour les objets longs et fins comme les stylos ou une bouteille sur le côté ; de côté, le résultat est plus petit dans un cadre vertical), gap (mm entre les niveaux ; par défaut ~19 % de la taille du produit), explode: [x, y, z] sur une pièce (son propre déplacement en mm, au lieu de son niveau), apartAt (secondes ; 1.5 par défaut), size, duration (par défaut ~6-7 s, suffisant pour lire les étiquettes), fps. Un deuxième exemple : examples/mechanical-keyboard.json.
3. Vérifier deux images
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produit>.json --still 0.5 --out breakdown-<produit>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produit>.json --still end --out breakdown-<produit>-check2.png
--still prend des secondes, ou end (ajoutez une troisième à environ 3,5 s, lorsque les étiquettes arrivent, si les pièces sont proches les unes des autres). La première est le produit assemblé : ressemble-t-il au produit (forme, proportions, couleurs) ? La seconde est la vue éclatée avec les étiquettes : pièces dans un ordre logique, rien de caché à l'intérieur d'autre chose, chaque point d'étiquette sur sa pièce, étiquettes lisibles. Corrigez les tailles, positions, niveaux ou la vue et vérifiez à nouveau (deux ou trois itérations est normal).
4. Rendre la vidéo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produit>.json --out breakdown-<produit>.mp4
Environ 10 à 20 secondes. Si un rendu 3D sort noir, ajoutez --no-gpu. Supprimez les images de vérification.
5. Livrer
Donnez à l'utilisateur le chemin du MP4 (affichez-le si votre environnement peut afficher des fichiers). Il n'a pas de son. Dites en une ligne que les pièces sont un modèle simplifié de son produit, et proposez une variante (le thème clair, une pièce renommée).
Pas de navigateur ici ? (par exemple le sandbox de l'application Claude)
Si la vérification de configuration ne peut pas faire fonctionner un navigateur, écrivez l'animation sous forme de page à la place : python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produit>.json --html breakdown-<produit>.html. La page se lit dans n'importe quel navigateur (affichez-la comme un artifact si vous le pouvez). Dites à l'utilisateur que le MP4 nécessite Claude Code sur un ordinateur, ou un enregistrement d'écran de la page.