HyperFramespor HeyGen

HyperFrames Skill.

Empieza por el vídeo que necesitas, no por un montón de herramientas de animación. HyperFrames es la skill de entrada que lee el estado del proyecto, selecciona el flujo de producción adecuado e incorpora las capacidades necesarias para convertir composiciones HTML en vídeo.

HTML a vídeo
Enrutamiento de flujos de trabajo
Producción de vídeo

Descargar OpenDesign Ver la guía de uso

Revisión de la fuente · hyperframesSKILL.md

Tarea Producción de vídeo Produce • Un flujo de trabajo seleccionado y un brief para la creación desde cero • Una composición HTML y una vista previa mediante ese flujo de trabajo • Vídeo renderizado cuando se solicita el renderizado y este se completa Antes de empezar La CLI requiere Node.js 22+ y FFmpeg. Empieza con las skills básicas; los flujos de creación se instalan bajo demanda. Los servicios multimedia y el renderizado en la nube pueden añadir requisitos.

Resumen editorial · fuente revisada 2026-10-12 · no es un ejemplo generado

01 Qué hace

Un único punto de entrada, distintos flujos de producción

La skill principal decide cómo debe avanzar el trabajo. El flujo seleccionado y las skills de dominio se encargan de la composición, los medios y el renderizado.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

Cómo trabaja

Un lanzamiento de producto, una pasada de subtítulos y una presentación interactiva son entregables distintos, aunque todos incluyan movimiento. HyperFrames enruta según el resultado solicitado: una promo basada en un sitio web, subtítulos sencillos sobre material existente, música sincronizada con el ritmo, un motion graphic breve o una composición personalizada tienen cada uno su propio camino. La fuente también ofrece una ruta explícita para portar código fuente Remotion.

Los proyectos existentes no se tratan como inicios en blanco. El enrutador revisa el brief y los artefactos del proyecto, retoma el flujo registrado o realiza solo la operación solicitada. Para una creación desde cero, recoge la intención en BRIEF.md, instala el flujo seleccionado y carga capacidades especializadas solo cuando hacen falta.

Entregables esperados

Una elección de flujo de trabajo y BRIEF.md para la creación desde cero
Una composición HTML editable, con vista previa y los archivos de proyecto de apoyo que requiera el flujo de trabajo
Un vídeo renderizado cuando se solicite; una presentación navegable o un storyboard revisado pueden ser un punto final distinto

Ver el brief de ejemplo

De la solicitud a la producción

01
Identificar el estado del proyecto
Distingue la creación desde cero de una edición, una operación solo de renderizado o un proyecto con brief existente. Reutiliza las preferencias registradas en lugar de reiniciar la entrevista.
02
Elegir según el entregable
Relaciona el resultado solicitado con el contrato del flujo de trabajo. Material existente con subtítulos no es un nuevo vídeo explicativo, y la música de fondo por sí sola no convierte un proyecto en uno guiado por música.
03
Cargar las capacidades necesarias
Instala bajo demanda el flujo de creación seleccionado. Incorpora la guía de composición, motion, medios, audio o CLI para el trabajo que realmente se necesita, en lugar de instalar todos los flujos por defecto.
04
Revisar y renderizar con criterio
Usa la vista previa y las comprobaciones del flujo de trabajo y luego renderiza el entregable acordado. La validación de HTML no sustituye a ver el resultado; una solicitud explícita de solo renderizado sigue siendo esa operación.

02 Cuándo usarla

Cuándo usarla

Usa el enrutador cuando una solicitud de vídeo necesite el camino de producción adecuado, o cuando quieras retomar un proyecto HyperFrames existente sin perder su contexto.

Encaja bien

Un vídeo nuevo con un tema claroAporta un sitio web, un PR, un tema, material grabado o una pista de música y describe el resultado deseado. El enrutador decide qué flujo de trabajo, especializado o general, se aplica.
Volver a un proyecto existenteUn brief guardado, la configuración del proyecto y un storyboard permiten al agente continuar con la dirección establecida en lugar de repetir las mismas preguntas.
Combinar varias capas de producciónUna pieza puede necesitar temporización de HTML, movimiento con búsqueda de fotogramas, medios y audio. El enrutador conecta esas capacidades sin tratar una sola técnica de animación como todo el trabajo.

Límites que conviene comprobar

No es un preset de animación independienteEsta skill es un punto de entrada de orquestación. Instalar sus instrucciones no sustituye al flujo de trabajo seleccionado, la CLI, las dependencias de renderizado ni los recursos multimedia.
No todas las solicitudes terminan en MP4Una presentación navegable, un storyboard aprobado o una tarea solo de vista previa tienen un punto final distinto. Especifica si realmente se necesita un archivo renderizado.
Los servicios externos tienen requisitos propiosLa fuente comprueba el uso durante la creación. La generación de medios y los servicios alojados pueden requerir cuentas, cuota disponible o autorización adicional; una licencia de código abierto no hace que todos los servicios sean ilimitados.

Aporta estos elementos

El entregable previstoIndica la audiencia, el tema, la relación de aspecto, la duración aproximada y el formato final. Aclara si es una promo, una pasada de subtítulos, una presentación, un vídeo explicativo o una edición personalizada.
Material de origen que puedes usarProporciona textos aprobados, material grabado, capturas del producto, música o URL de origen. Identifica las afirmaciones y los derechos de los recursos; los medios generados no sustituyen las pruebas factuales del producto.
Proyecto existente y límites de revisiónComparte BRIEF.md y los archivos relevantes del proyecto al continuar un trabajo. Especifica los puntos de aprobación, las restricciones de trabajo solo local y si se autoriza el renderizado o la publicación.

03 Decisiones que importan

Decisiones que importan

El brief mantiene la ruta
En un trabajo nuevo, el proceso de intención termina en BRIEF.md. La producción posterior debe seguir esa decisión registrada en lugar de reinterpretar una y otra vez la solicitud original.
La temporización de HTML debe permitir búsqueda de fotogramas
El framework renderiza fotogramas individuales a partir de una composición temporizada. El movimiento y los medios deben seguir su contrato de autoría, no solo verse bien en la reproducción normal del navegador.
La instalación de flujos de trabajo se mantiene acotada
La configuración independiente documentada instala el conjunto básico y añade flujos de creación cuando se seleccionan. Un paquete de plugin tiene su propio catálogo incluido y su gestor de actualizaciones; las dos vías de instalación no son intercambiables.

04 Prueba un brief concreto

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Instalar las skills básicas

El siguiente comando es la vía de instalación del conjunto básico del README para agentes y uso no interactivo.

Instalación documentada del conjunto básico

npx hyperframes skills update

La CLI requiere Node.js 22+ y FFmpeg. La alternativa interactiva es npx skills add heygen-com/hyperframes y luego seleccionar Core Skills. Claude Code también tiene una instalación como plugin documentada por separado. Los flujos de creación se cargan bajo demanda; esta página no afirma que se haya probado la instalación.

Empieza con una solicitud de vídeo acotada

Usa el brief sin probar de abajo para dejar explícitos el tema, los recursos, la salida y el punto de parada. Un proyecto existente debe incluir su brief y su configuración actuales.

Brief de ejemplo

Usa el punto de entrada HyperFrames para planificar un vídeo de presentación de producto de 20 segundos y 16:9 a partir de las capturas y los textos aprobados que te proporciono. Usa solo esos recursos y afirmaciones; no generes música, narración ni medios adicionales. Primero comprueba si esta carpeta ya tiene BRIEF.md o hyperframes.json y conserva las decisiones registradas. Para un trabajo nuevo, confirma la audiencia y el flujo de trabajo, escribe el brief y luego prepara una composición HTML y una vista previa local. Mantén el proyecto en local. Muestra la vista previa e informa de las comprobaciones realmente ejecutadas antes de renderizar; no publiques ni uses servicios de pago. Si un flujo de trabajo, una dependencia o una comprobación de uso necesarios no están disponibles, explica la limitación en lugar de fingir que se completó.

Revisar antes del renderizado final

Inspecciona la ruta elegida, el uso de recursos, la vista previa y las comprobaciones informadas. Mira el archivo renderizado si se genera uno y mantén el renderizado separado de la publicación.

El flujo de trabajo seleccionado coincide con el entregable solicitado y conserva las decisiones del proyecto existente.
La vista previa usa las afirmaciones y los recursos proporcionados, con texto legible y una temporización que funciona al buscar fotogramas.
Los resultados de dependencias, uso y renderizado son explícitos; una vista previa local no se describe como un vídeo publicado ni renderizado.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer el inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: HeyGen
Repositorio: heygen-com/hyperframes
Archivo de la skill: skills/hyperframes/SKILL.md
Licencia: Apache-2.0
Instantánea revisada: 2026-10-12 · 2905162d925f

Resumen editorial de la fuente

HyperFrames es el punto de entrada de enrutamiento y reanudación de proyectos para una familia de flujos de trabajo de vídeo nativos en HTML. Selecciona caminos de producción y carga capacidades de dominio; no es en sí un único efecto de animación ni un resultado registrado.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿En qué se diferencia la skill principal de hyperframes-animation?

La skill principal identifica el estado del proyecto y elige el flujo de producción. La skill de animación aporta reglas de movimiento y guía de runtime cuando ese flujo las necesita. Empieza por el punto de entrada principal para una solicitud de vídeo de principio a fin.

¿Necesito React o todas las skills publicadas?

No se requiere React: HyperFrames crea composiciones en HTML con animación que permite búsqueda de fotogramas. El README independiente recomienda empezar por el conjunto básico, con los flujos de creación instalados bajo demanda; las instalaciones como plugin incluyen su propio catálogo.

¿Puede limitarse a renderizar un proyecto existente?

Sí. La fuente trata una solicitud específica de renderizar, inspeccionar, validar o previsualizar como una operación acotada, sin reiniciar la entrevista de creación desde cero. El proyecto sigue necesitando la CLI y el entorno de renderizado requeridos.

HyperFrames

Empieza por el vídeo que necesitas

Aporta un brief acotado o un proyecto existente. Elige el flujo de trabajo adecuado, inspecciona la vista previa y decide de forma explícita cuándo renderizar o publicar.

Descargar OpenDesign Explorar skills de diseño