ugc-video-auto
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUGC 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 GenerateStep 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 GeneratePrerequisites
先决条件
- User must be logged in to higgsfield.ai in the Playwright browser session
- Playwright MCP plugin must be enabled
- Load each Playwright tool with before first use
ToolSearch
- 用户必须在Playwright浏览器会话中登录higgsfield.ai
- 必须启用Playwright MCP插件
- 首次使用前需通过加载每个Playwright工具
ToolSearch
Input Requirements
输入要求
The user provides:
- Character description OR a pre-made image prompt (invoke to generate one)
/ugc-hot-girl - Product/brand context — what the UGC video is advertising
- 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
用户需提供:
- 角色描述或现成的图像提示词(调用生成)
/ugc-hot-girl - 产品/品牌背景——UGC视频要推广的内容
- 视频风格—— 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: , placeholder: "Describe the scene you imagine"):
hf:tour-image-promptbrowser_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 to generate one first.
/ugc-hot-girl找到文本框(Playwright ID:,占位符:"Describe the scene you imagine"):
hf:tour-image-promptbrowser_click → ref: <textbox_ref>, element: "Image prompt textbox"
browser_type → ref: <textbox_ref>, text: "<character image prompt>"如果用户未提供图像提示词,先调用生成。
/ugc-hot-girlStep 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: 20Take 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 tag with a fresh asset URL.
<img>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 containing:
generic [cursor=pointer]paragraph: Upload mediaparagraph: 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 mediaparagraph: 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 in the dialog's tab bar.
button "Image Generations"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 . Click it:
button "Check eligibility"browser_click → ref: <first_image_ref>, element: "First image (most recent generation)"After clicking, the button transforms into a with an image preview and a green checkmark — meaning it's selected and eligible.
generic [cursor=pointer]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 with nested image elements (48px thumbnails)
generic [cursor=pointer] - The old and
paragraph: Upload mediaare goneparagraph: Image, Video or Audio
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: trueUGC 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: trueUGC视频提示词模板(根据风格选择):
证言式/对话镜头:
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:
- The video enters the generation queue
- Check the History tab for progress
- Periodically take screenshots to show status
- Seedance 2.0 videos typically take 1-3 minutes
点击Generate后:
- 视频进入生成队列
- 查看History标签页了解进度
- 定期截取快照展示状态
- Seedance 2.0视频通常需要1-3分钟生成
Key Element Patterns Reference
关键元素模式参考
Image Generation Page (/image/soul-v2
)
/image/soul-v2图像生成页面(/image/soul-v2
)
/image/soul-v2| Element | Pattern |
|---|---|
| Prompt textbox | |
| Model selector | |
| Aspect ratio | |
| Resolution | |
| Generate button | |
| First result | First |
| 元素 | 模式 |
|---|---|
| 提示词文本框 | ID为 |
| 模型选择器 | 包含“Soul 2.0”的 |
| 宽高比 | 显示“3:4”的 |
| 分辨率 | 显示“2k”的 |
| Generate按钮 | 显示“Generate XXXX free gens left”的 |
| 首个结果 | 历史网格中的第一个 |
Video Creation Page (/create/video
)
/create/video视频创作页面(/create/video
)
/create/video| Element | Pattern |
|---|---|
| Upload area (empty) | |
| Upload area (filled) | |
| Upload dialog | |
| Image Generations tab | |
| First image in gallery | First |
| Selected image | |
| Prompt editor | |
| Prompt textbox (in snapshot) | |
| Model button | |
| Duration button | |
| Ratio button | |
| Resolution button | |
| Generate button | |
| 元素 | 模式 |
|---|---|
| 空上传区域 | 带有 |
| 已填充上传区域 | 带有嵌套图像缩略图的 |
| 上传对话框 | 带有标签栏(Uploads、Image Generations等)的 |
| Image Generations标签页 | 对话框中的 |
| 图库中的首个图像 | 对话框网格中的第一个 |
| 已选中图像 | 带有嵌套img的 |
| 提示词编辑器 | |
| 快照中的提示词文本框 | 聚焦Lexical编辑器后的 |
| 模型按钮 | 包含“Seedance 2.0”的 |
| 时长按钮 | |
| 比例按钮 | |
| 分辨率按钮 | |
| Generate按钮 | 显示点数消耗的 |
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 to clear innerHTML
browser_evaluate - 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,或使用清除innerHTML
browser_evaluate - 按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参考
| Step | Skill | What it does |
|---|---|---|
| 1 | | Generates the character image prompt |
| 2 | | Automates just the image generation step |
| 3 | | Automates just the video generation step (from local file) |
| Full | | This skill — runs the entire pipeline end-to-end |
You can use the individual skills separately, or invoke to run everything in one go.
/ugc-video-auto| 步骤 | Skill | 功能 |
|---|---|---|
| 1 | | 生成角色图像提示词 |
| 2 | | 仅自动化图像生成步骤 |
| 3 | | 仅自动化视频生成步骤(从本地文件) |
| 完整流程 | | 本Skill——端到端运行整个流水线 |
您可以单独使用各个Skill,或调用一键运行全部流程。
/ugc-video-auto