使い方ガイドへスキップ
Video to Superprompt作者 MengTo

Video to Superprompt スキル。

参考動画を、デザインとモーションを再構築する具体的なプロンプトに。

  • 動画分析
  • ショットのプロンプト
ソースレビュー · video-to-superpromptSKILL.md
タスク 参考動画を、デザインとモーションを再構築する具体的なプロンプトに。 成果物 詳細で、そのまま貼り付けられる再構築または着想用のプロンプト 1 つ。 始める前に 確認可能な録画を提供し、忠実な再現か着想を得たアレンジかを指定します。対象フレームワークと利用可能な素材を添え、使えるファイルと不足する参考を要件内で区別できるようにします。
記事用の要約 · ソース確認日 2026-11-02 · 生成された例ではありません

01 機能概要

参考動画を、デザインとモーションを再構築する具体的なプロンプトに

参考動画のレイアウト、素材、遷移、スクロールを分析。レスポンシブ対応と動きの代替案を備えた制作プロンプトを作ります。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

video-to-superprompt は、アクセス可能な参考動画を、別の制作ツールで使える詳細な要件に変換します。流れ、画面レイアウト、タイポグラフィ、素材、動きの仕組みを調べ、観察した挙動を具体的な実装指示にします。標準の成果物は、そのまま貼り付けられるプロンプトです。

ソースは厳密な再現と、着想を得たアレンジを区別します。厳密に再現する場合は、関連する HTML、CSS、JavaScript が利用可能なら調べるよう求めます。素材マップは実際のパスと仮置きを分け、プロンプトは「似たアニメーション」といった表現に頼らず、モバイル、動きを減らす設定、各セクションのタイミングを記述します。

想定される成果物

  • 詳細で、そのまま貼り付けられる再構築または着想用のプロンプト 1 つ。
  • 実際のファイル名、ソース URL、明示した不足素材を含む素材マップ。
  • 任意の記事、実装要件、または個別の素材生成プロンプト。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    録画を見つけて調べる

    参考にアクセスできることを確認します。ローカル動画は尺、寸法、フレームレートを調べ、意味のある変化の前後でフレームを抽出します。

  2. 02
    見えている仕組みを説明する

    物語、レイアウト、視覚表現、動きを分けます。固定セクション、マスク、スクロール連動、カメラ変化は録画から裏付けられる場合にだけ特定します。

  3. 03
    制作に使える要件を書く

    プロンプトをセクション別に整理し、素材、操作、レスポンシブ挙動、代替案を含めます。参照ファイルが存在するか、仮置きと明記されているかを確認します。

02 利用場面

使いどころ

確認可能な録画を提供し、忠実な再現か着想を得たアレンジかを指定します。対象フレームワークと利用可能な素材を添え、使えるファイルと不足する参考を要件内で区別できるようにします。

向いているケース

  • モーションの参考を説明しにくい録画を、名前の付いた視覚的な仕組みと、議論・再構築できる流れに変換します。
  • 実装前にデザインを引き継ぎたいまず役立つ要件を用意し、制作ツールや実装スタックは後から選びたい場合に使います。

確認すべき制限

  • 動画を確認できる必要があるアクセス不能な URL では、観察したレイアウトやタイミングの主張を裏付けられません。不足する元資料は明示的な欠落として扱います。
  • 成果物はプロンプト要件を書いてもページが実装されたことにはならず、提案した技術が原作で使われた証明にもなりません。

用意する入力

  • 参考録画アクセス可能なローカル動画か URL を提供し、特に重要な部分を示します。
  • 再現の範囲見た目の挙動を忠実に再現するか、別のブランドと内容にアレンジするかを伝えます。
  • 対象プロジェクトフレームワーク、利用可能な素材、モバイル要件、目指す最終体験を説明します。

03 重要な判断

重要な判断

  1. 動きを実装可能な指示にする

    固定パネルや動画時間のスクラブなど、名称のある仕組みで何を実装するか伝えます。

  2. 素材の出所を明確にする

    素材マップは、既存資料と今後制作する画像・動画を分けます。

  3. 代替案を要件に含める

    デスクトップの動きと並べて、モバイルと動きを減らす設定での挙動を記述します。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

ソースとセットアップを確認する

アクセス可能なローカル動画か URL を提供し、特に重要な部分を示します。

アップストリームのソースファイル
https://github.com/MengTo/Skills/blob/ef5f85130d083d33e08cb19f6ee23cdde2d406ab/agent-skills/codex/video-to-superprompt/SKILL.md

以下の参照先から、提供元の手順を確認できます。利用前にリポジトリのセットアップ要件を確認してください。これはインストールコマンドではありません。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
video-to-superprompt を使って、提供した 25 秒の製品サイト録画を分析してください。日程調整アプリ向けに着想を得てアレンジし、固定された機能セクションと、スクロール位置と動画進行の関係を保ちたいです。冒頭、セクション境界、最終状態を調べ、観察したことと実装上の推測を区別してください。素材マップ、セクション構造、アニメーションのタイミング、キーボードとモバイルの挙動、動きを減らす代替案を含む、そのまま貼り付けられる制作プロンプトを 1 つ作ってください。使えない素材は仮置きと記してください。Web サイトは構築せず、ソースで確認できない限り原作が特定のライブラリを使うと主張しないでください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • 代表フレームがすべての重要な遷移をカバーしているか確認する。
  • すべての素材参照を確認し、不明な実装詳細を明記する。
  • 主要な操作ごとにモバイルの挙動と動きを減らす設定を指定する。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
MengTo
リポジトリ
MengTo/Skills
スキルファイル
SKILL.md
ライセンス
MIT
確認したスナップショット
2026-11-02 · ef5f85130d08
編集部によるソース要約
参考動画を、デザインとモーションを再構築する具体的なプロンプトに。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

Web サイトを自動で再現しますか?

標準出力はプロンプトです。実装、記事、素材パックは、別途依頼が必要な出力モードです。

原作のアニメーションライブラリを特定できますか?

適した仕組みの提案や、利用可能なソースファイルの調査はできます。録画だけでは、どのライブラリが効果を作ったか証明できません。

等間隔のフレームだけでは足りない理由は?

短い遷移は一定間隔のサムネイルの間に埋もれる可能性があります。ソースは時間軸上の節目、セクションの変化、開始・終了状態を優先します。

OpenDesign

依頼内容とデザイン作業を一つの場所に。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/MengTo/Skills/blob/ef5f85130d083d33e08cb19f6ee23cdde2d406ab/agent-skills/codex/video-to-superprompt/SKILL.md