kaventro/motion-designer

これは何？

主な機能

• 01アプリの実際のUIをHTMLで再現し、デバイスのフレームやウィンドウ内に配置します。
• 02音楽のビートに動きを合わせ、小節単位で正確にカットします。
• 03レンダリング前に、タイマー、乱数、ループのエラーがないかフレームごとに確認します。
• 04headless ChromeとffmpegでH.264動画をレンダリングし、ミュート再生用のループ動画とポスター画像も作成します。
• 05ChatterboxやKokoroなどのローカルモデルでナレーションを追加し、音楽をダッキングしながら-16 LUFSでミックスします。

ユースケース

• iOSアプリやデスクトップアプリのWebサイト向けに、30秒のローンチ映像を制作する。
• キャラクターと登録を促すCTAを盛り込んだ、短いストーリー仕立ての広告を制作する。
• 楽曲のドロップに重要なシーンが合うように、プロモーション動画を編集する。
• 動画編集ソフトを使わず、コードからデータ動画や解説動画を作成する。

クイックスタート

1. 1

   Claude Code 用のスキルをインストールする

   npx skills add kaventro/motion-designer
2. 2

   このマシンにあるツールを確認する

   bash skills/motion-designer/scripts/doctor.sh
3. 3

   アプリのリポジトリでスキルを実行する

   /motion-designer

使う前に知っておきたいこと

• !動画をレンダリングするには、Node 22 以降、Chrome、ffmpeg、Python 3 が事前にインストールされている必要があります。
• !オプションのオリジナル音楽（約 11 GB）とナレーション用モデル（約 4 GB 以上）は、ダウンロードサイズが大きくなります。

トピック

よくある質問

motion-designer とは？

Claude CodeとCodex向けのエージェントスキル。アプリの実際のUIを、音楽に合わせたローンチ映像や短編動画にしてローカルでレンダリングします。 motion-designerは、コードからローンチ映像、タイトル映像、解説動画、データ動画、音楽に合わせたグラフィックを制作するエージェントスキルです。アプリのUIをHTMLで再現し、iPhoneのフレームやノートPCのウィンドウ内に配置して、動きのタイミングを音楽のビートに合わせます。フレーム単位で結果を確認し、headless Chromeとffmpegで動画にレンダリングします。

motion-designer は無料で使えますか？ライセンスは？

motion-designer は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

motion-designer は今もメンテナンスされていますか？

活発にメンテナンス中。motion-designer の最終コミットは 2026年10月1日 です。

motion-designer は何に使えますか？

iOSアプリやデスクトップアプリのWebサイト向けに、30秒のローンチ映像を制作する。 キャラクターと登録を促すCTAを盛り込んだ、短いストーリー仕立ての広告を制作する。 楽曲のドロップに重要なシーンが合うように、プロモーション動画を編集する。 動画編集ソフトを使わず、コードからデータ動画や解説動画を作成する。

motion-designer のインストール方法は？

Claude Code 用のスキルをインストールする: npx skills add kaventro/motion-designer このマシンにあるツールを確認する: bash skills/motion-designer/scripts/doctor.sh アプリのリポジトリでスキルを実行する: /motion-designer

motion-designer はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/kaventro/motion-designer