Communitygithub.com

vvai-pixel-mv · 像素小人カラオケMV

音频+タイムスタンプ付き歌詞(srt/lrc)から、ストーリー性のあるピクセルアニメMVを生成。ストーリー案→絵コンテ確認→承認→レンダリングの順で進み、多様なキャラクター・アクション・歌詞演出・トランジションをサポート。

vvai-pixel-mv · 像素小人カラオケMV とは?

このスキルは、ユーザーが提供した音声ファイル(曲)とタイムスタンプ付き歌詞(SRTまたはLRC形式)を元に、ピクセルアート風のアニメーションMVを自動生成するエージェントツールです。「ClaudeMV」シリーズの手法に基づき、まずストーリーラインを作成し、次に各シーンのビジュアルが分かる絵コンテをユーザーに提示、ユーザーが修正をリクエストして合意した後にのみレンダリングを実行するワークフローが特徴です。VSCodeやClineのようなエージェント対応IDEで動作し、HyperFrames(`npx [email protected]`)を使ってMP4にレンダリングします。サポートする要素は豊富で、最大3人のキャラクター(私、彼女、新しい彼……)、16種類の基本動作・23種類のストーリーアクション(手を離す、振り返る、泣く、心が砕ける、サングラスを外すなど)、7種類の歌詞インタラクション(拍に合わせた表示アニメーション)、7種類のトランジション、デスクトップウィンドウ視点、27種類のピクセル背景・天候、そして拍合わせエフェクト(着地スクイーズ、RGBスプリット、フラッシュなど)に対応しています。ユーザーが「ピクセルMVを作って」「ClaudeMVにして」「カラオケMVにして」などと依頼した際に自動発動し、口頭解説動画や読み上げ動画には別のスキル(/xumu)を使用します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add cecilPENG53/vvai-pixel-mv

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

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

vvai-pixel-mv · ピクセル小人カラオケMV

順序固定:ストーリーライン → 絵コンテ(ユーザーが確認・修正、何度でも往復可能)→ ユーザー確認 → 出力。ユーザー確認なしの絵コンテではレンダリングしません。

完全なサンプルは assets/examples/:1曲のストーリーラインと story.json、7セグメント、3キャラクター、デスクトップウィンドウ付き。

準備

  • PY:librosa、faster-whisper、numpy、Pillow がインストールされた Python 3.10 以上。インストール方法は INSTALL.md を参照。ユーザーの CLAUDE.md や記憶に Python のパスが書いてあればそれを使う;なければ python で上記パッケージがインポートできるか確認、できない場合はユーザーに尋ねる。
  • MV:PY -X utf8 <本スキル>/scripts/pixel_mv.py。
  • ffmpeg、Node が必要。レンダリングはデフォルトで npx --yes [email protected] を使用;CLI を変更する場合は環境変数 HF_CLI を設定、複数引数は | で区切る。

フロー

  1. 素材収集。音声、タイムスタンプ付き歌詞(srt または lrc)、曲名が必須。
    • オプション:開始・終了秒、カラーモード(base / neon / classic / retro)、強度(dj / standard / soft)、キャラクター画像。
    • ストーリーも尋ねる:ユーザーはストーリーを思い描いているか?なければステップ3で提案する。
    • 歌詞ファイルがない場合はユーザーに要求する。転写で推測してはいけない。声が出ていないパートはユーザーに確認し、イントロと判断してはならない(第1話で主サビをイントロと誤判定した事例あり)。
  2. プロジェクト作成:MV new <プロジェクトディレクトリ> --audio <音声> --lyrics <srt/lrc> --title <曲名> [--start 秒 --end 秒] [--look base] [--character 画像]。
    • このステップで音声をカット、ビートとエネルギー最大点を計測、歌詞を単語単位でアライン。
    • 同時に、キーワードでのみシーンを切り替える初稿 story.json と、ストーリーライン.md テンプレートを生成。
    • プロジェクトはユーザー指定のディレクトリに配置;ユーザーが固定シリーズディレクトリを持っている場合(CLAUDE.md や記憶に記載)はそこに配置。
  3. ストーリーラインを書く。ストーリーテリング手法 に従い、ストーリーライン.md を埋める:一言ストーリー、キャラクター、モチーフ、幕構成、1行ずつ。ユーザーに確認。
  4. story.json を書く。ストーリーラインを story.json に変換。
    • フィールドは フォーマット を参照。利用可能なアクション、歌詞表現、トランジションは インタラクション一覧 を参照。
    • assets/examples/bad-girl.story.json を参考にすると最速。
    • 書き終えたら MV check <プロジェクト> を実行し、エラーがなくなるまで修正。
  5. 絵コンテをユーザーに提示。
    • MV board <プロジェクト> --frames を実行:各セグメントから1~3枚の画像をキャプチャし、絵コンテ.md を生成。内容は概要、セグメントごとのキャラクター、ストーリーアクション、歌詞の行番号と出現方法、トランジション、カメラワーク、ビート合わせ。
    • SendUserFile で 絵コンテ.md と 絵コンテ/画像/ 内のコンタクトシートをユーザーに送信。
    • ユーザーに、どこを変更できるかを伝える。
  6. 満足するまで修正。ユーザーが修正を提案したら、story.json を変更し、再度 board を実行。
    • バージョン番号は自動で+1され、旧バージョンは 絵コンテ/履歴/ に保存。
    • 何度でも往復可能。毎回新しい絵コンテをユーザーに送信。
  7. 確認後に出力。
    • ユーザーが明確に「出力して」と言った場合のみ、MV approve <プロジェクト> を実行し、続けて MV render <プロジェクト> --sample 12 を実行。
    • あいまいな返答(「いいよ」「任せる」)は確認とみなさない。
    • render は story.json のフィンガープリントを確認。確認後に変更されている場合はレンダリングを拒否。
    • 30 MB を超える場合は、別途 _プレビュー.mp4 に圧縮し、スマホ用に提供。
  8. 納品。1フレーム/秒のコマ送りで自分で確認:ストーリーが理解できるか、シーン・歌詞・トランジション・タイトルが正しいか、尺と元の音声が一致しているか、トラックが存在するか。
    • 出力後、ユーザーがさらに変更を希望する場合はステップ6に戻る:story.json 変更 → 新しい絵コンテ → 再確認 → 再レンダリング。

重要なルール

  • ストーリーがエフェクトに優先する。1行ごとに最低1つのストーリーアクションまたは歌詞インタラクションが必要;ストーリーアクションはキーワードのタイミングに配置;トランジションにはストーリー上の理由が必要。詳細は ストーリーテリング手法 を参照。
  • シーン切り替え:ストーリー上の要求がない場合、デフォルトは「デスクトップ中心+イメージ挿入」。詳細は 絵コンテルール を参照。ストーリーがある場合は幕構成に従い、覚醒や回想のようなセグメントではデスクトップウィンドウ視点を使用。
  • キャラクター:
    • デフォルトでは Claude の小人を「私」とする。
    • 他のキャラクターは cast で宣言(girl、rival、friend、ghost)。
    • ユーザーが画像を提供した場合、MV character <プロジェクト> <画像> を実行し、16×16 ピクセルのキャラクターに変換。
  • ビート合わせ:
    • 小人は各拍でちょうど着地し、着地時にスクイーズ、足元に水波を拡散。
    • 各拍でカメラに衝撃と色フラッシュ、強い拍では RGB スプリット。
    • 全画面フラッシュ(白)はトランジションとドロップにのみ使用、毎秒3回以内。
  • 驚きリアクションパックは全編で最大2回まで、本当の展開にのみ使用。
  • 歌詞本文:
    • 画面内とプロジェクトファイルにのみ表示;チャット返信や絵コンテには行番号のみ記載。
    • 楽曲の著作権はユーザーが負う。公開前に注意を促す。

コマンド一覧

コマンド説明
newプロジェクト作成:analyze + align + draft + story
storyストーリーライン.md テンプレート生成(--force で再構築)
checkstory.json 内の名前、タイミング、ウインドウがエンジンに認識されているかチェック
board [--frames]絵コンテ出力(第N版)、履歴保存
approveユーザー確認バージョンを記録;その後 render が許可
render [--sample 12] [--name ファイル名]レンダリング;--force で確認をスキップ(ユーザー明示時のみ)
syncstory.json を assets/story.js に同期(デバッグ用;board と render は自動同期)
upgrade旧プロジェクトを現在のテンプレートエンジンにアップグレード、旧ファイルは .before-upgrade にバックアップ
characterキャラクター画像 → ピクセルキャラ
analyze / align / draftnew の分割ステップ、単独再実行用

テンプレート外のカスタマイズ

テンプレートエンジンv2は以下をカバー済み。インタラクション一覧 参照:

  • 27シーン、16基本動作;
  • 23種類のストーリーアクション;
  • 7種類の歌詞表現、6種類の登場、9種類の退場;
  • 7種類のトランジション;
  • デスクトップウィンドウ。

さらに足りない場合、当該プロジェクトの assets/engine.js に追加する。本スキルのテンプレートは変更しない。参考:第1話の手法。新しいシークエンスをテンプレートに組み込みたい場合は、まずユーザーと確認。組み込む際は以下を同時に変更する:

  • テンプレート engine.js;
  • pixel_mv.py の BEAT_NAMES などのリスト、および絵コンテで使う日本語名 ZH_*;
  • interactions.md。

シーンライブラリ

  • データは assets/scene-library/scenes.json。
  • シーンを追加する場合は2か所を同時に変更:scenes.json にキーワードとインタラクションを登録、テンプレート engine.js の SCENES に描画メソッドを記述。

関連スキル