Communitygithub.com

make-2d-video

Ce skill crée une vidéo animée complète (style stick figures cinématographiques, dessin animé 3D ou toon 2D) à partir d'une voix-off, avec pipeline complet : installation, timestamps, découpage, choix de style, rendu, musique, SFX et export MP4.

Qu'est-ce que make-2d-video ?

Ce skill transforme une voix-off (et éventuellement un script) en une vidéo MP4 animée, où chaque image est générée par code (HTML canvas + Three.js), capturée image par image dans un Chromium sans tête et encodée avec ffmpeg. Il utilise uniquement des graphismes vectoriels ou 3D, sans modèle de génération d'images ni de vidéo, garantissant la cohérence des personnages et la netteté du texte. Le pipeline complet comprend l'installation, la transcription avec Whisper, le découpage en plans, le choix du style (parmi trois styles distincts : stick figures cinématiques en noir avec rim light, casting cartoon 3D, ou casting toon 2D avec contours), la construction des scènes, le rendu, la musique générée et les effets sonores. Il exporte aux formats 16:9 ou 9:16, de la 720p à la 4K. Le skill est conçu pour Claude Code, Cursor, Codex et les assistants IA similaires, avec des fichiers de référence complets (installation, bible de style, découpage, API du moteur de rendu, conception sonore et contrôle qualité). Il nécessite l'exécution de commandes par l'utilisateur dans un terminal compatible Python et Node.js.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lynguyen9995/make-2d-video/tree/HEAD

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

make-2d-video studio : pipeline vidéo complet

Transformez une voix-off (ainsi qu'un script optionnel) en un fichier MP4 finalisé où chaque image est dessinée par du code (HTML canvas + Three.js), capturée image par image dans Chromium sans tête et encodée avec ffmpeg. Aucun modèle de génération d'image ou de vidéo n'est utilisé, donc les personnages restent cohérents et le texte reste net. Inventez les visuels à partir de zéro pour chaque script ; seul le style est fixe.

Ressources fournies (répertoire de base de ce skill) :

  • kit/ : le studio testé (moteur de rendu, outils, audio, le projet de référence examples/reaction-time). Installez-le dans l'espace de travail sous le nom make-2d-video-studio/ (voir references/install.md).
  • references/install.md : installation, tableau des dépendances, diagnostic, auto-test.
  • references/style-bible.md : l'apparence (personnages, décors, éclairage, caméra, montage, graphiques, règles 9:16, choses à ne pas faire). Lisez-le entièrement avant de concevoir un plan.
  • references/style-bible-toon.md : l'apparence pour le casting toon (cast: "toon"). Lorsque le casting est toon, suivez ce document au lieu des parties de style-bible.md qui entrent en conflit (rim light, pas de contours, silhouettes noires).
  • references/story-breakdown.md : rédaction de story/bible.md et story/shots.json, plus les règles de rythme.
  • references/engine-api.md : l'API des scènes, la configuration et les schémas shots.json, ainsi que la référence des trois kits.
  • references/sound-design.md : le plan musical, la bibliothèque d'effets sonores, l'ambiance et les niveaux.
  • references/render-qc.md : aperçu et rendu final, guide de vitesse, liste de contrôle qualité, dépannage.

Les commandes de ce plugin permettent de relancer une étape : /new-video (étapes 1 à 4), /video-styles (5), /render-video (6 et 8), /video-sound (7). Lors de l'exécution de bout en bout, suivez ce fichier et chargez les références au fur et à mesure des besoins de chaque étape.

Règles d'or

  1. Demandez d'abord la langue de la vidéo. Avant toute autre question, installation, fichier ou édition, demandez à l'utilisateur dans quelle langue est la vidéo (Étape 0). Chaque étape ultérieure utilise cette langue. Parlez à l'utilisateur dans la langue dans laquelle il écrit.
  2. Conservez la narration intacte. Ne réécrivez, n'ajoutez, ne supprimez et ne réordonnez jamais les mots prononcés. Chaque plan illustre les mots prononcés pendant qu'ils sont à l'écran.
  3. Même style, nouvelles images. Inventez décors, accessoires, personnages et actions à partir de ce script. Utilisez examples/reaction-time uniquement pour apprendre l'API.
  4. Montrez ce qui est dit, littéralement et spécifiquement. Les phrases abstraites deviennent des métaphores visuelles, des diagrammes ou des réactions en gros plan.
  5. Ébauchez, regardez, corrigez, puis rendez. Ouvrez vous-même les planches-contacts et les images fixes (lisez les PNG) avant tout rendu complet. Le rendu est lent ; regarder est rapide.
  6. Trois points de contrôle utilisateur : choix de configuration, choix de style à partir d'échantillons rendus, et l'aperçu avant le rendu final. Si l'utilisateur est absent, prenez les valeurs par défaut, indiquez ce qui a été supposé et continuez.
  7. Les fichiers sont la vérité. Chaque vidéo réside dans make-2d-video-studio/projects/<slug>/, et story/shots.json possède tout le timing. Une vidéo = un dossier autonome : config.json, input/, assets/ (+ assets/_raw/ pour les images IA non sélectionnées), scenes/, story/ (incl. plan.md notes de transfert), timeline/, jobs/ (+ jobs/logs/), build/ (temporaire, peut être supprimé), out/ (livrables uniquement). Ne placez jamais de fichiers par vidéo à la racine du studio ou dans un dossier _jobs/ séparé.
  8. Seules les personnes de l'histoire apparaissent à l'écran (vidéos d'actualité/explicatives). Pas de mascottes de chaîne ou de personnages narrateur/présentateur (par exemple nhoc, ongdo) sauf si l'utilisateur le demande. Chaque personne nommée dans l'actualité a son propre toon (cheveux distinctifs, lunettes, tenue, selon les règles de caricature dans style-bible-toon.md) ainsi qu'une étiquette de nom, et non une figure générique ou une silhouette. Les personnes privées ou non nommées (suspects non confirmés, membres de la famille) restent anonymes : un toon générique sans nom ou une silhouette avec une étiquette de rôle.

Paramètres par défaut de la chaîne (channel.json)

Avant l'Étape 0, recherchez channel.json à côté de make-2d-video-studio/ (le dossier de l'espace de travail qui contient le studio), puis dans le dossier courant, puis dans le répertoire de base de ce skill (la copie qui voyage avec le skill ; sur une nouvelle machine, copiez-la à côté du studio une fois installé). Il peut contenir name, lang, aspect, resolution, fps, style, cast (stick | 3d | toon), captions, shotsPerMin et music. Chaque clé présente est la valeur par défaut pour cette vidéo : ignorez les questions auxquelles elle répond (langue, format, résolution, fps, sous-titres, choix de style à l'Étape 5) et confirmez-les en UNE ligne, par exemple « Kênh Tí Tò Mò : tiếng Việt, 9:16, 1080p, 30 fps, dusk, có phụ đề. » Demandez uniquement ce qui est encore inconnu (voix-off, script, titre). name est le nom de la chaîne pour les cartes de fin.

Les trois styles de dessin (choisissez UN casting par vidéo)

castApparenceMoteurBible de style
stick (par défaut)Stick figures noirs avec rim light, décors 2.5D cinématographiques et atmosphériquesrig2d.js (+ three-kit.js pour les plans d'ensemble 3D)style-bible.md
3dCasting cartoon 3D : têtes plates blanches, corps en poire, membres en nouillerig3d.js, rig3d-cast.js (kind: '3d', rig3d: true)style-bible.md → « Casting 2D ou casting 3D »
toonDessin animé 2D avec contours : têtes rondes de couleur de peau, corps en haricot, membres en bâton, contours épais, line boil, texte comique, gags visuels, caricatures de personnalités publiques ; accessoires 3D toon-shaded optionnels avec lueurtoon.js, toon3d.jsstyle-bible-toon.md

channel.json → cast décide ; sinon demandez une fois à l'Étape 1 (une ligne par style). Pour toon, le style de couleur par défaut est paper (les grades cinématographiques fonctionnent aussi mais assombrissent les couleurs plates). Étudiez examples/toon-demo/ avant d'écrire des plans toon.

Mode actualité explicative (casting toon, format principal de la chaîne)

Lorsque l'utilisateur demande une vidéo explicative d'actualité / finance / tech / milliardaire / actif d'investissement, suivez kit/CLAUDE.md (installé sous make-2d-video-studio/CLAUDE.md). Il remplace les étapes 1 à 8 ci-dessous par un flux de travail avec garde-fous : 0 choix du sujet (3 à 5 candidats avec force de la source, risque et durée de vie) ✋ → 1 script sourcé + 3 titres + concept de miniature ✋ → 2a voix et 2b manifeste des actifs (story/assets.md : quoi dessiner, nombre, créé avec Flow / IA d'image de l'utilisateur / toon de code / three.js + bloom) ✋ → 3 images + fiches personnages ✋ → 4 timing + scènes → 5 planche-contact de tous les plans + démo de 30 s ✋ → 6 rendu complet → 7 package (miniature, description avec sources, chapitres, liste des informations obsolètes) ✋ → 8 téléversement ✋ → 9 examen des statistiques. Images de scène : pas de personnes, pas de texte, pas de logos. Miniatures : peuvent contenir des personnes (stylisées, jamais de fausses photoréalistes de vraies personnes) et ≤ 4 mots de texte. Ne téléversez jamais via l'API YouTube Data à partir d'un projet non audité (les téléversements sont verrouillés privés) ; téléversez via le site YouTube Studio, enregistré Privé/Programmé, et publiez uniquement sur l'ordre explicite de l'utilisateur. Dans une session Claude Code locale, exécutez chaque commande vous-même ; écrivez des jobs .bat uniquement lorsque vous n'avez pas de shell Windows.

Étape 0 : Langue de la vidéo (toujours en premier)

Si channel.json donne lang, confirmez-la dans le résumé d'une ligne ci-dessus au lieu de demander. Sinon, avant de demander quoi que ce soit, de créer des fichiers, d'installer ou de modifier, posez exactement une question dans la langue de l'utilisateur, par exemple : « Quelle langue cette vidéo utilise-t-elle ? (par exemple : Français, English, 日本語…) ». Utilisez AskUserQuestion lorsque disponible. Attendez la réponse, puis mappez-la à un code ISO 639-1 (fr, en, ja, ko, es, pt, de, fr, hi, …). Si l'utilisateur a déjà nommé la langue de la vidéo plus tôt dans cette conversation, confirmez-la en une ligne au lieu de demander à nouveau.

Le code de langue pilote tout le pipeline :

  • --lang <code> sur tools/new_project.py (stocké dans config.json → lang). tools/transcribe.py le lit depuis la configuration.
  • Tout le texte à l'écran (cartes-titres, étiquettes, unités, panneaux, légendes de graphiques, sous-titres incrustés) est écrit dans cette langue, court et correctement orthographié avec tous les diacritiques. Ne traduisez et ne modifiez jamais la narration parlée.
  • Polices : le moteur de rendu charge les glyphes latin, latin-étendu et vietnamien ; pour vi, la police de titre passe automatiquement à Nunito pour que les accents s'affichent dans une police cohérente. Pour les scripts que les polices fournies ne couvrent pas (japonais, coréen, chinois, arabe, hindi, thaï…), informez l'utilisateur et vérifiez soigneusement les images fixes de texte lors du contrôle qualité.

Étape 1 : Accueil

Une fois la langue connue, demandez une fois (AskUserQuestion lorsque disponible) :

  • Fichier voix-off (obligatoire). Pas encore d'enregistrement ? Créez-en un avec VieNeu (si ses outils MCP sont connectés) : synthétisez UN clip par phrase (01.wav, 02.wav, … dans un dossier), écrivez les phrases une par ligne dans sentences.txt (marqueurs optionnels |0.8 pause ou |cham ralentissement, les balises d'émotion comme [cười] restent dans la ligne), puis python -I tools/join_segments.py <clip_dir> sentences.txt voiceover.wav. Il joint les clips avec des pauses fixes (VieNeu fusionne les phrases courtes et supprime les pauses lorsqu'on lui donne un script entier) et écrit voiceover.wav.script.txt, le texte propre à passer comme --script.

  • Script : avec horodatage (SRT/VTT/JSON/TXT avec [mm:ss]), texte brut (de préférence : aligné sur l'audio, en conservant le libellé exact), ou aucun (transcription).

  • Format : 16:9 ou 9:16.

  • Résolution : 720p / 1080p (recommandé) / 1440p / 2160p (4K). Mentionnez que les résolutions plus élevées prennent beaucoup plus de temps à rendre.

  • Sous-titres : activés par défaut pour 9:16, désactivés pour 16:9.

  • Musique : générée, fichier personnel de l'utilisateur, ou aucune. SFX : activés ou désactivés.

  • Titre.

  • Casting (style de dessin) : stick / 3d / toon, sauf si channel.json donne cast.

Ne demandez pas encore le style de couleur. Valeurs par défaut (lorsque channel.json ne dit rien) : 16:9, 1080p, 24 fps, musique + SFX générés, casting stick, style dusk (paper pour toon).

Étape 2 : Installer ou vérifier le studio

Suivez references/install.md : copiez kit/ vers make-2d-video-studio/ dans l'espace de travail (ignorez si déjà présent), installez les dépendances, exécutez python tools/verify_kit.py et python tools/doctor.py, puis exécutez l'auto-test d'exemple. Signalez ce qui a été installé dans une courte liste. Sur Windows, si le diagnostic trouve ffmpeg uniquement dans le dossier winget, il écrit make-2d-video-studio/env.sh et env.ps1 ; préfixez les commandes de rendu et de mixage avec source env.sh && (un shell démarré avant l'installation ne voit pas le nouveau PATH).

Étape 3 : Projet + timeline

Exécutez dans make-2d-video-studio/. Utilisez python3 là où python n'est pas Python 3.

Windows sans terminal utilisable (l'utilisation de l'ordinateur ne peut que cliquer dans l'Explorateur de fichiers) : placez chaque étape longue dans un job que l'utilisateur double-clique. Copiez tools/jobs/templates/full.ps1 + 2-full.bat dans projects/<slug>/jobs/ ; chaque job .ps1 commence par $JobDir = $PSScriptRoot et source ..\..\..\tools\jobs\common.ps1 (donne $P, Run, Py, Say, Fail, Done, et écrit jobs/logs/<name>.log + <name>.status = RUNNING / OK / FAILED pour que Claude le lise). Aides partagées : tools/jobs/set_duration.py (durée config.json à partir de la voix-off), tools/jobs/make_srt.py (out/<title>.fr.srt à partir de timeline/sentences.json). Installation/réparation du studio sur Windows : tools/jobs/setup-studio.bat.

python tools/new_project.py --name <slug> --voice "<chemin voix-off>" [--script "<chemin script>"] --aspect 16:9 --resolution 1080p --fps 24 --style dusk --title "<titre>" --lang <code> [--captions]
  • Script horodaté : python tools/parse_script.py --project projects/<slug> --script projects/<slug>/input/script.<ext>
  • Script brut : python tools/transcribe.py --project projects/<slug> --script projects/<slug>/input/script.txt --lang <code> --model small. La concordance doit être ≥ 90 % ; si elle est inférieure, indiquez à l'utilisateur que le script et l'audio diffèrent.
  • Pas de script : python tools/transcribe.py --project projects/<slug> --lang <code> --model small (base sur les machines lentes, large-v3 pour l'audio difficile).

Vérifiez timeline/transcript.txt (sa fin doit être proche de la longueur de la voix-off), puis exécutez python tools/beats.py --project projects/<slug> pour obtenir la feuille de rythme et une ébauche de story/shots.json.

Étape 4 : Découpage de l'histoire

Lisez references/style-bible.md (ou references/style-bible-toon.md pour le casting toon) et references/story-breakdown.md. Écrivez story/bible.md (logline, casting avec une couleur de signature chacun, lieux avec ambiances et lumières clés, motifs, plan musical, et indication si le casting est en stick figures 2D ou personnages 3D). Écrivez scenes/cast.js. Réécrivez story/shots.json : plans contigus, coupure aux limites de phrase 0,1 à 0,2 s plus tôt, un plan d'établissement par nouveau lieu, et une description de scene concrète pour chacun. Rythme : les courtes vidéos 9:16 tournent à 30–40 plans par minute (médiane 1,5–2 s) ; les longues vidéos explicatives 16:9 tournent à 15–25 (médiane 2–3,5 s). channel.json → shotsPerMin remplace les deux. Envoyez à l'utilisateur un résumé du plan en 5 à 10 lignes et continuez sauf objection.

Étape 5 : Choix du style

Si channel.json fixe style, utilisez-le et ignorez la grille de comparaison sauf si l'utilisateur la demande. Construisez les 1 à 2 décors les plus utilisés ainsi que 3 plans représentatifs (un plan large avec ≥ 2 personnages, un gros plan bigFace, un plan de données/plan ou 3D). Rendez ensuite :

node render.mjs --project projects/<slug> --styles dusk,midnight,golden,neon,storybook --at <t1>,<t2>,<t3> --scale 0.5

Ouvrez build/styles/style_grid.png, puis montrez-la avec une ligne par style : dusk (ombres mauves, clé ambre, rim crème), midnight (bleu marine froid, rims blanc-bleu, lumières pratiques sodium), golden (orange chaud et teal), neon (noirs profonds, magenta et teal), storybook (pastel doux, faible contraste). Enregistrez le choix dans config.json → style. Pour des ajustements, ajoutez une entrée personnalisée à STYLES dans engine/styles.js (remplacements d'ambiances plus les valeurs lift/gamma/gain, sat, contraste, vignette, grain, bloom du grade) et re-rendez cette ligne.

Étape 6 : Construire chaque plan

Lisez references/engine-api.md et les scènes d'exemple dans examples/reaction-time/scenes/ une fois. Travaillez par lots de 8 à 12 plans :

  1. Écrivez scenes/sets/<location>.js (réutilisable, ancré à GY = E.H * V(0.8, 0.68) et CX = E.W/2, avec murs, sol et ciel s'étendant au-delà du cadre) et scenes/shots/NN_<name>.js avec registerShot('<id>', {...}) pour les identifiants dans shots.json.
  2. Exécutez node render.mjs --project projects/<slug> --sheet --scale 0.5 --shots <id1>,<id2>,... pour obtenir une planche-contact. Ouvrez-la et examinez-la.
  3. Corrigez les scènes, puis exécutez node render.mjs --project projects/<slug> --still <id> --scale 1 pour les plans problématiques.

Pour le casting toon uniquement : si un plan nécessite un accessoire héroïque (objet 3D toon-shaded avec lueur), utilisez three-kit.js (kind: '3d', model: 'url'). Écrivez d'abord l'accessoire dans scenes/props/<name>.js (Three.js géométrie + matériau toon-shaded + lueur), puis référencez-le dans le plan.

Étape 7 : Conception sonore

Lisez references/sound-design.md. Exécutez node mix.mjs --project projects/<slug> --preview pour un aperçu audio. Ajustez les niveaux dans config.json → audio si nécessaire. Lorsque c'est acceptable, exécutez node mix.mjs --project projects/<slug> --final pour produire la piste audio finale.

Étape 8 : Rendu final

node render.mjs --project projects/<slug> --render --scale 1

Cela produit out/<title>.<code>.mp4 (ou .mov si configuré). Vérifiez la durée, les sous-titres incrustés et l'audio. Exécutez la liste de contrôle qualité dans references/render-qc.md. Si des correctifs sont nécessaires, corrigez et re-rendez uniquement les plans concernés avec --shots.

Étape 9 : Livraison

Copiez le fichier de sortie dans le répertoire de travail de l'utilisateur ou à l'emplacement demandé. Fournissez un fichier SRT séparé (out/<title>.<code>.srt) si demandé. Confirmez la résolution, la durée, la taille du fichier et la langue.

Dépannage

  • ffmpeg introuvable : exécutez python tools/doctor.py ou sur Windows tools/jobs/setup-studio.bat.
  • Erreurs de rendu : vérifiez projects/<slug>/jobs/logs/ ou exécutez node render.mjs --project <slug> --still <id>.
  • Problèmes de police : confirmez que la police du titre est disponible ; pour les scripts non couverts, prévenez l'utilisateur.
  • Désynchronisation audio : vérifiez timeline/transcript.txt et ajustez les horodatages dans story/shots.json ou exécutez à nouveau tools/transcribe.py avec un modèle plus grand.

Skills associés