xilo-opus-video

xilo-opus-video：コードで動画を作成

Opus は動画を出力できません。このスキルでは、動きのあるウェブページ（または Manim シーン）を書かせます。ウェブページは render(t) を公開し、スクリプトが1フレームずつスクリーンショットを撮影してから、FFmpeg で MP4 に合成します。音声もコードで合成するか、音声モデルに接続します。

一言のプロンプトだけで動画を作るのは、何が出てくるのか、なぜそうなるのか、次回も再現できるのかが制御できない、くじ引きのようなものです。このスキルでは、まず計画をユーザーに提示し、確認を得てから制作に取りかかります。3つの案を提示 → 各案のキーフレーム1枚または数秒のプレビューを作成 → ユーザーが確認 → brief.md にまとめる → brief に沿ってショットごとに制作し、個別にチェック → 納品します。

作業ディレクトリ

現在のディレクトリ内に opus-video/<slug>/ を作成し、すべてのファイルをその中に保存します。

opus-video/<slug>/
  source/        用户给的原材料、参考视频抽帧、分析笔记
  previews/      三个方案的预览（plan-a.png / plan-b.mp4 ...）
  brief.md       用户确认后的完整方案，也是可以复用的提示词
  index.html     成片的画面代码（或 Remotion / HyperFrames / Manim 工程）
  audio/         合成的配乐、音效、配音
  qa/            自检用的静帧和抽帧图
  out/final.mp4  成片

ステップ 0：環境を確認する

python3 scripts/check_env.py を1回実行します（パスはこのスキルのディレクトリからの相対パスです）。python3、ffmpeg、Playwright、および使用可能なブラウザーを確認し、不足しているものがあればインストール方法を教えてくれます。依存関係が不足している場合は、まずユーザーにインストールが必要なものを伝え、同意を得てからインストールします。

ステップ 1：何を作りたいか確認する

まずユーザーに何を作りたいか尋ね、次の3種類の素材を受け付けます。提供された素材を使い、複数を組み合わせてもかまいません。

• アイデア：一言のテーマでもかまいません。具体的であるほどよいです。
• 元の内容：記事、ナレーション原稿、製品の URL、製品のコードリポジトリ、データ表
• 参考動画：ローカルファイルまたはリンク

ユーザーが既存の音楽を提供した場合は、まず python3 scripts/audio_tools.py beats <音楽ファイル> > source/beats.json を実行して、拍、強拍、ドラムのビートを検出します。案とストーリーボードは、このビート表に沿って構成します。

案に影響することだけを確認し、一度に尋ねるのは最大3つまでにします。長さ、画面比率（16:9 / 9:16 / 1:1）、ナレーションの有無、指定のブランドカラーやフォントの有無を確認します。ユーザーから指定がない項目には妥当なデフォルト値（30秒、1920×1080、30fps、コードで合成した BGM、ナレーションなし）を使い、案の中で明記してユーザーが変更できるようにします。

素材の扱い：

• 元の内容：中心となる情報、対象視聴者、必ず含めるべき事実を抽出します。事実は元の素材にあるものだけを使います。不確かな情報は書かず、機能、数値、年をユーザーに代わって作り出さないでください。
• 参考動画：リンクからダウンロードする必要がある場合は、まずファイルの入手元をユーザーに伝え、同意を得てからダウンロードします。次に python3 scripts/analyze_video.py <動画> --out source/ref を実行します（--out はファイル名のプレフィックスです。source/ref-sheet.png、source/ref-info.txt が生成されます）。動画の長さ、解像度、フレームレート、ショットの切り替わり時刻、および抽出フレームのコンタクトシートが出力されます。コンタクトシートを確認し、参考動画のショット構成、テンポ、配色、フォント、使用されているコードの種類を記録します（references/code-stack.md を参照）。参考動画から学ぶのは構成と手法だけにし、他者の素材や文案を流用しないでください。

ステップ 2：3つの案を提示する

references/code-stack.md を読んで技術構成を選び、references/plan-format.md の形式で3つの案を作成します。

3つの案には、スタイル、物語構成、技術構成のいずれかで明確な違いをつけます。配色だけを変えた案にはしないでください。違いをつける方法の例：1つは堅実な案（元の素材や参考動画に最も忠実）、1つはスタイル重視の案（異なる映像表現にする）、もう1つは構成を大胆に変える案（一貫して登場する主人公を使う、一切カットのない長回しにするなど）。

各案には、映像の概要（各ショットを1〜2文で説明）、技術構成、音声、予想レンダリング時間、リスクを記載します。

ステップ 3：各案のプレビューを作成する

プレビューは、本格的なレンダリングに時間をかける前に、映像がどのようになるかをユーザーに見てもらうためのものです。プレビュー用ページも render(t) ページにします。制作に取りかかる前に references/craft-rules.md のページ骨組みとフォントの2つの節を読みます。後の本制作では、プレビューのコードをそのまま引き継いで作業できます。

各案のプレビューではショットを1つだけ作成し、そのショット内の時間（0から開始）を使います。動画全体のタイムラインを作る必要はありません。

• デフォルトでは各案のキーフレームを1枚作成します。その案を最もよく表すショットだけを作り、python3 scripts/render.py previews/plan-a.html previews/plan-a.png --still 2.0 --size 1920x1080 を実行します。
• 案の見どころが動きそのもの（インターフェースの変形、ビートに合わせたカット、トランジションなど）にある場合は、2〜4秒の短い動画を作成します。python3 scripts/render.py previews/plan-b.html previews/plan-b.mp4 --size <方案画幅> --fps 30 --duration 3 を実行します。
• プレビューを作成したら、まず自分で画像を確認します。明らかな問題（文字のはみ出し、要素の詰まりすぎ、画面の余白が多すぎるなど）を修正してから、ユーザーに見せます。
• 案の「予想レンダリング時間」はプレビューを使って見積もります。レンダリングスクリプトが所要時間を出力するので、1フレームあたりの時間 × 総フレーム数 × サブフレーム数に、余裕として約1.3を掛けます。

3つの案とプレビューのパスをまとめてユーザーに提示し、1つを選ぶか、組み合わせや修正の希望を伝えてもらいます。修正希望があれば、確認が取れるまでステップ 2 または 3 に戻ります。

ステップ 4：brief.md を作成する

ユーザーの確認後、references/brief-template.md に従って brief.md を作成します。これは動画の構造化プロンプト全体です。<role> <inputs> <direction> <structure> <build> <gotchas> <start> の7つのセクションで構成し、確認済みの内容をすべて記入します。

このファイルには2つの用途があります。以降の制作では、その内容に厳密に従います。また、ユーザーが後で再利用したり、テーマを変えたり、別のツールで実行したりする際にも、そのまま使えます。作成後、ファイルの場所をユーザーに伝えます。

ステップ 5：制作する

制作ルールは references/craft-rules.md にあります。取りかかる前に、全文を読んでください。特に重要なルールは次のとおりです。

1. 映像は時間だけで決まるようにします。window.render(t) で t 秒時点の映像を描画します。requestAnimationFrame、setTimeout、CSS transition は使わず、乱数には固定シードを使い、フレーム間で状態を保持しません。こうすることで、どのフレームも単独で再レンダリングでき、あるショットを変更しても別のショットに影響しません。
2. ショットを1つずつ作ります。各ショットの完成後に render.py --still で静止画を3枚レンダリングし、自分で確認します。文字がはみ出していないか、要素が重なっていないか、主題が十分大きいか、文字が十分な時間表示されているかをチェックします。修正してから次のショットに進みます。30秒を超える動画では、すべてのショットを作り終えたら、まず960×540でモーションブラーなしの低解像度プレビューをレンダリングします。テンポとトランジションを確認してから仕上げに進み、仕上げ前に細部に時間をかけないでください。
3. 音声と映像に同じタイムラインを使います。まずビートグリッドまたはナレーションのタイムラインを決め、ショットの切り替えや重要な動きをそこに合わせます。効果音は映像の動きが起きるフレームに配置します。ナレーションは全体をまとめて合成し、1文ずつつなぎ合わせないでください。
4. ショットに動きをつけます。プッシュ、プル、追従などを使い、主題が画面内で十分大きく見えるようにします。brief にカメラワークが書かれていない場合、Opus はカメラを固定するため、映像が間延びして見えることがあります。

ユーザーがフレームワークを指定した場合は、そのフレームワーク（Remotion / HyperFrames / Manim）を使います。指定がない場合は、単一の HTML ファイルをデフォルトにします。具体的な選択については code-stack.md を参照してください。

ステップ 6：レンダリングと検収

• レンダリング：python3 scripts/render.py index.html out/video.mp4 --size 1920x1080 --fps 30 --duration 30 --audio audio/mix.wav を実行します。モーションブラーを加えるには --subframes 4 を付けます（レンダリング時間も4倍になるため、事前にユーザーに伝えます）。
• 音声：効果音は python3 scripts/audio_tools.py sfx timeline.json audio/sfx.wav でタイムラインに沿って合成します。ミックス後、audio_tools.py normalize で -14 LUFS に正規化し、audio_tools.py check audio/mix.wav --out qa/audio で音量と波形を確認します。
• 検収：python3 scripts/analyze_video.py out/final.mp4 --out qa/final で抽出フレームの画像を生成し、さらにスマートフォン向けサイズの画像を1枚追加します（--cell-width 360）。craft-rules.md の「自己チェック採点」に従って自己採点し、最も重大な問題を3つ、該当する時刻とともに列挙します。修正後は該当する数秒だけを再レンダリングし、各項目が8点以上になるまで繰り返してから、検収チェックリストに照らして確認します。各ラウンドのスコアと問題を qa/review_log.md に記録し、納品時にユーザーに渡します。
• 問題があれば該当するショットに戻って修正します。その区間だけを再レンダリングしてもかまいません（--start / --duration）。最後に動画全体を合成します。

納品

ユーザーに完成動画のパス、brief.md のパス、プロジェクトディレクトリを伝えます。また、今回の重要な制作上の決定、既知の問題（改善の余地があるショットなど）、レンダリング時間を含む簡単な説明も添えます。事実に関する内容に不確かな点があれば、別途列挙してユーザーに確認してもらいます。

遇到这些情况

• 用户想要真人或写实角色：代码画不出来。可以建议用户先用视频模型生成纯绿幕背景的人物片段，交给本 skill 抠像，再用代码搭场景、大字和动效，做法见 code-stack.md 的「视频模型角色 + 代码场景」。
• 渲染太慢：先降分辨率或帧率出小样，确认后再出正式版；运动模糊和 WebGL 后期是最耗时的两项。
• 浏览器里 WebGL 不可用：check_env.py 会提示；先渲一帧确认着色器真的生效了，再渲整片。
• 用户只想要提示词：跳过第 5、6 步，把 brief.md 交给用户即可。