Innate-Labs/product-demo-video

Video Demo de Producto（Product Demo Video）

Convierte una aplicación web real en un video demo con estilo: capturas reales de pantalla + interfaces reconstruidas con código, montadas dentro de una maqueta de navegador, con subtítulos, logo, música y renderizado como video corto vertical o cuadrado.

Es automático — solo necesitas un proyecto que se ejecute y Claude hará:

• Entender el producto automáticamente: leerá CLAUDE.md, README.md y las rutas para comprender para qué sirve cada página y el tono del producto.
• Generar guion automáticamente desde el código: basándose en la funcionalidad real de cada página, escribirá automáticamente los títulos, subtítulos y la URL de la barra de direcciones para cada escena, sin necesidad de escribir nada a mano.
• Localizar el logo automáticamente: encontrará el logo vectorial real de tu proyecto en public/ y lo usará en la introducción y el final.

Solo tendrás que tomar decisiones en algunos puntos clave (proporción del lienzo, qué páginas incluir, ritmo, sonido).

Pre-skills: Este skill depende de [remotion-best-practices] (framework de video) y [agent-browser] (capturas de pantalla). Antes de procesar código de Remotion, carga remotion-best-practices para obtener el conocimiento del dominio.

Cuándo usarlo

Cuando un usuario quiera convertir una aplicación web en funcionamiento (su propio proyecto o un directorio dado) en un video promocional o demo corto. Ejemplos típicos: "Haz un video demo de nuestro producto", "Convierte esta página en un video promocional vertical".

Forma del resultado

Un proyecto Remotion que renderiza un mp4:

• Lienzo: Vertical 1280×1706 (3:4, por defecto, ideal para redes sociales) / Cuadrado 1080×1080 / Horizontal 1920×1080
• Estructura: N escenas, cada escena = una página del producto (captura real o reconstrucción con código) dentro de una maqueta de navegador, con subtítulos en la parte inferior; transiciones crossfade entre escenas + Ken Burns lento en toda la ventana; final con logo + eslogan de la marca
• Sonido: Música libre de derechos (por defecto) o narración TTS (opcional)

Proceso completo (5 fases)

Fase 1 — Comprender el producto y planificar la narrativa

1. Lee CLAUDE.md / README.md / DESIGN.md del proyecto para entender: qué es el producto, cuáles son sus páginas/funcionalidades principales, y las normas de tono (colores, fuentes, prohibiciones — consultar reference/tone.md, debe respetar su propio DESIGN.md).
2. Enumera las rutas de las páginas (find app -name page.tsx), entiende la función de cada página, resume automáticamente una línea narrativa de "viaje del usuario" (por ejemplo, "Función principal A → B → C → Página de resultados"), y redacta automáticamente el texto de los subtítulos para cada segmento.
3. Confirma con el usuario: proporción del lienzo, qué etapas incluir, ritmo, opción de sonido. Marca de antemano las páginas que no se puedan capturar realmente (páginas en tiempo real o que requieren datos especiales).

Fase 2 — Capturar páginas reales (priorizar las que se puedan capturar)

Usa agent-browser. Ver scripts/capture-pages.md. Puntos clave:

• Iniciar el frontend y backend del proyecto de destino (en segundo plano), esperar a que estén listos.
• Establecer viewport estándar: agent-browser set viewport 1440 900 2 (@2x retina, proporción normal de navegador 16:10, captura nítida).
• Manejar inicio de sesión: la mayoría de las páginas (app) requieren inicio de sesión. Buscar una cuenta de prueba en dev.db; la contraseña está hasheada, con autorización del usuario usar la función hash del proyecto para restablecerla temporalmente (después de la captura debe restaurarse, ver lecciones aprendidas).
• Eliminar insignias de desarrollo: agent-browser eval "document.querySelectorAll('nextjs-portal').forEach(e=>e.remove())".
• Tomar una captura limpia de cada página objetivo y guardarla en el proyecto Remotion en public/<brand>/.

Fase 3 — Reconstruir con código las páginas que no se pueden capturar (punto clave de calidad)

Algunas páginas no se pueden capturar con capturas reales (sala de entrevistas en tiempo real sin micrófono en headless, páginas de informes que dependen del backend, datos faltantes). No inventes basándote en la imaginación:

1. Lee el código real de los componentes (components/.../XxxLayout.tsx etc.), comprende el diseño, elementos y estructuras de datos reales.
2. Reconstruye 1:1 en Remotion como un componente React según la estructura real, renderízalo en el área de contenido de la ventana (dimensiones = W×H del área de contenido).
3. Ejemplos en templates/screens/InterviewScreen.tsx (interfaz de sesión), templates/screens/ReportScreen.tsx (interfaz de informe) — son plantillas neutrales "reconstruidas a partir del código real"; al cambiar de producto, sigue la misma técnica y reescríbelas con el contenido real de tu producto.

Fase 4 — Montar el video demo

Usa templates/PromoVideo.tsx como esqueleto (maqueta de navegador + crossfade de escenas + Ken Burns + subtítulos + Outro + audio), templates/PromoRoot.tsx para registrar la composición.

• Cada configuración de escena: { type: 'image'|'<custom>', src?, addr, title, sub }.
• La barra de direcciones cambia con la escena (aumenta la sensación de realidad).
• La introducción y el final localizan y usan automáticamente el logo real del proyecto (buscar en public/ un logotipo vectorial como icons/logo.svg, no usar texto plano como sustituto).
• Respetar estrictamente las normas de tono (ver más abajo).

Fase 5 — Sonido y renderizado

• BGM (por defecto): Música libre de derechos de Mixkit para uso comercial, scripts/get-bgm.sh descarga y permite al usuario escuchar y elegir. Se reproduce de fondo durante todo el video, con fundido de entrada y salida.
• Narración TTS (opcional): scripts/gen-tts.sh, usa AiHubMix/OpenAI compatible con /audio/speech (gpt-4o-mini-tts de calidad humana, requiere clave de usuario). Cada frase se alinea con la escena; la duración de la escena se ajusta a la longitud de la narración. No uses say de macOS (voz mecánica, baja calidad).
• Renderizado: npx remotion render <id> out/<name>.mp4, verificar que incluya pista de audio + duración, copiar a ~/Desktop/.

Tono — Normas de estilo (clave para la calidad "terminal", ver detalle en reference/tone.md)

Tono por defecto = sobrio, profesional, real. A menos que el DESIGN.md del proyecto indique lo contrario:

• Colores: Fondo blanco (#F4F4F6 lienzo / #FFF ventana) + texto en blanco, negro y grises (#141414 / #8A8A90), sin introducir colores; mantener puntos rojos funcionales (grabación, conexión) tal como son en la realidad.
• Fuentes: Unificar chino e inglés con PingFang ("PingFang SC","Heiti SC",sans-serif); la máquina de renderizado (macOS) lo tiene disponible directamente; no usar Inter etc. (el fallback para chino es inconsistente).
• Maqueta de navegador: Ventana blanca con esquinas redondeadas de 18 px + barra chrome superior (tres puntos grises, no usar colores de semáforo + barra de direcciones en forma de píldora), sombra suave.
• Movimiento de cámara: easing uniforme con Easing.bezier(0.16,1,0.3,1); entrada de ventana con spring; Ken Burns lento de toda la ventana escala 1→1.03 (aplicar a la ventana, no a la imagen interior, de lo contrario se recorta el contenido).
• Ritmo: Duración uniforme de las escenas (por defecto 60 fotogramas / 2s a 30 fps), ordenado; para sincronizar con la música, se puede medir el BPM y alinear con los compases.
• Subtítulos: Centrados en la parte inferior, título grande en PingFang Semibold + subtítulo pequeño en gris, crossfade.
• Sin emojis.

Lista de lo que NO hacer: Uso excesivo de colores, puntos de semáforo de colores, Inter con chino, objectFit cover que amplía y recorta contenido de página, inventar páginas que no se pueden capturar, TTS con voz mecánica, ritmo inconsistente, logo falso de solo texto.

Lecciones aprendidas de errores (lectura obligada)

• El navegador headless no tiene micrófono/cámara: las páginas de voz/video en tiempo real se quedan atascadas en "preparando/dispositivo no disponible", no se pueden capturar — directamente reconstruir con código, no insistir.
• El esquema de la base de datos de desarrollo local se desvía: el código añadió migraciones pero la base de datos local no se ejecutó, dando 500 (por ejemplo, no such column: xxx). Para capturas/rellenar datos, se puede hacer ALTER TABLE ADD COLUMN para añadir columnas faltantes (seguro, no elimina datos), pero hay que explicarlo.
• Modificar la base de datos local debe restaurarse: las contraseñas de prueba restablecidas, los datos de ejemplo rellenados temporalmente, deben restaurarse a sus valores originales después de la captura (primero hacer copia de seguridad del hash/JSON original). Las columnas añadidas se pueden conservar (son las que el código espera).
• objectFit no debe recortar contenido: al colocar la captura en la ventana, usar objectFit:"contain" para mostrar completa; el zoom de Ken Burns debe aplicarse a la ventana exterior, no a la imagen, de lo contrario la parte inferior de la página se recorta.
• Al rellenar datos de ejemplo, verificar los nombres de campo en el código: los nombres de campo que lee el frontend suelen diferir de la intuición (plural, nombres con guión bajo, etc.), hay que leer el componente de renderizado para confirmar, no adivinar.
• El texto en chino que contiene comillas dobles ASCII → usar backtick para toda la cadena (regla global de CLAUDE.md).
• El cwd de Bash persiste entre llamadas: usar rutas absolutas, no repetir cd subdirectorio.

Verificación rápida

Después de modificar el código de Remotion: npx tsc --noEmit; renderizar fotograma clave con npx remotion still <id> out/check.png --frame=N --scale=0.5 para autoinspección visual; después del renderizado final, usar ffprobe para confirmar pista de audio y duración.