AIが製品プロモーションビデオを作るとしたら、次のようなプロセスを思い浮かべるかもしれません。

AIに製品を紹介する→ AIがいくつかの画像を生成する→音楽を追加する→ビデオをエクスポートする。

しかし、実際に動画を見た人は、“動画を作成できる”と“まともな製品プロモーションを作成できる”は別物です。

プロダクトビデオで本当に難しいのは、アニメーションだけでなく、プロダクトページ、レンズ言語、ビジュアルデザイン、リズム、サウンド、ポストプロダクションを完全なプロダクションフローにどのように整理するかです。

最近のオープンソースプロジェクト ビデオ-Shotcraftまさにこの問題を解決している。

単純な動画ジェネレータではなく、Claude CodeやCodexなどのAIエージェントのための“映画的な製品動画制作スキルライブラリ”です。大量の成熟したショットの動きを再利用可能なショットレシピに整理し、Remotion実装、完全なビデオテンプレート、サウンド素材、制作プロセスと組み合わせることで、AIエージェントは“アニメーションのためのコードを書く”だけでなく、比較的完全なビデオ制作方法に従って製品動画を完成させることができます。

これまでのところ、プロジェクトは 152枚のレンズレシピカード、209個のダイナミックプレビュー、209個のスポーツスタイル、フル機能のプロモーション用テンプレートセット。GitHubリポジトリは現在6，200以上のスターを獲得し、500以上のフォークがあります。

video-shotcraft GitHubリポジトリ

---

1.どんな問題を解決したのか。

従来の製品ビデオ制作は、大まかにいくつかの段階に分けることができます。

製品理解 →クリエイティブ→ Styleframe →スペクタクル→ 素材収集→アニメーション→効果音→編集→レンダリング→ QA

いずれかのリンクがうまく行われなければ、最終的な結果は減少します。

例えば：

• 製品のスクリーンショットは偽物で、視聴者は一目でそれを見ることができます。
• アニメーションは素晴らしいが、製品の機能を強調しない。
• カメラの間にリズムはない。
• BGMや画面はカードポイントなし。
• SFXが乱雑になり、サウンドが安くなる。
• すべての要素は“停止”や“呼吸”なしで動いています。
• フォント、色、製品自体のデザインシステムは完全に矛盾しています。

しかし、本当の問題は：

“AIはアニメーションを作れるか？”

しかしながら：

AIは製品を理解し、適切なレンズ言語を選択し、動画制作プロセス全体をつなぎ合わせることができるでしょうか？

Shotcraftのアイデアはとても興味深いです。エージェントに一度にゼロからアニメーションを発明させるのではなく、検索、結合、再利用できる“ショット言語”を与えます。

---

“ビデオ制作体験”をショットレシピに変える

Shotcraftの主な機能はShot Recipeです。

プロジェクトは現在、AIに伝えるだけでなく、152枚のレンズレシピカードを整理しています。

“Do A Flying Animation”。

代わりに、カメラに必要な重要な情報を構造化します。

• レンズの使用
• 感情とエネルギー。
• 推奨期間。
• アニメーションパラメータ
• 実現の方法
• 注意事項について
• 既存のRemoデモ
• ダイナミックプレビュー

これは非常に重要なことをしています

本来は設計者の経験に依存していた“モーションデザイン知識”を，エージェントが呼び出すことのできる知識ベースにする.

例えば、製品機能ディスプレイレンズには以下が必要です。

ページ出現→カード飛込→整列→カメラ前進→被写体フォーカス→情報保持

LLMを完全に自分でプレイさせると、簡単に起こります：

スケール+回転+グロー +パーティクル+バウンス+ Blur + Camera Shake

“良い”ように見えるが、必ずしも高いわけではない。

ショットレシピの役割はエージェントに伝えることです。

このシナリオで使用すべきモーション構文と、そのモーションをどのように実装するべきか。

これはプログラマがコンポーネントライブラリを呼び出すのとよく似ています。

以前は：

ゼロからアニメーションを書く。

現在は

レンズライブラリからモーション言語を選択→パラメータを調整→製品素材に適応します。

---

なぜRemotionを選ぶのか？

Shotcraftの低レベルビデオ実装が採用されました。 Remotionの略。

ReMotionのコアアイデアは、React/TypeScriptを使用して動画を記述することです。

これはAIエージェントにとって重要です。

従来のビデオソフトウェアの操作の多くは：

タイムライン→ドラッグ→調整パラメータ→プレビュー → 再調整。

コーディングエージェントの場合、より自然な方法は次のとおりです。

コードの読み取り→パラメータの変更→レンダリング→チェック→ 再修正。

このため、RemotionはAIエージェントのビデオ実行層として最適です。

ビデオショットクラフトのデモ自体はTSX実装であり、アニメーションの多くは標準化されたものを使用している。 tnormalized progress

例えば、写真は以下のように抽象化できます。

入力素材 +アニメーションパラメータ+時間進行→出力画面

これにより、“カメラ”はプログラム可能な資産になります。

---

最も注目すべきポイント：AIハンドスクラッチUIではなく、実際の製品ページ

これは、ビデオショットクラフトの最も価値のある設計原則の1つだと思います。

プロジェクトは明確に：

既存のページは実際のスクリーンショットを使用してください。

つまり、動画がSaaS製品を紹介している場合、AIにダッシュボードを“見た目”に再描画させるべきではありません。

正しい方法は、

実際の製品ページ→ブラウザの自動化 →高精細スクリーンショット→要素レベルの素材 → Remotion

プロジェクトのプロダクションフローでは、製品のローカル開発サーバーが起動され、ヘッドレスブラウザを使用してページをキャプチャし、さらにページテクスチャと要素の位置データを取得します。

これには明確な利点があります。

動画の中の製品は、ユーザーが使用している製品です。

これにより、製品動画の信頼性が大幅に向上します。

---

2.5 D：なぜ製品のスクリーンショットも“映画感”を撮ることができるのか？

ウェブページのスクリーンショットが1つしかない場合、一般的な方法は次のようになります。

ズームイン→ズームアウト→ 左右に移動する。

すぐにPPTになります。

ビデオショットクラフトのアプローチは、2.5 D写真に近いです。

ウェブページは多くの異なる視覚レイヤーとして理解できます。

Camera
  │
  ├── Background
  │
  ├── Page
  │    ├── Header
  │    ├── Content
  │    └── Cards
  │
  └── Foreground

そして採択された

• カメラズーム
• PANさん
• Orbitさん
• Perspectiveビュー
• デプスは
• パララックス
• 回転する。

元のページに空間感を与えます。

例えば：

カメラはまずページ全体を見る→ゆっくり進む→被写体領域が視覚中心に入る→周囲のコンテンツにわずかな視差が生じる→最後に製品のコア機能に止まる。

この時点で、視聴者はもはや“ウェブスクリーンショット”ではなく、カメラが実際の製品空間を撮影しているように見えます。

---

6、特殊効果を追加することではなく、本当の“映画感覚”

プロジェクトの設計原則の1つは非常に興味深いものです。

映画的な感覚は、アニメーションではなく、ミラー、光、リズム、音の組み合わせから生まれます。

これは多くのAI動画が簡単に踏みやすい穴です。

AIは簡単に考える：

Advanced =もっとアニメーション。

したがって

• すべての要素は飛ぶ。
• すべての要素が輝く。
• すべての単語を演奏する。
• 各トランジションにブラーを追加します。
• すべてのカメラはカメラシェイクです。

結果はしばしば逆です。

Shotcraftはさらに強調する：

カメラは1つの動きしか話さない。

例えば、ショットが“フライト”を選択した場合、フライトがショットの主人公になります。

代わりに：

飞び込み+回転+光る+ 粒子 +跳び飞び+ Shake。

この制約は、従来のモーションデザインのアプローチに非常に近いです。

高級感は、“何を追加できるか”ではなく、“何を少なくするか”から来ることが多い。

---

もう一つの重要なことは、画像を“停止”させることです。

AI 生成アニメーションには自然な傾向があります。

常に動いている。

モデルにとって、“動き”は“コンテンツがある”ことを意味するようです。

しかし、プロのビデオには多くのホールドが必要です。

video-shotcraftには明確なルールがあります。

• ブランドロゴが落ち着いた後、少なくとも1 秒は保持します。
• バッチアニメーション終了後の静止時間;
• オープニングボディアクションに十分な時間を与える。
• タイムライン上の残りのフレームを事前に予約します。

理由は簡単です。

画像が動いている場合

視聴者は情報を理解する時間がない。

実際の製品動画のリズムは：

次のステップを理解する。

代わりに：

动作→动作→动作→动作→动作

だから、“休憩”はそれ自体がデザインです。

---

BGMは単なるBGMではなく、タイムラインです。

もう一つ興味深いのは、ビデオショットクラフトがBeat Syncを処理する方法です。

多くのビデオは“カードポイント”と呼ばれ、実際には

数フレームごとにアニメーションを行います。

これは本当の音楽ではない。

このプロジェクトのアイデアは、音楽そのものを分析することです。

• BPMは
• Phase（フェーズ）
• Kickさん
• スネーレ
• ハイハット-Hat
• トランジェント

この情報はビデオタイムラインにマッピングされます。

結局、カメラの時間はもはや単純ではありません。

0s
2s
4s
6s

より近い：

beatF(1)
beatF(2)
beatF(4)
beatF(8)

これにより：

レンズ切り替え、要素表示、Camera、act、SFX

それは音楽のリズムで起こります。

また、フレーム数を小さく抑えることを目的として、レンダリング後の接点誤差を再測定する方法を提案します。

これは一つのことを示しています

ビデオのリズムもエンジニアリングできます。

---

サウンドデザイン：SFXは“最後の追加”ではありません。

多くの自動生成ビデオは音を無視します。

実際には、同じ画像：

音がない。

そして、

正確なインパクト/ライザー/スパークル/ UIクリック

完全に2つの感情。

Video-ShotcraftはSFXをシーンや素材別に分類しています。

現在のプロジェクトには149のSFXがあります。

• transitionの略
• Impact（インパクト）
• Riser（ライザー）
• カメラは
• UI
• text
• paper
• film
• light
• データデータ
• sci-fi
• mech
• glass
• fluid
• crowd
• counter

等类别组织。

这种分类方式很像一个设计师自己的“声音词典”。

例えば：

UI 元素出现 → UI sound
纸张翻页 → paper sound
镜头冲击 → impact
光效出现 → sparkle / light
镜头推进 → riser

于是声音也成为镜头语言的一部分。

---

十、152 张镜头卡只是“词汇”，不是完整分镜

这是理解这个项目非常重要的一点。

Shot Recipe 并不等于完整视频。

より似ている：

电影语言中的词汇。

例えば：

• Fly-in
• Stack
• Orbitさん
• Zoom
• Flip
• Reveal
• Spotlight
• パララックス

这些是“词”。

真正的视频则是：

词 → 句子 → 段落 → 故事

所以 video-shotcraft 还提供了完整的 Production Pipeline。

它希望 Agent 先理解产品：

产品是什么？
      ↓
最值得展示什么？
      ↓
视觉方向是什么？
      ↓
哪些功能适合哪些镜头？
      ↓
完整 Storyboard
      ↓
素材采集
      ↓
动画实现
      ↓
声音设计
      ↓
渲染
      ↓
QA

这比单纯“让 AI 写 Remotion 代码”高了一个层级。

---

十一、它实际上提供了三种创作模式

项目并没有强迫所有视频走同一种流程，而是设计了三种模式。

1. Ink Press 模板

这是最适合快速出片的路线。

项目提供了一套已经验证过的完整宣传片模板：

• 36.2 秒
• 1920 × 1080
• 30fps
• 10 个镜头
• 2.5D 页面运镜
• Title Card
• 转场
• SFX

用户只需要告诉 Agent：

用 video-shotcraft 的 Ink Press 模板给我的产品做宣传片。

然后替换：

• 产品截图
• 製品コピーの作成
• ロゴはこちら
• 品牌颜色

即可快速得到一支结构完整的视频。

---

2. 自主自由创作

如果不想使用固定模板，可以让 Agent 自己决定：

• ビデオの構造
• 视觉方向
• 镜头选择
• 素材处理
• 音频
• 节奏
• 最终实现

这更像：

AI 导演模式。

用户给产品和目标，Agent 自己完成整个创作链路。

---

3. 共同创作

如果你希望自己参与创意决策，则可以采用共同创作模式。

Agent 会在几个关键节点停下来：

产品简报 → 需求决策 → Visual Direction → Shot Mapping → Storyboard

然后由人确认。

之后：

素材采集 → Remotion 实现 → SFX → Render → QA

则交给 Agent 执行。

这实际上解决了一个非常现实的问题：

AI 不是所有决策都应该自己做。

创意方向和商业目标，往往需要人参与。

而具体执行，则可以高度自动化。

---

十二、Gallery 是这个项目另一个很聪明的设计

如果让用户直接阅读 152 张 Markdown 镜头卡，会非常痛苦。

オンラインギャラリーを提供しています。

ユーザーは：

• レンズを見て
• 動的プレビューの表示;
• 検索すること。
• カテゴリー別フィルター;
• 様々なバリエーションを見る。
• Shot Card名をコピーします。

オンラインモーションギャラリー

このデザインは実際に：

“どんなアニメーションが欲しいのか？”

視覚的選択の問題になります

ユーザーは説明する必要がない：

“少し3D空間感があって、右側から素早く入って、少しゆっくりとしたカードの積み重ねをしたいのですが...”

必要なのは

“これが欲しい”。

そしてショットカード名をAgentに渡す.

これは人間とAIのコラボレーションにとって非常に重要です。

---

“Prompt Engineering”から“Asset Engineering”へ

ビデオショットクラフトで最も注目すべき点は152枚のレンズカードではないと思います

その背後にある方法：

Promptを最適化するだけでなく、AIの呼び出し可能なアセットを準備してください。

伝統的なAIワークフロー：

Prompt
  ↓
LLM
  ↓
代码
  ↓
结果

Video-Shotcraftはより近いです：

Product
   ↓
Knowledge / Rules
   ↓
Shot Recipes
   ↓
Reference Implementations
   ↓
Assets
   ↓
Agent
   ↓
Remotion
   ↓
Render
   ↓
QA

これは典型的なことです エージェントスキルエンジニアリング。

AIの能力はもはやモデルだけに依存しません。

しかしながら：

モデル+ツール++テンプレート+再利用可能+検収ルール

最終的な能力を持つ。

---

なぜこのモデルが“AIワンクリックで動画を生成する”よりも実用的なのでしょうか？

多くのビデオツールが強調します：

単語を入力し、ビデオを出力します。

この方法は非常に適している：

• 創造的探求;
• コンセプトビデオ;
• ソーシャルメディアのコンテンツ;
• 雰囲気の写真;
• 非構造化コンテンツ

しかし、製品ビデオには特別な要件があります。

正確である。

商品ページは変更できません。

ロゴは変更できない。

機能は作れない。

UIに存在しないボタンは表示できません。

文字は書けません。

製品ビデオはより適切です：

エージェント+コード+リアルアセット

完全に依存するより：

テキスト→ Generative Video

ビデオ·ショットクラフトのルートは基本的に：

AIはクリエイティブおよびエンジニアリング組織を担当し、実際の製品資産は事実上の正確さを担当し、Remotionは決定的な画像生成を担当します。

これは、SaaS、開発者ツール、デスクトップソフトウェア、AI製品に特に役立ちます。

---

15.このプロジェクトからさらに大きな傾向が見られる

動画ShotcraftをAIエージェントエコシステム全体に組み込むと、“AIが動画を作る”だけではないかもしれません。

しかし、より大きな方向に進む：

エージェントスキルが“ヒント”から“プロフェッショナルワークフロー”に変わります

成熟したエージェントスキルには以下が含まれます。

Skill
├── Rules
├── Knowledge
├── Templates
├── Recipes
├── Components
├── Assets
├── Tools
├── Examples
└── QA

従来のソフトウェア工学とよく似ています。

以前はプログラマーに渡しました

API + SDK +コンポーネントライブラリ

エージェントにもできます：

スキル+レシピ+テンプレート+アセットライブラリ+ツールチェーン

エージェントはこれらの能力の上に立って作業を完了させます。

Shotcraftは非常に簡単な例です。

---

16どのように使い始めるか。

最も簡単な方法は、リポジトリアドレスをClaude CodeまたはCodexに直接渡すことです。

Install this skill for me:
https://github.com/Vincentwei1021/video-shotcraft

Skills CLIも使用できます。

npx skills add Vincentwei1021/video-shotcraft

またはClone：

git clone https://github.com/Vincentwei1021/video-shotcraft.git

cd video-shotcraft

次に使用しているエージェントに応じてSkillリンクを作成する.

インストールが完了すると、次のような要件を直接作成できます。

Use video-shotcraft to create a promo for my desktop product.

またはレンズ指定：

Use the deck-deal-flyin and row-embed shot cards
to present this feature.

直接言うこともできます

Use video-shotcraft to make a promo for my product
with the Ink Press template.

プロジェクトREADMEで提供される完全なインストールと使用方法も比較的明確です。

---

17今一番いいシーンは？

プロジェクト自体の位置づけから、以下に最適です。

SaaS製品

例えば：

• AIツールです
• プロジェクト管理ソフトウェア
• CRMとは
• データ分析プラットフォーム
• コラボレーションツール

開発者向けツール

例えば：

• IDE
• APIプラットフォーム
• CLI
• DevToolの略。
• AIコーディング製品

デスクトップアプリケーション。

特に、インタラクティブなエクスペリエンスを重視する実際のUIが多数ある製品に適しています。

製品発表の動画

例えば：

新機能の打ち上げ
製品アップデート
バージョン·リリース
製品デモの概要
ランディングページヒーロービデオ

また、個々のショットレシピ自体は製品プロモーションに限定されず、以下にも適用できます。

• ブランド·フィルム
• Feature Demo
• Launch Videoより
• ソーシャル·ビデオ
• UIモーション

シーンを待つ。

---

18.本当に価値があると思う場所

Video-Shotcraftを見ると：

“A Remotion Project with 152 Animes”

実際に過小評価した。

本当に興味深いのは、人間の経験に大きく依存していた領域を、エージェントが実行できるプロダクションシステムに分解したことです。

设计经验
   ↓
镜头配方
   ↓
代码实现
   ↓
模板
   ↓
素材库
   ↓
声音设计
   ↓
生产流程
   ↓
自动化 QA

これは非常に典型的です：

Knowledge → Workflow → Agent → Production

道だ。

AIエージェントが最終的に本当に変えるのは、“AIにもっとできるようにする”ことではなく、

専門家の頭の中の隠れたワークフローを、機械が実行できる明示的なシステムに変えていきます。

---

AI動画の未来は“生成”ではなく“制作”になるかもしれない

AIビデオについて話すとき、私たちはしばしば1つの質問を中心に展開します。

“最もリアルなビデオを生成するモデルはどれですか”

しかし、プロダクトチームにとって本当に重要な質問は次のとおりです。

“AIは私の製品から始めて、公開可能な動画を完成させることができるのか？”

2つの問題は全く異なります。

前者の懸念は ジェネレーション·ジェネレーション。

後者の懸念は 制作は。

Video-Shotcraftは2番目のルートを選択した。

AIに美しいビデオを想像させるのではなく、エージェントに一連のレンズ言語、実際の製品素材、Remotion実装、サウンドアセット、テンプレート、品質基準を与えます。

最終的にAIを1つにします

アニメーションコードジェネレータ。

徐々に変化する：

“レンズの言語がわかる製品動画制作アシスタント”。

これはエージェントスキルの非常に興味深い開発方向かもしれません。

未来のプロフェッショナルAIは、必ずしもより大きなモデルではなく、“モデル+ワークフロー +ツール+アセット+アクセプタンス”になる可能性があります。

ビデオ·ショットクラフトは、非常に具体的で美しいケースを提供します。

プロジェクトホームページ：Vincentwei1021/videos-shotcraft