AIビデオのためのモーショングラフィックス
remotion-best-practices および cinematic-camera と共に使用します。このスキルは、インプット、リサーチ、信頼できるアセット、リファレンス選択、ビジュアル品質、納品承認を管理します。
厳格な実行契約
すべてのビルドは scripts/promptible-gate.mjs を通過する必要があります。
一般的なパス:
- Claude Code:
.claude/skills/motion-graphics/scripts/promptible-gate.mjs - その他のエージェント:
.agents/skills/motion-graphics/scripts/promptible-gate.mjs
スクリプトが BUILD AUTHORIZED と出力するまで、コンポジションコードを作成しないでください。DELIVERY AUTHORIZED と出力するまで、レンダリングを納品しないでください。コマンドの失敗は即座に停止します。
ステージ 1 — 簡潔なインプット
不足している選択肢のみを質問します:
- フォーマット: 4:3 ハーフスクリーン Instagram インサート (1440×1080) または 9:16 フルスクリーン Instagram (1080×1920)。明示的に要求された場合のみ 16:9 を使用します。
- サーフェス: warm light、clean dark、light grid、または dark grid。
- 正確なスクリプトのビート、再生時間、名前付きプロダクト、検証済みの主張、提供されたアセット。
デフォルトで暗くしないでください。ユーザーがサーフェス選択を委任した場合は、warm light を使用します。
ステージ 2 — リサーチと信頼できるアセット
references/research-and-assets.md と references/logo-library.md を読んでください。
コンセプト作業の前に、最小限の有用なリサーチコースを実行します:
- 提供されたユーザーアセットは信頼できるものです。それらをそのまま使用し、再描画や置き換えは絶対に行わないでください。
- 一般的なプロダクトについては、
assets/logos/から適切なバンドル済みロゴをプロジェクトにコピーし、その出典を保持します。 - 不足している場合は、1~3の信頼できるページを検査します: 公式ブランドキット/ホームページ、公式ドキュメント/プロダクトページ、そして信頼できる厳選されたアイコンソース。
- 透過 SVG を優先します。ロゴのスクリーンショット、検索結果のサムネイル、埋め込まれたチェッカー/グレーの背景、非公式の再現、ホットリンクされたリモートアセットは絶対に使用しないでください。
- ダッシュボード/プロダクト UI については、実際の提供されたスクリーンショット/録画、または公式の公開プロダクト/ドキュメントのスクリーンショットを入手します。存在しない場合は質問し、ダッシュボードをでっち上げないでください。
- 可視構造、用語、ブランドカラー、およびビートに関連する正確なアクション/状態をリサーチします。裏付けのないメトリクス、個人情報、または主張をコピーしないでください。
- アセットとメモを
.promptible/research/にキャッシュします。プロダクト、ソース、アセットハッシュ、および参照メカニズムが変更されていない場合は、キャッシュヒットを再利用します。
ビートが必要とするビジュアルモードのみを選択します: logo-system、product-ui、terminal、editorial、または abstract。すべてのグラフィックにニュースレター、ダッシュボード、ターミナル、または凝ったカメラムーブを強制しないでください。
.promptible/research-brief.md に以下の見出しで記述します:
## プロダクトまたはコンセプト
## 信頼できるソース
## 実際のビジュアル言語
## 最も近い承認メカニズム
## モーションプラン
## 避けるべき点
次に実行:
node <skill-dir>/scripts/promptible-gate.mjs research \
--project . \
--research-mode authentic \
--visual-mode product-ui \
--product "Slack" \
--reference kickbacks-same-run-editor \
--brief .promptible/research-brief.md \
--source https://slack.com/ \
--logo public/research/slack.svg \
--surface public/research/slack-dashboard.png
名前のないコンセプト作業の場合は、--research-mode abstract --visual-mode abstract を使用します。ブリーフと承認済みリファレンスの比較は引き続き適用されますが、不要なウェブ/ロゴリサーチは行いません。
ステージ 3 — 検証済みリファレンス事前チェック
references/approved-references.md を読んでください。色ではなくストーリーメカニズムで選択します。リクエストにより特化している場合は新しいコンセプトも許可されますが、最も近い承認メカニズムからカメラ文法、スケール、抑制、因果動作を明示的に継承する必要があります。最大2つのメカニズムを組み合わせます。
実行:
node <skill-dir>/scripts/promptible-gate.mjs init \
--project . \
--research .promptible/research-manifest.json \
--format 9:16 \
--background warm-light \
--claim-source user \
--beat "サポートする正確なビジュアルアイデア" \
--duration 6
init はリサーチ/アセットを再検証し、バンドルされた承認済み MP4/コンタクトシートを SHA-256 で検証し、.promptible/render-brief.json を書き込みます。
実際のバンドルされた承認済み MP4/コンタクトシートとリサーチされたプロダクト証拠を検査します。.promptible/reference-observations.md を以下の内容で書き込みます:
## コンポジション
## カメラ
## アイデンティティ
## リサーチとの一致
## アンチパターン
次に実行:
node <skill-dir>/scripts/promptible-gate.mjs inspect \
--project . \
--observations .promptible/reference-observations.md
BUILD AUTHORIZED のみが実装を許可します。
ステージ 4 — ビルド
リサーチされたアイデンティティと選択されたリファレンスの因果メカニズムを使用します。結果は、修正プロンプトを待つテンプレートのようにではなく、最初のパスで具体的に感じられるようにします。
厳格なルール:
- ネオン、グロー、ブルーム、発光エッジ、色付きシャドウ、グラデーションオーブ/ウォッシュ、シアン-パープルグラデーション、ガラスモーフィズム、サイバーパンクライティング、バイブコーディングされた AI スタイルは一切禁止。
- 汎用的なレシート、請求書、書類、クリップボード、フローティングカード、バーコード、ゴム印、証明書、価格カード、偽のダッシュボード、切断されたカードグリッドのフォールバックは禁止。
- 現実的なダッシュボードは、提供されたまたは信頼できるプロダクト証拠に基づく場合にのみ推奨されます。可視構造を忠実に再現し、メトリクス、主張、コントロール、プロダクト状態を決して発明しないでください。
- 発明された UI、ロゴ、価格、ランク、エンゲージメント、シリアル、証拠は禁止。
- 冗長なナレーションテキストは禁止。実際のデータ、プロダクト UI、コマンド、コード、ファイル名、短い構造ラベルは許可されます。
- モーションは、因果関係、スケール、置き換え、ナビゲーション、または状態変化を明らかにする必要があります。ロゴの交換や信頼できる UI アクションがビートを明確に伝える場合は、抑制されたモーションでも構いません。
- 行が追加されながら中央に静的オブジェクトがあり、スローなズームインがあるだけでは、映画的な実行とは言えません。
- より少なく、より大きな焦点オブジェクトを使用します。現在のアクションを中央に、完全に表示され、最終サイズで読み取り可能に保ちます。
- 暗いシーンはオプトインです。暗いとは、フラットなアクセントを伴うニュートラルなチャコールを意味し、照明パネルはありません。
コンセプト選択の前に references/rejected-patterns.md を読んでください。
ステージ 5 — 候補証拠
候補をレンダリングします。3フレームのコンタクトシートと ffprobe JSON を生成します。6秒の例:
mkdir -p .promptible
ffmpeg -y -hide_banner -loglevel error -i out/candidate.mp4 \
-vf "fps=3/6,scale=480:-1,tile=3x1:padding=12:margin=12:color=white" \
-frames:v 1 .promptible/candidate-contact-sheet.jpg
ffprobe -v error -select_streams v:0 \
-show_entries stream=width,height:format=duration -of json \
out/candidate.mp4 > .promptible/candidate-probe.json
次に実行:
node <skill-dir>/scripts/promptible-gate.mjs candidate \
--project . \
--render out/candidate.mp4 \
--contact-sheet .promptible/candidate-contact-sheet.jpg \
--probe .promptible/candidate-probe.json
ステージ 6 — 独立したビジュアル批評
ビルダーは自身の作業を評価できません。以下の内容で別のクリーンな批評/サブエージェントを開始します:
references/visual-critic.md- リサーチブリーフ/マニフェストと信頼できるアセット
- 選択された承認済み MP4/コンタクトシート
- 候補 MP4/コンタクトシート
.promptible/render-brief.json
批評は実際のメディアを検査し、templates/critic-output.example.json に一致する JSON を返します。独立したレビューが実行できない場合は停止し、自己承認は絶対に行わないでください。
ステージ 7 — 納品ゲート
node <skill-dir>/scripts/promptible-gate.mjs qa \
--project . \
--critic .promptible/critic.json
ゲートは、ハード障害、8/10未満のカテゴリ、8.5未満の平均、変更/欠落したリサーチまたは証拠、または非独立レビューを拒否します。DELIVERY AUTHORIZED が表示されるまで修正します。
技術ルールと納品ルール
- モーションは
useCurrentFrame()、spring()、interpolate()で駆動し、CSS アニメーションは使用しません。 - トラベルが役立つ場合は、ホールド → トラベル → ホールドを使用します。アクションはホールド中に完了します。
- 安定したエディターホールドで終了します。
- タイプチェックするか、最小の意味のあるビルド検証を実行します。
- 承認後にのみ、正確な寸法、再生時間、レンダリングコマンド、およびエディタープレースメントノートを含む MP4 を納品します。