exiao/skills

Creador de Videos de Demostración

Crea videos de demostración de producto pulidos automatizando interacciones del navegador.

Resumen

1. Planifica la secuencia del demo (páginas, interacciones, tiempos)
2. Graba fotogramas usando Playwright CDP screencast
3. Codifica a video con FFmpeg

Inicio Rápido

Requisitos Previos

• Navegador OpenClaw en ejecución (browser action=start profile=clawd)
• Aplicación accesible a través del navegador (localhost o remota)
• FFmpeg instalado para la codificación

Flujo de Grabación

1. Inicia el navegador OpenClaw si no está en ejecución
2. Navega a la aplicación manualmente o mediante browser action=open
3. Personaliza scripts/record-demo.js para la aplicación objetivo
4. Ejecuta: node scripts/record-demo.js
5. Codifica: bash scripts/frames-to-video.sh

Planificación de un Demo

Consulta references/demo-planning.md para obtener orientación sobre:

• Estructuración de secuencias de demostración
• Tiempos y ritmo
• Patrones de interacción
• Qué hace que los demos sean atractivos

Scripts

scripts/record-demo.js

Script de Playwright de plantilla que:

• Se conecta al navegador OpenClaw vía CDP
• Inicia la captura de pantalla remota (fotogramas JPEG)
• Ejecuta la secuencia del demo (navegación, clics, hover, escritura)
• Guarda los fotogramas en el directorio de salida

Personaliza para cada demo:

• Array DEMO_SEQUENCES - define páginas e interacciones
• OUTPUT_DIR - dónde guardar los fotogramas
• FRAME_SKIP - salta cada N fotogramas (menor = más fotogramas)

scripts/frames-to-video.sh

Script de codificación FFmpeg con preajustes:

• mp4 - H.264, buen equilibrio calidad/tamaño (predeterminado)
• gif - GIF animado para incrustar
• webm - VP9, archivos más pequeños

Uso: ./frames-to-video.sh [directorio_entrada] [nombre_salida] [formato]

Patrones de Interacción

// Navegación
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);

// Hacer clic en un elemento
await page.locator('button:has-text("Crear")').click();
await page.waitForTimeout(500);

// Hover (mostrar tooltips, estados hover)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);

// Escribir texto
await page.locator('input[placeholder="Buscar"]').fill('consulta');
await page.waitForTimeout(500);

// Presionar tecla
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');

// Desplazar
await page.evaluate(() => window.scrollBy(0, 300));

Consejos

• Tiempos: 2s en carga de página, 0.5–1s entre interacciones, 1.5s para mostrar resultados
• Salto de fotogramas: usa 3–5 para video fluido, 8–10 para archivos más pequeños
• Calidad: JPEG 85–90 equilibra tamaño y nitidez
• Resolución: el tamaño de la ventana del navegador determina la resolución de salida
• Bucles: los GIF deben repetirse sin interrupción: termina donde empezaste

Advertencias

• Capturas vs video: Si el usuario solo necesita ver una funcionalidad, toma capturas de pantalla directamente en lugar de grabar un video completo. Verifica primero browser action=tabs profile=clawd — si la pestaña de la aplicación ya está abierta, obtén capturas directamente sin un subagente.
• Límite de contexto: Los bucles de grabación con muchas capturas agotan el contexto rápidamente (límite de 200k tokens). Mantén el alcance reducido: graba todos los fotogramas primero, luego analiza — nunca intercales la captura de fotogramas con el análisis. Si el contexto es ajustado, escribe los fotogramas en disco y analiza en una pasada separada.
• Riesgo de agentes paralelos: No lances múltiples agentes de demo al mismo tiempo contra la misma pestaña del navegador — interferirán entre sí con el estado de navegación.