VoxFlow Video Skill

AIでショート動画を生成：LLMが台本を作成し、AIがカードやシーンを描画、TTSがナレーション、FFmpeg / Remotionが最終MP4をレンダリングします。

記事→カード形式のリール（Slice — paper-slide / editorial-mag / bold-poster / notion-card / brutalist / glass-dark / editorial-stencil / broadsheet / blueprint / daisy-pastel / showa-catalog / photo-feature / atmospheric の13テーマ）にはvoxflow:sliceに切り替えてください。共有可能なHTML/CSSカード画像セットやナレーション付きカード→MP4エクスポートにはvoxflow:cardに切り替えてください。

5つのエントリポイント — ユーザーの希望に応じて選択：

コマンド	出力	使用場面
`picstory`	縦/横MP4（手描きカードまたは映画的シーン）	「知識カード動画」、小红书 / Twitter edu、スケッチノートチュートリアル
`present`	1080×1920 ナレーション付きカード動画、5つのビジュアルスキーム	ピッチデッキ、解説リール、ブランド短尺動画
`explain`	タイトル/箇条書き/サマリーシーン構成のMP4解説動画	「Xとは？」チュートリアル、コース紹介
`slides`	TTS音声を埋め込んだ自己完結型HTMLスライド	製品発表、トーク、リンク共有
`image`	単一PNG	単発のイラスト/サムネイル（Hunyuan TextToImage）

前提条件

npm install -g voxflow と voxflow login
ffmpeg がインストールされていること（brew install ffmpeg / sudo apt install ffmpeg） — MP4レンダリングに必須
present / explain（Remotion使用時）：ローカルプラグインのインストール時に remotion-cards/ が含まれます。present で「Remotion not ready」と表示された場合は、バンドルされた remotion-cards/ ディレクトリ内で npm install を実行してください。explain では --cloud フラグでローカルRemotionをスキップできます。

🎴 picstory — 知識カード動画

LLMが構造化された台本を書き、AIがシーンごとに1枚のカードを描画、TTSがナレーション、FFmpegが組み立てます。小红书 / Twitter edu / TikTok に最適。

クイックスタート

# デフォルト：中国語、スケッチノートスタイル、縦長、5シーン
voxflow picstory --topic "AI Agent 入門指南"

# 2シーンクイックテスト（動画レンダリングなし）
voxflow picstory --topic "AI 入門" --scenes 2 --image-only

# 英語、横長動画
voxflow picstory --topic "How React Hooks Work" --language en --ratio landscape --style photo

出力: picstory-<タイムスタンプ>.mp4 + .json（台本）

カードタイプスタイル（構造化された見出し + キーポイント）

`--style`	見た目	最適な用途
`sketchnote` (デフォルト)	カラフルな手描きバレットジャーナル	知識共有、チュートリアル
`neon_noir`	サイバーパンクダーク調＋ネオングロー	テック、スタートアップ
`minimal_3d`	パステルグラデーション上のソフト3Dクレイ	小红书ライフスタイル
`chalkboard`	暗緑色背景に白チョーク	科学、学術

シーンタイプスタイル（フリーフォームなイラスト）

`--style`	見た目	最適な用途
`photo`	映画的 / フォトリアル	ストーリーテリング、旅行
`manga_panel`	日本のマンガ風インク線画	ドラマ、ステップバイステップガイド
`vintage_newspaper`	1940年代の大判新聞	歴史、事実に基づくストーリー

アスペクト比

`--ratio`	ピクセル	プラットフォーム
`portrait` (デフォルト)	1080×1920	小红书、TikTok、Reels、抖音
`landscape`	1920×1080	YouTube、B站
`square`	1080×1080	Instagram、Twitter

スクリプトモデルプリセット（`--script-model`）

プリセット	プロバイダー	強み
省略時	サーバー設定	バランスの取れたデフォルト（gpt-4o-mini）
`gemini-flash`	OpenRouter	多言語対応、中国語良好
`deepseek`	DeepSeek	最も安価、中国語に優れる
`hunyuan`	腾讯混元	中国語ネイティブ
`moonshot`	Moonshot	中国語長文コンテキスト

サーバーは許可リストを適用 — 上記のプリセット名のみ使用可能。任意のモデルIDは拒否されます。

画像品質（`--quality`）

画像生成のみが実質的なコストです（画像1枚あたり約$0.005〜0.08）。LLMの台本（約2Kトークン）はごくわずかです。

`--quality`	プロバイダー	強み	5画像コスト
`fast` (デフォルト)	OpenRouter Gemini Flash	最も安価、バランス良好	~$0.025
`hd`	OpenRouter Gemini Pro	より高精細	中程度
`ultra`	OpenRouter gpt-5.4-image-2	総合最高、約16倍のコスト	~$0.40
`fast-aiberm`	Aiberm Gemini Flash	安価なAibermティア	低
`hd-aiberm`	Aiberm Gemini Pro	中国語テキスト描画に最強 — 中国語見出しを含む小红书カードに最適	中程度

反復作業には fast を、カードに正確な中国語文字が必要な場合は hd-aiberm を、本番書き出しには ultra を使用してください。

全オプション

フラグ	デフォルト	説明
`--topic <text>`	必須（または `--text`）	ストーリートピック
`--text <content>`	—	トピックの代わりに全文記事を貼り付け
`--style <name>`	`sketchnote`	上記スタイルを参照
`--ratio <name>`	`portrait`	`portrait` \| `landscape` \| `square`
`--language <code>`	`zh`	`zh` \| `en` \| `ja` \| `ko` \| ...
`--scenes <n>`	`5`	2〜10。クイックテストには `2` を使用
`--script-model <preset>`	サーバーデフォルト	上記プリセットを参照
`--quality <tier>`	`fast`	上記テーブルを参照
`--voice <id>`	デフォルト	`voxflow voices` で確認できるTTS音声
`--speed <n>`	`1.0`	TTS速度 0.5〜2.0
`--bgm <file>`	—	ナレーション下にミックスするBGM（mp3/wav）
`--bgm-volume <n>`	`0.1`	BGM音量 0〜1
`--fade <n>`	`0.4`	シーンごとのフェードイン/アウト秒数（`0` で無効化）
`--image-only`	false	最終動画レンダリングなしで画像＋音声を保存
`--output-dir <dir>`	—	全出力のディレクトリ
`--output <path>`	自動	最終MP4パス

クォータ消費

操作	クォータ
LLM台本	100
TTS / シーン	50
画像 / シーン	500
2シーンテスト	約1,200
5シーン本番	約2,850

無料枠（月10K）≈ picstory動画約3本分。

パイプライン

トピック / テキスト
  ├─[1] LLM台本 → { title, scenes: [{ heading, keyPoints, narration }] }
  ├─[2] シーンごとにTTS → PCM音声
  ├─[3] シーンごとに画像（並列） → JPEG（/api/image/generate経由）
  └─[4] FFmpeg：画像 + WAV → Ken Burns zoompan MP4 → 連結 → +BGM → final.mp4

トラブルシューティング

問題	解決策
`ffmpeg not found`	`brew install ffmpeg`（Mac）/ `sudo apt install ffmpeg`
`Image generation failed`	再試行。`hd` でスタックする場合は `--quality fast` に変更
レンダリングが遅すぎる	Ken BurnsはCPU負荷大。まず `--scenes 2 --image-only` で内容を検証
`model_not_allowed`	`--script-model` にはプリセット名を使用し、生のモデルIDは避ける
カード内の中国語文字が壊れる	`--quality hd-aiberm` に変更

📑 present — ナレーション付きカード動画（Remotionローカル）

テキストまたはURL → LLMカード → TTS → Remotionレンダリング。1080×1920、5つのビジュアルスキーム。

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

フラグ	デフォルト	備考
`--text` / `--url` / `--cards`	いずれか必須	入力ソース
`--style`	`aurora`	`noir` \| `neon` \| `editorial` \| `aurora` \| `brutalist`
`--voice <id>`	`v-female-R2s4N9qJ`	TTS音声
`--speed <n>`	`1.0`	0.5〜2.0
`--no-audio`	false	サイレント動画のみ
`--web-search`	false	LLMを最新のWeb情報で補強
`--output <path>`	`./present-<ts>.mp4`	`.mp4` または `.wav`

present が「Remotion not ready」と報告した場合は、バンドルされた remotion-cards/ ディレクトリ内で npm install を実行してローカルレンダラーをセットアップしてください。

🧠 explain — AI解説動画

タイトル / 箇条書き / サマリーシーン構成。「Xとは？」チュートリアルに最適。

voxflow explain --topic "What is React?"
voxflow explain --topic demo --output demo.mp4         # 組み込みデモ（API呼び出しなし）
voxflow explain --topic "区块链入门" --style chalkboard --voice v-male-Bk7vD3xP
voxflow explain --topic "Machine Learning" --audio-only
voxflow explain --topic "AI Agent 入门" --cloud         # サーバー上でレンダリング

フラグ	デフォルト	備考
`--topic <text>`	必須	組み込みデモ台本には `demo` を使用
`--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	レンダリングをスキップし、WAVのみ出力
`--cloud`	false	ローカルではなくクラウドRemotionを使用
`--output <path>`	`./explain-<ts>.mp4`

📊 slides — HTMLプレゼンテーション（TTS付き）

各スライドにbase64音声を埋め込んだ自己完結型HTMLスライドを生成。ブラウザで開くだけでよく、サーバーは不要。

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

フラグ	デフォルト	備考
`--text <text>`（または位置引数）	必須	トピック
`--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をスキップ、スライドのみ
`--output <path>`	`./slides-<ts>.html`

10種類のレイアウト：hero、title-bullets、two-column、three-cards、image-left、image-right、quote、timeline、stats、section。テンプレートは自動でレイアウトシーケンスを選択します。

🖼 image — 単一Hunyuanイラスト

同期型テキスト→画像（PNG）。サムネイルや単発アートに便利。

voxflow image "a sleeping cat in a sunlit window" --resolution 1024:1024 -o cat.png

解像度：768:768、768:1024、1024:768、1024:1024、720:1280、1280:720、768:1280、1280:768、1080:1920、1920:1080。

プロンプト最大1000文字。出力：ローカルPNG + COS URL。

ツールの選び方チェックリスト

「小红书スタイル知識カード」          → picstory
「AI ショート動画 + キャプション」     → picstory --style sketchnote
「解説動画 / Xとは？」               → explain
「テキストを使ったブランドショート」  → present
「カード/台本がすでにある」          → present --cards
「共有可能なHTMLスライド（音声付き）」 → slides
「単一イラスト」                     → image

ルール

音声を検索するには --voice を渡す前に voxflow voices を実行してください。IDを推測しないでください。
動画呼び出し前にクォータを確認（voxflow status）：picstoryは約3K、present/explainは約500〜2K。
まず低コストでテスト：picstory --scenes 2 --image-only で本番レンダリング前に台本を検証できます。
レンダリング完了後、自動再生：open output.mp4（macOS）。

VoxFlowStudio/skills

skills とは？

お気に入りのAIに質問する

ドキュメント