mcpField
W
website-to-framevideo

website-to-framevideo

github.com/chanjing-aiクリエイティブ・メディア0182 回インストール14 週間前に更新
リポジトリ

website-to-framevideo について

ウェブサイトの URL から FrameVideo 制作を進めるワークフロー調整スキルです。ブランド情報の収集からメッセージ設計、絵コンテ、合成、検証までを案内し、承認ゲートと確認手順を備えています。

主な機能

  1. 01サイト内容とブランド情報の収集
  2. 02ビジュアルとメッセージの設計
  3. 03絵コンテと台本の作成
  4. 04ナレーションと字幕の調整
  5. 05FrameVideo 合成の構築
  6. 06成果物の検証とレビュー

活用シーン

  1. 01製品サイトからデモ動画を制作
  2. 02既存サイトを基に SNS 広告を制作
  3. 03承認手順を含むブランド動画の制作

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/chanjing-ai/framevideo --skill website-to-framevideo

インストール後、Claude Code で/website-to-framevideoを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/sfx/
CREDITS.md
manifest.json
references/
beat-builder-guide.md
capabilities.md
step-0-capture.md
step-1-design.md
step-2-brief.md
step-3-storyboard.md
step-4-vo.md
step-5-build.md
step-6-validate.md
scripts/
w2h-verify.mjs

詳細

WebサイトからFrameVideoへ

7ステップのワークフローを進めて、Webサイトをキャプチャし、プロフェッショナルな動画を作成します。このスキルはワークフローのコーディネーターです。各ステップで、実装の詳細に応じたスキルまたはリファレンスを読み込みます。

使用するタイミング

  • ユーザーがURLを提示し、動画（製品デモ、SNS広告、ブランドリール）の作成を希望している場合
  • ユーザーが「このサイトをキャプチャして」「これを動画にして」「プロモーション動画を作って」と言った場合
  • ユーザーが既存のWebサイトのコンテンツを基にした動画を希望している場合

クイックスタート

Webサイトから動画を作る基本的なワークフロー：

# User provides URL
"Make a 30-second product demo video from https://example.com"

# System orchestrates:
1. Capture site (Step 0) → extract brand + content
2. Create DESIGN.md (Step 1) → lock visual identity
3. Align on message (Step 2) → get video brief approval 💬
4. Storyboard + script (Step 3) → get narrative approval 💬
5. Generate voiceover (Step 4) → produce audio + timing
6. Build HTML (Step 5) → create FrameVideo composition
7. Validate + deliver (Step 6) → QA + Studio URL

ポイント：

  • 💬 = ユーザーの承認が必要
  • 各ステップで、必要なスキルやリファレンスを順次読み込みます
  • 自律モードでも検証が必要です（QAを省略しないでください）

ワークフローの概要

各ステップで、次のステップに進むためのアーティファクトを作成します。💬のあるゲートでは、ユーザーの承認が必要です。ワークフローではスキルとリファレンスを順次読み込みます。現在のステップに必要なものだけを読み込んでください。

Step 0: Capture & Brand       → Site summary
Step 1: Brand Identity         → DESIGN.md
Step 2: Strategy & Messaging   → Video brief 💬
Step 3: Storyboard + Script    → STORYBOARD.md + SCRIPT.md 💬
Step 4: VO, Timing + Captions  → Audio + transcript 💬
Step 5: Build Compositions     → index.html + compositions
Step 6: Validate & Deliver     → Studio URL
自律モードのルール

ユーザーが自律モードを希望した場合（「おまかせします」「驚かせてください」など）：

  • ✅ 自動で決めるもの： TTSプロバイダー、音声、色、ビート数、音楽、キャプション
  • ❌ 引き続き必須： アセットの監査、ビートごとのHTMLレビュー、DoDチェックリスト、検証結果の開示

自律モードとは、好みを決めることであり、検証を省略することではありません。

ステップ0：ブランドをキャプチャして理解する

読み込み： references/step-0-capture.md

適切なツールを使ってWebサイトをキャプチャし、ブランドアセット（色、フォント、画像、コピー）を抽出して、製品の機能と対象ユーザーを把握します。

ゲート： サイトの概要を出力します。アセットの一覧より先に、戦略（製品価値、対象ユーザー、ブランドの語調）を示してください。

ステップ1：ブランドアイデンティティ

読み込み： references/step-1-design.md

色のパレット、タイポグラフィ、コンポーネントのスタイル、レイアウトの原則をまとめた、ビジュアルアイデンティティのDESIGN.mdを作成します。正確な計算値にはdesign-styles.jsonを使用します。

ゲート： DESIGN.mdが存在し、色のパレット、フォントの選択、避けるべきことと推奨事項が記載されています。

ステップ2：戦略とメッセージ

読み込み： references/step-2-brief.md、references/capabilities.mdの目次を確認

動画で伝えるべき内容についてユーザーと認識を合わせます。ユーザーのプロンプトから、動画の種類とスタイルを把握します。ストーリーボードの作成前に、メッセージとナラティブアークを確定します。

ゲート： 動画の種類、長さ、形式、メッセージ、ナラティブアークが確定しています。

ステップ3：ストーリーボード＋スクリプト 💬

読み込み： references/step-3-storyboard.md

コンセプトを軸にストーリーボードを作成します。メッセージ → ナラティブアーク → ビート → ビートごとの手法 → ブランドのアクセントの順にまとめます。これに合わせてナレーションのスクリプトを作成します。両方をユーザーに提示して承認を得ます。

ゲート： STORYBOARD.mdとSCRIPT.mdが存在し、ユーザーがプランを承認しています。

ステップ4：ナレーション、タイミング＋キャプション 💬

読み込み： references/step-4-vo.md 使用： TTSの生成にはframevideo-mediaを、発音を制御する必要がある場合はframevideo-voiceover-ssmlを使用します。

ナレーションが不要な場合は、BGMについて確認してステップ5に進みます。それ以外の場合は、TTSプロバイダーを選択し、音声を生成して文字起こしを行い、タイムスタンプをビートに割り当てます。

ゲート： （a）ナレーションがなく、ストーリーボードに手動でビートのタイミングを設定しているか、（b）narration.wavとtranscript.jsonが存在し、ビートのタイミングが更新されています。

ステップ5：コンポジションを作成する

読み込み： framevideoスキル（スキル全体。すべてのルールが重要です） 読み込み： references/step-5-build.md 使用： アニメーションにはgsapを使用します（デフォルト）。必要に応じて、ほかのアニメーションアダプターも使用します。

ストーリーボードの構成に沿って、index.htmlとビートのコンポジションを作成します。サブエージェントが各ビートに対してframevideo lintとframevideo snapshotを実行します。

ゲート： メインエージェントがcompositions/beat-N.htmlをすべて上から下まで読み、DESIGN.mdとSTORYBOARD.mdに照らして確認しています。

ステップ 6：検証して納品する

読み込み： references/step-6-validate.md 使用： 最終レビューには framevideo-visual-qa、検証には framevideo-cli

lint、validate、inspect を実行します。スナップショットを撮影します（計算式：max(beats × 3, ceil(duration_seconds / 2))）。各スナップショットを確認します。ビジュアル QA を使用して、ブランドアセットがメッセージを遮っていないこと、キャプションがコンテンツと重なっていないことを確認します。納品前に問題を修正します。

自信を持って納品できるものにしましょう。 自分の名前を付けて公開したいと思えるか、自問してください。

合格条件： npx framevideo lint、validate、inspect が未対応の問題ゼロで通過し、ビジュアル QA に合格し、最終回答に Studio URL が含まれていること。

クイックリファレンス

一般的な動画形式
  • 横向き： 1920x1080（デフォルト）
  • 縦向き： 1080x1920（Instagram Stories、TikTok）
  • 正方形： 1080x1080（Instagram フィード）
リファレンスファイル
ファイル読み込むタイミング
step-0-capture.mdステップ 0：サイトをキャプチャし、ブランド概要を作成
step-1-design.mdステップ 1：DESIGN.md を作成
step-2-brief.mdステップ 2：メッセージと展開をすり合わせる
capabilities.mdステップ 2 と 5：目次を確認し、必要に応じて詳細を調査
step-3-storyboard.mdステップ 3：ストーリーボードとスクリプトを作成
step-4-vo.mdステップ 4：音声とタイミングを生成
step-5-build.mdステップ 5：コンポジションを作成
step-6-validate.mdステップ 6：検証して納品
ステップごとに読み込むスキル
ステップスキル
0（キャプチャーツール）
1（ファイル操作）
2（すり合わせ、スキルなし）
3（計画、スキルなし）
4framevideo-media、framevideo-voiceover-ssml（任意）
5framevideo、gsap、必要に応じたアニメーションアダプター
6framevideo-cli、framevideo-visual-qa

統合

このスキルがオーケストレーションするもの：

  • framevideo — コアとなるコンポジションの作成（ステップ 5）
  • framevideo-cli — 検証コマンド（ステップ 6）
  • framevideo-media — TTS と文字起こし（ステップ 4）
  • framevideo-voiceover-ssml — 発音の制御（ステップ 4、任意）
  • framevideo-visual-qa — 最終品質レビュー（ステップ 6）
  • gsap — アニメーション（ステップ 5、デフォルトアダプター）
  • chanjing-digital-human — ユーザーがデジタルヒューマンのホストを希望する場合（ステップ 4〜5）

検証

ワークフロー完了後：

  • すべての合格条件を満たしている
  • npx framevideo lint が通過する
  • npx framevideo validate が通過する
  • npx framevideo inspect が通過する
  • ビジュアル QA チェックリストが完了している
  • Studio URL を納品している
  • まとめに「検証していないこと」セクションが含まれている

クレジットと参考資料

  • FrameVideo のドキュメント：https://framevideo.dev
  • ワークフローの参考資料：このスキルの references/ ディレクトリ

コメント

Markdown 対応