Communitygithub.com

anudeepadi/launch-video-skills

Crea videos de lanzamiento SaaS sin APIs desde un sitio web: HTML/CSS → fotogramas de Playwright → ffmpeg + TTS local con Kokoro.

¿Qué es launch-video-skills?

Esta habilidad permite a un agente de IA generar videos promocionales de alta calidad para productos SaaS, partiendo únicamente del sitio web del producto. No requiere APIs externas de voz ni renderizado en la nube: el proceso completo se ejecuta localmente usando una combinación de HTML/CSS, Playwright para capturar fotogramas, ffmpeg para la composición y Kokoro TTS para la síntesis de voz. Es ideal para desarrolladores y equipos que buscan crear videos de lanzamiento atractivos sin depender de servicios de pago o costosos, manteniendo el control total del flujo de trabajo. La habilidad está diseñada para el ecosistema Node.js y funciona en sistemas Linux, macOS y Windows; también se puede integrar con agentes como Claude Code siempre que tengan acceso al sistema de archivos y las herramientas de línea de comandos. El flujo incluye la extracción de datos visuales y de texto del sitio real, la generación de un guion y storyboard, la implementación en HTML/CSS/JS, la renderización sincronizada con voz y música, y la verificación final de calidad (audio, sincronía y continuidad).

Compatible con~Claude Code✓Codex CLI✓Cursor
npx skills add anudeepadi/launch-video-skills

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Video de lanzamiento

Renderizador: el paquete npm launch-video-skills. Contrato completo de escena: https://github.com/anudeepadi/launch-video-skills#scene-contract

  • npx launch-video-skills setup: una vez por máquina (Chromium sin interfaz + paquetes de voz Python). Requiere Node 18+, Python 3.10+, ffmpeg. Los pesos de Kokoro (~350 MB) y whisper small.en (~480 MB) se descargan a ~/.cache/lvk en la primera ejecución de voz.
  • npx launch-video-skills new <nombre>: crea launch-videos/scenes/<nombre>/index.html con launch-videos/kit/ a su lado.
  • npx launch-video-skills render <scene.html> [flags]: escribe en ./out/.
  • Si la descarga de Chromium se detiene → export LVK_CHROME=/ruta/a/chrome-headless-shell (cualquier compilación local).
  • Python de python.org en macOS falla con SSL → export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())').

Lo que separa un buen video de lanzamiento de "basura IA" está en references/craft.md. Léelo antes de hacer el storyboard.

Pasos

  1. Marca y hechos del producto real. Obtén el sitio con Playwright. Registra textualmente el titular, subtítulo, nombres de funciones, el contenido de ejemplo propio del sitio (hilos de demostración, indicaciones, código, listas de incidencias) y los CTA. Lee los estilos computados para la familia de fuente, peso y espaciado entre letras, y colores en píxeles de muestra para fondo/texto/acento (las variables CSS se desactualizan). Guarda el SVG del logotipo y cualquier imagen en launch-videos/scenes/<nombre>/assets/. Usa la fuente del sitio solo si su licencia permite redistribución; de lo contrario, usa la fuente incluida más cercana (Inter, JetBrains Mono, Space Grotesk). Nunca inventes métricas, clientes, integraciones o UI. Si algo está marcado como planificado/vista previa, déjalo fuera o etiquétalo. Si no puedes obtener ejemplos reales de UI, detente y dilo. Pon la URL de origen y la fecha en un comentario al inicio de la escena.
  2. Guion, luego storyboard. Una o dos líneas cortas por toma, extraídas del texto del sitio; total de 20–40 s. Usa say cuando la forma hablada difiera (puntos, acrónimos: say: 'Crea agentes de I.A.'). 5–6 tomas, una idea cada una: gancho (producto o titular en pantalla en menos de 2 s) → primer momento de uso → producto en acción (UI real reconstruida en HTML a partir del ejemplo propio del sitio, nunca una captura de pantalla) → segunda capacidad → 3 pilares o cómo funciona → CTA con logotipo. Marcas tranquilas: music.style: 'ambient', SFX suaves (0.2–0.6). Herramientas de desarrollo: 'pulse' y golpes. La voz es opcional; solo música es común en X.
  3. Escribe launch-videos/scenes/<nombre>/index.html contra ../../kit/kit.css y kit.js. Comienza desde la plantilla generada. Marca las tomas con data-shot="id" sin --in/--out codificados. Las líneas de voz van en SCENE.voice.lines (clave, toma, texto/say, en/después, pause tiempos). Vincula los tiempos al habla con data-on="key", data-on="key:palabra", data-edge="e". Llama a K.layout() después de definir SCENE, luego deriva los tiempos JS de K.at/K.end/K.shot: velocidad de escritura = longitud del texto / duración del hablado, clic del cursor en la palabra clave, señales de sonido de escritura a partir de las mismas constantes. onFrame(t) debe ser puro en t. Las transformaciones JS van en contenedores sin clase de animación CSS. Sin filter: blur, backdrop-filter o modos de mezcla de pantalla completa grandes.
  4. Bucle de revisión. npx launch-video-skills render launch-videos/scenes/<nombre>/index.html --sheet 1. Cada línea <- ASR heard: es una posible mala pronunciación: vuelve a escribir con say y verifica de nuevo (whisper a veces escucha mal el audio correcto; marca esos casos para que un humano los escuche). Revisa la imagen PNG de la hoja en busca de: texto sobre imágenes ocupadas, legibilidad de texto pequeño, fotogramas vacíos, colisiones en transiciones, escritura que termina antes de que la toma finalice, resaltado de sintaxis roto. --stills t1,t2 para verificaciones a resolución completa. Itera con notas de gusto ("demasiado rápido", "no está claro qué pasó") en lugar de un solo intento.
  5. Renderiza y verifica. npx launch-video-skills render launch-videos/scenes/<nombre>/index.html --workers 4. Luego:
    • ffprobe: h264 + aac, duración esperada.
    • volumedetect: media alrededor de −19 a −17 dB, máximo menos de −1 dB.
    • Sincronía: transcribe el MP4 final con las marcas de tiempo de palabras de faster-whisper small.en; la primera palabra de cada línea dentro de ~0.2 s de la línea de tiempo impresa en el registro. Las palabras clave coinciden con tiempos visuales.
    • Continuidad: compara fotogramas entre límites de workers (recuento de fotogramas / workers).
  6. Entrega. Proporciona la ruta del MP4. Nunca sobrescribas un corte anterior (mv -n o un nuevo --out). Di claramente que la voz y la música son sintetizadas y no han sido verificadas por oído humano. Ofrece texto para publicaciones que evite afirmaciones de "hecho en un solo prompt". Las voces de pago (ElevenLabs, OpenAI, Google) se pueden intercambiar dentro del lib/tts.py del paquete; menciónalo solo si el usuario desea una lectura más humana.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados