ugc-video-auto

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UGC Video Auto — Full Pipeline via Playwright

UGC视频自动化——基于Playwright的完整流水线

This skill orchestrates the complete UGC ad video pipeline on Higgsfield: generate a character image → select it for video → add a UGC video prompt → generate a Seedance 2.0 video. All automated via Playwright.

该Skill可在Higgsfield上编排完整的UGC广告视频流水线:生成角色图像→选择图像用于视频创作→添加UGC视频提示词→生成Seedance 2.0视频。所有步骤均通过Playwright实现自动化。

Pipeline Overview

流水线概述

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

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

Prerequisites

先决条件

  • User must be logged in to higgsfield.ai in the Playwright browser session
  • Playwright MCP plugin must be enabled
  • Load each Playwright tool with
    ToolSearch
    before first use
  • 用户必须在Playwright浏览器会话中登录higgsfield.ai
  • 必须启用Playwright MCP插件
  • 首次使用前需通过
    ToolSearch
    加载每个Playwright工具

Input Requirements

输入要求

The user provides:
  1. Character description OR a pre-made image prompt (invoke
    /ugc-hot-girl
    to generate one)
  2. Product/brand context — what the UGC video is advertising
  3. Video style — testimonial, product showcase, unboxing, reaction, etc.
Optional overrides:
  • Image model: Soul 2.0 (default, best for portraits)
  • Video model: Seedance 2.0 (default)
  • Duration: 5s, 8s (default), 10s
  • Ratio: Auto, 16:9, 9:16 (TikTok/Reels), 1:1
  • Resolution: 720p (default), 1080p

用户需提供:
  1. 角色描述或现成的图像提示词(调用
    /ugc-hot-girl
    生成)
  2. 产品/品牌背景——UGC视频要推广的内容
  3. 视频风格—— testimonial(证言式)、产品展示、开箱、reaction(反应式)等
可选自定义项:
  • 图像模型:Soul 2.0(默认,最适合人像)
  • 视频模型:Seedance 2.0(默认)
  • 时长:5秒、8秒(默认)、10秒
  • 比例:自动、16:9、9:16(TikTok/Reels)、1:1
  • 分辨率:720p(默认)、1080p

Full Automation Flow

完整自动化流程

Phase 1: Generate the Character Image

阶段1:生成角色图像

Step 1.1: Navigate to image generation

步骤1.1:导航至图像生成页面

browser_navigate → url: "https://higgsfield.ai/image/soul-v2"
Wait for page load, take a snapshot.
browser_navigate → url: "https://higgsfield.ai/image/soul-v2"
等待页面加载,截取快照。

Step 1.2: Enter the image prompt

步骤1.2:输入图像提示词

Find the textbox (Playwright ID:
hf:tour-image-prompt
, placeholder: "Describe the scene you imagine"):
browser_click → ref: <textbox_ref>, element: "Image prompt textbox"
browser_type → ref: <textbox_ref>, text: "<character image prompt>"
If the user hasn't provided an image prompt, use
/ugc-hot-girl
to generate one first.
找到文本框(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
生成。

Step 1.3: Generate the image

步骤1.3:生成图像

Find the Generate button (shows "Generate XXXX free gens left"):
ASK USER FOR CONFIRMATION — this uses credits/free generations.
browser_click → ref: <generate_button_ref>, element: "Generate button"
找到“Generate”按钮(显示“Generate XXXX free gens left”):
需向用户确认——此操作会消耗免费生成次数或点数。
browser_click → ref: <generate_button_ref>, element: "Generate button"

Step 1.4: Wait for generation

步骤1.4:等待生成完成

browser_wait_for → time: 20
Take a screenshot. Verify the new image appears as the first item in the History grid. Confirm by checking the first grid element's innerHTML contains an
<img>
tag with a fresh asset URL.

browser_wait_for → time: 20
截取快照。验证新图像是否作为第一个条目出现在历史网格中。可通过检查首个网格元素的innerHTML是否包含带有新资源URL的
<img>
标签来确认。

Phase 2: Create the Video from the Generated Image

阶段2:基于生成的图像创建视频

Step 2.1: Navigate to Seedance 2.0 video page

步骤2.1:导航至Seedance 2.0视频页面

browser_navigate → url: "https://higgsfield.ai/create/video?model=seedance_2_0"
Wait for page load, take a snapshot. Confirm "Seedance 2.0" appears in the Model button.
browser_navigate → url: "https://higgsfield.ai/create/video?model=seedance_2_0"
等待页面加载,截取快照。确认“Seedance 2.0”显示在模型按钮中。

Step 2.2: Open the upload media dialog

步骤2.2:打开上传媒体对话框

Find the upload area — look for
generic [cursor=pointer]
containing:
  • paragraph: Upload media
  • paragraph: Image, Video or Audio
browser_click → ref: <upload_area_ref>, element: "Upload media area"
This opens a dialog with tabs: Uploads, Image Generations, Video Generations, Elements, Liked.
找到上传区域——查找包含以下内容的
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。

Step 2.3: Switch to Image Generations tab

步骤2.3:切换至Image Generations标签页

browser_click → ref: <image_gen_tab_ref>, element: "Image Generations tab"
Look for
button "Image Generations"
in the dialog's tab bar.
browser_click → ref: <image_gen_tab_ref>, element: "Image Generations tab"
在对话框的标签栏中查找
button "Image Generations"

Step 2.4: Select the generated image

步骤2.4:选择生成的图像

The most recently generated image is the first item in the grid.
It initially appears as a
button "Check eligibility"
. Click it:
browser_click → ref: <first_image_ref>, element: "First image (most recent generation)"
After clicking, the button transforms into a
generic [cursor=pointer]
with an image preview and a green checkmark — meaning it's selected and eligible.
Important: The first "Check eligibility" button in the list is always the most recent image. After clicking, its ref disappears from the snapshot and is replaced by a new generic element.
最新生成的图像是网格中的第一个条目
它初始显示为
button "Check eligibility"
,点击该按钮:
browser_click → ref: <first_image_ref>, element: "First image (most recent generation)"
点击后,该按钮会变为带有图像预览和绿色对勾的
generic [cursor=pointer]
——表示已选中且符合要求。
重要提示:列表中的第一个“Check eligibility”按钮始终是最新生成的图像。点击后,其引用会从快照中消失,替换为新的通用元素。

Step 2.5: Close the dialog

步骤2.5:关闭对话框

browser_press_key → key: "Escape"
Take a snapshot. Verify:
  • The upload area no longer shows "Upload media" text
  • Instead it shows a
    generic [cursor=pointer]
    with nested image elements (48px thumbnails)
  • The old
    paragraph: Upload media
    and
    paragraph: Image, Video or Audio
    are gone
browser_press_key → key: "Escape"
截取快照,验证:
  • 上传区域不再显示“Upload media”文本
  • 取而代之的是带有嵌套图像元素(48px缩略图)的
    generic [cursor=pointer]
  • 原有的
    paragraph: Upload media
    paragraph: Image, Video or Audio
    已消失

Step 2.6: Clear any existing prompt

步骤2.6:清除现有提示词

The video page uses a Lexical rich text editor (contenteditable div), NOT a standard textbox. To clear it:
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"
Take a snapshot. The textbox should now show the placeholder: "Describe your scene in detail. Use @ to reference assets"
视频页面使用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: Enter the UGC video prompt

步骤2.7:输入UGC视频提示词

After clearing, take a snapshot to get the fresh textbox ref. Then type slowly (required for the Lexical editor):
browser_type → ref: <textbox_ref>, text: "<UGC video prompt>", slowly: true
UGC Video Prompt Templates (pick based on style):
Testimonial / Talking Head:
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.
Product Showcase:
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.
Reaction / Unboxing:
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.
Before/After:
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.
Lifestyle / Day-in-the-Life:
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.
清除后,截取快照获取新的文本框引用,然后缓慢输入(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: Configure video settings (optional)

步骤2.8:配置视频设置(可选)

Default settings work well for most UGC:
  • Duration: 8s (good for short-form)
  • Ratio: Auto (or 9:16 for TikTok/Reels)
  • Resolution: 720p
To change ratio for TikTok vertical:
browser_click → ref: <ratio_button_ref>, element: "Ratio selector"
Then select "9:16" from the dropdown.
默认设置适用于大多数UGC场景:
  • 时长:8秒(适合短视频)
  • 比例:自动(或TikTok/Reels选9:16)
  • 分辨率:720p
若要改为TikTok竖屏比例:
browser_click → ref: <ratio_button_ref>, element: "Ratio selector"
然后从下拉菜单中选择“9:16”。

Step 2.9: Generate the video

步骤2.9:生成视频

Take a screenshot showing the final form state.
ASK USER FOR CONFIRMATION — video generation costs more credits than images.
The Generate button shows credit cost (e.g., "Generate 30 20"):
browser_click → ref: <generate_button_ref>, element: "Generate video button"
截取显示最终表单状态的快照。
需向用户确认——视频生成消耗的点数比图像更多。
Generate按钮会显示点数消耗(例如:"Generate 30 20"):
browser_click → ref: <generate_button_ref>, element: "Generate video button"

Step 2.10: Monitor generation

步骤2.10:监控生成进度

After clicking Generate:
  1. The video enters the generation queue
  2. Check the History tab for progress
  3. Periodically take screenshots to show status
  4. Seedance 2.0 videos typically take 1-3 minutes

点击Generate后:
  1. 视频进入生成队列
  2. 查看History标签页了解进度
  3. 定期截取快照展示状态
  4. Seedance 2.0视频通常需要1-3分钟生成

Key Element Patterns Reference

关键元素模式参考

Image Generation Page (
/image/soul-v2
)

图像生成页面(
/image/soul-v2

ElementPattern
Prompt textbox
textbox
with ID
hf:tour-image-prompt
Model selector
group > button
containing "Soul 2.0"
Aspect ratio
button
showing "3:4"
Resolution
button
showing "2k"
Generate button
button "Generate XXXX free gens left"
First resultFirst
generic
child in the History grid
元素模式
提示词文本框ID为
hf:tour-image-prompt
textbox
模型选择器包含“Soul 2.0”的
group > button
宽高比显示“3:4”的
button
分辨率显示“2k”的
button
Generate按钮显示“Generate XXXX free gens left”的
button
首个结果历史网格中的第一个
generic
子元素

Video Creation Page (
/create/video
)

视频创作页面(
/create/video

ElementPattern
Upload area (empty)
generic [cursor=pointer]
with
paragraph: Upload media
Upload area (filled)
generic [cursor=pointer]
with nested image thumbnails, no "Upload media" text
Upload dialog
dialog
with tab bar: Uploads, Image Generations, etc.
Image Generations tab
button "Image Generations"
in dialog
First image in galleryFirst
button "Check eligibility"
in dialog grid
Selected image
generic [cursor=pointer]
with nested img (replaces Check eligibility button)
Prompt editor
[data-lexical-editor]
contenteditable div
Prompt textbox (in snapshot)
textbox [active]
after focusing the Lexical editor
Model button
button "Model"
containing "Seedance 2.0"
Duration button
button "Duration"
Ratio button
button "Auto Ratio"
Resolution button
button "720p Resolution"
Generate button
button "Generate XX XX"
with credit cost

元素模式
空上传区域带有
paragraph: Upload media
generic [cursor=pointer]
已填充上传区域带有嵌套图像缩略图的
generic [cursor=pointer]
,无“Upload media”文本
上传对话框带有标签栏(Uploads、Image Generations等)的
dialog
Image Generations标签页对话框中的
button "Image Generations"
图库中的首个图像对话框网格中的第一个
button "Check eligibility"
已选中图像带有嵌套img的
generic [cursor=pointer]
(替换Check eligibility按钮)
提示词编辑器
[data-lexical-editor]
可编辑内容div
快照中的提示词文本框聚焦Lexical编辑器后的
textbox [active]
模型按钮包含“Seedance 2.0”的
button "Model"
时长按钮
button "Duration"
比例按钮
button "Auto Ratio"
分辨率按钮
button "720p Resolution"
Generate按钮显示点数消耗的
button "Generate XX XX"

Error Handling

错误处理

  • Not logged in: Ask user to log in (
    ! open https://higgsfield.ai
    )
  • Image prompt bar missing: Refresh the page — this is an intermittent platform bug
  • "Check eligibility" doesn't transform: The image may not be compatible with Seedance 2.0. Try a different image or re-generate
  • Lexical editor won't clear: Try triple-clicking to select all, then Backspace. Or use
    browser_evaluate
    to clear innerHTML
  • Dialog won't close on Escape: Click outside the dialog area
  • Insufficient credits: Warn the user before generating. Video costs more than images
  • Stale refs: Always take a fresh snapshot before each interaction. Refs change after any page state change

  • 未登录:请用户登录(
    ! open https://higgsfield.ai
  • 图像提示词栏缺失:刷新页面——这是平台偶发的bug
  • “Check eligibility”未变化:图像可能不兼容Seedance 2.0,尝试更换图像或重新生成
  • Lexical编辑器无法清除:尝试三击选中全部内容后按Backspace,或使用
    browser_evaluate
    清除innerHTML
  • 按Escape无法关闭对话框:点击对话框外部区域
  • 点数不足:生成前提醒用户,视频消耗的点数比图像多
  • 引用过期:每次交互前务必截取新快照,页面状态变化后引用会改变

Example End-to-End Workflow

端到端工作流示例

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."

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

1. 调用/ugc-hot-girl → 生成美妆/护肤图像提示词:
   "Attractive young woman, early 20s, clear dewy skin, dark brown hair in
    messy bun... ring light illumination... photorealistic, 4K..."

2. 阶段1——图像生成:
   → 导航至/image/soul-v2
   → 输入图像提示词
   → 向用户确认→点击Generate
   → 等待15-20秒→图像出现在网格中 ✓

3. 阶段2——视频创作:
   → 导航至/create/video?model=seedance_2_0
   → 点击上传区域→切换至Image Generations标签页
   → 点击首个图像(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
   → 向用户确认→点击Generate
   → 视频生成中...完成 ✓

4. 反馈:"您的UGC视频已准备就绪!请查看History标签页。"

Pipeline Skills Reference

流水线Skill参考

StepSkillWhat it does
1
/ugc-hot-girl
Generates the character image prompt
2
/higgsfield-image-auto
Automates just the image generation step
3
/seedance-auto-generate
Automates just the video generation step (from local file)
Full
/ugc-video-auto
This skill — runs the entire pipeline end-to-end
You can use the individual skills separately, or invoke
/ugc-video-auto
to run everything in one go.
步骤Skill功能
1
/ugc-hot-girl
生成角色图像提示词
2
/higgsfield-image-auto
仅自动化图像生成步骤
3
/seedance-auto-generate
仅自动化视频生成步骤(从本地文件)
完整流程
/ugc-video-auto
本Skill——端到端运行整个流水线
您可以单独使用各个Skill,或调用
/ugc-video-auto
一键运行全部流程。