Code-to-Video Explainer Studio (通用代码化动画视频引擎)

Was macht Code-to-Video Explainer Studio (通用代码化动画视频引擎)?

📘 Ausführliche Bedienungsanleitung finden Sie im：README.md (enthält Umgebungscheck, 6 Stilrichtlinien, Sprachoptionen, plattformübergreifende Agentenintegration und Fehlerbehebung).

Diese Fähigkeit verwandelt jeden KI-Coding-Agenten (wie Claude Code, Codex, DeepSeek Harness, OpenHands/OpenClaw, Antigravity, Cursor) mit Datei-Lese-/Schreib- und Befehlszeilen-Fähigkeiten in einen professionellen Videoregisseur, Animationsprogrammierer und Produzenten. Durch den Antrieb der lokalen codegesteuerten Video-Rendering-Engine wird jeder Text, jedes Code-Repository, jedes Paper oder jede Idee schnell in ein hochauflösendes 1080p 60fps animiertes Erklärvideo im Tinten-auf-Papier-Stil umgewandelt.

---

Drei Kernregeln (Müssen von allen Agenten strikt befolgt werden)

1. Zuerst das Storyboard festlegen, dann Code schreiben (Human-in-the-Loop)： Bevor der Benutzer das storyboard.json nicht explizit bestätigt hat, ist es streng verboten, spezifischen Seitencode zu schreiben oder den endgültigen Render auszuführen.
2. Zeit ist eine reine Funktion $Visual = f(t)$： Der Seitencode muss eine reine Funktion der unabhängigen Variablen Zeit $t$ sein. Verboten sind Math.random() (Zufallszahlen müssen mit PV.rng(seed) generiert werden), Date.now() sowie CSS transitions / requestAnimationFrame.
3. Untertitel-Ausweichzone (Safe Zone)： Die Leinwandgröße beträgt 1920×1080. Der untere Bereich $y > 900$ ist ausschließlich für Untertitel reserviert. Es ist verboten, dort Hauptgrafiken oder Text zu platzieren; der Hauptaktivitätsbereich liegt zwischen x: 140~1780, y: 180~880.

---

Produktionspipeline (Standard-Fünf-Schritte-Methode)

Schritt 1: Materialaufnahme und Storyboard-Design (Storyboard)

Wenn der Benutzer eine Videoanfrage stellt (oder Material liefert)：

1. Kernmetapher festlegen：Finden Sie ein durchgängiges konkretes Objekt für das gesamte Video (z. B. für Aufmerksamkeitsmechanismus einen „Scheinwerfer“, für Cache „Post-its auf dem Schreibtisch“, für Fluidgleichungen „Wassertank und Rohre“).
2. Erzählstruktur planen：
   • Hook (Haken in den ersten 3 Sekunden)：Stellen Sie eine kontraintuitive Frage oder das Kernproblem.
   • Intuition (Intuition aufbauen)：Führen Sie die Kernmetapher ein.
   • Mechanism (Prinziperklärung)：Zerlegen Sie die Kernformel oder Schritte.
   • Example & Numbers (Beispiel und Berechnung)：Gehen Sie die konkreten Daten einmal durch.
   • Close (Abschluss und Zusammenfassung)：Schaffen Sie eine Verbindung zum Anfang und beantworten Sie den Hook.
3. Storyboard-Struktur generieren： Geben Sie eine Storyboard-Gliederung mit 48 Seiten aus, jede Seite mit id, section, say (Zusammenfassung des Skripts) und 24 beats (spezifische Aktionsschläge, mit object, action, text, camera).
4. Benutzerbestätigung einholen： Präsentieren Sie das Storyboard dem Benutzer und fragen Sie: „Das Storyboard wurde erstellt. Bitte überprüfen Sie die Seitenstruktur und den Erzählrhythmus. Nach Ihrer Bestätigung gehen wir zur Codierungsphase über.“

Ausführliche Spezifikationen und Strukturvorlagen finden Sie unter： STORYBOARD_RULES.md

---

Schritt 2: Skripterstellung und Zeitachse (Script & Narration)

Nach Bestätigung des Storyboards wird script.js erstellt：

1. Extrahieren Sie die spezifischen Sprachzeilen für jede Seite und zerlegen Sie sie in cues (Untertitel-Kurzzeilen), die jeweils nicht länger als 16 Zeichen sind.
2. Verwenden Sie die Sprach-Engine (lokal CosyVoice 3 auf Port 9880, Edge-TTS oder Umgebungsvariablen VOLCENGINE_TTS_API_KEY / ELEVENLABS_API_KEY), um Audio für jede Zeile zu generieren.
3. Extrahieren Sie die tatsächlichen Lesungszeitstempel und weisen Sie jedem cue einen physikalischen Zeitpunkt zu (P.c(i) Startzeit, P.cw(i, 'Schlüsselwort') wortgenauer Trefferzeitpunkt).

---

Schritt 3: Seitenweise Animationsprogrammierung (Page Drawing Code)

Jede Seite entspricht einer Datei pages/pNN.js, die mit der deklarativen API der Engine geschrieben wird：

ENGINE.visual('p01', (P) => {
  P.title('① Kernprinzip Intuition', { accent: 'orange' });
  // Binde die 0. Sprachzeile, um die Hauptkarte zu öffnen
  P.card(200, 260, 700, 480, { title: 'Eingabemerkmale', at: P.c(0) });
  // Wenn ein bestimmtes Wort gesprochen wird, Pfeil und Hervorhebung auslösen
  P.arrow(920, 500, 1100, 500, { at: P.cw(1, 'Transformation') });
  // Schrittweise mathematische Formelableitung
  P.mathDecompose(1140, 400, 600, {
    title: 'Aufmerksamkeitswert',
    terms: [
      { latex: 'Q K^T', name: 'Produkt aus Query und Key', color: 'blue', at: P.c(2) },
      { latex: '\\sqrt{d_k}', name: 'Skalierungsfaktor', color: 'orange', at: P.c(3) }
    ]
  });
});

Hinweis: In Agent-Umgebungen, die Sub-Agenten oder parallele Aufgaben unterstützen, können mehrere Sub-Agenten gleichzeitig verschiedene Seiten schreiben, um die Generierungsgeschwindigkeit zu erhöhen.
Vollständige API-Syntax und Komponentenliste finden Sie unter： API.md

---

Schritt 4: Geschlossener Geometrie- und Qualitätssicherungskreislauf (Automated QA Loop)

Nachdem der Code geschrieben wurde, muss die Selbstprüfung ausgeführt werden. Überspringen ist streng verboten：

1. Führen Sie das Selbstprüf-Tool im Projektverzeichnis aus：

   node engine/tools/check.mjs --only p01
   

2. Feedback verarbeiten：
   • Bei Collision detected oder Safe zone overlap：
   • Extrahieren Sie den Fix suggestion: ... aus der Ausgabe und passen Sie die Koordinaten in pages/pNN.js entsprechend an.
3. Wiederholen Sie die Selbstprüfung, bis alle Seiten grün (Bestanden) sind.

---

Schritt 5: 1080p Multi-Core Headless Rendering (Render)

Nachdem alle Seiten die Selbstprüfung bestanden haben, führen Sie den parallelen Render-Befehl aus：

# 16:9 Querformat 1080p 60fps Rendern (mit Hardwarebeschleunigung)
node engine/tools/render.mjs --fps 60 --workers 4 --hw

• Die Ausgabe befindet sich in <Projektverzeichnis>/out/：
  • <Projektname>-with-subtitles.mp4 (mit präzisen zweisprachigen Untertiteln)
  • <Projektname>-no-subtitles.mp4 (saubere Version ohne Untertitel)
  • Veröffentlichungstext und Kapitel-Zeitstempel.

---

Schnellstartmodus: Vollautomatischer Ein-Klick-Videoexport (CLI Run)

Wenn der Benutzer einen vollautomatischen End-to-End-Entwurf eines Videos wünscht, kann auch die integrierte automatisierte CLI im Projektstammverzeichnis aufgerufen werden：

# End-to-End-Vollautomatik (Analysiere Dokument -> Erstelle Storyboard -> Generiere Seiten -> Rendere)
node apps/cli/dist/cli.js run <Pfad zur Materialdatei> --style warm-story --duration 60

Oder starten Sie die Web-Workbench für eine Echtzeit-Zeitachsenvorschau：

node apps/cli/dist/cli.js serve

---

Plattformübergreifende Integration für Agenten (Universal Compatibility)

Diese Fähigkeit ist an keine spezifische Agent-Umgebung gebunden und benötigt nur eine Node.js-Umgebung mit Datei-Lese-/Schreib-Funktionen：

• Claude Code：Referenzieren Sie diese Datei in der CLAUDE.md des Projektstammverzeichnisses, um sie global zu aktivieren, oder verwenden Sie sie als benutzerdefinierten Befehl.
• OpenHands / OpenClaw：Platzieren Sie das Fähigkeitsverzeichnis im Projekt und deklarieren Sie es in AGENTS.md zur automatischen Montage.
• DeepSeek Harness / Eigener Agent：Direkt als System Prompt oder Skill Tool Context in das große Modell injizieren.
• Cursor / Windsurf：Im Dialog durch @SKILL.md aufrufen.