Communitygithub.com

liangruibupt/explainer-video-pipeline

Erstelle ein erklärendes Video (1–3 Minuten) mit Erzählung, Opus Storyboard, programmatisch gezeichneten Frames, Polly-Stimme, Wort-für-Wort-Untertiteln, Musik und Soundeffekten – mit austauschbaren Renderern.

Was ist explainer-video-pipeline?

Dieses Skill ermöglicht die automatisierte Produktion von erklärenden Videos im MP4-Format mit Sprachausgabe, Untertiteln, Musik und Soundeffekten. Es richtet sich an Entwickler und KI-Agenten, die schnell professionelle Erklärvideos zu beliebigen Themen (Wissenschaft, Produkte, Technologie) erstellen möchten. Der Prozess umfasst die Skripterstellung und Storyboard-Generierung durch ein Sprachmodell (z. B. Claude Opus 5.5), die programmatische Erzeugung jedes Frames (via Remotion, HTML/Canvas oder Manim), die Synchronisation von Sprache und Untertiteln (Whisper + Polly/gTTS) sowie das abschließende Compositing mit FFmpeg. Das Skill unterstützt mehrere Renderer und Sprachmodelle, die je nach Bedarf ausgetauscht werden können. Es ist für den Einsatz mit Claude Code, Cursor und ähnlichen KI-Agenten-Plattformen optimiert und erfordert eine einmalige Umgebungseinrichtung (ffmpeg, Python-Venv, optional Manim). Der Workflow ist in 11 klar definierte Schritte unterteilt, von der Projekterstellung über das Storyboard und die Referenzbildverarbeitung bis hin zum finalen Export und Git-Commit.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/liangruibupt/explainer_video_platform/tree/HEAD/skills/explainer-video-pipeline

In Ihrer bevorzugten KI fragen

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

Dokumentation

explainer-video-pipeline (automatisch generiert)

Wann verwenden

Der Benutzer möchte ein 1–3 minütiges erklärtes Video zu einem Thema (Wissenschaft, ein Produkt, eine Technologie) als MP4 mit Sprachausgabe, Untertiteln, Musik und Soundeffekten.

Parameter und Standardwerte

Frage nur nach dem Thema; übernimm jeden anderen Standard, es sei denn, der Benutzer gibt einen Wert an. Sage in einer Zeile, welche Werte du verwendet hast.

ParameterStandardAndere Werte
topicerforderlich—
storyboard_modelclaude-opus-5.5 schreibt das Skript, die Erzählung und das Storyboardjede Modell-ID aus kiro-cli chat --list-models
video_engineopus-5.5: claude-opus-5.5 schreibt jede Szene als Code, der jeden Frame zeichnetein anderes Code-Modell, z. B. claude-sonnet-5.5; seedance (BytePlus ModelArk API, benötigt ARK_API_KEY); hybrid (Seedance-Clips innerhalb von Code-gezeichneten Szenen)
rendererremotion (React/SVG; Remotion steuert headless Chromium Frame für Frame)html (Canvas 2D / SVG / GSAP / p5.js-Seite, aufgezeichnet mit Playwright); manim (Manim Community-Szenen; am besten für Geometrie, Graphen, Vektoren und schrittweise Ableitungen)
seedance_modelseedance-1-5-pro-251215jedes Seedance-Modell, das im ModelArk-Konto des Benutzers aktiviert ist
ttspolly, neuronale Stimme Zhiyu, cmn-CN, us-east-1gtts (kostenlos, kein Schlüssel, flachere Stimme); jede andere Polly-Stimme/Sprache
captionsan: Whisper-Wort-Timing, als Wort-für-Wort hervorgehobene Untertitel eingebranntaus
whisper_modelsmall (CPU, int8; etwa 5 s für 10 s Sprache)base (schneller), medium (genaueres Timing)
musicsynth (lizenzfreier Oszillator-Teppich mit ffmpeg erzeugt)none; ein Pfad zu einer Musikdatei, die dem Benutzer gehört
sfxan: in scenes.json aufgeführte Ereignisse werden synthetisiert und auf ihren Frames platziertaus: sfx aus jeder Szene entfernen
languageMandarin-Erzählungjede Sprache, die sowohl Polly als auch Whisper unterstützen
size, fps1920×1080, 30 fps1080×1920 für vertikale Videos

„Erstellt mit Opus 5.5“ bedeutet, dass Opus 5.5 der Autor ist: Es schreibt das Skript und den Zeichencode, und ein Renderer wandelt diesen Code in Pixel um. Kein Textmodell gibt direkt Video aus; nur Seedance tut das. Sage dies einmal in der ersten Antwort. Wenn die Sitzung bereits auf claude-opus-5.5 läuft, führe das Schreiben selbst durch. Andernfalls starte einen Task mit model="claude-opus-5.5" und keep=true für das Storyboard (Schritt 2) und setze die gleiche Ausführung mit spawn_continue für den Szenencode (Schritt 5) fort, dann überprüfe seine Ausgabe selbst.

Einrichtung (einmal pro Maschine)

Halte Werkzeuge in einem stabilen Cache-Verzeichnis (z. B. ~/.cache/explainer-video/), niemals in $KIROCREW_SCRATCH, das zwischen Sitzungen zurückgesetzt wird.

  • ffmpeg: ein vollständiger statischer Build mit aevalsrc, anoisesrc, tremolo, sidechaincompress und ass/libass. Remotions gebündeltes ffmpeg hat diese nicht. Setze FFMPEG / FFPROBE darauf.
  • Python venv (boto3 gTTS playwright faster-whisper pillow numpy), dann python -m playwright install chromium-headless-shell aus diesem venv. faster-whisper 1.2.x bricht mit PyAV 19 ab (unexpected keyword argument 'metadata_errors'): pinne av==16.1.0. Setze HF_HOME auf das Cache-Verzeichnis, damit das Whisper-Modell nur einmal heruntergeladen wird.
  • Manim (nur für renderer=manim): pip kann es auf aarch64 nicht bauen (keine Wheels für pycairo, manimpango, moderngl). Ohne root verwende micromamba: micromamba create -p <cache>/manim-env -c conda-forge python=3.12 manim. Text() mit einer CJK-Schriftart funktioniert. MathTex/Tex benötigen eine LaTeX-Distribution plus dvisvgm; conda-forges texlive-core auf aarch64 hat kein latex.fmt, daher scheitern Formeln dort. Schreibe Formeln mit Text() (Unicode: F = m·a, x², √, →) oder installiere ein systemweites TeX Live, wenn der Benutzer das kann.

Schritte

Helfer befinden sich im scripts/-Ordner dieses Skills.

  1. Projekt. Erstelle einen Projektordner in einem Git-Repo unter dem Arbeitsbereich des Benutzers. Für renderer=remotion erstelle package.json, tsconfig.json (resolveJsonModule: true), src/index.ts, src/Root.tsx von Hand und führe npm i remotion @remotion/cli react react-dom aus.
  2. Skript und Storyboard (durch storyboard_model). Schreibe scenes.json: ein Objekt pro Szene mit id, narration (der gesprochene Satz), visual (was auf dem Bildschirm zu sehen ist), optional manim (Name der Scene-Klasse) und optional sfx: [{"at": FRAME_IN_SCENE, "kind": "whoosh|hiss|pop|rise|thud|PATH"}]. Verwende 6–10 Szenen, eine Idee pro Szene, mit einer Titelszene und einer Endkarte. Überprüfe Fakten mit Websuche und zitiere Quellen in der README.
  3. Referenzbilder. Wenn das Video ein reales Objekt zeigt, fordere ein klares Foto an oder suche eines und behalte es in ref/. Zeichne niemals die Form eines realen Objekts aus dem Gedächtnis: führe Kantenerkennung auf dem Foto durch, messe wichtige Punkte und erzeuge die Formen aus diesen Punkten mit einem kleinen Skript, das im Repo bleibt.
  4. Erzählung bestimmt das Timing. Führe narrate.py scenes.json . --tts polly aus. Es schreibt durations.json (Frames pro Szene, basierend auf der tatsächlichen Sprachlänge plus Padding), narration.wav und audio/sNN.mp3. Der Szenencode liest durations.json, sodass jede Szene genau so lange dauert wie ihr Satz.
  5. Szenencode (durch video_engine).
    • remotion: eine React-Komponente pro Szene, animiert mit useCurrentFrame und interpolate/spring relativ zum Start der Szene.
    • html: eine index.html mit window.seek = async (frame) => {...}, das genau diesen Frame aus der Frame-Nummer und dem durations.json-Array zeichnet. Kein requestAnimationFrame, keine Wanduhr, kein ungesähtes Math.random. Füge das durations.json-Array als Konstante in die Seite ein: Eine Seite, die als file:// geöffnet wird, kann keine lokale Datei per fetch() laden, und der Fehler ist still. GSAP: pausierte Timeline + tl.seek(frame / fps). p5.js: noLoop() + redraw() in seek.
    • manim: eine scenes.py mit einer Scene-Klasse pro Szene. Lese die Ziellänge aus os.environ["SCENE_SECONDS"] und beende mit self.wait(max(0.04, secs - self.renderer.time)); skaliere lange Animationen ebenfalls von secs. Halte die unteren 15 % des Frames für Untertitel frei.
    • seedance: seedance_clips.py scenes.json . mit gesetztem ARK_API_KEY; es lädt clips/<id>.mp4 herunter (URLs laufen nach 24 h ab).
  6. Überprüfe Standbilder vor dem vollständigen Rendern. Rendere 4–6 Frames, einen pro Schlüsselszene, kombiniere sie zu einem verkleinerten Kontaktbogen und betrachte dieses einzelne Bild. Für eine unabhängige Überprüfung starte einen neuen Reviewer nur mit dem Bogen und scenes.json.
  7. Ton. Wenn eine Szene sfx hat, führe sfx.py scenes.json . aus. Dann mix_bgm.py . --music <music>: Es duckt die Musik unter der Stimme, fügt sfx.wav hinzu, schreibt narration_bgm.wav und gibt RMS-Pegel aus. Der Musik-only-Vorspann sollte etwa −20 bis −30 dB betragen; −55 dB oder niedriger bedeutet, dass er unhörbar ist.
  8. Untertitel. captions.py scenes.json . --size <WxH> transkribiert jede Zeile mit faster-whisper-Wort-Zeitstempeln und ordnet sie den eigenen Zeichen des Skripts zu, da Whisper Homophone falsch versteht (es hörte 气体 als 漆体). Es schreibt captions.ass (jedes Zeichen wird hervorgehoben, wenn es gesprochen wird) und words.json (Zeitangaben pro Zeichen, verwendbar für Bildschirm-Hervorhebungen in Schritt 5).
  9. Rendern (stummes Bild).
    • remotion: npx remotion render src/index.ts <Comp> out/silent.mp4.
    • html: capture_html.py index.html out/silent.mp4 --frames <Summe von durations.json>.
    • manim: manim_scenes.py scenes.py . --manim <manim-env>/bin/manim --quality h. Es rendert jede Klasse und padet oder trimmt sie auf exakt ihre Frame-Anzahl.
  10. Komponiere mit FFmpeg. Mit Untertiteln: ffmpeg -i silent.mp4 -i narration_bgm.wav -vf "ass=captions.ass" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a aac -b:a 192k -shortest final.mp4 (ohne Untertitel verwende -c:v copy und lasse -vf weg). Überprüfe, ob Video- und Audiodauern innerhalb von etwa 0,1 s übereinstimmen, ziehe dann 4–5 Frames aus dem finalen MP4 und betrachte sie, einschließlich eines mitten im Satz, um die Untertitel-Hervorhebung zu sehen.
  11. Ausliefern. Committe in einen Feature-Branch, öffne einen PR und bestätige nach dem Merge mit gh api repos/<o>/<r>/git/trees/<base>?recursive=1, dass die Dateien gelandet sind.

Fallstricke

  • Setze niemals /* */-Kommentare innerhalb eines SVG-Pfad-d=-Strings; Chromium hört beim / auf zu parsen. Verwende 6-stellige Hex-Farben.
  • Code mit fest codierten absoluten Frame-Nummern kann einen Höhepunkt nach dem Ende seiner Szene platzieren.
  • Positioniere in Manim Beschriftungen und Pfeile, nachdem sich das Objekt bewegt hat (oder hänge sie mit always_redraw/add_updater an), sonst bleiben sie an der alten Stelle. DashedVMobject hat keine eigenen Punkte: nimm Positionen von einer einfachen Form.
  • Ein per pip installiertes Playwright möchte möglicherweise einen neueren Chromium-Build als den zwischengespeicherten.
  • Bearbeite nicht eine Datei mit mehreren parallelen strReplace-Aufrufen; Änderungen gehen verloren. Schreibe keinen Code durch Shell-Heredocs; Schutzmechanismen können sie blockieren.
  • Seedance 2.x-Modelle benötigen eine Kontenaktivierung und lehnen Referenzbilder mit echten menschlichen Gesichtern ab. Seedance 1.5 Pro-Clips sind 4–12 s lang.
  • Remotion-Lizenz: kostenlos für Einzelpersonen und Unternehmen mit bis zu 3 Personen; größere Unternehmen benötigen eine kostenpflichtige Unternehmenslizenz. html und manim umgehen dies.

Verwandte Skills