Communitygithub.com

make-2d-video – 2D-Video-Studio

Diese Fähigkeit erstellt vollständige animierte Erklärvideos mit Voiceover im Stil von Paper Billions – inklusive Installation, Timestamps, Story-Breakdown, Stilwahl, Szenenbau, Rendering, Musik und Soundeffekten.

Was ist make-2d-video – 2D-Video-Studio?

Diese Fähigkeit ist ein umfassendes Studio zur Erstellung von animierten 2D-Videos, die vollständig per Code generiert werden. Sie verwendet HTML Canvas, Three.js und ffmpeg, um aus einer Sprachaufnahme ein fertiges MP4-Video zu erstellen – ohne Bild- oder Videogenerierungsmodelle. Dadurch bleiben Charaktere konsistent und Texte scharf. Die Fähigkeit unterstützt drei Zeichenstile: filmische Strichmännchen (Standard), 3D-Cartoon-Figuren und „Toon“-Figuren (2D-Cartoon mit Outlines, runden Köpfen, Comic-Text und Karikaturen). Sie eignet sich besonders für Nachrichten-Erklärvideos und Kanäle wie „Paper Billions“ und wird durch Claude Code, Cursor, Codex, Cline und andere Coding-Agenten ausgeführt. Der gesamte Workflow ist in Phasen unterteilt: Video-Sprache, Installation, Projektanlage, Story-Breakdown, Stilauswahl, Szenenbau, Rendering, Sounddesign und finale Ausgabe. Die Fähigkeit enthält umfangreiche Referenzen und stellt sicher, dass jede Phase dokumentiert ist und der Benutzer an drei Checkpoints die Möglichkeit hat, Eingaben zu machen.

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

make-2d-video studio: vollständige Video-Pipeline

Wandle eine Sprachaufnahme (optional mit Skript) in ein fertiges MP4 um, bei dem jedes Bild per Code gezeichnet wird (HTML Canvas + Three.js), Bild für Bild in einem headless Chromium aufgenommen und mit ffmpeg codiert wird. Es werden keine Bild- oder Videogenerierungsmodelle verwendet, so dass die Figuren konsistent bleiben und der Text gestochen scharf ist. Die Bilder werden für jedes Skript neu erfunden; nur der Stil ist festgelegt.

Gebündelte Ressourcen (das Basisverzeichnis dieser Fähigkeit):

  • kit/: das getestete Studio (Renderer, Engine, Werkzeuge, Audio, das Referenzprojekt examples/reaction-time). Installiere es in das Arbeitsverzeichnis als make-2d-video-studio/ (siehe references/install.md).
  • references/install.md: Installation, Abhängigkeitstabelle, Doctor, Selbsttest.
  • references/style-bible.md: Der Look (Figuren, Sets, Licht, Kamera, Schnitt, Grafiken, 9:16-Regeln, Verbote). Lies es vollständig, bevor du eine Einstellung entwirfst.
  • references/style-bible-toon.md: Der Look für die Toon-Figur (cast: "toon"). Wenn die Figur Toon ist, folge diesem Dokument anstelle der Teile von style-bible.md, die widersprechen (Randlicht, keine Konturen, schwarze Silhouetten).
  • references/story-breakdown.md: Schreiben von story/bible.md und story/shots.json, plus Rhythmus-Regeln.
  • references/engine-api.md: Die Szenen-API, Konfiguration und shots.json-Schemas sowie die Drei-Kit-Referenz.
  • references/sound-design.md: Der Musikplan, die SFX-Bibliothek, Atmosphäre und Pegel.
  • references/render-qc.md: Vorschau und finales Rendern, Geschwindigkeitsleitfaden, QC-Checkliste, Fehlerbehebung.

Phasen-Befehle von diesem Plugin führen eine Phase erneut aus: /new-video (Phasen 1–4), /video-styles (5), /render-video (6 und 8), /video-sound (7). Wenn du von Anfang bis Ende arbeitest, folge dieser Datei und lade die Referenzen, wenn jede Phase sie benötigt.

Goldene Regeln

  1. Frage zuerst nach der Videosprache. Stelle vor jeder anderen Frage, Installation, Datei oder Bearbeitung dem Benutzer eine Frage zur Videosprache (Phase 0). Jeder spätere Schritt verwendet diese Sprache. Sprich mit dem Benutzer in der Sprache, in der er schreibt.
  2. Halte die Erzählung intakt. Ändere, füge hinzu oder entferne niemals gesprochene Wörter. Jede Einstellung veranschaulicht die Wörter, die während ihrer Einblendung gesprochen werden.
  3. Gleicher Stil, neue Bilder. Erfinde Sets, Requisiten, Figuren und Aktionen aus diesem Skript. Verwende examples/reaction-time nur, um die API zu lernen.
  4. Zeige, was gesagt wird, wörtlich und spezifisch. Abstrakte Zeilen werden zu visuellen Metaphern, Diagrammen oder Nahaufnahmen von Reaktionen.
  5. Entwurf, Ansicht, Korrektur, dann Rendern. Öffne Kontaktabzüge und Standbilder selbst (lies die PNGs), bevor du ein vollständiges Rendern durchführst. Rendern ist langsam; Ansicht ist schnell.
  6. Drei Benutzer-Prüfpunkte: Einrichtungsentscheidungen, Stilwahl aus gerenderten Beispielen und die Vorschau vor dem endgültigen Rendern. Wenn der Benutzer abwesend ist, übernimm die Standardeinstellungen, gib an, was angenommen wurde, und fahre fort.
  7. Dateien sind die Wahrheit. Jedes Video lebt in make-2d-video-studio/projects/<slug>/, und story/shots.json besitzt alle Zeitsteuerung. Ein Video = ein eigenständiger Ordner: config.json, input/, assets/ (+ assets/_raw/ für nicht ausgewählte KI-Bilder), scenes/, story/ (inkl. plan.md Übergabenotizen), timeline/, jobs/ (+ jobs/logs/), build/ (temporär, kann gelöscht werden), out/ (nur Liefergegenstände). Lege niemals videobezogene Dateien im Studio-Stammverzeichnis oder in einem separaten _jobs/-Ordner ab.
  8. Nur Personen aus der Geschichte erscheinen auf dem Bildschirm (Nachrichten-/Erklärvideos). Keine Kanal-Maskottchen oder Erzähler-/Moderatorenfiguren (z. B. nhoc, ongdo), es sei denn, der Benutzer fragt danach. Jede namentlich genannte Person in den Nachrichten bekommt ihre eigene Toon-Figur (Signaturhaare, Brille, Outfit, gemäß den Karikaturregeln in style-bible-toon.md) plus ein Namensschild, keine generische Figur oder Silhouette. Private oder unbenannte Personen (unbestätigte Verdächtige, Familienmitglieder) bleiben anonym: eine generische unbenannte Toon-Figur oder eine Silhouette mit einem Rollenlabel.

Kanal-Standardeinstellungen (channel.json)

Suche vor Phase 0 nach channel.json neben make-2d-video-studio/ (dem Arbeitsverzeichnis, das das Studio enthält), dann im aktuellen Ordner, dann im Basisverzeichnis dieser Fähigkeit (der Kopie, die mit der Fähigkeit reist; kopiere sie auf einem neuen Rechner neben das Studio, sobald es installiert ist). Es kann name, lang, aspect, resolution, fps, style, cast (stick | 3d | toon), captions, shotsPerMin und music enthalten. Jeder vorhandene Schlüssel ist die Standardeinstellung für dieses Video: Überspringe die Fragen, die es beantwortet (Sprache, Seitenverhältnis, Auflösung, fps, Untertitel, Stilauswahl in Phase 5) und bestätige sie stattdessen in EINER Zeile, z. B. "Kênh Tí Tò Mò: tiếng Việt, 9:16, 1080p, 30 fps, dämmerung, mit Untertiteln." Frage nur, was noch unbekannt ist (Sprachaufnahme, Skript, Titel). name ist der Kanalname für Endkarten.

Die drei Zeichenstile (wähle EINE Figur pro Video)

castLookEngineStil-Bibel
stick (Standard)Schwarze Strichmännchen mit Randlicht, stimmungsvollen kinoreifen 2.5D-Setsrig2d.js (+ three-kit.js für 3D-Einstellungen)style-bible.md
3d3D-Cartoon-Figuren: weiße flache Köpfe, birnenförmige Körper, Nudelgliederrig3d.js, rig3d-cast.js (kind: '3d', rig3d: true)style-bible.md → "2D cast or 3D cast"
toonUmrissener flacher 2D-Cartoon: runde hautfarbene Köpfe, Bohnenkörper, Strichglieder, dicke Umrandungen, Linienunruhe, Comic-Text, visuelle Gags, Karikaturen öffentlicher Personen; optionale toon-schattierte 3D-Heldenrequisiten mit Glühentoon.js, toon3d.jsstyle-bible-toon.md

channel.json → cast entscheidet; ansonsten einmal in Phase 1 fragen (eine Zeile pro Stil). Für toon ist der Standard-Farbstil paper (die filmischen Grade funktionieren auch, verdunkeln aber die flachen Farben). Studiere examples/toon-demo/, bevor du Toon-Einstellungen schreibst.

Nachrichten-Erklärmodus (Toon-Figur, das Hauptformat des Kanals)

Wenn der Benutzer nach einem Nachrichten-/Finanz-/Technologie-/Milliardär-/Anlagevermögen-Erklärvideo fragt, folge kit/CLAUDE.md (installiert als make-2d-video-studio/CLAUDE.md). Es ersetzt die Phasen 1–8 unten durch einen abgestuften Workflow: 0 Themenauswahl (3–5 Kandidaten mit Quellenstärke, Risiko und Haltbarkeit) ✋ → 1 quellenbasiertes Skript + 3 Titel + Thumbnail-Konzept ✋ → 2a Stimme und 2b Anlagenmanifest (story/assets.md: was zu zeichnen ist, Anzahl, erstellt mit Flow / der Bild-KI des Benutzers / Code-Toon / Three.js + Bloom) ✋ → 3 Bilder + Charakterblätter ✋ → 4 Timing + Szenen → 5 Kontaktabzug aller Einstellungen + 30 s Demo ✋ → 6 vollständiges Rendern → 7 Paket (Thumbnail, Beschreibung mit Quellen, Kapitel, veraltete-Liste) ✋ → 8 Hochladen ✋ → 9 Statistiken prüfen. Szenenbilder: keine Personen, kein Text, keine Logos. Thumbnails: können Personen enthalten (stilisiert, niemals fotorealistische Fälschungen echter Personen) und ≤ 4 Wörter Text. Lade niemals über die YouTube Data API von einem nicht geprüften Projekt hoch (Uploads werden privat gesperrt); lade über die YouTube Studio-Website hoch, speichere als Privat/Geplant und veröffentliche nur auf ausdrückliche Anweisung des Benutzers. Führe in einer lokalen Claude Code-Sitzung jeden Befehl selbst aus; schreibe .bat-Jobs nur, wenn du keine Windows-Shell hast.

Phase 0: Videosprache (immer zuerst)

Wenn channel.json lang angibt, bestätige es in der einzeiligen Zusammenfassung oben, anstatt zu fragen. Andernfalls stelle vor jeder anderen Frage, dem Erstellen von Dateien, der Installation oder Bearbeitung genau eine Frage in der Sprache des Benutzers, zum Beispiel: "Welche Sprache wird in diesem Video verwendet? (z. B. Deutsch, English, 日本語…)". Verwende AskUserQuestion, wenn verfügbar. Warte auf die Antwort und ordne sie dann einem ISO 639-1-Code zu (de, en, ja, ko, es, pt, fr, hi, …). Wenn der Benutzer die Videosprache bereits früher in diesem Gespräch genannt hat, bestätige sie in einer Zeile, anstatt erneut zu fragen.

Der Sprachcode steuert die gesamte Pipeline:

  • --lang <code> bei tools/new_project.py (gespeichert in config.json → lang). tools/transcribe.py liest ihn aus der Konfiguration.
  • Der gesamte Bildschirmtext (Titelkarten, Labels, Einheiten, Schilder, Diagrammbeschriftungen, eingebrannte Untertitel) wird in dieser Sprache geschrieben, kurz und korrekt mit vollständigen diakritischen Zeichen. Übersetze oder ändere niemals die gesprochene Erzählung.
  • Schriftarten: Der Renderer lädt lateinische, lateinische erweiterte und vietnamesische Glyphen; für vi wechselt die Titelschriftart automatisch zu Nunito, sodass Akzente in einer einheitlichen Schriftart gerendert werden. Für Schriften, die die gebündelten Schriftarten nicht abdecken (Japanisch, Koreanisch, Chinesisch, Arabisch, Hindi, Thai…), informiere den Benutzer und überprüfe Text-Standbilder während der QC sorgfältig.

Phase 1: Aufnahme

Nachdem die Sprache bekannt ist, frage einmal (AskUserQuestion, wenn verfügbar) nach:

  • Sprachaufnahme-Datei (erforderlich). Noch keine Aufnahme? Erstelle eine mit VieNeu (wenn seine MCP-Tools verbunden sind): synthetisiere EINEN Clip pro Satz (01.wav, 02.wav, … in einem Ordner), schreibe die Sätze zeilenweise in sentences.txt (optional |0.8 Pausen- oder |cham Verlangsamungsmarkierungen, Emotions-Tags wie [cười] bleiben in der Zeile), dann python -I tools/join_segments.py <clip_dir> sentences.txt voiceover.wav. Es verbindet die Clips mit festen Pausen (VieNeu fügt kurze Sätze zusammen und lässt Pausen weg, wenn ein ganzes Skript übergeben wird) und schreibt voiceover.wav.script.txt, den sauberen Text, der als --script übergeben wird.
  • Skript: mit Zeitstempeln (SRT/VTT/JSON/TXT mit [mm:ss]), Klartext (am besten: an das Audio angepasst, mit genauer Wortwahl), oder keines (wird transkribiert).
  • Seitenverhältnis: 16:9 oder 9:16.
  • Auflösung: 720p / 1080p (empfohlen) / 1440p / 2160p (4K). Erwähne, dass höhere Auflösungen viel länger zum Rendern brauchen.
  • Untertitel: standardmäßig an für 9:16, aus für 16:9.
  • Musik: generiert, eigene Datei des Benutzers oder keine. SFX: an oder aus.
  • Titel.
  • Figur (Zeichenstil): Stick / 3D / Toon, es sei denn, channel.json gibt cast an.

Frage noch nicht nach dem Farbstil. Standardeinstellungen (wenn channel.json nichts angibt): 16:9, 1080p, 24 fps, generierte Musik + SFX, Figur stick, Stil dusk (paper für Toon).

Phase 2: Installiere oder überprüfe das Studio

Folge references/install.md: Kopiere kit/ nach make-2d-video-studio/ in das Arbeitsverzeichnis (überspringe, wenn bereits vorhanden), installiere Abhängigkeiten, führe python tools/verify_kit.py und python tools/doctor.py aus, dann führe den Beispiel-Selbsttest durch. Melde, was in einer kurzen Liste installiert wurde. Unter Windows, wenn doctor ffmpeg nur im winget-Ordner findet, schreibt es make-2d-video-studio/env.sh und env.ps1; stelle Render- und Mix-Befehlen source env.sh && voran (eine vor der Installation gestartete Shell sieht den neuen PATH nicht).

Phase 3: Projekt + Zeitachse

Führe innerhalb von make-2d-video-studio/ aus. Verwende python3, wo python nicht Python 3 ist.

Windows ohne verwendbares Terminal (Computer Use kann nur im Datei-Explorer klicken): Lege jeden langen Schritt in einen Job, den der Benutzer per Doppelklick ausführt. Kopiere tools/jobs/templates/full.ps1 + 2-full.bat in projects/<slug>/jobs/; jeder Job .ps1 beginnt mit $JobDir = $PSScriptRoot und bezieht ..\..\..\tools\jobs\common.ps1 per Punkt-Quelle (gibt $P, Run, Py, Say, Fail, Done und schreibt jobs/logs/<name>.log + <name>.status = RUNNING / OK / FAILED, damit Claude sie lesen kann). Gemeinsame Helfer: tools/jobs/set_duration.py (config.json Dauer aus der Sprachaufnahme), tools/jobs/make_srt.py (out/<title>.de.srt aus timeline/sentences.json). Studio-Installation/Reparatur unter Windows: tools/jobs/setup-studio.bat.

python tools/new_project.py --name <slug> --voice "<voiceover path>" [--script "<script path>"] --aspect 16:9 --resolution 1080p --fps 24 --style dusk --title "<title>" --lang <code> [--captions]
  • Skript mit Zeitstempeln: python tools/parse_script.py --project projects/<slug> --script projects/<slug>/input/script.<ext>
  • Klartext-Skript: python tools/transcribe.py --project projects/<slug> --script projects/<slug>/input/script.txt --lang <code> --model small. Die Übereinstimmung muss ≥ 90 % betragen; ist sie niedriger, teile dem Benutzer mit, dass sich Skript und Audio unterscheiden.
  • Kein Skript: python tools/transcribe.py --project projects/<slug> --lang <code> --model small (base auf langsamen Maschinen, large-v3 für schwieriges Audio).

Überprüfe timeline/transcript.txt (sein Ende sollte nahe der Länge der Sprachaufnahme sein), dann führe python tools/beats.py --project projects/<slug> aus, um das Beat-Blatt und einen Entwurf von story/shots.json zu erhalten.

Phase 4: Story-Aufschlüsselung

Lies references/style-bible.md (oder references/style-bible-toon.md für die Toon-Figur) und references/story-breakdown.md. Schreibe story/bible.md (Logline, Besetzung mit einer Signaturfarbe pro Person, Orte mit Stimmungen und Schlüssellichtern, Motive, Musikplan und ob die Besetzung aus 2D-Strichmännchen oder 3D-Figuren besteht). Schreibe scenes/cast.js. Schreibe story/shots.json neu: zusammenhängende Einstellungen, Schnitte an Phrasengrenzen 0,1–0,2 s früher, eine Einführungseinstellung pro neuem Ort und eine konkrete scene-Beschreibung für jede. Rhythmus: 9:16-Kurzfilme laufen 30–40 Einstellungen pro Minute (Median 1,5–2 s); lange 16:9-Erklärvideos laufen 15–25 (Median 2–3,5 s). channel.json → shotsPerMin überschreibt beide. Sende dem Benutzer eine 5–10-zeilige Planzusammenfassung und fahre fort, es sei denn, er widerspricht.

Phase 5: Stilwahl

Wenn channel.json style festlegt, verwende es und überspringe das Vergleichsraster, es sei denn, der Benutzer fragt danach. Baue die 1–2 am häufigsten verwendeten Sets plus 3 repräsentative Einstellungen (eine Weitwinkelaufnahme mit ≥ 2 Figuren, eine bigFace-Nahaufnahme, eine Daten-/Blaupausen- oder 3D-Einstellung). Rendere dann:

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

Öffne build/styles/style_grid.png, zeige es dann mit einer Zeile pro Stil: dusk (mauve Schatten, bernsteinfarbenes Schlüssellicht, cremefarbenes Randlicht), midnight (kaltes Marineblau, blau-weiße Ränder, natriumhaltige Praktikumsleuchten), golden (warmes Orange und Blaugrün), neon (tiefes Schwarz, Magenta und Blaugrün), storybook (weiches Pastell, geringer Kontrast). Speichere die Auswahl in config.json → style. Für Anpassungen füge einen benutzerdefinierten Eintrag zu STYLES in engine/styles.js hinzu (Stimmungs-Overrides plus den grade-Lift/Gamma/Gain, Sättigung, Kontrast, Vignette, Körnung, Bloom) und rendere diese Zeile erneut.

Phase 6: Baue jede Einstellung

Lies references/engine-api.md und die Beispielszenen in examples/reaction-time/scenes/ einmal. Arbeite in Stapeln von 8–12 Einstellungen:

  1. Schreibe scenes/sets/<location>.js (wiederverwendbar, verankert an GY = E.H * V(0.8, 0.68) und CX = E.W/2, mit Wänden, Boden und Himmel, die über den Rahmen hinausgehen) und scenes/shots/NN_<name>.js mit registerShot('<id>', {...}) für die IDs in shots.json.
  2. Führe `node render.mjs --project projects/ --sheet --scale 0.

… [für die Übersetzung gekürzt]

Verwandte Skills