Compétence de Dessin à la Main GPT pour Codex

Que fait Compétence de Dessin à la Main GPT pour Codex ?

Créez un projet d'animation fonctionnel et le fichier MP4 ou la boucle demandée. Les images sont des fonctions déterministes du temps, peintes par p5.brush dans Chrome et encodées par FFmpeg. Aucun runtime Claude, API payante ou modèle de génération d'images n'est requis. Clawd est un personnage intégré optionnel ; suivez le casting et le style choisis par l'utilisateur.

Démarrer un projet

Résolvez le répertoire de cette compétence à partir de l'emplacement du fichier SKILL.md chargé. Ne codez pas en dur un répertoire Claude. Exécutez :

python "<skill-dir>/scripts/new_project.py" "<project-dir>"

L'initialiseur multiplateforme copie template/, déconnecte la démo, installe les dépendances verrouillées avec npm ci, et rapporte les outils. Utilisez --keep-demo uniquement pour une démo ou une vérification du moteur, --skip-install pour un simple échafaudage, ou --npm-cli /path/to/npm-cli.js lorsque Node est disponible mais que npm n'est pas dans le PATH. NPM_CLI_JS est une variable d'environnement équivalente. Il n'écrasera pas un projet non vide.

Lisez le fichier ANIMATION_GUIDE.md généré dans son intégralité avant de concevoir. Inspectez docs/emotions.jpg et docs/views.jpg avec un visualiseur d'images disponible (par exemple view_image via les outils d'exécution). Le guide contient l'API du moteur et des personnages. Lisez references/music-video.md pour les clips musicaux ou les vidéos de plus d'environ 20 secondes. Lisez references/codex-runtime.md pour les problèmes d'exécution, les commandes de la plateforme et les limitations du moteur de rendu.

Planifier et construire

Utilisez les choix existants de l'utilisateur. Ne demandez que les informations manquantes qui affectent matériellement le travail ; ne répétez pas les questions déjà répondues. Pour un clip musical, recueillez l'audio et la source de synchronisation. Une vidéo lyrique nécessite des paroles fournies avec des horodatages LRC ou équivalents ; n'inventez pas de paroles manquantes. Un clip musical instrumental n'a pas besoin de LRC. Lorsque la direction créative est manquante, une question optionnelle peut couvrir l'histoire, l'ambiance, les images récurrentes et les choses à éviter. Si l'utilisateur délègue la direction, proposez et poursuivez avec une interprétation cohérente.

Mesurez la musique avec python "<skill-dir>/scripts/beat_grid.py" song.mp3 --from=0 --to=30 --lrc=song.lrc (nécessite NumPy et FFmpeg). Traitez le tempo comme une estimation avec une ambiguïté de moitié/double temps ; l'audio et les horodatages fournis définissent la synchronisation. Le LRC chronomètre généralement les lignes, donc le remplissage par caractère du karaoké est une approximation, sauf si une synchronisation au niveau du mot est fournie. Ne revendiquez pas un alignement forcé.

Écrivez STORYBOARD.md : pitch, arc diégétique et palette, motif visuel, arc émotionnel, et plans avec intervalles de temps, action, lecture pour le spectateur, et transitions. Partagez la direction pour révision lorsque c'est utile ; si l'utilisateur vous a demandé de continuer, poursuivez. L'exemple complet est examples/xiaozhen/STORYBOARD.md, avec ses fichiers de scène à côté.

Définissez duration, bpm, offset, et audio optionnel dans src/config.js. Implémentez les scènes comme des IIFE dans src/scenes/, enregistrez les plans avec shots([[t0, fn], ...]), et incluez leurs scripts dans studio.html. Bloquez d'abord les poses lisibles. Utilisez un casting commun, une palette et des motifs récurrents à travers les plans.

Rendre et inspecter

Depuis le répertoire du projet, rendez des images sélectionnées, une courte bande de mouvement, et les détails lorsque nécessaire :

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/poses.jpg
node render.mjs --strip=2.1:2.6 --out=out/check/motion.jpg
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg

Ouvrez les images générées. Vérifiez l'événement et le temps de lecture de chaque plan, les visages, le contact des accessoires, la taille des personnages, les transitions et la palette. Inspectez le mouvement autour des actions clés et des raccords. Corrigez les problèmes observés, puis inspectez à nouveau les images affectées. Une planche contact vérifie les poses et la continuité ; inspectez un court aperçu encodé pour le timing de mouvement important. Ne prétendez pas à une révision visuelle à partir du seul code source.

Utilisez les ms/image et le nombre d'images mesurés pour estimer le coût final. Cet environnement de bureau est local : une demande de création de vidéo autorise normalement le rendu local. Respectez un choix local/cloud explicite ; n'ajoutez pas de porte d'approbation de localisation obligatoire et n'utilisez pas de service payant/cloud sans autorisation. Si le travail est en réalité distant et que l'emplacement du rendu est matériel, clarifiez avant un rendu complet. Préservez un projet exécutable et des aperçus si l'utilisateur ne demande que le code source ou des commandes locales.

node render.mjs --clip --out=out/video.mp4
node render.mjs --frames --workers=4
node render.mjs --encode --audio=assets/song.mp3 --out=out/video.mp4

Utilisez le même --fps dans le rendu des images et l'encodage. Les fichiers d'images sont reprenables, mais les images mises en cache doivent être supprimées pour les intervalles de temps modifiés avant un nouveau rendu. --encode consomme les images à partir de zéro ; une plage partielle commençant plus tard nécessite son propre numéro de début FFmpeg et une coupure audio correspondante (voir la référence d'exécution).

Vérifiez la durée encodée, la résolution, le fps et l'audio avec ffprobe et inspectez le résultat. Retournez les chemins de la vidéo et du projet, les performances mesurées, et les limitations réelles. Gardez node_modules, les caches d'images et les fichiers temporaires hors des archives source portables.

Invariants visuels et du moteur

• Peignez avec paint() et inkLine() ; utilisez glow() pour la lumière additive. Vues clés dessinées en 2D à plat, palette douce, encre bouillonnante. Ce sont les styles par défaut ; les exigences explicites de l'utilisateur ont la priorité.
• Évitez le texte inutile ; le karaoké lyrique et les lettrages demandés sont pris en charge. Chargez src/karaoke.js après timeline.js, remplissez LY, et gardez l'action au-dessus de sa bande inférieure. Vérifiez la police réelle et les glyphes chinois.
• Chaque plan a besoin d'un événement, d'une cause suivie d'une réaction, et d'un sens maintenu lisible. Animez les visages via emotions() et les temps morts via feel(). Adaptez les transitions à l'histoire et reliez la fin au début lorsque cela est approprié.
• Chaque image est une fonction pure de t : pas de simulation accumulée, de Math.random() non ensemencé, ou de dépendance à l'ordre de rendu. Utilisez hash() pour une variation stable et boilSeed(key) par élément indépendant.
• Gardez les helpers dans les IIFE de scène pour éviter les collisions de noms globaux p5. Protégez contre la géométrie dégénérée et NaN. Masquez le contenu des portes/fenêtres avec des cadres de premier plan ; réduisez le poids des contours sous un zoom rapproché.
• Les performances dépendent des remplissages et des traits du pinceau. Mesurez quelques images représentatives avant de passer à l'échelle supérieure ; réduisez la géométrie excessive et le nombre de workers lorsque la mémoire GPU est limitée. --soft-gl est un repli lent, pas une optimisation par défaut.
• Implémentez les chapitres séquentiellement, sauf si l'utilisateur demande explicitement des agents. Les workers de rendu parallèles sont une fonctionnalité du moteur de rendu et ne nécessitent pas de sous-agents.

Source et licence : references/upstream.md. Conservez les deux avis MIT fournis lors de la redistribution du moteur ou de la compétence.