/stick-figure : une bande dessinée animée avec des personnages bâton
L'utilisateur donne une idée ou une question ("pourquoi les bâillements sont-ils contagieux ?", "pourquoi les chats font-ils tomber les objets ?", "pourquoi procrastine-t-on ?"). Vous répondez en une ligne, mettez en scène une petite scène qui l'illustre, vérifiez quelques images, effectuez le rendu de la vidéo et remettez un MP4 silencieux (5 à 7 secondes).
${CLAUDE_SKILL_DIR} ci-dessous est le dossier de cette compétence (celui où se trouve ce SKILL.md). Si votre environnement ne le renseigne pas, utilisez le chemin de ce dossier. Enregistrez tout dans le dossier courant de l'utilisateur, ou dans le dossier qu'il nomme.
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 bon. 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 "externally managed environment", 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. Aucun navigateur possible ici (par exemple le bac à sable de l'application Claude) ? Voir la fin de ce fichier.
1. Planifiez la scène (brièvement)
- Titre : la question ou l'idée, courte (jusqu'à environ 40 caractères).
- Réponse : l'explication en une ligne, vraie et simple (jusqu'à environ 45 caractères). Elle apparaît environ une seconde après le début.
- La scène : 1 à 4 personnages qui jouent la réponse en 3 à 8 séquences sur 5 à 7 secondes. Montrez le déroulement : un bâillement qui se propage de personne en personne, un chat qui pousse une tasse de la table, un chien qui se réveille et remue la queue. La dernière séquence est la chute et reste à l'écran jusqu'à la fin.
2. Écrivez le spécifications
Enregistrez stick-<sujet>.json. Exemple (examples/knock-things-off.json) :
{
"title": "Why do cats knock things off tables?",
"answer": "Hunting instinct, and it gets your attention",
"scene": "room",
"props": [{"type": "table", "x": 0.62}, {"type": "cup", "x": 0.70, "on": "table", "wobbleAt": 1.6, "fallAt": 2.15},
{"type": "plant", "x": 0.08}],
"figures": [{"id": "cat", "kind": "cat", "x": 0.52, "on": "table", "head": "#F4A261", "hatColor": "#F4A261"},
{"id": "you", "x": 1.2, "label": "You", "hat": "hair", "hatColor": "#6B4423"}],
"beats": [
{"who": "cat", "do": "look", "at": 0.0, "for": 1.0, "to": 0.7},
{"who": "cat", "do": "swipe", "at": 1.0, "for": 1.2, "to": 0.7, "say": "Boop"},
{"who": "you", "do": "run", "at": 2.3, "for": 0.8, "to": 0.86},
{"who": "you", "do": "surprised", "at": 3.1, "for": 0.9, "say": "My mug!"},
{"who": "cat", "do": "sit", "at": 3.3, "for": 1.0},
{"who": "you", "do": "point", "at": 4.1, "for": 1.2, "to": "cat"},
{"who": "cat", "do": "love", "at": 4.4, "for": 1.0}
],
"arrows": [{"from": "cat", "to": "you", "at": 3.6, "for": 0.4}]
}
Plus : examples/contagious-yawns.json (trois personnes), examples/procrastination.json (un bureau, quelqu'un qui entre), examples/dog-wags.json (un chien et un enfant dans un parc).
Scène : street (ciel, trottoir, route), park (soleil, collines, herbe), room, office (fenêtre avec une ville), classroom (ajoutez "board": "text" pour le tableau noir), night (étoiles et lune), plain (ajoutez "background": "#hex").
Personnages (x de 0 = bord gauche à 1 = bord droit ; utilisez -0.2 ou 1.2 pour commencer hors écran et marcher). Trois personnes tiennent confortablement dans une vidéo verticale (x 0.2, 0.5, 0.8) ; une quatrième nécessite scale ~0.85 et un espacement de ~0.22. Un chien ou un chat de profil occupe environ 0.35 de la largeur du cadre (x est son corps ; le nez est à environ 0.2 devant) : arrêtez un animal à environ 0.3 de la personne vers laquelle il court. Gardez les étiquettes de nom courtes ("Bill", pas "Le projet de loi").
kind:person(par défaut),cat,dog(de profil, environ un tiers de la hauteur d'une personne).id,x,label(un nom sous leurs pieds : "Vous", "Votre cerveau"),scale(0.6-0.8 pour un enfant),facing(left/right; sinon ils font face au milieu, puis à l'endroit où ils se sont déplacés, ont pointé ou ont balayé).on: se tenir sur un meuble :table,desk,bench,shelf,bed(mettez l'accessoire meuble au même x).- Personnes :
hat(cap,tophat,beanie,crown,bow,hair),hatColor(aussi la couleur des cheveux),head(couleur du visage),glasses(true),tie(une couleur). Animaux :head(couleur de la fourrure),hatColor(couleur des oreilles).
Séquences ({"who", "do", "at", "for", "to", "say"}, en secondes) : to est l'identifiant d'un autre personnage ou un x (0-1).
do (personnes) | À quoi ça ressemble | do (personnes) | À quoi ça ressemble |
|---|---|---|---|
walk, run | Se déplace vers to | talk | Bouge la bouche, geste d'une main |
wave | Fait un signe, grand sourire | yawn | Bras levés, grand bâillement, yeux fermés |
look | Tourne la tête vers to | point | Pointe du doigt vers to (la tête d'un personnage, ou la hauteur d'une table à un x) |
think | Main sur le menton (avec say : une bulle de pensée) | shrug | "Qui sait ?" |
jump | Saute de joie | cheer | Bras levés en V |
surprised | Saute en arrière, "!" | sad | Tête baissée, une larme |
sleep | Yeux fermés, Zzz | laugh | Rebondit, grand sourire |
dance | Danse, note de musique | idea | Bras levé, ampoule |
love | Cœur | fall | Tombe et reste au sol |
raise | Une main levée (vote, question, "moi !") | write | Écrit ou signe à un bureau |
relabel | Change l'étiquette de nom : {"who": "bill", "do": "relabel", "at": 4, "text": "Law"} |
Animaux : walk, run, jump, sit, swipe (un coup de patte vers to, pour faire tomber des choses), sleep (en boule, Zzz), meow/bark/talk (bouche ouverte ; ajoutez say), surprised (dos arqué, "!"), look (se tourne vers to), wag (heureux, queue qui remue), love, idea, sad.
say place une bulle de dialogue au-dessus de ce personnage pendant cette séquence (jusqu'à 5 mots ; think crée une bulle de pensée ; la bulle remplace la petite icône de la séquence ; les bulles restent à l'écart des visages des autres personnages). La dernière séquence de chaque personnage conserve sa pose jusqu'à la fin (sauf marcher, courir, parler et bâiller), et la dernière phrase prononcée dans la scène reste également affichée, donc terminez sur la chute. point vise la tête d'un personnage éloigné et la poitrine d'un personnage proche.
Accessoires ({"type", "x", ...}) : meubles et éléments de décor bus-stop, tree, bench, desk (avec un ordinateur portable), table, door, sign (avec text), car ("drive": 1 le fait passer), house, plant, lamp, tv, bed ; et petits objets cup, mug, glass, vase, bottle, plate, ball, book, phone, box, paper (un document). Les petits objets reposent sur le sol ou "on": "table" (ou desk, bench, shelf, bed ; donnez-leur un x à l'intérieur de la largeur de ce meuble, qui est d'environ ±0.15 autour de son x) ; "wobbleAt": s fait vaciller un objet, "fallAt": s le fait tomber ("fallDir": -1 vers la gauche) ; les tasses, verres, vases, bouteilles et assiettes se brisent avec un CRASH ("sound": "SMASH!" change le mot), les balles rebondissent. Également color, scale, front: true (dessiné devant les personnages).
Flèches ({"from", "to", "at", "for", "color", "hold"}) : une flèche en pointillés d'une tête à une autre, comme "ça se transmet" ; hold est la durée pendant laquelle elle reste après le dessin (par défaut 0,9 s).
Autres champs : answer se coupe là où cela convient (environ 24 caractères par ligne) ; mettez un | à l'endroit où vous souhaitez la coupure. answerAt (secondes ; par défaut ~1.1), size ("1080x1920" par défaut, "1080x1080", "1920x1080"), duration (par défaut : fin de la dernière séquence + 1,3 s, au moins 5), fps (par défaut 30).
Conseils de mise en scène : commencez une séquence à 0,0 pour que personne ne soit figé au début ; chevauchez un peu les séquences pour qu'il y ait toujours du mouvement ; chaque séquence dure 0,8-1,6 s ; placez le renversement ou le moment clé au milieu et la réaction après.
3. Vérifiez trois images
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<sujet>.json --still 0.5 --out stick-<sujet>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<sujet>.json --still 2.5 --out stick-<sujet>-check2.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<sujet>.json --still end --out stick-<sujet>-check3.png
--still prend des secondes, ou end ; vérifiez également l'heure du moment clé (le renversement, la révélation). Regardez-les : personnages à l'écran et orientés dans le bon sens, personne ne traverse quelqu'un d'autre, les bulles ne cachent pas les visages ou le titre, l'histoire est compréhensible sans son. Ajustez les positions ou le timing et vérifiez à nouveau si nécessaire.
4. Effectuez le rendu de la vidéo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<sujet>.json --out stick-<sujet>.mp4
Environ 10 à 25 secondes. Supprimez les images de vérification.
5. Livrez
Donnez à l'utilisateur le chemin du MP4 (affichez-le si votre environnement peut afficher des fichiers). Il n'a pas de son, prêt pour une musique ou une voix off. Proposez une variante (une autre fin, une autre scène).
Pas de navigateur ici ? (par exemple le bac à sable de l'application Claude)
Si la vérification de la configuration ne peut pas faire fonctionner un navigateur, écrivez l'animation sous forme de page à la place : python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<sujet>.json --html stick-<sujet>.html. La page se lit dans n'importe quel navigateur (affichez-la comme un artefact si possible). Dites à l'utilisateur que le MP4 nécessite Claude Code sur un ordinateur, ou un enregistrement d'écran de la page.