ウェブサイト起動ビデオ
ユーザーの言語で返信します。動画内のコピーは、特に指定がない限り英語です。
出力: ワーキングディレクトリに <ブランド名>_launch.mp4 (1920×1080, 30fps, H.264 + AAC)。
コスト: 生成クレジットは使用しません。このワークフローでは generate_video / generate_audio を決して呼び出さないでください。すべてのレンダリングはHiggsfieldサンドボックス内でコードによって実行されます。
要件
- Higgsfield MCPコネクタ (
sandbox_exec,media_upload,media_confirm,get_workflow_instructionsを提供) - ブラウザツール（組み込みブラウザまたはChrome上のClaude）でサイトを読み取るため。
取得する入力（不足している場合のみ質問）
- WebサイトURL（必須）
- オプション: クーポン/割引、ユーザー自身の製品か有料プロモーションか（プロモーションの場合は投稿時に
#adを追加するようリマインド）、音楽スタイル、縦型9:16。
ステップ1 - サイトを読み取る
- URLに移動し、
document.body.innerTextを実行（SPAの場合は約2秒待機）。H1、サブヘッドライン、4〜6つの機能見出し、価格、オファー/クーポンテキスト、保証/信頼ライン、CTAラベルを収集します。 - スクリーンショットを撮り、2〜3回スクロールして視覚スタイル（カード、ピル、アイブロウ、ボタン、アクセント単語の色）を確認します。
- 計算済みスタイルを取得: body/h1/h2/button の
fontFamily, color, backgroundColor, letterSpacing, fontWeight、およびすべての背景色とテキスト色の出現頻度カウント。 - ページがスタイルなしでレンダリングされている場合（CSSがブロックされている）、代わりにサンドボックス内でCSSを取得します:
curl -sL -A "Mozilla/5.0" URL -o index.html; grep -o '/_next/static/[^"]*\.css' index.html（または任意の<link rel=stylesheet>）、それらをall.cssにcurlし、 続けてgrep -oE -- '--(background|foreground|brand|primary|accent|muted|border|card|surface|ink)[a-z-]*:[^;}]*' all.css | sort -uおよびgrep -o 'font-family:[^;}]*' all.css | sort -u。 - ロゴ: ヘッダーの
<img>（例:/logo.png）または/android-chrome-512x512.png//apple-touch-icon.png。パートナーロゴがSVGの場合 →convert -background none -density 1200 x.svg -resize 400x400 x.png。
ステップ2 - デザイントークン
サイトをテンプレートトークンにマッピングします: BG, INK（見出し）, MUTED（本文グレー）, BRAND（アクセント）, BRAND_SOFT（チップ用アクセント薄色）, PANEL（グレーのカード背景）, WHITE（カード）。暗いサイト → 暗いBG、明るいINK、ソフトシャドウなし。サイトのパターンを反映します: サイトが2行見出しで2行目にアクセントがある場合、アイブロウ/ラベルチップ、矢印付きピルボタン、グレーパネルに白いカード。
ステップ3 - フォント
fontsourceからのウェイト別静的TTF（任意のGoogleフォント）:
curl -sf -o font-800.ttf https://cdn.jsdelivr.net/fontsource/fonts/<font-slug>@latest/latin-800-normal.ttf（スラッグは小文字、スペース→ダッシュ、例: bricolage-grotesque, urbanist）。await p.add("font-800.ttf") の後、typography={{fontAssetId: handle.id}} で使用します。ラテンサブセットには → ✓ ★ グリフがありません - 代わりに icon("arrow-right") などを使用します。組み込みファミリー（Inter, DM Sans, Montserrat…）は higgsedit fonts add . Inter:400 Inter:700 + fontFamily で使用可能。
ステップ4 - 動画をスクリプト化する
Higgsfield video-editing ワークフローをセッションごとに1回だけロードします（get_workflow_instructions {workflow:"video-editing"}）。Higgsedit作業の前に実行します。
reference/template.jsx を開始点とします。デフォルト構造、約25秒:
| # | シーン | 時間 | 内容 |
|---|---|---|---|
| 1 | フック | 0-3.3 | 痛点を2行で、アイブロウ "For <対象ユーザー>" |
| 2 | 紹介 | 3.3-7 | ロゴ + ブランド、サイトH1、サブヘッドライン、CTAボタンポップ |
| 3-6 | 機能 | 各約3.7秒 | アイブロウ = サイトセクションラベル、見出し = サイトの機能見出し、ネイティブUIモック1つ（カウンター付き統計カード、タグ付き行、ヒートマップグリッド、キュ一覧、レビューカード、日付ピル…） |
| 7 | CTA | 最後の約4.3秒 | ロゴ + ドメイン、価格/オファーカード、クーポンピル + ボタン、保証ライン |
ルール:
- サイトの実際のコピーと実在する例の数値を使用します。どのデモ値が参考用であるかをユーザーに伝えてください。ユーザー数やお客様の声をでっち上げないでください。
- UIはネイティブに再現します（フレーム/テキスト/アイコン）。低解像度のサイトスクリーンショットやAI生成UIは使用しないでください。
- シーンの開始時間を維持します - 音楽にそれらが必要です（
cuts= シーン2..7の開始位置）。
ステップ5 - サンドボックスビルド＆プレビュー
サンドボックスの注意点: リセットされるとファイルが消えます（cd が失敗したらアセットを再ダウンロード）。1コマンドは16,000文字以下（アップロードURLをファイルに書き込むのは、長い cat > edit.jsx ヒアドキュメントとは別の呼び出しで行う）。長時間レンダリング → background:true でポーリング。
- 事前に出力（プレビュー
sheet.pngと最終.mp4）をmedia_uploadし、各アップロードURLをサンドボックス内の.txtファイルに保存します。署名付きURLは一度しか使用できません: 2回目のPUTは 412 を返します - 新しいものをリクエストしてください。 - ビルド＋コンタクトシート＋アップロードを1回の呼び出しで:
higgsedit build edit.jsx 2>&1 | grep -iE "error|missing"; higgsedit sheet . --times <各シーンの中間点 + CTA終了> --cols 3 --out renders/sheet.png; curl -s -o /dev/null -w "%{http_code}" -X PUT -H "Content-Type: image/png" --upload-file renders/sheet.png "$(cat sheet_url.txt)" media_confirmし、返された公開URLをローカルにダウンロードして確認します。最終レンダリングの前にレイアウトの問題を修正します。
Higgseditの注意点:
paddingは数値または{left,right,top,bottom}であり、配列では決してありません。- 中央揃えのテキストにトークン
motion={{by:"word"|"character"}}を使用すると、テキストがリフローします（テキストが左からジャンプします）。中央揃えテキストにはanimate={pop}を使用し、トークンモーションは左揃えの「タイピング」テキストにのみ使用します。 - タイムラインの
targetは、即時の名前付き子フレームでなければならず、自分自身ではいけません。自分自身をアニメーションさせるにはanimateキーフレーム（delayPop）を使用します。 - カウンター: 固定サイズ
layout="none"フレームに1つの静的テキスト。桁区切りはなし。 animateは常に配列です。フレームのmotionはオブジェクトです。
ステップ6 - レンダリング
higgsedit render . --out renders/promo.mp4 --quality final（25秒で約1分）。
ステップ7 - 音楽（毎回異なる）
scripts/music.py = numpyを使用したプロシージャル音楽、ロイヤリティフリー。スタイル: pop (120bpm 明るい), lofi (82bpm チルジャジー), synthwave (105bpm レトロ), house (124bpm オフビート), cinematic (90bpm 壮大), marimba (110bpm フレンドリー)。すべてのトラック: 各カットの前にウィッシュ音、CTAにインパクト、1.6秒フェードアウト。
スタイルを選択します - 最後の2つを繰り返さないでください:
- このスキルフォルダ内の
music-history.logを読み取ります（存在しない場合は作成します）。 - 雰囲気を合わせます: 開発/AI/テック → synthwave または house; クリエイター/ライター/生産性 → lofi または marimba; 大きな/プレミアムなローンチ → cinematic; コンシューマー/楽しい → pop。ユーザーが特定のスタイルを要求しない限り、最後の2エントリで使用されたスタイルをスキップします。
- ランダムな
--seed→ ランダムなキーと進行、同じスタイルでも毎回異なるサウンドに。 YYYY-MM-DD <サイト> <スタイル> seed=<n>をmusic-history.logに追記します。
music.py をサンドボックスに取得する（初回実行）: media_upload をファイル名 music.py で実行 → ローカルマシンから curl -X PUT -H "Content-Type: application/octet-stream" --data-binary @scripts/music.py '<upload_url>' → media_confirm type:file → 返された公開URLをこのスキルフォルダ内の music_url.txt に保存します。以降の実行: サンドボックス内で curl -sf -o music.py "$(cat music_url.txt)"（404またはmusic.pyが変更された場合は再アップロード）。
Mux:
python3 music.py --style <スタイル> --duration <動画秒数> --cuts <c2,c3,...,c7> --seed <n> --out music.wav
ffmpeg -y -v error -i renders/promo.mp4 -i music.wav -filter:a "loudnorm=I=-15:TP=-1.5:LRA=11" -c:v copy -c:a aac -b:a 192k -map 0:v -map 1:a -shortest final.mp4
時間: ffprobe -v error -show_entries format=duration -of csv=p=0 renders/promo.mp4。
ステップ8 - 納品
final.mp4をアップロード（新しいURL） → media_confirm type:video → ローカルに <ブランド名>_launch.mp4 としてダウンロード → ファイルをユーザーに渡します。報告: サイトと一致するもの（bg/色/フォント/ロゴ）、シーンリスト、音楽スタイル、参考用の値。9:16バージョンまたは異なる音楽スタイルを提案します。
9:16バリアント
size: "1080x1920", W=1080 / H=1920、行を縦に積み重ね（カードは列に）、見出しサイズ×0.75、同じタイミングと音楽。