製品ビデオ作成スキル

Video Studio Skill

製品ワークフローから洗練されたデモまで。

v1.0.1 リリース · aaitor/skill-video-studio

クイックスタート · 作成済みビデオ · 使用方法 · 貢献

［画像: MITライセンス］ ［画像: オフラインソースとドキュメントチェック］

/devrel-video Claude Code スキルによって駆動されるローカルビデオ制作ワークスペース。Playwright CLIで実際の製品インタラクションをキャプチャし、HyperFramesでタイトルカード、チャプター、CTAを構成し、FFmpegで結果をマスターおよび検査します。サイレントウォークスルーから始め、必要に応じてナレーション、音楽、字幕、または独自のプレゼンター映像を追加します。

デモ

［画像: Video Studio Skillをインストールし、Claude Codeで実際のウォークスルー概要を準備する］

インストールされたプロジェクトスキルを使用した実際のClaude Codeセッション：スタジオをクローンし、Acmeのウォークスルー概要を準備し、3つのビートプランを黒い背景で確認します。この短いデモは、キャプチャとレンダリングの前で停止します。ビデオが制作されたと主張するものではありません。録画ガイドには、実際に生成された概要と再現コマンドが含まれています。

クイックスタート

計画のため: Gitと認証済みのClaude Codeが必要です。ネイティブスキルとプロジェクトレイアウトが一体となるように、ワークスペース全体をクローンします。

git clone https://github.com/aaitor/skill-video-studio.git
cd skill-video-studio
claude

Claudeに以下のように尋ねます。

/devrel-videoバンドルされたAcmeアプリのために、25秒のサイレントウォークスルー概要を準備してください。ワークスペースを表示し、カテゴリでフィルタリングし、プロジェクトを開いてください。Acmeブランドを再利用してください。キャプチャまたはレンダリングの前にプランを表示してください。

期待される結果：プロジェクト概要と具体的なビートプラン。完全なビデオを作成するには、キャプチャ/レンダリングの前提条件をインストールし、作成済みウォークスルーに従ってください。プロダクションスタックには、Node.js 22以降、FFmpeg/ffprobe、Chromium、およびヘルパー固有のPython依存関係が必要です。オプションのナレーションとアバターには、独自の追加サービスまたはGPUセットアップが必要です。

特長

• 実際の製品キャプチャ: 明示的なビートと安定したセレクターを備えたブラウザインタラクションスクリプト。
• ブランド構成: HyperFramesタイムラインでのタイトル、ブラウザフレーム、チャプター、CTA。
• ローカルマスタリングとQA: マスター/Webコピー、ffprobeチェック、コンタクトシート、サムネイル。
• オプションのオーディオ: 6つのローカル音楽スタイル、ナレーション主導のタイミング、ボイスバリアント。
• オプションのプレゼンテーション: 字幕、プライベートな持ち込みプレゼンター映像、ターミナル/ブラウザシーケンス。
• ソースベースのワークフロー: 再利用可能なブランド、概要、テンプレート、および2つの完全な作成済み例。

ポートレート/ソーシャル出力プロファイルはロードマップ上にあります。完全なキャプチャ/レンダリングはローカルツールチェーンに依存します。オフラインCIは、完全なプロダクションスタックではなく、ソースと選択されたローカルユーティリティをチェックします。ワークフローと使用方法を参照してください。

作成済みビデオ

製品ウォークスルー: ローカルAcmeフィクスチャ、実際のブラウザキャプチャ、ナレーション/音楽、およびEN/ES字幕。ソースとコマンド · サウンド付きで視聴。

［画像: Acme製品ウォークスルー］

構成済みCLI/ブラウザフィルム: ターミナルシーンが作成されたHTML再現であるマルチ環境の例。ソースと説明 · サウンド付きで視聴。

［画像: 構成済みターミナルおよびブラウザの例］

より長い例はそのまま残されています。生成されたMP4/オーディオファイルは無視されます。含まれているソースから再構築してください。サイレント、ナレーション付き、アバター、ボイススワップ、マルチ環境のリクエストについては、使用方法のプロンプトを参照してください。

設定

各ビデオは projects/<slug>/brief.yaml、brands/<name>/ の下のブランドトークン、およびプロジェクトフォルダの下の生成された出力を利用します。オプションのプライベート設定はGitの外にあり、DEVREL_VIDEO_ENV によって選択されます。

設定、実際の概要テンプレート、およびセキュリティ/プライバシーガイダンスを参照してください。プライベート映像と認証情報は、この公開リポジトリの外に保管してください。

仕組み

概要 → 探索 → ブランド → キャプチャ → 構成 → オプションレイヤー → レンダリング/QA → サムネイル。スキルは、既存のツールを置き換えるのではなく調整します。詳細な制作手順は、ワークフローガイドと制作ノートに記載されています。

リポジトリレイアウト

.claude/skills/devrel-video/  スキルの指示、スクリプト、テンプレート、制作ノート
brands/                     ブランドトークンとロゴ
projects/                   キュレーションされた公開例。プライベートプロジェクトは無視されます
examples/                   実際のハーネス録画、公開入力、生成された概要
assets/                     共有バナー、ソーシャルカード、短いターミナルGIF
docs/                       オンボーディング、使用方法、設定、トラブルシューティング

ドキュメント

• インストールと制作の前提条件
• 設定
• プロンプトとオプションレイヤー
• ワークフロー
• トラブルシューティング
• セキュリティ、プライバシー、およびメディア権利
• バナー生成とソーシャルプレビュー
• 元の参照: スタジオデザインガイド · アバターガイド

貢献とサポート

質問、バグ、アイデアについては、Issues を使用してください。CONTRIBUTING.md および CODE_OF_CONDUCT.md を読み、脆弱性は SECURITY.md を通じてプライベートに報告してください。

仮想環境に requirements-dev.txt をインストールし、python3 scripts/check.py を実行してください。変更については、CHANGELOG.md を参照してください。ライブ録画、サービス呼び出し、GPUジョブ、および完全なレンダリングは手動検証ステップです。

ライセンス

元のスタジオコンテンツはMITライセンスです。埋め込まれたバナーフォントは、そのOFL通知を保持します。外部ツール/モデル/メディアは、独自の条件を保持します。ライセンスを参照してください。

---

Aitor Argomaniz · LinkedIn · その他のオープンソース によって構築