UGC 影片自動化 — 透過 Playwright 的完整管道
此技能會協調 Higgsfield 上完整的 UGC 廣告影片管道：產生角色圖片 → 選取圖片並用於影片 → 加入 UGC 影片提示 → 產生 Seedance 2.0 影片。所有步驟皆透過 Playwright 自動化完成。
管道概覽
步驟 1: 產生角色圖片 → /image/soul-v2
步驟 2: 導航至影片頁面 → /create/video?model=seedance_2_0
步驟 3: 從圖庫選取圖片 → 上傳對話框 →「圖片生成」分頁
步驟 4: 編寫 UGC 影片提示 → Lexical 編輯器 (contenteditable)
步驟 5: 設定與產生 → 點擊「產生」
先決條件
- 使用者必須在 Playwright 瀏覽器工作階段中已登入 higgsfield.ai
- 必須啟用 Playwright MCP 外掛
- 首次使用前，請使用
ToolSearch載入每個 Playwright 工具
輸入需求
使用者需提供：
- 角色描述 或預先製作好的圖片提示（叫用
/ugc-hot-girl來產生一個） - 產品/品牌背景 — UGC 影片要廣告的內容
- 影片風格 — 推薦、產品展示、開箱、反應等
可選的覆蓋設定：
- 圖片模型: Soul 2.0（預設，最適合人像）
- 影片模型: Seedance 2.0（預設）
- 長度: 5 秒、8 秒（預設）、10 秒
- 比例: 自動、16:9、9:16（TikTok/Reels）、1:1
- 解析度: 720p（預設）、1080p
完整自動化流程
第一階段：產生角色圖片
步驟 1.1：導航至圖片生成頁面
browser_navigate → url: "https://higgsfield.ai/image/soul-v2"
等待頁面載入，擷取快照。
步驟 1.2：輸入圖片提示
找到文字框（Playwright ID: hf:tour-image-prompt，佔位文字：「描述您想像的場景」）：
browser_click → ref: <文字框參考>, element: "圖片提示文字框"
browser_type → ref: <文字框參考>, text: "<角色圖片提示>"
如果使用者尚未提供圖片提示，請先使用 /ugc-hot-girl 產生一個。
步驟 1.3：產生圖片
找到「產生」按鈕（顯示「產生 XXXX 剩餘免費次數」）：
要求使用者確認 — 這會消耗點數或免費生成次數。
browser_click → ref: <產生按鈕參考>, element: "產生按鈕"
步驟 1.4：等待生成
browser_wait_for → time: 20
擷取螢幕截圖。確認新圖片顯示在歷史記錄網格的第一個項目。透過檢查第一個網格元素的 innerHTML 是否包含帶有新資產 URL 的 <img> 標籤來確認。
第二階段：從產生的圖片建立影片
步驟 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: 上傳媒體paragraph: 圖片、影片或音訊
browser_click → ref: <上傳區域參考>, element: "上傳媒體區域"
這會開啟一個對話框，分頁包括：上傳、圖片生成、影片生成、元素、喜歡。
步驟 2.3：切換至「圖片生成」分頁
browser_click → ref: <圖片生成分頁參考>, element: "圖片生成分頁"
在對話框的分頁列中尋找 button "Image Generations"。
步驟 2.4：選取產生的圖片
最新產生的圖片是網格中的第一個項目。
它最初顯示為 button "Check eligibility"。點擊它：
browser_click → ref: <第一張圖片參考>, element: "第一張圖片（最新生成）"
點擊後，該按鈕會轉變為一個含有圖片預覽和綠色勾號的 generic [cursor=pointer] — 表示它已被選中且符合資格。
重要：清單中的第一個「Check eligibility」按鈕永遠是最新的圖片。點擊後，其參考會從快照中消失，並被一個新的通用元素取代。
步驟 2.5：關閉對話框
browser_press_key → key: "Escape"
擷取快照。驗證：
- 上傳區域不再顯示「上傳媒體」文字
- 取而代之的是顯示一個包含巢狀圖片元素（48px 縮圖）的
generic [cursor=pointer] - 舊的
paragraph: 上傳媒體和paragraph: 圖片、影片或音訊已消失
步驟 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"
擷取快照。文字框現在應顯示佔位文字：「詳細描述您的場景。使用 @ 來參考資產」
步驟 2.7：輸入 UGC 影片提示
清除後，擷取快照以取得新的文字框參考。然後緩慢地輸入（Lexical 編輯器需要此方式）：
browser_type → ref: <文字框參考>, text: "<UGC 影片提示>", slowly: true
UGC 影片提示範本（根據風格選擇）：
推薦 / 談話式：
@image1 中的女性直接對著鏡頭說話，搭配自然的手勢，溫暖的黃金時刻光線，營造休閒真實的氛圍。她說話時充滿熱情，稍微前傾以加強語氣。柔和的散景背景，淺景深。自然的皮膚紋理，真實的嘴唇動作，TikTok UGC 推薦風格。順暢的手持攝影機，24fps。
產品展示：
@image1 中的女性手持產品朝向鏡頭，轉動產品以顯示不同角度。興奮真摯的表情，睜大眼睛。環形燈照明，乾淨的背景。她指著產品特色，熱情地點頭。特寫自拍構圖，iPhone 品質的影片，真實的 UGC 感覺。
反應 / 開箱：
@image1 中的女性懷著興奮的期待打開包裹，拿出產品並露出真誠的喜悅。驚訝的表情，張開嘴，然後綻放出燦爛的笑容。自然的臥室燈光，休閒的場景。手持攝影機的感覺，真實的開箱能量，TikTok 風格。
前後對比：
@image1 中的女性一開始看起來懷疑，懷疑地觸碰自己的臉。然後她塗抹產品，表情轉變為驚訝，難以置信地觸摸自己的皮膚。柔和的環形燈，浴室鏡子場景。切換式的轉變時刻，真誠的反應，UGC 推薦。
生活方式 / 日常：
@image1 中的女性走過一個明亮的現代空間，在日常中自然地與產品互動。自然晨光，放鬆的動作，真實隨意的能量。攝影機輕輕跟拍，淺景深。令人嚮往但 relatable 的生活方式內容。
步驟 2.8：設定影片設定（可選）
對於大多數 UGC 來說，預設設定運作良好：
- 長度：8 秒（適合短影音）
- 比例：自動（或選擇 9:16 給 TikTok/Reels）
- 解析度：720p
若要為 TikTok 直立影片更改比例：
browser_click → ref: <比例按鈕參考>, element: "比例選擇器"
然後從下拉選單中選擇「9:16」。
步驟 2.9：產生影片
擷取顯示最終表單狀態的螢幕截圖。
要求使用者確認 — 影片生成比圖片消耗更多點數。
「產生」按鈕會顯示點數成本（例如「產生 30 20」）：
browser_click → ref: <產生按鈕參考>, element: "產生影片按鈕"
步驟 2.10：監控生成進度
點擊「產生」後：
- 影片進入生成佇列
- 檢查「歷史記錄」分頁以查看進度
- 定期擷取螢幕截圖以顯示狀態
- Seedance 2.0 影片通常需要 1-3 分鐘
關鍵元素模式參考
圖片生成頁面 (/image/soul-v2)
| 元素 | 模式 |
|---|---|
| 提示文字框 | textbox 且 ID 為 hf:tour-image-prompt |
| 模型選擇器 | group > button 且包含「Soul 2.0」 |
| 長寬比 | button 且顯示「3:4」 |
| 解析度 | button 且顯示「2k」 |
| 產生按鈕 | button "Generate XXXX free gens left" |
| 第一個結果 | 歷史記錄網格中的第一個 generic 子元素 |
影片建立頁面 (/create/video)
| 元素 | 模式 |
|---|---|
| 上傳區域（空白） | generic [cursor=pointer] 且包含 paragraph: Upload media |
| 上傳區域（已填入） | generic [cursor=pointer] 且包含巢狀圖片縮圖，無「Upload media」文字 |
| 上傳對話框 | dialog 且包含分頁列：Uploads, Image Generations 等 |
| 圖片生成分頁 | 對話框中的 button "Image Generations" |
| 圖庫中的第一張圖片 | 對話框網格中的第一個 button "Check eligibility" |
| 已選取的圖片 | generic [cursor=pointer] 且包含巢狀 img（取代 Check eligibility 按鈕） |
| 提示編輯器 | [data-lexical-editor] contenteditable div |
| 提示文字框（快照中） | 聚焦 Lexical 編輯器後的 textbox [active] |
| 模型按鈕 | button "Model" 且包含「Seedance 2.0」 |
| 長度按鈕 | button "Duration" |
| 比例按鈕 | button "Auto Ratio" |
| 解析度按鈕 | button "720p Resolution" |
| 產生按鈕 | button "Generate XX XX" 且包含點數成本 |
錯誤處理
- 未登入：要求使用者登入（
! open https://higgsfield.ai） - 缺少圖片提示列：重新整理頁面 — 這是平台偶發的錯誤
- 「Check eligibility」沒有轉變：該圖片可能與 Seedance 2.0 不相容。嘗試其他圖片或重新生成
- Lexical 編輯器無法清除：嘗試三擊以選取全部，然後按 Backspace。或使用
browser_evaluate來清除 innerHTML - 對話框無法透過 Escape 關閉：點擊對話框外部區域
- 點數不足：在生成之前警告使用者。影片比圖片消耗更多點數
- 參考失效：每次互動前務必擷取新的快照。任何頁面狀態變更後，參考都可能改變
端到端工作流程範例
使用者：「為我的新精華液建立一支有辣妹推廣的 UGC 廣告影片」
1. 叫用 /ugc-hot-girl → 產生美容/護膚圖片提示：
「Attractive young woman, early 20s, clear dewy skin, dark brown hair in
messy bun... ring light illumination... photorealistic, 4K...」
2. 第一階段 — 圖片生成：
→ 導航至 /image/soul-v2
→ 輸入圖片提示
→ 使用者確認後 → 點擊「產生」
→ 等待 15-20 秒 → 圖片出現在網格中 ✓
3. 第二階段 — 影片建立：
→ 導航至 /create/video?model=seedance_2_0
→ 點擊上傳區域 → 圖片生成分頁
→ 點擊第一張圖片 (Check eligibility) → Escape
→ 圖片已載入表單 ✓
→ 清除舊提示 → 輸入 UGC 推薦提示：
「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...」
→ 將比例設為 9:16 以符合 TikTok
→ 使用者確認後 → 點擊「產生」
→ 影片生成中... 完成 ✓
4. 報告：「您的 UGC 影片已就緒！請檢查歷史記錄分頁。」
管道技能參考
| 步驟 | 技能 | 功能 |
|---|---|---|
| 1 | /ugc-hot-girl | 產生角色圖片提示 |
| 2 | /higgsfield-image-auto | 僅自動化圖片生成步驟 |
| 3 | /seedance-auto-generate | 僅自動化影片生成步驟（從本機檔案） |
| 完整 | /ugc-video-auto | 此技能 — 端到端執行完整管道 |
您可以分別使用個別技能，或叫用 /ugc-video-auto 一次完成所有操作。