HyperFrames: de una composición HTML a un vídeo terminado
HyperFrames, de HeyGen, convierte maquetación web en vídeo: pausa la línea de tiempo y la recorre fotograma a fotograma, así que cada render del mismo proyecto sale idéntico. La skill hyperframes es la puerta de entrada y fija las reglas de composición y el ciclo de trabajo del agente, desde el plan hasta el archivo final.
Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, IBM Bob
Qué hace
Define el contrato de render: cada elemento temporizado lleva la clase clip, data-start y data-duration; la composición raíz marca la duración.
Prohíbe lo que rompe la repetibilidad: Date.now(), Math.random() sin semilla, peticiones de red, temporizadores y bucles infinitos.
Antes de programar un efecto a mano, manda al agente al registro de bloques; para música, voz o metraje, a la skill media-use.
Sigue un ciclo de comandos: check --json señala errores con su arreglo, snapshot enseña fotogramas y render espera tu visto bueno.
Indica qué guía abrir según el encargo: lanzamiento, vídeo explicativo, videoclip, gráficos, formato vertical, 3D o subtítulos.
Cuándo usarla
Quieres un vídeo de lanzamiento que viva en el repositorio y se edite como cualquier otro código.
Una carrera de gráficos o un mapa animado tiene que regenerarse cada vez que cambian los datos.
Hay que enseñar una web o un PR en vídeo, y el comando capture puede traer la página como material.
Pídale al agente
Con /hyperframes, crea una intro de producto de 10 segundos: título con fundido, vídeo de fondo y música suave.
Convierte nuestra landing en un vídeo vertical de 20 segundos con subtítulos y enséñame antes la vista previa.
Haz en HyperFrames un gráfico de barras animado con los ingresos trimestrales de data.csv.
Preguntas
¿Cómo se instala HyperFrames en Claude Code?
Primero claude plugin marketplace add heygen-com/hyperframes y después claude plugin install hyperframes@hyperframes. La skill suelta se instala con el comando de skills CLI de esta página.
¿Funciona HyperFrames en Codex o Cursor?
Sí: el README menciona Claude Code, Codex, Cursor, Gemini CLI, IBM Bob y otros agentes compatibles con skills. Para Codex existe además un script que empaqueta el plugin.
¿Qué diferencia hay entre hyperframes y las demás skills del paquete?
hyperframes se lee primero y contiene el contrato y el ciclo de trabajo. La CLI, el registro de bloques y los medios van en hyperframes-cli, hyperframes-registry y media-use.
