ugc-video-auto

UGC Video Auto — Playwright による完全なパイプライン

このスキルは、Higgsfield で UGC 広告動画のパイプライン全体を実行します。キャラクター画像を生成 → 動画用に選択 → UGC 動画のプロンプトを追加 → Seedance 2.0 の動画を生成します。すべて Playwright で自動化されます。

---

パイプラインの概要

Step 1: Generate character image  →  /image/soul-v2
Step 2: Navigate to video page    →  /create/video?model=seedance_2_0
Step 3: Select image from gallery →  Upload dialog → "Image Generations" tab
Step 4: Write UGC video prompt    →  Lexical editor (contenteditable)
Step 5: Configure & generate      →  Click Generate

---

前提条件

• Playwright ブラウザーセッションで、ユーザーが higgsfield.ai にログインしている必要があります
• Playwright MCP プラグインが有効になっている必要があります
• 各 Playwright ツールは、初めて使用する前に ToolSearch で読み込んでください

入力要件

ユーザーが指定するもの：

1. キャラクターの説明、または事前に作成した画像プロンプト（/ugc-hot-girl を呼び出して生成します）
2. 製品／ブランドのコンテキスト — UGC 動画で何を宣伝するか
3. 動画のスタイル — お客様の声、製品紹介、開封動画、リアクションなど

任意のオーバーライド：

• 画像モデル：Soul 2.0（デフォルト。ポートレートに最適）
• 動画モデル：Seedance 2.0（デフォルト）
• 長さ：5s、8s（デフォルト）、10s
• 比率：Auto、16:9、9:16（TikTok/Reels）、1:1
• 解像度：720p（デフォルト）、1080p

---

完全自動化の流れ

フェーズ 1：キャラクター画像を生成する

ステップ 1.1：画像生成ページに移動する

browser_navigate → url: "https://higgsfield.ai/image/soul-v2"

ページが読み込まれるまで待ち、スナップショットを取得します。

ステップ 1.2：画像プロンプトを入力する

テキストボックスを見つけます（Playwright ID：hf:tour-image-prompt、プレースホルダー：「Describe the scene you imagine」）。

browser_click → ref: <textbox_ref>, element: "Image prompt textbox"
browser_type → ref: <textbox_ref>, text: "<character image prompt>"

ユーザーが画像プロンプトを指定していない場合は、まず /ugc-hot-girl を使って生成します。

ステップ 1.3：画像を生成する

Generate ボタンを見つけます（「Generate XXXX free gens left」と表示されます）。

ユーザーに確認を求めてください — クレジット／無料生成回数を使用します。

browser_click → ref: <generate_button_ref>, element: "Generate button"

ステップ 1.4：生成が完了するまで待つ

browser_wait_for → time: 20

スクリーンショットを撮影します。新しい画像が履歴グリッドの先頭項目として表示されることを確認します。先頭のグリッド要素の innerHTML に、最新のアセット URL を含む <img> タグがあることを確認してください。

---

フェーズ 2：生成した画像から動画を作成する

ステップ 2.1：Seedance 2.0 の動画ページに移動する

browser_navigate → url: "https://higgsfield.ai/create/video?model=seedance_2_0"

ページが読み込まれるまで待ち、スナップショットを取得します。モデルボタンに「Seedance 2.0」と表示されることを確認します。

ステップ 2.2：メディアのアップロードダイアログを開く

アップロード領域を見つけます。次の項目を含む generic [cursor=pointer] を探してください。

• paragraph: Upload media
• paragraph: Image, Video or Audio

browser_click → ref: <upload_area_ref>, element: "Upload media area"

「Uploads」、「Image Generations」、「Video Generations」、「Elements」、「Liked」のタブがあるダイアログが開きます。

ステップ 2.3：「Image Generations」タブに切り替える

browser_click → ref: <image_gen_tab_ref>, element: "Image Generations tab"

ダイアログのタブバーにある button "Image Generations" を探します。

ステップ 2.4：生成した画像を選択する

最新の生成画像は、グリッドの先頭項目です。

最初は button "Check eligibility" として表示されます。クリックします。

browser_click → ref: <first_image_ref>, element: "First image (most recent generation)"

クリックすると、ボタンは画像プレビューと緑色のチェックマークが付いた generic [cursor=pointer] に変わります。選択され、使用可能な状態です。

重要：リストの最初の「Check eligibility」ボタンは、常に最新の画像です。クリック後、その ref はスナップショットから消え、新しい generic 要素に置き換わります。

ステップ 2.5：ダイアログを閉じる

browser_press_key → key: "Escape"

スナップショットを取得します。次の点を確認してください。

• アップロード領域に「Upload media」のテキストが表示されなくなっている
• 代わりに、画像要素（48px のサムネイル）を含む generic [cursor=pointer] が表示されている
• 以前の paragraph: Upload media と paragraph: Image, Video or Audio がなくなっている

ステップ 2.6：既存のプロンプトを消去する

動画ページでは、標準のテキストボックスではなく、Lexical リッチテキストエディター（contenteditable div）が使われています。内容を消去するには、次のようにします。

browser_evaluate → function: "() => { const el = document.querySelector('[data-lexical-editor]'); el.focus(); el.click(); }"
browser_press_key → key: "Control+a"
browser_press_key → key: "Backspace"

スナップショットを取得します。テキストボックスにプレースホルダー「Describe your scene in detail. Use @ to reference assets」が表示されているはずです。

Step 2.7: UGC 動画プロンプトを入力する

クリアした後、スナップショットを撮って最新のテキストボックス参照を取得します。その後、ゆっくり入力します（Lexical エディターでは必須です）。

browser_type → ref: <textbox_ref>, text: "<UGC video prompt>", slowly: true

UGC 動画プロンプトのテンプレート（スタイルに応じて選択）：

お客様の声／トークヘッド：

The woman from @image1 is talking directly to camera with natural hand gestures, warm golden hour lighting, casual authentic vibe. She speaks enthusiastically, leaning in slightly for emphasis. Soft bokeh background, shallow depth of field. Natural skin texture, realistic lip movement, TikTok UGC testimonial style. Smooth handheld camera, 24fps.

製品紹介：

The woman from @image1 holds up a product toward the camera, turning it to show different angles. Excited genuine expression, eyes wide. Ring light illumination, clean background. She points at the product features, nodding enthusiastically. Close-up selfie framing, iPhone-quality video, authentic UGC feel.

リアクション／開封動画：

The woman from @image1 opens a package with excited anticipation, pulling out a product and reacting with genuine delight. Surprised expression, mouth open, then breaking into a wide smile. Natural bedroom lighting, casual setting. Handheld camera feel, authentic unboxing energy, TikTok style.

ビフォー／アフター：

The woman from @image1 starts looking skeptical, touching her face doubtfully. Then she applies a product, and her expression transforms to amazement, touching her skin in disbelief. Soft ring light, bathroom mirror setting. Split-feel transformation moment, genuine reaction, UGC testimonial.

ライフスタイル／日常の一コマ：

The woman from @image1 walks through a bright modern space, casually interacting with a product as part of her routine. Natural morning light, relaxed movement, authentic candid energy. Camera follows with gentle tracking, shallow depth of field. Aspirational but relatable lifestyle content.

Step 2.8: 動画の設定を行う（任意）

デフォルト設定は、ほとんどの UGC に適しています。

• 長さ：8 秒（ショート動画に最適）
• 比率：Auto（または TikTok／Reels 用に 9:16）
• 解像度：720p

TikTok 用に縦横比を変更するには：

browser_click → ref: <ratio_button_ref>, element: "Ratio selector"

ドロップダウンから「9:16」を選択します。

Step 2.9: 動画を生成する

最終的なフォームの状態がわかるスクリーンショットを撮ります。

ユーザーに確認を求めてください — 動画の生成には、画像より多くのクレジットが必要です。

Generate ボタンにはクレジット消費量が表示されます（例：「Generate 30 20」）：

browser_click → ref: <generate_button_ref>, element: "Generate video button"

Step 2.10: 生成状況を確認する

Generate をクリックした後：

1. 動画が生成キューに入ります
2. History タブで進捗を確認します
3. 状態を示すスクリーンショットを定期的に撮ります
4. Seedance 2.0 の動画生成には通常 1〜3 分かかります

---

主な要素パターンのリファレンス

画像生成ページ（/image/soul-v2）

要素	パターン
プロンプトのテキストボックス	ID hf:tour-image-prompt を持つ textbox
モデル選択	「Soul 2.0」を含む group > button
アスペクト比	「3:4」と表示された button
解像度	「2k」と表示された button
Generate ボタン	button "Generate XXXX free gens left"
最初の結果	History グリッド内の最初の generic 子要素

動画作成ページ（/create/video）

要素	パターン
アップロード領域（空）	paragraph: Upload media を含む generic [cursor=pointer]
アップロード領域（入力済み）	ネストされた画像サムネイルを含み、「Upload media」のテキストがない generic [cursor=pointer]
アップロードダイアログ	Uploads、Image Generations などのタブバーを持つ dialog
Image Generations タブ	ダイアログ内の button "Image Generations"
ギャラリー内の最初の画像	ダイアログのグリッド内にある最初の button "Check eligibility"
選択した画像	button "Check eligibility" に置き換わる、ネストされた img を含む generic [cursor=pointer]
プロンプトエディター	[data-lexical-editor] の contenteditable div
プロンプトのテキストボックス（スナップショット内）	Lexical エディターにフォーカスした後の textbox [active]
モデルボタン	「Seedance 2.0」を含む button "Model"
長さボタン	button "Duration"
比率ボタン	button "Auto Ratio"
解像度ボタン	button "720p Resolution"
Generate ボタン	クレジット消費量を含む button "Generate XX XX"

---

エラー処理

• ログインしていない：ユーザーにログインを依頼します（! open https://higgsfield.ai）。
• 画像プロンプトバーが見つからない：ページを再読み込みします。これはプラットフォームで断続的に発生する不具合です。
• 「Check eligibility」が変化しない：画像が Seedance 2.0 と互換性がない可能性があります。別の画像を試すか、再生成してください。
• Lexical エディターをクリアできない：トリプルクリックしてすべてを選択し、Backspace を押してみてください。または browser_evaluate を使って innerHTML をクリアします。
• Escape でダイアログが閉じない：ダイアログの外側をクリックします。
• クレジットが不足している：生成前にユーザーに警告します。動画は画像よりも多くのクレジットが必要です。
• 古い参照：各操作の前に必ず新しいスナップショットを撮ります。ページの状態が変化するたびに参照も変わります。

---

ワークフローの最初から最後までの例

User: "Create a UGC ad video with a hot girl promoting my new skincare serum"

1. Invoke /ugc-hot-girl → generates beauty/skincare image prompt:
   "Attractive young woman, early 20s, clear dewy skin, dark brown hair in
    messy bun... ring light illumination... photorealistic, 4K..."

2. Phase 1 — Image Generation:
   → Navigate to /image/soul-v2
   → Type the image prompt
   → Confirm with user → Click Generate
   → Wait 15-20s → Image appears in grid ✓

3. Phase 2 — Video Creation:
   → Navigate to /create/video?model=seedance_2_0
   → Click upload area → Image Generations tab
   → Click first image (Check eligibility) → Escape
   → Image loaded into form ✓
   → Clear old prompt → Type UGC testimonial prompt:
     "The woman from @image1 holds up a small serum bottle, examining it
      with genuine curiosity. She applies a drop to her fingertip, touches
      her cheek, and her expression lights up with delight..."
   → Set ratio to 9:16 for TikTok
   → Confirm with user → Click Generate
   → Video generating... done ✓

4. Report: "Your UGC video is ready! Check the History tab."

---

パイプラインスキルのリファレンス

ステップ	スキル	内容
1	/ugc-hot-girl	キャラクター画像のプロンプトを生成します
2	/higgsfield-image-auto	画像生成ステップのみを自動化します
3	/seedance-auto-generate	動画生成ステップのみを自動化します（ローカルファイルから）
全体	/ugc-video-auto	このスキルです。パイプライン全体を最初から最後まで実行します

個別のスキルを別々に使用することも、/ugc-video-auto を呼び出してすべてを一括で実行することもできます。