Claude Code や Codex に「プロダクトのプロモーション動画を作って」と頼むだけ。エージェントが実際のページを キャプチャし、調整済みのモーションレシピからショットを選んで絵コンテを組み、Remotion でアニメーションを作り、音楽のビートに合わせてカットし、サウンドデザインを加え、全フレームを確認して、 そのまま編集を続けられる MP4 を納品します。
動画生成モデルではありません。すべてのフレームはあなた自身のスクリーンショットとコピーからコードで描かれるので、 くっきりとブランドに忠実で、細部まで編集できます。
仕組み
Important
216 本の demo を磨き込み・レビューし、ベストな版を 124 カード / 150 ショットに整理。 Gallery のプレビューを再レンダリングし、video-shotcraft のブランド素材に統一しました。
- 2026-09 · モーションワークベンチ：納品した映像を CapCut 風のブラウザエディタで編集し続けられます。
- 2026-08 · シリーズ新作 video-talkcraft：ナレーション動画版。 原稿とボイスオーバーを渡すと、すべてのモーションが音声にロックされます （78 本のナレーション用プレビュー）。
- 2026-08 · 剪映（CapCut 中国版）書き出し：完成映像を編集可能な剪映ドラフトに。ショット単位のクリップ、 ネイティブ字幕トラック、独立した SFX/BGM トラック。macOS 版剪映 11.2 で検証済み（ガイド）。
 PackyCode |
PackyCode は、1 つの API エンドポイントと API キーで主要な AI モデルにアクセスできる、高速で安定した API 中継サービスです。自動フェイルオーバーと、Codex / Claude Code 専用の高速ルートを提供します。 新規ユーザーには $1 分の無料クレジットと初回チャージ割引があり、対象ルートでは最大 80% オフ。人民元でチャージでき、為替レートへの上乗せや追加のチャージ手数料はありません。 |
 AWS |
Amazon Web Services（AWS）は、コンピューティング、ストレージ、AI など、信頼性と拡張性を備えたクラウドサービスを提供します。 |
Claude Code と Codex 向けに作り、調整しています。いちばん簡単なのは、エージェントにリンクを渡すことです：
このスキルをインストールして：https://github.com/Vincentwei1021/video-shotcraft
skills CLI でも：
npx skills add Vincentwei1021/video-shotcraft手動の場合：
git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft # Claude Code
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft # Codex作りたい映像を説明するだけ。コマンドは不要です。
| 言うこと | 起きること |
|---|---|
video-shotcraft でプロダクトのプロモーション動画を作って。 |
エージェントがまず Ink Press テンプレートを紹介して使うか確認し、ページをキャプチャして映像を作ります |
Ink Press テンプレートでこのリポジトリのローンチ動画を作って。 |
最速ルート：検証済みテンプレートにあなたのスクリーンショット・コピー・ロゴを入れます |
deck-deal-flyin と row-embed のショットカードでこの機能を紹介して。 |
ショットを名前で指定（名前は Gallery からそのままコピーできます） |
spotlight-hero-card を参考に、このページの製品クローズアップを作って。 |
1 ショットをあなたのプロダクト向けにアレンジ |
レシピカード 124 枚、10 カテゴリ、計 150 ショット。Gallery で検索・絞り込み・カード名のコピーができます。
オープニングとブランド · 11 本 text-as-mask：タイトルの文字からプロダクトが見える |
カメラ · 13 本 exploded-view：ページが傾き、分解する |
トランジション · 19 本 card-flock-tumble：カードの群れが見出しになる |
タイポグラフィ · 25 本 flying-words：文字のトンネルがモットーに収束 |
UI 登場 · 22 本 card-stack：カードの束が扇状に配られて着地 |
インタラクション · 13 本 palette-theme-ripple：新テーマが波紋のように広がる |
データ · 9 本 axis-rescale-shock：急上昇が軸を突き破る |
光と強調 · 23 本 spotlight-sweep：舞台の光がタイトルを見つける |
リズム · 8 本 paparazzi-flash：3 回のフラッシュ、3 つの構図、ひとつの数字 |
アウトロ · 7 本 input-morph-assemble：チャット入力欄がロゴを組み立てる |
各カードは references/shots/<カテゴリ>/<カード名>.md、Remotion 実装は demos/<カテゴリ>/<カード名>/ にあります
（プロジェクトへの組み込み方は demos/README.md を参照）。
納品後、skill がブラウザで CapCut 風のエディタを開きます（node workbench/scripts/open.mjs <project>）。
映像は元の構成どおりにショット / トランジション / 字幕 / SFX のトラックへ分解され、任意のショットを選んで
文言・フォントサイズ・色を編集、クリップの移動・トリム・速度変更、ライブラリの 150 ショットのドラッグ追加、
Remotion での書き出しができます。プレビューとレンダリングはフレーム単位で一致します。
ワークベンチガイド（各パネルをスクリーンショット付きで）（中国語）· 連携コントラクト
| 成果物 | 内容 |
|---|---|
| 完成映像 | MP4、1920×1080、30fps、h264、音楽とサウンドデザイン付き |
| Remotion プロジェクト | 映像のソース一式。各ショットは React コンポーネントで、あなたもエージェントも変更できます |
| モーションワークベンチ | 納品後に自動で開く：トラック、インスペクタ、速度変更、ショット差し替え、書き出し（詳細） |
| 剪映ドラフト | 任意：ショット単位のクリップ・字幕・音声トラックを編集できる剪映プロジェクト |
| SNS 投稿 | 任意、依頼があれば：Upload-Post で完成映像を TikTok・Instagram・YouTube・LinkedIn・X などへ投稿。キャプションと投稿先を確認し、dry-run の後に投稿（ガイド） |
ほかにも、再利用できる Remotion コンポーネント（2.5D ページカメラ、字幕、フラッシュカット、数字ロール）、 SFX 149 種と BGM 5 曲、ページキャプチャスクリプト、そして制作手法そのもの（素材キャプチャ、ビジュアルの方向付け、 絵コンテ、サウンドデザイン、ビート同期、最終 QA）を references/ に収録しています。
作品を投稿：video-shotcraft で映像を作ったら、Showcase の投稿フォームから 提出してください。審査後、 Showcase ページに掲載されます。
| 必要なもの | 用途 |
|---|---|
| Node.js と npm | Remotion のレンダリング、テンプレート、ワークベンチ |
| ffmpeg / ffprobe | フレーム確認と最終 QA |
| uv | BGM のビート解析のみ（使い捨ての Python スクリプトを実行） |
| puppeteer | ページキャプチャのみ。キャプチャスクリプトが必要に応じてインストール |
Remotion は初回レンダリング時にヘッドレス Chrome を自動でダウンロードします。macOS で検証済み、Linux は下の注意点を参照してください。
ヘッドレス Linux / CI の注意点
ディスプレイのない Linux サーバー（検証環境：2 コア、Node 22）でレンダリングすると、3 つの壁にぶつかります：
- 並列数の上限：低コアのマシンでは
remotion still/renderが "Maximum for --concurrency is 2" で失敗します。--concurrency=1を指定してください。 - 旧ヘッドレスモードの廃止：最近の Chrome/Chromium は旧ヘッドレスモードを削除したため、システムの Chromium を 指定すると起動に失敗します。フル版 Chrome ではなく chrome-headless-shell を使ってください。
- CDN に届かない：remotion.media にアクセスできない環境では、headless-shell の自動ダウンロードが失敗します。
--browser-executable=<ローカルの chrome-headless-shell のパス>を指定してください。
この 3 つを指定すれば、同梱テンプレートのレンダリングは動きます。
リポジトリ構成
video-shotcraft/
├── SKILL.md # エージェントの入口と制作の基本ルール
├── references/
│ ├── pipeline.md # 制作ワークフロー全体
│ ├── shots/ # 10 カテゴリ 124 枚のショットレシピカード
│ ├── sequences/ # 再利用できる映像全体の構成とシーケンス
│ ├── aesthetic-rules.md # ビジュアル QA の基準
│ ├── music-beat-sync.md # BGM 解析とビート同期の手法
│ ├── sound-design.md # サウンドデザインの指針と事例
│ ├── jianying-export.md # 剪映（CapCut 中国版）書き出しガイド
│ ├── publish-upload-post.md # SNS 投稿（任意、Upload-Post API）
│ └── workbench.md # ワークベンチ：マニフェスト契約と編集可能性のルール
├── demos/ # Remotion 参照実装（同じカテゴリ構成）
├── gallery/ # 静的なモーションプレビュー Gallery
├── template/ # そのまま動く完成映像テンプレート
├── jianying-export/ # 剪映ドラフトのインストーラ（mac 検証済み / win 未検証）
├── publish/ # SNS 投稿スクリプト（Python 標準ライブラリ）+ オフラインテスト
├── workbench/ # 納品後のモーションワークベンチ（Vite + Remotion Player）
└── assets/
├── lib/ # 再利用できる Remotion コンポーネント
├── scripts/ # ページ素材のキャプチャスクリプト
└── audio/ # 音声素材
├── bgm/ # BGM 5 曲
└── sfx/<category>/ # 16 シーンカテゴリ、149 種の SFX
ワークフロー全体は SKILL.md、制作パイプライン、 ビジュアル QA 基準 を参照してください。
SFX はシーン / 素材ごとに 16 カテゴリ（transition impact riser camera ui text paper film light
data scifi mech glass fluid crowd counter）に分かれています。まずカテゴリを決めてから音色を選んでください。
索引とファイルごとの用途は sound-design.md、出典とライセンスは
ATTRIBUTION.md にあります。
テンプレートに同梱のプロダクトスクリーンショットはデモ用素材です。公開前に対象プロダクトのスクリーンショットに 差し替え、プロダクト・顧客・個人のデータを匿名化する必要がないか確認してください。
- コードとドキュメント：Apache-2.0。
assets/audio/の音声：各ファイルのライセンスに従います。ATTRIBUTION.md を参照。- Remotion には独自のライセンスがあります： 個人と小規模チームは無料、企業は有料ライセンスが必要な場合があります。
ライブラリの多くのレシピは、優れた公式プロダクト映像のモーション言語を研究して抽出しました。ClickUp、Perplexity、 Slack、Notion、Figma、Framer、Bear、Raycast、Pitch、Miro、Superhuman、Loom などのプロモーション映像です。 カードに記録しているのはゼロから再実装した技法（タイミング、イージング、振り付け）で、これらの映像の素材・ アートワーク・ブランド資産はリポジトリに含まれていません。商標はそれぞれの所有者に帰属し、これらの企業は 本プロジェクトと提携・推薦の関係にありません。
また、すべての demo とテンプレートを支える Remotion、同梱の SFX と音楽の提供元 Mixkit（無料ライセンス）、いくつものカードに影響を与えたゲームフィールとアニメーションの コミュニティ、そしてこの skill が教えるのと同じワークフローでライブラリの構築・改善・QA を行った Claude Code に感謝します。
