Claude Design y Hyperframes: Edición de Video Impulsada por Prompts
Eran las 11:14 p. m. de un viernes cuando finalmente admití aquello que había estado posponiendo durante dos semanas.
Iba por mi tercer vaso de cold brew, mi tercer render del mismo video explicativo de 90 segundos y mi tercer intento de hacer que un destacado de texto coincidiera exactamente con la palabra "automatización" en lugar de aparecer 0.4 segundos después. La pista de audio era una grabación mía recorriendo el panel de control de un cliente. Las visuales debían ser texto limpio en pantalla, un par de gráficos y un lower-third con los colores de nuestra marca. Nada fuera de lo normal.
Lo que aprendí por las malas es que la edición de video basada en prompts —ese tipo del que todo el mundo no ha parado de hablar desde que HeyGen lanzó Hyperframes el 17 de abril y Anthropic añadió de forma discreta las exportaciones estilo video en Claude Design esa misma semana— tiene un fallo muy específico: la IA no escucha el audio. No puede. No tiene idea de cuándo dices "automatización". Solo sabe lo que le indicas.
Eso es lo primero que nadie explica en los videos de lanzamiento. Y es justamente lo que, al final, determinó si este flujo de trabajo realmente me ahorraba tiempo o si era otro juguete ingenioso que terminaría abandonando tras una semana.
Esta publicación es la versión honesta de lo que sucedió en esas dos semanas. Construí el mismo video de 90 segundos usando ambas herramientas —primero en Claude Design, luego en Hyperframes a través de Claude Code— y te contaré qué hace realmente cada una, en qué situaciones fallaron y cuál fue el patrón de iteración específico al que llegué y que ahora me permite entregar motion graphics basados en prompts en menos de 30 minutos por video.
Si has estado siguiendo estos lanzamientos preguntándote si por fin puedes dejar de pelearte con Premiere o After Effects, la respuesta es sí. Pero no por las razones que sugieren las demos. Permíteme mostrarte dónde está el verdadero valor oculto.
Las dos herramientas, el mismo problema
Antes de entrar en las pruebas, necesitamos entender bien la naturaleza de estas dos herramientas. Muchas de las opiniones confusas que he visto online las mezclan — tratándolas como competidoras cuando en realidad cumplen funciones distintas dentro de la misma cadena de producción más amplia.
Claude Design es un espacio de trabajo web en claude.ai/design, que funciona sobre Opus 4.7 y se utiliza a través del navegador. Hice un desglose completo sobre qué es y por qué existe en mi reseña de Claude Design, pero la versión corta es esta: es la interfaz visual de Anthropic para crear diseños, diapositivas, prototipos, one-pagers y ahora — gracias al pipeline de exportación actualizado — escenas animadas que puedes exportar como un paquete HTML o grabar en video mediante captura de pantalla.
Hyperframes es un framework de renderizado open-source desarrollado por HeyGen, lanzado el 17 de abril de 2026 bajo la licencia Apache 2.0. Lo instalas en Claude Code con npx skills add heygen-com/hyperframes y dotas a tu agente de tres comandos barra: /hyperframes para crear composiciones, /hyperframes-cli para operaciones desde la línea de comandos y /gsap como soporte para animaciones. Las escenas se escriben en HTML, CSS y JavaScript puros. El pipeline de renderizado convierte cada fotograma en una imagen real y luego los une en un MP4, MOV o WebM. Todo corre en local. Sin cloud. Sin clave de API.
Ambas herramientas se topan con el mismo muro en el momento en que intentas convertirlas en un flujo de edición real: ninguna de las dos interpreta audio. No escuchan tu voz en off. No saben en qué momento caen las palabras. Solo conocen lo que tú les das por texto.
Por eso la transcripción es el recurso más importante de todo este flujo de trabajo — más importante que el prompt, más importante que el sistema de diseño, más importante que el modelo que estés usando. Los tres primeros días de mis pruebas no entendí esto, y fueron tres días desperdiciados.
Déjame explicar a qué me refiero.
La transcripción es el guion
Aquí está el modelo mental que desbloqueó todo este flujo de trabajo para mí. Deja de pensar en la transcripción como "los subtítulos". Empieza a verla como la línea de tiempo. Es lo que la IA lee para saber dónde están tus palabras. Sin marcas de tiempo a nivel de palabra, cada animación en pantalla que solicites se convierte en una conjetura.
Genero transcripciones con Whisper, de la misma manera que lo hago para mi flujo de edición de video con Claude Code. El formato de salida específico importa. No quieres solo un volcado de texto plano. Lo que buscas es un archivo JSON que se vea así, con marcas de tiempo para cada palabra:
{
"words": [
{ "text": "I", "start": 0.00, "end": 0.12 },
{ "text": "automated", "start": 0.14, "end": 0.78 },
{ "text": "this", "start": 0.80, "end": 0.96 },
{ "text": "entire", "start": 1.00, "end": 1.42 },
{ "text": "workflow", "start": 1.46, "end": 2.08 }
],
"segments": [
{ "start": 0.0, "end": 4.2, "text": "I automated this entire workflow..." }
]
}
Con un archivo así, puedes redactar prompts que realmente tengan sentido para la IA. En vez de "anima la palabra automation en el momento correcto", puedes decir: "lee transcript.json y haz aparecer un cuadro de resaltado sobre la palabra automated usando sus campos start y end." Esa instrucción es computable. El modelo puede ejecutarla de forma determinista. Atina al fotograma correcto todas las veces.
Otra ventaja que la transcripción te da —y aquí es donde aparece el verdadero apalancamiento— es poder hacer búsquedas por patrones en tu propio discurso. ¿Quieres poner un gráfico cada vez que digas un número? Escanea la transcripción buscando cadenas numéricas. ¿Quieres resaltar una marca cada vez que se mencione? Busca esa cadena. ¿Quieres diferenciar con colores las muletillas de las palabras de énfasis? Escribe esa regla una vez y aplícala en todos tus videos futuros.
Al cuarto día de prueba me di cuenta de que la transcripción no era un insumo para el video. Era la fuente de verdad para el video. Una vez que hice ese cambio mental, ambas herramientas empezaron a comportarse tal como se veía en los demos de lanzamiento.
Ahora te voy a mostrar qué hizo cada una con el mismo material fuente de 90 segundos.
Prueba 1: Claude Design creó mi video explicativo en treinta y siete minutos
La fuente para esta prueba fue un video explicativo para un cliente sobre un proyecto de dashboard de Ramlit. 90 segundos de locución. Yo mostrando tres pantallas, narrando qué hace cada una, con tres cifras que quería resaltar y una tarjeta final de llamada a la acción.
Entré en Claude Design primero porque la barrera de entrada es prácticamente inexistente. Abres el navegador. Haces clic en el ícono de la paleta. Pegas un prompt. Ese es todo el proceso de onboarding.
Mi primer prompt fue deliberadamente extenso. Había aprendido por las malas, en el trabajo de extracción de marca, que Claude Design recompensa el contexto. Esto es, aproximadamente, lo que escribí:
"Tengo un video explicativo de 90 segundos para un dashboard de gestión de proyectos. Adjunto el JSON de la transcripción, con marcas de tiempo por palabra, y las capturas de pantalla del dashboard. Por favor, crea tres escenas animadas que reflejen mi marca mejba.me (fondo azul marino oscuro, acento en degradado de púrpura a cyan, tipografía Inter). La escena 1 inicia con la pantalla de vista general del dashboard en los segundos 0-18. La escena 2 destaca el panel de analíticas en los segundos 18-52. La escena 3 es un CTA de cierre en los segundos 52-90. Por cada cifra que menciono en la transcripción, anima una tarjeta estadística con forma de píldora que aparezca centrada sobre la zona relevante de la pantalla y que coincida con las marcas de tiempo de inicio y fin del JSON. Exporta como un bundle HTML."
Lo que recibí en unos dieciocho minutos fue realmente impresionante. Tres escenas compuestas. Mis colores de marca aplicados correctamente. Tarjetas estadísticas animadas sobre mis capturas. Un título de introducción en SVG generado que parecía hecho por un diseñador junior talentoso en un buen día.
Pero tenía desvíos. Las animaciones se activaban en los límites de secciones, no en las palabras exactas. Cuando narraba “redujimos el tiempo de edición en un cuarenta por ciento”, la tarjeta del cuarenta por ciento aparecía entre “edición” y “en” — unos 0,6 segundos antes de lo debido. En tres escenas, cuatro de las cinco llamadas de estadísticas aparecían desfasadas por más de medio segundo. Dos se sentían totalmente incorrectas.
Pregunté a Claude Design el motivo. La respuesta era lo que ya sospechaba: la herramienta leía los límites de escena desde el prompt, pero no analizaba las marcas de tiempo por palabra del archivo de transcripción. Ajustaba al segmento más cercano. La sincronización a nivel de segmento es aceptable para grandes cambios de ritmo. No lo es para una llamada de estadística que debe aparecer exactamente sobre una palabra específica.
Ese es el límite estructural de Claude Design para video. Es brillante para composición, para layout, para la consistencia de marca, para crear escenas que parecen tocadas por un diseñador. No está construido como un motor de animación con precisión de cuadro. Esto también se nota en la exportación: puedes obtener un bundle HTML, pero si quieres un MP4 real debes grabar la vista previa o pasar el bundle a Claude Code y renderizarlo con una segunda herramienta. Y eso fue exactamente lo que hice después.
Aquí quiero dejar claro por qué Claude Design es realmente sobresaliente en el contexto de video, porque no quiero restarle méritos. Es la forma más rápida que he encontrado de generar los elementos estáticos de un video: tarjetas de entrada, tarjetas de salida, lower-thirds, plantillas para llamadas, diseños de tarjetas estadísticas, variantes de thumbnails. Inviertes quince minutos en Claude Design, arrastras cinco plantillas gráficas pulidas a tu proyecto en Hyperframes, y te acabas de saltar la peor parte de la producción de video: diseñar el aspecto visual. La IA es mejor junior designer que la mayoría de juniors con los que he trabajado, especialmente porque lee tu codebase real para extraer los tokens de marca, en vez de inventárselos.
Lo que no es, es toda la cadena de producción. Es la mitad.
Prueba 2: Hyperframes renderizó el mismo video en tres iteraciones
Para la prueba con Hyperframes, abrí Claude Code en un terminal limpio, cloné una nueva carpeta de proyecto y ejecuté la instalación:
npx skills add heygen-com/hyperframes
La skill registró /hyperframes, /hyperframes-cli y /gsap como comandos de barra dentro de mi sesión de Claude Code. Puse el mismo MP3 de la voz en off en una carpeta assets/, el mismo transcript.json con marcas de tiempo a nivel de palabra y las mismas tres capturas de pantalla del dashboard. Después, escribí:
"/hyperframes build a 90-second composition. Read transcript.json for word-level timestamps. For each numeric value spoken in the audio, render a pill-shaped stat card centered over the corresponding screen image using the exact start and end timestamps from the JSON. Use GSAP for the animations. My brand colors are #0F172A background, gradient accent from #8B5CF6 to #3B82F6 to #06B6D4, Inter typography. Output a single scene composition in HTML with GSAP timelines."
El primer resultado tardó unos nueve minutos en generarse. Claude Code escribió un único archivo de composición, configuró las líneas de tiempo de GSAP, vinculó las animaciones a las marcas de tiempo tomadas del transcript y mostró una vista previa en el navegador. Lo vi reproducirse. Cada stat pill caía exactamente en su palabra. Cada palabra. No casi, no “dentro de un frame”, sino en el frame.
La razón por la que funcionó es mecánica, no mágica. Las composiciones de Hyperframes son simplemente HTML. Las líneas de tiempo de GSAP aceptan un delay y una duration en segundos. Cuando Claude Code lee una entrada del transcript { "text": "cuarenta", "start": 34.21, "end": 34.68 } y escribe gsap.to(statPill, { opacity: 1, delay: 34.21, duration: 0.47 }), no hay ambigüedad. La herramienta hace exactamente lo que le indico, usando exactamente las marcas de tiempo que le proporcioné. Claude Design estaba adivinando. Hyperframes estaba ejecutando.
El primer borrador, obviamente, no fue perfecto. Las stat pills aparecían animadas con un rebote que se sentía fuera de lugar para un video de dashboard serio. La marca de mi cliente es calmada y precisa. Le di a Claude Code este feedback, con marcas de tiempo:
"A los 34.21 segundos, la pastilla de 40% entra rebotando. Reemplaza el easing elástico por
power2.out. Lo mismo para las pastillas en 48.9 y 71.4. Además, a los 12.5 segundos, el título de introducción sigue desvaneciéndose cuando aparece la primera captura — retrasa la entrada de la captura 0.3 segundos."
Once minutos después tenía la segunda iteración. El easing era limpio. El traspaso del título, fluido. Pero el CTA de cierre, al final del video, tenía su subtítulo superpuesto al botón durante aproximadamente un segundo. Un comentario más con timestamp, un render más, y la tercera iteración fue el corte final. Tiempo total reloj desde carpeta vacía hasta MP4 renderizado: unos treinta y cuatro minutos, de los cuales quizás nueve fueron tiempo activo con el teclado. El resto fue esperando al render.
Hice este mismo video en Premiere el mes anterior. Me había llevado 2 horas y 40 minutos, incluyendo recortes. No era una diferencia menor. Era una diferencia estructural en cómo se siente el trabajo.
Lo Que La IA No Puede Hacer
Si leíste las dos secciones anteriores y pensaste “esto suena sospechosamente bueno”, estás poniendo atención. Aquí están los modos de fallo que encontré durante dos semanas, ordenados según la frecuencia con la que ocurrieron.
La limpieza de audio bruta aún necesita intervención humana. Toda la cadena basada en prompts parte de la premisa de que tu voiceover ya está limpio. Sin muletillas. Sin pausas largas. Sin cortes extraños de respiración. Si tu grabación en crudo es deficiente, las herramientas generarán motion graphics perfectamente sobre un audio basura. Transcribe con Whisper, haz una pasada rápida en Descript para eliminar palabras de relleno y vuelve a exportar el audio antes de siquiera tocar la transcripción. Ese proceso previo lo expliqué en el post sobre el workflow de edición de video.
Fallos en la previsualización en ambas herramientas. El preview de Claude Design en navegador tartamudeaba en mi MacBook Pro M2 más o menos cada quince frames. El preview de Hyperframes era mejor, pero aún así ocasionalmente perdía sincronía entre el audio y la línea de tiempo GSAP al hacer scrub. La salida renderizada final siempre fue correcta. El bug del preview es real y puede engañarte para que corrijas cosas que en realidad no están rotas. Si algo se ve mal en el preview, renderiza un clip de prueba de 10 segundos antes de empezar a reescribir prompts.
El consumo de tokens es considerable. Una composición completa de 90 segundos con animaciones marcadas por timestamp, feedback iterativo y tres previsualizaciones renderizadas me costó alrededor de 340,000 tokens de Opus 4.7 en Claude Code, de principio a fin. No es poca cosa. Para un usuario Pro que hace un video por semana, es manejable. Si quieres operar una fábrica de diez videos semanales, debes cambiar a Sonnet para los ciclos de iteración y reservar Opus solo para la creación inicial. Yo normalmente hago el primer draft con Opus, cambio a Sonnet para la retroalimentación iterativa y solo vuelvo a Opus si algo necesita una reconstrucción estructural.
Efectos 3D complejos requieren intervención humana. Hyperframes soporta Three.js, y sí, Claude Code puede escribir una escena en Three.js sin problema. Pero los resultados para efectos realmente 3D — visualizadores de audio reactivos, revelados dimensionales, movimientos de cámara en espacios tridimensionales — requieren un ingeniero con experiencia en Three.js para depurarlos. La IA genera el andamiaje. A menudo una persona debe corregir la física y los tiempos. Esto no es exactamente una crítica: es el punto donde la herramienta deja de reemplazar la experiencia y empieza a amplificarla.
Ninguna de las dos herramientas edita material bruto. Vale la pena decirlo explícitamente porque me lo preguntó un cliente la semana pasada. No puedes soltar una grabación de 40 minutos en crudo en Claude Design o Hyperframes y obtener un video cortado. Estas herramientas construyen la capa de motion graphics que se superpone a un video ya editado. El corte sigue ocurriendo en Descript, Premiere o un pipeline automatizado con Whisper. Lo que cambió es el paso posterior al corte, esa parte en la que antes dedicabas tres horas en After Effects.
El patrón que ahora entrega mis videos
Después de dos semanas trabajando así, he definido un flujo específico que utilizo para cada video explicativo que lanzo. Requiere aproximadamente treinta minutos de trabajo activo para un video de 90 segundos, y la secuencia es la siguiente.
Paso 1: Limpia el audio primero. Graba, transcribe con Whisper, limpia en Descript y vuelve a exportar un MP3. No te saltes este paso. Una mala grabación equivale a un mal video, sin importar lo buena que sea la capa de animación.
Paso 2: Genera el transcript JSON a nivel de palabra. La opción --output_format json de Whisper te da lo que necesitas. Guarda el archivo en la raíz de tu proyecto y llámalo transcript.json. Todo prompt posterior depende de que este archivo exista en esa ubicación.
Paso 3: Crea los assets estáticos en Claude Design. Tarjetas de introducción, tarjetas de cierre, plantillas para estadísticas, diseños de lower-third. Colócalos en la carpeta assets/ del proyecto como SVGs o fragmentos HTML. Hazlo en una sola sesión de Claude Design de unos quince minutos. Aquí es donde Claude Design realmente destaca.
Paso 4: Estructura la composición en Hyperframes a través de Claude Code. Escribe el primer prompt con el esquema completo de escenas, la referencia al transcript, los tokens de marca y las rutas a los assets. Deja que Opus 4.7 genere el primer borrador. Calcula entre diez y quince minutos por render.
Paso 5: Itera con feedback con marcas de tiempo. Mira el preview. Si encuentras algo incorrecto, descríbelo en el formato “en el segundo 34.2, [elemento] hace [acción incorrecta], cambiar a [acción correcta]”. Cambia Claude Code a Sonnet para estos ciclos de iteración y ahorrar tokens. Rara vez necesito más de tres iteraciones.
Paso 6: Renderiza el MP4 final localmente. npx hyperframes render --format mp4 --output final.mp4. Toma unos dos a cuatro minutos para 90 segundos de contenido en mi M2. Verifica la sincronización de audio, verifica todas las marcas de tiempo, publica.
Eso es todo. Dos herramientas, un solo transcript, un orden específico.
Si tuviera que reducirlo aún más, la versión corta sería: usa Claude Design para los gráficos estáticos, usa Hyperframes a través de Claude Code para la animación compuesta, y siempre — siempre — pauta el timing a partir de un transcript JSON a nivel de palabra. Todo lo demás son detalles de workflow.
Qué Significa Esto Si Te Dedes a la Edición de Video
Quiero concluir con una reflexión para cualquiera que lea esto y que actualmente se gane la vida editando video, porque he estado recibiendo mensajes directos de editores freelance preguntando, en serio, lo siguiente: ¿me voy a quedar sin trabajo en seis meses?
No. Ni remotamente. Pero el trabajo está cambiando de forma, y la naturaleza de ese cambio es importante.
Las partes mecánicas de la edición —posicionar textos, animar con keyframes, asegurar la coherencia de marca en cien escenas, generar lower-thirds para una serie, renderizar tarjetas de CTA según especificaciones— todo eso ahora se puede comprimir en minutos. Una agente de IA con Hyperframes instalado hará ese trabajo más rápido de lo que tú podrías, por menos dinero del que cobras, y con menos errores.
Lo que no es compresible, y lo que no veo que se vuelva compresible en los próximos dieciocho meses, es aquello por lo que tus mejores clientes realmente te pagan: criterio. La decisión de qué momento de tres segundos en una grabación de doce minutos sostiene toda la pieza. El instinto que te dice que un silencio necesita prolongarse medio tiempo más. El juicio para saber cuándo una tarjeta con estadísticas aporta a la historia y cuándo desvía la atención de una expresión facial que estaba a punto de tener impacto.
Por esas decisiones es por lo que se contrata a los editores. Las herramientas que probé este mes no toman esas decisiones. Ejecutan las que tú ya tomaste, a una velocidad que simplemente era imposible hace ocho semanas.
Los editores que prosperarán en los próximos dos años serán aquellos que dejen de verse como personas que mueven clips en una línea de tiempo, y empiecen a verse como directores que dirigen a un equipo de animación de IA. El trabajo se vuelve más estratégico, menos mecánico. El valor de tu tarifa, si juegas bien, sube, no baja.
Preguntas Frecuentes
¿Cuál es la diferencia entre Claude Design y Hyperframes?
Claude Design es un espacio de trabajo visual basado en la web en claude.ai/design, utilizado para crear layouts, slides y gráficos estáticos con coherencia de marca. Hyperframes es un framework de código abierto para renderizar de HTML a MP4 creado por HeyGen, que se ejecuta a través de Claude Code para componer y renderizar vídeo real. Usa Claude Design para recursos estáticos; usa Hyperframes para el resultado animado y con sincronización de tiempo.
¿Claude Design o Hyperframes pueden leer mi archivo de audio?
No. Ninguna de las dos herramientas interpreta audio de forma nativa. Ambas requieren una transcripción previa con marcas temporales a nivel de palabra —normalmente generada por Whisper— para sincronizar las animaciones en pantalla con el audio hablado. La transcripción es la línea de tiempo. Sin ella, la temporización sería una suposición.
¿Cómo instalo Hyperframes con Claude Code?
Ejecuta npx skills add heygen-com/hyperframes dentro de una sesión de Claude Code. La skill registra tres comandos de barra: /hyperframes para crear composiciones, /hyperframes-cli para operaciones de línea de comandos y /gsap como ayuda para animaciones. La instalación completa toma menos de un minuto en la mayoría de las máquinas.
¿Cuánto tarda realmente en producirse un vídeo guiado por prompts?
Para un explicador de 90 segundos con motion graphics, mi flujo de trabajo actual requiere unos treinta minutos de trabajo manual: aproximadamente quince minutos en Claude Design para los recursos estáticos y quince minutos en Claude Code más Hyperframes para la composición y dos o tres ciclos de iteración. En comparación, en un editor tradicional como Premiere esto tomaría más de dos horas.
¿Para qué tipo de vídeos no es recomendable este flujo de trabajo?
Edición de material original (recortar horas de entrevistas hasta los mejores momentos), cualquier cosa que requiera física 3D matizada sin un desarrollador de Three.js humano y vídeos donde la capa de motion graphics tenga un peso emocional que dependa de la intuición humana para el timing. Las herramientas potencian el criterio editorial, pero no lo sustituyen.
Trabajemos Juntos
¿Buscas crear sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudarte.
- Fiverr (desarrollos e integraciones a medida): fiverr.com/s/EgxYmWD
- Portafolio: mejba.me
- Ramlit Limited (soluciones empresariales): ramlit.com
- ColorPark (diseño y branding): colorpark.io
- xCyberSecurity (servicios de seguridad): xcybersecurity.io
