dark-saas-magic-video について
Dark SaaS Magic Video は、暗くシネマティックな SaaS 製品動画を作るためのスキルです。動く UI で製品の機能を示す構成を HyperFrames で作り、フレーム単位の再現や一般的な製品発表動画ではなく、スタイル重視の制作を行います。
主な機能
- 01製品動画のストーリー設計
- 02シーン案と機能ビートの選択
- 03HyperFrames による制作
- 04暗色の動く UI スタイル
- 05チェックリストによる完成動画の確認
活用シーン
- 01暗くシネマティックな SaaS 動画の制作
- 02動く UI による製品ワークフローの紹介
- 03指定尺に合わせた機能シーンの構成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ pluviobyte/ video-production-skills --skill dark-saas-magic-videoインストール後、Claude Code で/dark-saas-magic-videoを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlreferences/asset-contract.mdqc-checklist.mdscene-blueprints.mdstyle-language.mdtiming-presets.md詳細
暗色 SaaS マジック動画
役割
暗色でシネマティックな、UIが魔法のように現れるスタイルで、新しいプロダクト動画を作成します。これはスタイル生成スキルであり、リファレンスに忠実に合わせるスキルではありません。ai-motion-director がスタイルレベルのプロダクト動画または SaaS 動画の方向性を選んだ後に使用してください。
代表的なショーケース
- 人間向け表示名:暗色 SaaS マジックショート動画
- 完成作品の例:雪踏乌云 暗色 SaaS 紹介ショート動画
- ファイル:
assets/showcases/xuetawuyun-dark-saas-showcase-1080p.mp4 - スケール、テンポ、シーンの語彙、最終的な仕上がりのスタイルリファレンスとして使用してください。同じブランド/アカウントをユーザーが求めている場合を除き、テキストをコピーしないでください。
適用範囲
- スタイルレベルの制作に使用します:「こんな感じにして」「Presenton のようなスタイル」「暗色でテクノロジー感のある SaaS プロダクトショート動画」「AI ツールのプロダクトデモ」。
- ピクセル単位、フレーム単位、タイムスタンプ単位で正確な再現には使用しないでください。まず
reference-video-replica-qcを使用してください。 product-launch-videoの代わりには使用しないでください。依頼されたビジュアル表現が、一般的なプロダクトローンチではなく、暗色のマジック UI である場合に使用します。- ユーザーが明示的に Remotion を指定しない限り、HyperFrames で制作してください。
必読資料
コンポジションを作成する前に、以下を読んでください。
references/style-language.mdreferences/scene-blueprints.mdreferences/timing-presets.mdreferences/asset-contract.md
最終納品の前に、references/qc-checklist.md を読んでください。
入力
以下を収集または推定してください。
- プロダクト名と一文で表した価値提案
- 対象視聴者とプラットフォーム
- 尺のプリセット:
sting、standard、extended - 課題を表す言葉、または冒頭の訴求文
- 中核となるワークフロー:プロンプト、生成、接続、モデル、エクスポート、共有、自動化
- 利用可能なアセット:ロゴ、スクリーンショット、UI カード、連携サービスのロゴ、エクスポート名
- 出力比率とアーカイブ用スラッグ
アセットがない場合は、抽象的な UI カードとテキストバッジを使用してください。成果物はスタイルレベルのプロダクト動画であり、プロダクトの UI を正確に記録したものではないことを明記してください。
スタイルの厳守事項
- 細かな粒子/星のエフェクトと、弱い紫色の底部ホライズングローを配した、黒い奥行きのあるステージを使用します。
- 背景に横方向のネオンラインを常時表示するのは避けてください。スタイルの奥行きが失われます。
- 小さなラベルではなく、大きな白いキネティックタイポグラフィをストーリーの要所として使用します。
- シアンからマゼンタへのグラデーション CTA を少なくとも1つ含め、視覚的な変化を引き起こすようにします。
- ヒーローオブジェクトが最も目立つフレームでは、大きく表示します。プロンプトカード、CTA、UI ボード、バッジリング、エクスポートオブジェクトを、小さく遠くの小道具のように見せないでください。
- 主要なトランジションには、スピードブラー、スミア、スケールラッシュ、または白い速度ワイプを使用します。
- 暗闇から召喚されたように感じられる UI オブジェクトを含めます。カード、バッジ、フォルダー、モデルチップ、アプリウィンドウ、エクスポートピルなどが該当します。
- 説明のない全画面の単色フラッシュは追加しないでください。
- このスタイルのワークフローで、ピクセル単位の忠実さを主張しないでください。
ワークフロー
1. 流れを組み立てる
references/timing-presets.md から尺のプリセットを選択します。プロダクトの機能を5〜8個のビートに分けます。因果関係のある流れを優先します:テキストによる価値提案 -> プロンプト -> CTA のクリック -> 生成結果 -> 連携/モデル -> エクスポート -> 最後の訴求。
2. ブループリントを選ぶ
references/scene-blueprints.md を使ってシーンモジュールを選択します。すべてのモジュールを機械的に使わず、プロダクトの実際の機能に合わせてください。
3. HyperFrames で制作する
関連する HyperFrames スキルを読み込みます。
hyperframes:コンポジションの作成hyperframes-cli:lint、validate、inspect、renderhyperframes-animation:スピードブラー、文字のモーション、リング、カーソルクリックhyperframes-media:音声、TTS、SFX、または字幕が必要な場合のみ
動きを決定論的にします。まずヒーローフレームを作成し、そこに向かってアニメーションさせます。
4. QC
references/qc-checklist.md を使用します。ユーザーからリファレンス動画が提供され、位置合わせが重視されている場合は、reference-video-replica-qc も使用してください。
出力
最終 MP4 のパス、QC コンタクトシートのパス、確認済みの仕様を納品し、使用した尺のプリセットとシーンモジュールを記した短いメモを添えてください。