Conversa con tu agente y consigue un video con gráficos, subtítulos y sonido. Instala HyperFrames en Claude Code o Codex y úsalo con un método que te evita el video plano: primero un plan, luego una escena de prueba, y solo después el video completo, con tu estilo.
Al terminar tendrás instalada una herramienta que convierte HTML en video, y tres instrucciones listas para pegar según lo que tengas: un clip hablando a cámara, una grabación solo de voz, o nada.
No tienes que revisar si ya tienes Node.js y FFmpeg. El instalador le pide al agente que lo compruebe y que te guíe si falta alguno.
Un solo bloque. Se instalan todas las skills del repositorio, no solo las básicas, porque algunas (3D, Figma, presentaciones) te servirán cuando quieras ir más lejos.
Instala HyperFrames desde este repositorio: https://github.com/heygen-com/hyperframes Instala todas sus skills, no solo las básicas: las cuatro del conjunto base y también las opcionales (Figma, presentaciones y conversión desde Remotion). Detecta mi sistema operativo y elige tú el método correcto para mi agente (Claude Code o Codex). Si ya hay una versión instalada, actualízala en lugar de duplicarla. Comprueba que tengo Node.js 22 o superior y FFmpeg. Si falta algo, guíame paso a paso para instalarlo. Al terminar, dime qué skills quedaron instaladas, en qué ruta, y qué debo hacer para empezar a usarlas.
/hyperframes. En Codex se escribe $hyperframes./ y busca hyperframes en la lista. Si aparece, el agente ya lo ve.Usando /hyperframes, crea un video de 10 segundos con un título que aparezca con un fundido, un fondo de color y un sonido suave. Antes de construir, muéstrame tu plan en una tabla y espera mi aprobación. Al final dime la ruta del archivo MP4.
Son lo que separa un video que se ve armado a propósito de uno plano. Ya viajan dentro de las instrucciones de cada caso; conocerlos te permite corregir al agente con criterio.
Una tabla con tiempo, qué se ve, colores y sonido. No se construye nada hasta que lo apruebas.
Se hace solo la más ambiciosa y se te muestra. Si el nivel no te convence, se corrige antes de repetirlo en todo el video.
Cambia el encuadre, el gráfico o el zoom. En clips de menos de 10 segundos, máximo tres modos.
Sombras, perspectiva y capas. Nada de cajas planas que aparecen sin más.
De tres a cuatro palabras, en una zona segura y nunca sobre tu cara.
Si muestras la pantalla de un tercero, es una captura real. Las ideas sí se dibujan en código.
Se revisan fotogramas del borrador. El render final se hace solo cuando tú lo pides.
Cada una está pensada para un punto de partida distinto. Las tres empiezan por una entrevista de estilo: el agente te da tres opciones por pregunta y una recomendada, para que elijas sin partir de cero.
Sirve para un reel, un anuncio o un tutorial grabado por ti. Tu cara sigue presente y el agente alterna encuadres y gráficos.
Usa /hyperframes y las demás skills de HyperFrames que necesites (registro de componentes, medios, línea de comandos) para editar mi video hablando a cámara. Sigue este orden y no te saltes ningún paso. 1. ENTREVISTA DE ESTILO. Hazme UNA pregunta por mensaje. Cada pregunta con tres opciones concretas y tu recomendación marcada; yo puedo responder con otra cosa. Temas, en este orden: para quién es el video y qué quiero que haga el espectador; formato (vertical 9:16, cuadrado u horizontal); vibra (energética, sobria o cálida); paleta (propón tres paletas con nombre y colores en hexadecimal: fondo, texto, acento principal, acento de alerta, acento de éxito; más la opción "usar los colores de mi marca"); tipografía (tres combinaciones de titulares y subtítulos); subtítulos (palabras por frase, mayúsculas o no, color de la palabra clave); sonido (sin efectos, sutiles o marcados). 2. MI MATERIAL. Te daré mi clip. Transcríbelo con la herramienta de HyperFrames y mira algunos fotogramas para saber dónde queda mi cabeza, mi cuello y el encuadre, de modo que los subtítulos y gráficos nunca tapen mi cara. 3. FUNCIÓN DE CADA FRASE. Clasifica cada frase de la transcripción: dato, ejemplo, contraste, pregunta, pasos, prueba o llamada a la acción. A cada una asígnale un tratamiento visual que cuente lo que dice. 4. PLAN ANTES DE CONSTRUIR. Preséntame una tabla con: tiempo, modo de cámara (cámara completa; dividida con gráfico arriba y yo abajo; yo pequeño con gráfico dominante; pantalla completa de gráfico sin mi cara), qué se ve, colores y sonido. No construyas nada hasta que yo apruebe el plan. 5. ESCENA DE PRUEBA. Construye SOLO la escena más ambiciosa, muéstrame una imagen fija y espera mi visto bueno antes de seguir. 6. REGLAS DE EDICIÓN. - Un cambio visual cada 3 o 4 segundos como máximo (encuadre, gráfico o zoom). - Alterna los modos de cámara y no encadenes más de dos divididos seguidos. - Si el clip dura menos de 10 segundos, usa máximo 3 modos de cámara; el dinamismo sale del micro-movimiento dentro de cada modo. - Profundidad en todo: sombras, perspectiva, capas. Prohibidas las cajas planas que aparecen. - Las transiciones entre modos se animan, sin cortes secos. - Subtítulos de 3 o 4 palabras, sin caja, en zona segura, con la palabra clave en el color de acento. - El gráfico aporta la imagen y el subtítulo la frase: no repitas lo mismo en ambos. 7. EVIDENCIA REAL. Si muestras la pantalla, perfil o página de un tercero, usa una captura o video real dentro de una ventana con profundidad. Nunca dibujes con código algo que pueda pasar por la pantalla real de otra persona ni inventes cifras presentadas como reales. Las ideas abstractas sí se construyen en código. 8. CONSTRUCCIÓN Y REVISIÓN. Construye el resto, ejecuta la validación de HyperFrames, genera un borrador y revisa fotogramas consecutivos al inicio de cada escena: subtítulos fuera de mi cara, nada congelado, nada cortado. Mezcla el audio para que mi voz se oiga clara y los efectos queden de fondo. 9. RENDER FINAL solo cuando yo lo pida. Entrégame la ruta del archivo y dime qué no pudiste verificar (por ejemplo, si no escuchaste el audio). Cuando te pida una corrección, cambia solo eso, dime qué cambia y cuánto antes de renderizar, y no toques lo que ya aprobé.
Sirve para promocionar un producto, un servicio o una idea con una locución tuya (o un audio que ya tengas). No hay cara: todo el video son gráficos animados.
Usa /hyperframes y las demás skills de HyperFrames que necesites (registro de componentes, medios, línea de comandos) para crear un video a partir de mi audio de voz. No hay cara en pantalla: todo el video son gráficos en movimiento sincronizados con lo que digo. Sigue este orden y no te saltes ningún paso. 1. ENTREVISTA DE ESTILO. Hazme UNA pregunta por mensaje. Cada pregunta con tres opciones concretas y tu recomendación marcada; yo puedo responder con otra cosa. Temas, en este orden: qué producto, servicio o idea promociono y a quién; qué quiero que haga el espectador al final; formato (vertical 9:16, cuadrado u horizontal); vibra (energética, sobria o cálida); paleta (tres paletas con nombre y colores en hexadecimal: fondo, texto, acento principal, acento de alerta, acento de éxito; más la opción "usar los colores de mi marca"); tipografía (tres combinaciones); estilo de los textos en pantalla; sonido (sin efectos, sutiles o marcados). 2. MIS ASSETS. Pregúntame qué tengo: logo, capturas reales del producto, fotos, clips de apoyo. Lo que no tenga lo resolvemos después; no inventes capturas. 3. MI AUDIO. Te daré mi archivo de voz. Transcríbelo con la herramienta de HyperFrames, con marcas de tiempo por palabra, y revisa que el texto sea correcto antes de seguir. 4. ESTRUCTURA DEL MENSAJE. Divide la transcripción en momentos: gancho, problema, producto, beneficios, prueba y llamada a la acción. A cada frase asígnale una función (dato, ejemplo, contraste, pregunta, pasos, prueba) y un tratamiento visual que la cuente. 5. PLAN ANTES DE CONSTRUIR. Preséntame una tabla con: tiempo, qué se ve en pantalla completa, textos de 1 a 3 palabras, colores y sonido. No construyas nada hasta que yo apruebe el plan. 6. ESCENA DE PRUEBA. Construye SOLO la escena más ambiciosa, muéstrame una imagen fija y espera mi visto bueno antes de seguir. 7. REGLAS DE EDICIÓN. - Un cambio visual cada 3 o 4 segundos como máximo. - Como no hay cara, cada escena necesita fondo diseñado, un titular con volumen, un objeto principal con profundidad y palabras que se muevan. Nunca una captura larga de página entera. - Alterna composiciones: no repitas el mismo diseño dos escenas seguidas. - Profundidad en todo: sombras, perspectiva, capas. Prohibidas las cajas planas que aparecen. - Subtítulos de 3 o 4 palabras, sin caja, con la palabra clave en el color de acento; el gráfico aporta la imagen y el subtítulo la frase. - La llamada a la acción final es la escena más clara y legible de todo el video. 8. EVIDENCIA REAL. Si muestras la pantalla o página de un tercero, usa una captura real dentro de una ventana con profundidad. Para mi producto, usa mis capturas. Nunca dibujes con código algo que pueda pasar por una pantalla real ni inventes cifras presentadas como reales. Las ideas abstractas sí se construyen en código. 9. CONSTRUCCIÓN Y REVISIÓN. Construye el resto, ejecuta la validación de HyperFrames, genera un borrador y revisa fotogramas consecutivos al inicio de cada escena. Mezcla el audio para que mi voz se oiga clara y la música y los efectos queden de fondo. 10. RENDER FINAL solo cuando yo lo pida. Entrégame la ruta del archivo y dime qué no pudiste verificar. Cuando te pida una corrección, cambia solo eso, dime qué cambia antes de renderizar y no toques lo que ya aprobé.
Sirve cuando partes de una idea. El agente propone el guion, genera la voz y construye el video. Tú apruebas en cada etapa.
Usa /hyperframes y las demás skills de HyperFrames que necesites (registro de componentes, medios, línea de comandos) para crear un video completo desde una idea, sin que yo tenga clip ni audio. Sigue este orden y no te saltes ningún paso. 1. ENTREVISTA DE IDEA Y ESTILO. Hazme UNA pregunta por mensaje. Cada pregunta con tres opciones concretas y tu recomendación marcada; yo puedo responder con otra cosa. Temas, en este orden: de qué trata el video y para quién; qué quiero que haga el espectador al final; duración (15, 30 o 60 segundos); formato (vertical 9:16, cuadrado u horizontal); vibra (energética, sobria o cálida); paleta (tres paletas con nombre y colores en hexadecimal: fondo, texto, acento principal, acento de alerta, acento de éxito; más la opción "usar los colores de mi marca"); tipografía (tres combinaciones); sonido (sin música, música suave o música marcada). 2. GUION. Propón tres ángulos distintos para el video, cada uno con su gancho en una frase, y recomienda uno. Cuando yo elija, escribe el guion completo con tiempos aproximados. No generes voz hasta que yo apruebe el guion. 3. VOZ. Pregúntame qué voz prefiero entre estas opciones: (a) el generador de voz local de HyperFrames en español, que funciona sin cuenta ni clave; (b) una voz de ElevenLabs con mi propia cuenta, si quiero un resultado más natural. Si elijo la local, genera una muestra corta de dos o tres voces en español y déjame escuchar antes de decidir. Si elijo ElevenLabs, dime exactamente qué necesitas de mí y cómo guardar mi clave de forma segura; nunca la escribas dentro de archivos del proyecto ni me pidas pegarla en el chat. Con la voz elegida, genera la locución completa y transcríbela para obtener las marcas de tiempo. 4. ASSETS. Dime qué imágenes, logos o capturas necesita el video. Usa las que yo tenga; genera o consigue las que falten con las herramientas de medios, y márcame cuáles son generadas por IA. No inventes capturas de pantallas reales de terceros. 5. FUNCIÓN DE CADA FRASE. Clasifica cada frase del guion: dato, ejemplo, contraste, pregunta, pasos, prueba o llamada a la acción, y asígnale un tratamiento visual. 6. PLAN ANTES DE CONSTRUIR. Preséntame una tabla con: tiempo, qué se ve, textos de 1 a 3 palabras, colores y sonido. No construyas nada hasta que yo apruebe el plan. 7. ESCENA DE PRUEBA. Construye SOLO la escena más ambiciosa, muéstrame una imagen fija y espera mi visto bueno antes de seguir. 8. REGLAS DE EDICIÓN. - Un cambio visual cada 3 o 4 segundos como máximo. - Cada escena con fondo diseñado, titular con volumen, objeto principal con profundidad y palabras que se muevan. Nunca una captura larga de página entera. - Profundidad en todo: sombras, perspectiva, capas. Prohibidas las cajas planas que aparecen. - Subtítulos de 3 o 4 palabras, sin caja, con la palabra clave en el color de acento. - La llamada a la acción final es la escena más clara de todo el video. 9. CONSTRUCCIÓN Y REVISIÓN. Construye el resto, ejecuta la validación de HyperFrames, genera un borrador y revisa fotogramas consecutivos al inicio de cada escena. Mezcla el audio para que la voz se oiga clara y la música y los efectos queden de fondo. 10. RENDER FINAL solo cuando yo lo pida. Entrégame la ruta del archivo y dime qué no pudiste verificar. Cuando te pida una corrección, cambia solo eso, dime qué cambia antes de renderizar y no toques lo que ya aprobé.
No necesitas entender el error. Pégale esta frase al agente y deja que diagnostique.
Instalé HyperFrames pero algo no funciona. Diagnostica por tu cuenta: comprueba que Node.js 22 o superior y FFmpeg estén instalados, que las skills de HyperFrames estén instaladas y visibles para ti (dime cuáles y en qué ruta), y que la herramienta de línea de comandos responda. Si falta algo, instálalo o guíame paso a paso. Al terminar, dime qué estaba mal y qué cambiaste.