video-to-superprompt

動画からスーパープロンプトを作成

このスキルを使う場面

• ユーザーが動画を提示、言及、アップロード、リンク、または指し示し、そのデザイン、UI、アニメーション、トランジション、スクロール時のインタラクション、タイポグラフィ、色、アセットの分析を依頼した場合。
• ユーザーが、参考動画に映っているページ、アプリ、インタラクション、またはモーションシステムを再現するプロンプトや記事を求めている場合（完全な再現、または参考にしたアレンジ）。
• 技術的な動画の調査（ffprobe／ffmpegによるフレーム抽出）に加え、ストーリー、レイアウト、モーション、ビジュアルデザイン、技術的な再構築、アクセシビリティ、パフォーマンスを段階的に分析する必要がある場合。
• 動画から作成する画像プレート、動画クリップ、WebGL／canvas要素、ポスター、スプライト、テクスチャオーバーレイについて、アセットマップと個別のAI生成プロンプトが必要な場合。
• 動画を参考にした、すぐに貼り付けて使えるスーパープロンプト、根拠を示す記事、実装ブリーフ、またはアセット生成パックが求められる場合。
• 対象外：動画の参考資料を使わない静的なデザイン／UIレビュー、または再現プロンプトではなくページの直接構築をユーザーが求めている場合。この場合は、デザインレビューまたは実装用のスキルに案内してください。

目標

利用可能な参考動画を、動画に映っている内容とその動き、再構築の方法、必要なアセットや生成メディアを捉えた、実装者がそのまま使えるプロンプトに変換します。デフォルトの出力は、ユーザーが記事、アセットパック、または実装を求めない限り、すぐに貼り付けて使えるプロンプト1つです。

ワークフロー

1. 元動画を特定します。

   • ローカルパス、アップロードされたファイル、URL、ブラウザーで表示できる動画、記事のアセット、リポジトリ内のメディアを受け付けます。
   • 動画が参照されていてもアクセスできない場合は、詳細を推測する前に、正確なファイルまたはURLを尋ねてください。
   • ユーザーが完全な再現を希望している場合は、プロンプトを書く前に、動画に関連するソースのHTML/CSS/JSまたはローカルページを確認してください。

2. 動画を技術的に調べます。

   • ローカルファイルには、ffprobe を実行して、長さ、寸法、フレームレート、コーデック、サイズを確認します。
   • 代表的なフレームを ffmpeg で抽出します。サムネイルを均等に並べるより、タイムライン上の見どころを優先してください。
   • 手早く確認する場合は、次の方法がおすすめです。

     ffprobe -v error -show_entries format=duration,size:stream=width,height,r_frame_rate -of json "$VIDEO"
     mkdir -p /tmp/video-frames
     ffmpeg -y -i "$VIDEO" -vf fps=1 /tmp/video-frames/frame-%03d.jpg
     

   • 長い動画やスクロールの多い動画では、開始・中間・終了地点と、確認できる切り替わりの場面も抽出します。

3. 複数のレイヤーに分けて分析します。

   • ストーリー：ページ／アプリの目的、感情の流れ、セクションの順序、見どころ間の遷移。
   • 画面／レイアウト：ビューポートのフレーミング、グリッド、固定領域、カード、メディア、オーバーレイ、余白、ナビゲーション、フッター。
   • モーション：表示タイミング、イージング、視差、マスク、固定セクション、スクロール連動、ホバー／タップ状態、ループするアンビエントモーション、カメラ移動。
   • ビジュアルデザイン：タイポグラフィ、カラーパレット、面、境界線、シャドウ、テクスチャ、アイコン、画像／動画の処理。
   • 技術的な再構築：CSS／ネイティブ API、IntersectionObserver、Web Animations API、GSAP ScrollTrigger、Lenis、Framer Motion/Motion One、Three.js/WebGL、canvas、動画の currentTime 連動、カルーセル、その他の領域別ライブラリ。
   • アクセシビリティ／パフォーマンス：モーションの軽減、モバイルでの動作、タッチ／キーボード状態、遅延読み込み、動画のプリロード、ピクセル比の上限、静的なフォールバック。

4. アセットを計画します。

   • アセットマップを作成します。指定されたURL、使用するローカルファイル名、または作成が必要なアセットのプレースホルダー名を記載します。
   • AI アセットが必要な場合は、画像プレート、動画クリップ、WebGL／canvas 要素、ポスター、スプライト、マスク、テクスチャオーバーレイ用に、それぞれ別のプロンプトを作成します。
   • ユーザーが特定のモデルや API を指定した場合は、プロンプト内で正確に保持し、画像用プロンプトと動画用プロンプトを分けます。

5. スーパープロンプトを書きます。

   • ユーザーが別の形式を希望しない限り、貼り付けて使えるプロンプトは、単一の text フェンス付きコードブロックにまとめます。
   • まず、作成する最終成果物と参照の範囲（完全な再現か、着想を得た応用か）を明記します。
   • アセットマップ、ブランド／コンテンツ、全体のデザイン言語、レイアウトルール、各セクションの構成、モーションシステム、スクロールシステム、動画の動作、WebGL／Three.js の動作、レスポンシブ要件、アクセシビリティ／パフォーマンス、避けるべきパターンを含めます。
   • 主要な各セクションについて、目的、レイアウト、ビジュアルの詳細、アニメーション、インタラクション、スクロール時の動作、使用するライブラリ／API、モーション軽減時のフォールバックを指定します。
   • 「美しく作る」「似たアニメーション」「素敵なトランジション」のような曖昧な表現は避け、好みを具体的な実装指示に落とし込みます。

6. 仕上げる前に検証します。

   • プロンプト内のすべてのアセットパス／URLが存在すること、またはプレースホルダーとして明確に示されていることを確認します。
   • スクリーンショット／フレームを作成した場合は、ファイルが空でなく、代表的な内容になっていることを確認します。
   • 記事やリポジトリの成果物を作成する場合は、作業領域内の指示に従い、未コミットの変更のステージング範囲を必要最小限に保ち、必要に応じてコミットします。

出力モード

• プロンプトのみ： 貼り付けて使えるプロンプトを提示し、役立つ場合はその前に簡潔なアセットマップを添えます。
• 記事： content.md と、ローカルのフレーム／動画の証拠、マニフェスト、プロンプトを作成します。現在のリポジトリの記事作成規約に従います。
• 実装概要： プロンプトの後に、構築計画と QA チェックリストを追加します。
• アセット生成パック： 背景画像、動画クリップ、スプライト／WebGL、ポスター、最終ページのプロンプトに分けます。

品質基準

• 元の動画を見なくてもインタラクションを再現できる長さのプロンプトにしてください。
• 動画の順序、テンポ、特徴的な細部を維持してください。
• 固定セクション、スクラブ連動のタイムライン、video.currentTime、視差レイヤー、不透明度による表示、変形、マスク、シェーダー、パーティクルフィールド、ホバー状態、カルーセルの物理挙動など、正確なモーションの仕組みを明記してください。
• モバイルでの動作と、動きを抑える設定への対応を毎回含めてください。
• 避けるべき点を明記してください。特に、汎用的なランディングページのセクション、装飾的なブロブ、内容に合わないストックメディア、スクロール連動が必要なのに自動再生のみにする動画、テキストの重なりは避けてください。

参考資料

• 最終プロンプトをゼロから作成する場合、またはユーザーが「詳細なプロンプト全文」を求めた場合は、references/superprompt-template.md を読んでください。
• 上流ソース：MengTo/Skills — video-to-superprompt
• agents/openai.yaml — このスキルの Codex/OpenAI エージェントインターフェースのメタデータ