ugc-video-auto

UGC 视频自动化——通过 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 插件
• 首次使用前，使用 ToolSearch 加载每个 Playwright 工具

输入要求

用户需提供：

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"

等待页面加载，然后截取快照。确认 Model 按钮中显示 "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：

• 时长：8s（适合短视频）
• 宽高比：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
生成按钮	button "Generate XXXX free gens left"
第一个结果	History 网格中的第一个 generic 子元素

视频创建页面（/create/video）

元素	模式
上传区域（空）	带有 paragraph: Upload media 的 generic [cursor=pointer]
上传区域（已填充）	带有嵌套图片缩略图、且没有“Upload media”文本的 generic [cursor=pointer]
上传对话框	带有选项卡栏的 dialog：Uploads、Image Generations 等
Image Generations 选项卡	对话框中的 button "Image Generations"
图片库中的第一张图片	对话框网格中的第一个 button "Check eligibility"
已选图片	带有嵌套 img、替代 Check eligibility 按钮的 generic [cursor=pointer]
提示词编辑器	[data-lexical-editor] contenteditable div
提示词文本框（快照中）	聚焦 Lexical 编辑器后出现的 textbox [active]
模型按钮	包含“Seedance 2.0”的 button "Model"
时长按钮	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 无法关闭对话框：点击对话框区域外部
• 积分不足：生成前提醒用户。视频生成比图片生成消耗更多积分
• 引用已过期：每次交互前都要截取新的快照。页面状态变化后，引用会发生变化

---

端到端工作流示例

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 一次性运行全部流程。