VoxFlow Video Skill
Erstellen Sie Kurzformvideos mit KI: Das LLM schreibt das Skript, die KI zeichnet Karten oder Szenen, TTS spricht den Text, FFmpeg / Remotion rendert das finale MP4.
Für Artikel-zu-Karten-Reels (Slice – 13 Designs: Papierfolie / redaktionelles Magazin / fettes Poster / Notion-Karte / brutalistisch / Glas-dunkel / redaktionelle Schablone / Schautafel / Blaupause / Gänseblümchen-Pastell / Showa-Katalog / Foto-Feature / atmosphärisch) wechseln Sie zu voxflow:slice. Für teilbare HTML/CSS-Kartenbildsätze oder erzählte Karten-zu-MP4-Exporte wechseln Sie zu voxflow:card.
Fünf Einstiegspunkte – wählen Sie danach, was der Benutzer möchte:
| Befehl | Ausgabe | Verwendung wenn |
|---|---|---|
picstory | Vertikales/Landschafts-MP4 mit handgezeichneten Karten oder filmischen Szenen | "Wissenskarten-Video", 小红书 / Twitter Edu, Sketchnote-Tutorials |
present | 1080×1920 erzähltes Kartenvideo, 5 visuelle Schemata | Pitch Decks, Erklärvideos, gebrandete Kurzformate |
explain | MP4-Erklärvideo mit Titel / Aufzählungspunkten / Zusammenfassungsszenen | "Was ist X?"-Tutorials, Kurseinführungen |
slides | Eigenständiges HTML-Foliendeck mit eingebettetem TTS-Audio | Produkteinführungen, Vorträge, zum Teilen als Link |
image | Einzelnes PNG | Einmalige Illustrationen / Thumbnails (Hunyuan TextToImage) |
Voraussetzungen
npm install -g voxflowundvoxflow loginffmpeginstalliert (brew install ffmpeg/sudo apt install ffmpeg) – erforderlich für MP4-Rendering- Für
present/explain(Remotion-basiert): Die lokale Plugin-Installation beinhaltetremotion-cards/. Wennpresent"Remotion not ready" meldet, führen Sienpm installim gebündeltenremotion-cards/-Verzeichnis aus. Fürexplainkönnen Sie lokales Remotion mit--cloudüberspringen.
🎴 picstory — Wissenskarten-Video
Das LLM schreibt ein strukturiertes Skript, die KI zeichnet eine Karte pro Szene, TTS spricht den Text, FFmpeg setzt alles zusammen. Am besten geeignet für 小红书 / Twitter Edu / TikTok.
Schnellstart
# Standard: Chinesisch, Sketchnote-Stil, Hochformat, 5 Szenen
voxflow picstory --topic "AI Agent 入门指南"
# 2-Szenen-Schnelltest (kein vollständiges Video-Rendering)
voxflow picstory --topic "AI 入门" --scenes 2 --image-only
# Englisches Querformat-Video
voxflow picstory --topic "How React Hooks Work" --language en --ratio landscape --style photo
Ausgabe: picstory-<Zeitstempel>.mp4 + .json (Skript).
Karten-Typ-Stile (strukturierte Überschrift + Kernpunkte)
--style | Aussehen | Am besten geeignet für |
|---|---|---|
sketchnote (Standard) | Buntes handgezeichnetes Bullet Journal | Wissensaustausch, Tutorials |
neon_noir | Cyberpunk-Dunkel mit Neon-Glow | Technologie, Startups |
minimal_3d | Weicher 3D-Ton auf pastellfarbenen Verläufen | 小红书 Lifestyle |
chalkboard | Weiße Kreide auf dunkelgrün | Wissenschaft, Akademisches |
Szenentyp-Stile (freie Illustration)
--style | Aussehen | Am besten geeignet für |
|---|---|---|
photo | Filmisch / fotorealistisch | Geschichtenerzählen, Reisen |
manga_panel | Japanischer Manga-Tusche-Linienstil | Dramen, Schritt-für-Schritt-Anleitungen |
vintage_newspaper | Schautafel im Stil der 1940er | Geschichte, faktenbasierte Geschichten |
Seitenverhältnisse
--ratio | Pixel | Plattform |
|---|---|---|
portrait (Standard) | 1080×1920 | 小红书, TikTok, Reels, 抖音 |
landscape | 1920×1080 | YouTube, B站 |
square | 1080×1080 | Instagram, Twitter |
Skriptmodell-Voreinstellungen (--script-model)
| Voreinstellung | Anbieter | Stärke |
|---|---|---|
| weggelassen | Serverkonfiguration | Ausgewogener Standard (gpt-4o-mini) |
gemini-flash | OpenRouter | Mehrsprachig, gutes Chinesisch |
deepseek | DeepSeek | Günstigster, ausgezeichnetes Chinesisch |
hunyuan | Tencent Hunyuan | Chinesisch-nativ |
moonshot | Moonshot | Chinesisch, langer Kontext |
Der Server erzwingt eine Zulassungsliste – nur die Voreinstellungsnamen oben funktionieren; eine Angabe beliebiger Modell-IDs wird abgelehnt.
Bildqualität (--quality)
Die Bildgenerierung ist der einzige nennenswerte Kostenfaktor (~$0.005-0.08 pro Bild). Das LLM-Skript (~2K Tokens) ist vernachlässigbar.
--quality | Anbieter | Stärke | Kosten für 5 Bilder |
|---|---|---|---|
fast (Standard) | OpenRouter Gemini Flash | Günstigster, ausgewogen | ~$0.025 |
hd | OpenRouter Gemini Pro | Höhere Details | mittel |
ultra | OpenRouter gpt-5.4-image-2 | Insgesamt am besten, ~16× Kosten | ~$0.40 |
fast-aiberm | Aiberm Gemini Flash | Günstige Aiberm-Stufe | niedrig |
hd-aiberm | Aiberm Gemini Pro | Stärkste chinesische Textwiedergabe – am besten für 小红书-Karten mit chinesischen Überschriften | mittel |
Verwenden Sie fast für Iterationen; hd-aiberm wenn die Karten genaue chinesische Zeichen enthalten müssen; ultra für finale Exporte.
Vollständige Optionen
| Flag | Standard | Beschreibung |
|---|---|---|
--topic <text> | erforderlich (oder --text) | Thema der Geschichte |
--text <content> | — | Vollständigen Artikel statt eines Themas einfügen |
--style <name> | sketchnote | Siehe Stile oben |
--ratio <name> | portrait | portrait | landscape | square |
--language <code> | zh | zh | en | ja | ko | ... |
--scenes <n> | 5 | 2–10. Verwenden Sie 2 für Schnelltests. |
--script-model <voreinstellung> | Serverstandard | Siehe Voreinstellungen oben |
--quality <stufe> | fast | Siehe Tabelle oben |
--voice <id> | Standard | TTS-Stimme aus voxflow voices |
--speed <n> | 1.0 | TTS-Geschwindigkeit 0.5–2.0 |
--bgm <datei> | — | Hintergrundmusik (mp3/wav) unter der Erzählung gemischt |
--bgm-volume <n> | 0.1 | BGM-Lautstärke 0–1 |
--fade <n> | 0.4 | Ein-/Ausblendung pro Szene in Sekunden (0 zum Deaktivieren) |
--image-only | false | Bilder + Audio speichern ohne finales Video-Rendering |
--output-dir <verz> | — | Verzeichnis für alle Ausgaben |
--output <pfad> | auto | Finaler MP4-Pfad |
Kosten in Quotenpunkten
| Operation | Quote |
|---|---|
| LLM-Skript | 100 |
| TTS / Szene | 50 |
| Bild / Szene | 500 |
| 2-Szenen-Test | ~1.200 |
| 5-Szenen-Vollversion | ~2.850 |
Kostenlose Stufe (10.000/Monat) ≈ 3 vollständige Picstory-Videos.
Pipeline
Thema / Text
├─[1] LLM-Skript → { title, scenes: [{ heading, keyPoints, narration }] }
├─[2] TTS pro Szene → PCM-Audio
├─[3] Bild pro Szene (parallel) → JPEG via /api/image/generate
└─[4] FFmpeg: Bild + WAV → Ken Burns Zoompan MP4 → Verkettung → +BGM → final.mp4
Fehlerbehebung
| Problem | Lösung |
|---|---|
ffmpeg not found | brew install ffmpeg (Mac) / sudo apt install ffmpeg |
Image generation failed | Erneut versuchen; bei Hängenbleiben auf hd auf --quality fast zurücksetzen |
| Rendering zu langsam | Ken Burns ist CPU-intensiv. Verwenden Sie --scenes 2 --image-only, um zuerst den Inhalt zu validieren. |
model_not_allowed | Verwenden Sie einen --script-model-Voreinstellungsnamen, keine rohe Modell-ID |
| Chinesischer Text in Karten verstümmelt | Wechseln Sie zu --quality hd-aiberm |
📑 present — Erzähltes Kartenvideo (Remotion lokal)
Text oder URL → LLM-Karten → TTS → Remotion-Rendering. 1080×1920, 5 visuelle Schemata.
voxflow present --text "Claude Code 是一个 AI 编程工具" --style aurora
voxflow present --url https://example.com/article --style noir
voxflow present --text "2025 AI 芯片格局" --web-search --style neon
voxflow present --cards pre-generated.json --no-audio
| Flag | Standard | Hinweise |
|---|---|---|
--text / --url / --cards | eines erforderlich | Eingabequelle |
--style | aurora | noir | neon | editorial | aurora | brutalist |
--voice <id> | v-female-R2s4N9qJ | TTS-Stimme |
--speed <n> | 1.0 | 0.5–2.0 |
--no-audio | false | Nur stummgeschaltetes Video |
--web-search | false | LLM mit aktuellen Webfakten ergänzen |
--output <pfad> | ./present-<ts>.mp4 | .mp4 oder .wav |
Wenn
present"Remotion not ready" meldet, führen Sienpm installim gebündeltenremotion-cards/-Verzeichnis aus, um den lokalen Renderer einzurichten.
🧠 explain — KI-Erklärvideo
Titel / Aufzählungspunkte / Zusammenfassungsszenen-Ablauf. Am besten für "Was ist X?"-Tutorials.
voxflow explain --topic "What is React?"
voxflow explain --topic demo --output demo.mp4 # integrierte Demo (kein API-Aufruf)
voxflow explain --topic "区块链入门" --style chalkboard --voice v-male-Bk7vD3xP
voxflow explain --topic "Machine Learning" --audio-only
voxflow explain --topic "AI Agent 入门" --cloud # auf Server rendern
| Flag | Standard | Hinweise |
|---|---|---|
--topic <text> | erforderlich | Verwenden Sie demo für integriertes Demo-Skript |
--style | modern | modern | playful | corporate | chalkboard |
--language | en | en | zh | ja | ko | ... |
--voice <id> | v-female-R2s4N9qJ | |
--scenes <n> | 5 | 3–12 |
--audio-only | false | Rendering überspringen, nur WAV ausgeben |
--cloud | false | Cloud-Remotion anstelle von lokalem Remotion verwenden |
--output <pfad> | ./explain-<ts>.mp4 |
📊 slides — HTML-Präsentation mit TTS
Erzeugt ein eigenständiges HTML-Foliendeck mit eingebettetem Base64-Audio pro Folie. In jedem Browser öffnen, kein Server erforderlich.
voxflow slides "AI in Healthcare"
voxflow slides "Q4 Revenue Report" --template report --theme paper
voxflow slides "React Tutorial" --template tutorial --model balanced
voxflow slides "Startup Pitch" --template pitch --theme ocean --no-audio
| Flag | Standard | Hinweise |
|---|---|---|
--text <text> (oder positionell) | erforderlich | Thema |
--template | free | product | report | tutorial | pitch | free |
--theme | midnight | midnight | paper | ember | forest | ocean |
--model | swift | swift | balanced | pro | creative |
--voice <id> | v-female-R2s4N9qJ | |
--no-audio | false | TTS überspringen, nur Folien |
--output <pfad> | ./slides-<ts>.html |
10 Layouts: hero, title-bullets, two-column, three-cards, image-left, image-right, quote, timeline, stats, section. Vorlagen wählen automatisch eine Layout-Sequenz aus.
🖼 image — Einzelne Hunyuan-Illustration
Synchrone Text-zu-Bild-Umwandlung (PNG). Nützlich für Thumbnails oder einmalige Grafiken.
voxflow image "a sleeping cat in a sunlit window" --resolution 1024:1024 -o cat.png
Auflösungen: 768:768, 768:1024, 1024:768, 1024:1024, 720:1280, 1280:720, 768:1280, 1280:768, 1080:1920, 1920:1080.
Max. 1000 Zeichen für die Eingabeaufforderung. Ausgabe: Lokales PNG + COS-URL.
Checkliste zur Werkzeugauswahl
"小红书 Stil Wissenskarten" → picstory
"KI-Kurzvideo + Untertitel" → picstory --style sketchnote
"Erklärvideo / Was ist X?" → explain
"Gebrandetes Kurzvideo mit meinem Text" → present
"Bereits Karten/Skript vorhanden" → present --cards
"Teilbares HTML-Deck mit Audio" → slides
"Einzelne Illustration" → image
Regeln
- Stimmen suchen mit
voxflow voicesvor der Verwendung von--voice. IDs niemals raten. - Quote prüfen vor Videoaufrufen (
voxflow status): picstory ≈ 3K, present/explain ≈ 500–2K. - Zuerst günstig testen:
picstory --scenes 2 --image-onlyvalidiert das Skript, bevor für das vollständige Rendering bezahlt wird. - Nach Abschluss des Renderings automatisch abspielen:
open output.mp4(macOS).