Video UGC Auto — Pipeline Completo vía Playwright
Este skill orquesta el pipeline completo de anuncios UGC en Higgsfield: generar una imagen de personaje → seleccionarla para video → agregar un prompt de video UGC → generar un video Seedance 2.0. Todo automatizado vía Playwright.
Resumen del Pipeline
Paso 1: Generar imagen de personaje → /image/soul-v2
Paso 2: Navegar a la página de video → /create/video?model=seedance_2_0
Paso 3: Seleccionar imagen de la galería → Diálogo de carga → Pestaña "Image Generations"
Paso 4: Escribir prompt de video UGC → Editor Lexical (contenteditable)
Paso 5: Configurar y generar → Clic en Generar
Prerrequisitos
- El usuario debe haber iniciado sesión en higgsfield.ai en la sesión del navegador de Playwright
- El plugin Playwright MCP debe estar habilitado
- Cargue cada herramienta de Playwright con
ToolSearchantes del primer uso
Requisitos de Entrada
El usuario proporciona:
- Descripción del personaje O un prompt de imagen predefinido (invocar
/ugc-hot-girlpara generar uno) - Contexto del producto/marca — qué está publicitando el video UGC
- Estilo de video — testimonial, showcase de producto, unboxing, reacción, etc.
Anulaciones opcionales:
- Modelo de imagen: Soul 2.0 (predeterminado, mejor para retratos)
- Modelo de video: Seedance 2.0 (predeterminado)
- Duración: 5s, 8s (predeterminado), 10s
- Relación de aspecto: Auto, 16:9, 9:16 (TikTok/Reels), 1:1
- Resolución: 720p (predeterminado), 1080p
Flujo Completo de Automatización
Fase 1: Generar la Imagen del Personaje
Paso 1.1: Navegar a la generación de imagen
browser_navigate → url: "https://higgsfield.ai/image/soul-v2"
Esperar a que cargue la página, tomar una instantánea.
Paso 1.2: Ingresar el prompt de imagen
Encontrar el cuadro de texto (ID de Playwright: hf:tour-image-prompt, marcador de posición: "Describe the scene you imagine"):
browser_click → ref: <textbox_ref>, element: "Cuadro de texto del prompt de imagen"
browser_type → ref: <textbox_ref>, text: "<prompt de imagen del personaje>"
Si el usuario no ha proporcionado un prompt de imagen, usar /ugc-hot-girl para generar uno primero.
Paso 1.3: Generar la imagen
Encontrar el botón Generar (muestra "Generate XXXX free gens left"):
PREGUNTAR AL USUARIO PARA CONFIRMACIÓN — esto usa créditos/generaciones gratuitas.
browser_click → ref: <generate_button_ref>, element: "Botón Generar"
Paso 1.4: Esperar la generación
browser_wait_for → time: 20
Tomar una captura de pantalla. Verificar que la nueva imagen aparezca como el primer elemento en la cuadrícula de Historial. Confirmar comprobando que el innerHTML del primer elemento de la cuadrícula contenga una etiqueta <img> con una URL de asset nueva.
Fase 2: Crear el Video a Partir de la Imagen Generada
Paso 2.1: Navegar a la página de video Seedance 2.0
browser_navigate → url: "https://higgsfield.ai/create/video?model=seedance_2_0"
Esperar a que cargue la página, tomar una instantánea. Confirmar que "Seedance 2.0" aparezca en el botón Modelo.
Paso 2.2: Abrir el diálogo de carga de medios
Encontrar el área de carga — buscar generic [cursor=pointer] que contenga:
paragraph: Upload mediaparagraph: Image, Video or Audio
browser_click → ref: <upload_area_ref>, element: "Área de carga de medios"
Esto abre un diálogo con pestañas: Uploads, Image Generations, Video Generations, Elements, Liked.
Paso 2.3: Cambiar a la pestaña Image Generations
browser_click → ref: <image_gen_tab_ref>, element: "Pestaña Image Generations"
Buscar button "Image Generations" en la barra de pestañas del diálogo.
Paso 2.4: Seleccionar la imagen generada
La imagen generada más recientemente es el primer elemento en la cuadrícula.
Inicialmente aparece como un button "Check eligibility". Hacer clic en él:
browser_click → ref: <first_image_ref>, element: "Primera imagen (generación más reciente)"
Después de hacer clic, el botón se transforma en un generic [cursor=pointer] con una vista previa de la imagen y una marca de verificación verde, lo que significa que está seleccionada y es elegible.
Importante: El primer botón "Check eligibility" en la lista es siempre la imagen más reciente. Después de hacer clic, su ref desaparece de la instantánea y es reemplazado por un nuevo elemento genérico.
Paso 2.5: Cerrar el diálogo
browser_press_key → key: "Escape"
Tomar una instantánea. Verificar:
- El área de carga ya no muestra el texto "Upload media"
- En su lugar, muestra un
generic [cursor=pointer]con elementos de imagen anidados (miniaturas de 48px) - El antiguo
paragraph: Upload mediayparagraph: Image, Video or Audiohan desaparecido
Paso 2.6: Limpiar cualquier prompt existente
La página de video utiliza un editor de texto enriquecido Lexical (div contenteditable), NO un cuadro de texto estándar. Para limpiarlo:
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"
Tomar una instantánea. El cuadro de texto ahora debería mostrar el marcador de posición: "Describe your scene in detail. Use @ to reference assets"
Paso 2.7: Ingresar el prompt de video UGC
Después de limpiar, tomar una instantánea para obtener la referencia actualizada del cuadro de texto. Luego escribir lentamente (requerido para el editor Lexical):
browser_type → ref: <textbox_ref>, text: "<prompt de video UGC>", slowly: true
Plantillas de Prompt de Video UGC (elegir según el estilo):
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.
Paso 2.8: Configurar los ajustes de video (opcional)
Los ajustes predeterminados funcionan bien para la mayoría de los UGC:
- Duración: 8s (bueno para formato corto)
- Relación de aspecto: Auto (o 9:16 para TikTok/Reels)
- Resolución: 720p
Para cambiar la relación de aspecto a vertical para TikTok:
browser_click → ref: <ratio_button_ref>, element: "Selector de relación de aspecto"
Luego seleccionar "9:16" del menú desplegable.
Paso 2.9: Generar el video
Tomar una captura de pantalla que muestre el estado final del formulario.
PREGUNTAR AL USUARIO PARA CONFIRMACIÓN — la generación de video cuesta más créditos que las imágenes.
El botón Generar muestra el costo en créditos (ej., "Generate 30 20"):
browser_click → ref: <generate_button_ref>, element: "Botón de generar video"
Paso 2.10: Monitorear la generación
Después de hacer clic en Generar:
- El video ingresa a la cola de generación
- Verificar la pestaña Historial para ver el progreso
- Tomar capturas de pantalla periódicamente para mostrar el estado
- Los videos Seedance 2.0 generalmente toman de 1 a 3 minutos
Referencia de Patrones de Elementos Clave
Página de Generación de Imagen (/image/soul-v2)
| Elemento | Patrón |
|---|---|
| Cuadro de texto del prompt | textbox con ID hf:tour-image-prompt |
| Selector de modelo | group > button que contiene "Soul 2.0" |
| Relación de aspecto | button que muestra "3:4" |
| Resolución | button que muestra "2k" |
| Botón Generar | button "Generate XXXX free gens left" |
| Primer resultado | Primer hijo generic en la cuadrícula de Historial |
Página de Creación de Video (/create/video)
| Elemento | Patrón |
|---|---|
| Área de carga (vacía) | generic [cursor=pointer] con paragraph: Upload media |
| Área de carga (con contenido) | generic [cursor=pointer] con miniaturas de imagen anidadas, sin texto "Upload media" |
| Diálogo de carga | dialog con barra de pestañas: Uploads, Image Generations, etc. |
| Pestaña Image Generations | button "Image Generations" en el diálogo |
| Primera imagen en la galería | Primer button "Check eligibility" en la cuadrícula del diálogo |
| Imagen seleccionada | generic [cursor=pointer] con img anidada (reemplaza el botón Check eligibility) |
| Editor de prompt | [data-lexical-editor] div contenteditable |
| Cuadro de texto del prompt (en instantánea) | textbox [active] después de enfocar el editor Lexical |
| Botón Modelo | button "Model" que contiene "Seedance 2.0" |
| Botón Duración | button "Duration" |
| Botón Relación de aspecto | button "Auto Ratio" |
| Botón Resolución | button "720p Resolution" |
| Botón Generar | button "Generate XX XX" con costo en créditos |
Manejo de Errores
- No ha iniciado sesión: Pedir al usuario que inicie sesión (
! open https://higgsfield.ai) - Barra de prompt de imagen faltante: Recargar la página — es un error intermitente de la plataforma
- "Check eligibility" no se transforma: La imagen puede no ser compatible con Seedance 2.0. Probar con otra imagen o regenerar
- El editor Lexical no se limpia: Probar con triple clic para seleccionar todo, luego Retroceso. O usar
browser_evaluatepara limpiar innerHTML - El diálogo no se cierra con Escape: Hacer clic fuera del área del diálogo
- Créditos insuficientes: Advertir al usuario antes de generar. El video cuesta más que las imágenes
- Refs obsoletos: Tomar siempre una instantánea nueva antes de cada interacción. Los refs cambian después de cualquier cambio de estado de la página
Ejemplo de Flujo Completo
Usuario: "Crea un video de anuncio UGC con una chica atractiva promocionando mi nuevo serum para el cuidado de la piel"
1. Invocar /ugc-hot-girl → genera un prompt de imagen de belleza/cuidado de la piel:
"Attractive young woman, early 20s, clear dewy skin, dark brown hair in
messy bun... ring light illumination... photorealistic, 4K..."
2. Fase 1 — Generación de Imagen:
→ Navegar a /image/soul-v2
→ Escribir el prompt de imagen
→ Confirmar con el usuario → Clic en Generar
→ Esperar 15-20s → La imagen aparece en la cuadrícula ✓
3. Fase 2 — Creación de Video:
→ Navegar a /create/video?model=seedance_2_0
→ Clic en área de carga → Pestaña Image Generations
→ Clic en primera imagen (Check eligibility) → Escape
→ Imagen cargada en el formulario ✓
→ Limpiar prompt anterior → Escribir prompt de testimonial 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..."
→ Establecer relación de aspecto a 9:16 para TikTok
→ Confirmar con el usuario → Clic en Generar
→ Video generándose... listo ✓
4. Informe: "¡Tu video UGC está listo! Revisa la pestaña Historial."
Referencia de Skills del Pipeline
| Paso | Skill | Qué hace |
|---|---|---|
| 1 | /ugc-hot-girl | Genera el prompt de la imagen del personaje |
| 2 | /higgsfield-image-auto | Automatiza solo el paso de generación de imagen |
| 3 | /seedance-auto-generate | Automatiza solo el paso de generación de video (desde un archivo local) |
| Completo | /ugc-video-auto | Este skill — ejecuta todo el pipeline de principio a fin |
Puedes usar los skills individuales por separado, o invocar /ugc-video-auto para ejecutar todo de una sola vez.