01 Qué es cada pieza
HyperFrames es un framework de código abierto (Apache 2.0) mantenido por HeyGen. Su idea es sencilla: describes el vídeo como una página HTML con atributos de tiempo (cuándo entra cada elemento, cuánto dura, en qué pista va) y animaciones que se pueden «rebobinar», como las de GSAP. El renderizador abre esa página en un Chrome sin interfaz, la recorre fotograma a fotograma y la codifica con FFmpeg. La misma entrada produce siempre el mismo vídeo.
Claude Design es el espacio de Anthropic en claude.ai pensado para diseño visual, con lienzo y vista previa. Ahí Claude se ocupa de la identidad visual, la maqueta de cada escena y una primera versión de las animaciones. Si prefieres trabajar en el terminal, Claude Code hace lo mismo con el plugin oficial de HyperFrames.
| Ruta | Para quién | Dónde se renderiza |
|---|---|---|
| Claude Design + ZIP | Quien quiere diseñar visualmente y tocar el terminal lo mínimo | En tu ordenador con npx hyperframes render |
| Claude Code + plugin | Quien ya trabaja con agentes y quiere iterar tiempos y ritmo con precisión | En tu ordenador, lo lanza el propio agente |
| Combinada | Proyectos para clientes | Diseño en Claude Design, pulido y QA en Claude Code |
02 Prepara tu ordenador
- ✓Node.js 22 o superior (compruébalo con node --version).
- ✓FFmpeg instalado y accesible desde el terminal (en Mac, brew install ffmpeg; en Ubuntu, sudo apt install ffmpeg).
- ✓Memoria suficiente: cada proceso de render abre su propio Chrome, de unos 256 MB.
- ✓Tus recursos de marca a mano: logotipo en SVG o PNG, colores en hexadecimal y tipografías.
npx hyperframes doctor03 Ruta 1: diseñar en Claude Design
-
1
Descarga el archivo de instrucciones
En el repositorio de HyperFrames, dentro de docs/guides, está claude-design-hyperframes.md. Enseña a Claude a entregar un proyecto que el renderizador acepta sin retoques: HTML plano y una línea de tiempo de GSAP en pausa, sin React.
-
2
Abre Claude Design y adjunta el archivo
Súbelo al inicio del proyecto junto con tu material de marca. Sin él, Claude tiende a usar su flujo de vídeo por defecto, que no es compatible.
-
3
Pide un proyecto, no maquetas sueltas
Indica duración, formato (horizontal, vertical o cuadrado), número de escenas, textos exactos y tono. Revisa la vista previa y pide cambios concretos.
-
4
Descarga el ZIP
Cuando te guste, descarga el proyecto. Es una carpeta portable que puedes versionar en git.
-
5
Comprueba y renderiza
Descomprime, entra en la carpeta y ejecuta check, preview y render. Si algo falla, abre la carpeta con Claude Code para corregirlo.
cd mi-video
npx hyperframes check
npx hyperframes preview
npx hyperframes render --output video.mp404 Ruta 2: todo desde Claude Code
El plugin oficial incluye skills que enseñan al agente el ciclo completo: planificar el vídeo, escribir HTML válido, conectar las animaciones, añadir medios, validar, previsualizar y renderizar. La skill de entrada es /hyperframes:hyperframes, que actúa como enrutador y elige el flujo adecuado (vídeo de lanzamiento, explicativo, gráfico animado corto, subtítulos…).
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesnpx hyperframes init mi-video --resolution portrait
cd mi-video
npx hyperframes preview05 Prompts listos para usar
Crea un vídeo vertical 1080x1920 de 15 segundos para anunciar [producto o servicio] de [marca].
Estructura: gancho con una pregunta en grande (0-3 s), tres beneficios con un icono y una frase corta cada uno (3-11 s) y cierre con logotipo y llamada a la acción «[texto CTA]» (11-15 s).
Usa la paleta [colores hex] y la tipografía [fuente]. Deja libre el 15 % inferior y superior para la interfaz de la red social. Animaciones con entradas suaves, nada de rebotes exagerados. Textos en español y legibles sin sonido.Con el SVG del logotipo adjunto, crea una animación horizontal 1920x1080 de 5 segundos: el símbolo se dibuja trazo a trazo, después aparece el nombre letra a letra y termina con un leve brillo. Fondo [color]. Quiero también una versión con fondo transparente para usarla encima de otros vídeos, así que mantén el fondo en un elemento separado que pueda desactivar.Prepara un vídeo de 20 segundos que muestre cómo funciona [funcionalidad] de nuestra aplicación. Reconstruye la interfaz en HTML a partir de las capturas adjuntas, no animes las capturas como imágenes: el cursor debe hacer clic, los campos rellenarse y el resultado aparecer. Termina con el titular «[frase]». Revisa el proyecto con npx hyperframes check y corrige los errores antes de renderizar.06 Casos de uso y límites
Plantillas para redes
Las composiciones admiten variables: un mismo diseño puede renderizarse con distintos textos y datos, una salida por fila, con la opción --batch.
Rótulos y superposiciones
Con --format webm o mov obtienes vídeo con transparencia para montarlo luego en tu editor habitual.
Vídeos de producto
Lanzamientos, novedades y recorridos por una web, sin grabar pantalla ni contratar edición para cada cambio.
Gráficos de datos
Cifras, gráficos y mapas animados para informes o presentaciones a clientes.
Preguntas frecuentes
No para empezar: Claude escribe el HTML y las animaciones. Sí te ayudará entender que el vídeo es una página web con tiempos, porque así sabrás pedir cambios concretos como alargar una entrada o mover una escena.
MP4 por defecto, y también WebM y MOV con transparencia, GIF, secuencias de PNG o HLS. Puedes elegir los fotogramas por segundo y la calidad con las opciones del comando render.
Sí. Las composiciones admiten pistas de audio y el proyecto incluye herramientas para transcribir, generar subtítulos y mezclar el sonido. Usa siempre música con licencia para uso comercial.
Suele deberse a fuentes o versiones de Chrome diferentes. Si necesitas resultados idénticos entre equipos, renderiza con la opción --docker.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.