Edita video con Claude Code: guía completa con HyperFrames

Ahora es posible editar video desde la línea de comandos, simplemente describiendo lo que quieres. HyperFrames, el framework gratuito y open-source de HeyGen, convierte a Claude Code en un editor de video: describes la edición, él escribe el código, anima y renderiza en MP4. Sin abrir CapCut ni Premiere.

Esta guía te lleva de cero a tu primer video con pinta profesional, con prompts listos para copiar y adaptar a tu caso.

Qué es y cómo funciona

HyperFrames es un framework open-source (Apache 2.0) que permite a los agentes de IA componer videos escribiendo HTML, CSS y JavaScript. Como los modelos ya son excelentes escribiendo código web, editar video se vuelve simplemente "escribir una página y animarla".

Algo importante de entender: Claude Code no "ve" tu video ni genera imágenes por sí solo. Claude es el director y orquestador. Trabaja con dos componentes:

• El framework (gratis): HyperFrames arma la composición, timing, subtítulos, transiciones, zooms y render final a MP4.
• Conexiones externas (opcionales): ElevenLabs para voces premium, Kie.ai para imágenes IA, Suno para música generada.

El truco de la sincronización: en lugar de "ver" el video, Claude lo transcribe con Whisper y genera timestamps milimétricos palabra por palabra. Con esos tiempos exactos puede clavar un subtítulo, una imagen o un efecto de sonido justo en el milisegundo correcto. Por eso los cortes y los efectos de sonido caen perfectos.

Buena noticia: voces TTS con Kokoro, transcripción y todo el render corren localmente y gratis. Las APIs de pago solo las necesitas si quieres subir la calidad o producir a escala.

Requisitos e instalación

Antes de empezar necesitas:

• Claude Code instalado (desktop app, terminal, VS Code o donde lo uses).
• Node.js 22 o superior: verifícalo con node --version
• FFmpeg: para codificar el MP4 final (brew install ffmpeg en Mac; en Windows según tu sistema).

Instalación recomendada

Crea una carpeta para tu proyecto y ábrela en Claude Code. Ejecuta este comando o díselo directamente a Claude:

npx skills add heygen-com/hyperframes

Hola, por favor instala el skill de HyperFrames en este proyecto.
Ejecuta: npx skills add heygen-com/hyperframes
Cuando termine, reinicia la sesión y confírmame que los slash commands quedaron registrados.

Los slash commands que se registran

• /hyperframes: Autoría de la composición: estructura, timing, captions, transiciones, TTS.
• /hyperframes-cli: Ciclo de trabajo: init, lint, preview, render.
• /hyperframes-media: Pre-procesar assets: TTS, transcripción, quitar fondo.
• /website-to-hyperframes: Convertir una URL completa en un video.
• /gsap: Ayuda con animación: timelines, easing, movimiento.

Tu primer video, paso a paso

Hay tres formas de arrancar:

1. Website a video: le das una URL y HyperFrames arma un comercial completo. Ideal para el primer resultado rápido.
2. Editar tu grabación: tienes un MP4 y quieres captions, overlays, música e imágenes. El caso más útil del día a día.
3. Crear desde cero: describes el video y Claude lo construye completo: títulos, motion graphics, narración y música.

El flujo recomendado

1. Crea la carpeta del proyecto y ábrela en Claude Code. Si editarás un MP4, arrástralo a esa carpeta. Todo es local.
2. Da el primer prompt. Dile qué tienes y qué quieres. Pídele que te haga preguntas antes de empezar.
3. Claude transcribe con Whisper y genera timestamps milimétricos. Sobre esa base sincroniza todo.
4. Se abre HyperFrames Studio con preview en vivo. Si no aparece el enlace, dile "corre mi servidor local".
5. Itera con cambios pequeños y concretos hasta que te guste.
6. Render final: pide "haz el render en alta calidad" o usa el botón de export en el preview.

Usando /hyperframes: tengo un MP4 llamado demo.mp4 en este proyecto. Es una intro que grabé a cámara, en español, formato horizontal 16:9.

Quiero que la editemos. Agrégale:
- Captions automáticos sincronizados con lo que digo
- Un overlay arriba que diga "Editado por Claude Code"
- Música de fondo suave que no tape mi voz
- Un fade a negro al final

Antes de empezar, transcribe el video con Whisper para tener timestamps milimétricos. Si tienes dudas, pregúntame. Y si necesitas algún acceso o API, avísame.

Antes de generar nada con /hyperframes, hazme un storyboard en HTML: lista las escenas con su duración, el copy de cada subtítulo, qué imagen u overlay va y la dirección de plano (zoom, transición). Lo reviso, te corrijo y recién ahí lo construimos. Así no gastamos tokens de más.

Biblioteca de prompts

HyperFrames mapea adjetivos en lenguaje natural a parámetros técnicos del framework. No necesitas saber código: usar la palabra correcta te da el resultado correcto.

Captions y subtítulos

Describe la energía de los subtítulos y Claude elige tipografía, tamaño y animación:

• Hype: Bold pesada, scale-pop, 72-96px
• Corporate: Sans limpia, fade + slide, 56-72px
• Tutorial: Monospace, typewriter, 48-64px
• Storytelling: Serif, fade lento, 44-56px
• Social: Redondeada, bounce, 56-80px

Pon captions estilo hype con scale-pop, palabra por palabra sincronizados con mi voz. Resalta los nombres de marca más grandes y con color de acento, dale bounce a las palabras emotivas y resalta los números distinto. Corrige palabras mal transcritas y asegúrate de que NO se encimen los subtítulos.

Cambia los captions a estilo karaoke: que cada palabra se ilumine al momento exacto en que la digo. Mantén máximo 4-5 palabras en pantalla a la vez para que se lean bien en móvil.

Resaltado a mano (marker highlights)

• highlight: Barrido de marcador sobre frases clave
• circle: Elipse a mano sobre una palabra
• burst: Líneas que irradian para momentos hype
• scribble: Tachón caótico para tachar algo
• sketchout: Recuadro dibujado para callouts

Agrega un marker highlight tipo barrido amarillo sobre la frase "totalmente gratis", encierra "Claude Code" con un círculo dibujado a mano y pon burst lines alrededor de "sin abrir CapCut".

Imágenes con IA dentro del video

Claude puede generar imágenes con IA y montarlas sincronizadas con tu guion. El servicio recomendado es Kie.ai (marketplace por créditos que también incluye Suno para música).

Quiero agregarle imágenes generadas con IA al video. Tú te encargas de generarlas con Kie.ai (te paso la documentación y mi API key). Pasos:
1. Analiza el transcript y decide qué imágenes valen la pena y en qué momento van.
2. Genera un script para crearlas EN PARALELO (todas al mismo tiempo).
3. Insértalas sincronizadas con lo que digo.

Estilo: hand-written, hechas a mano, colores neutros, personajes de palitos. Quiero algo visual que hasta un niño entienda. Nada corporativo. Horizontales, cubriendo toda la pantalla.

Para la escena inicial te doy logo.png (está en el proyecto). Intégralo ahí. Tengo libre el lado izquierdo y el derecho del frame. Si quieres, tómale una captura a ese frame para ver la distribución y colócalo donde encaje sin tapar mi cara.

Colorización y color grading

Como HyperFrames renderiza HTML/CSS, el color grade se aplica con filtros CSS y capas con blend modes. Es como una LUT ligera: rápido, no destructivo y reversible.

Aplícale al clip un color grade cinematográfico teal & orange usando filtros CSS: sube un poco el contraste (~1.1) y la saturación (~1.15), empuja las sombras hacia el cian-azul y los tonos de piel hacia el cálido. Agrega una capa de gradiente sutil con blend mode "teal en sombras / naranja en luces". Cuida que mi piel se vea natural. Muéstrame el antes y el después en preview.

Otros looks disponibles:

• Warm vintage: "grade cálido con grano fino y leve viñeta"
• Clean tech: "grade frío, alto contraste, blancos limpios"
• Moody / cine: "sombras aplastadas, baja saturación, viñeta marcada"
• Pastel soft: "baja el contraste, levanta las sombras, tono pastel"
• Punchy social: "satura fuerte, contraste alto, colores que saltan"
• B&W editorial: "blanco y negro con contraste editorial"

Define una paleta de marca (te paso 2-3 colores) y aplícala de forma consistente: subtítulos, overlays, fondos de imágenes IA y color grade. Que el video se sienta de una sola pieza. Usa variables CSS para los colores así los ajustamos rápido.

Audio: voz, música y efectos

El TTS corre local y gratis con Kokoro (sin API key). Para calidad premium conecta ElevenLabs.

Genera la narración de este guion con TTS local (Kokoro). Usa una voz profesional y cálida, a 1.0x, y sincronízala con las escenas. Deja respiros naturales entre frases.

No me gustó el voiceover gratis. Genera uno nuevo con ElevenLabs (te paso mi API key). Elige una voz que suene familiar y agradable en español, ajusta el timing a las escenas. No hagas el render todavía, solo dámelo en preview para escucharlo primero.

Usa assets/musica.mp3 como música de fondo. Bájale el volumen para que quede por debajo de mi voz (ducking), súbela un poco en la intro y el outro, y haz fade-in al inicio y fade-out al final.

Te doy la carpeta assets/sfx con varios efectos de sonido nombrados por lo que hacen. Analízala y colócalos sincronizados: el "click" cuando aparece una palabra resaltada, un "whoosh" en las transiciones fuertes y un "pop" cuando entra el logo. Que caigan justo en el timestamp, no antes ni después.

Acercamientos, zoom y movimiento

La diferencia entre un video amateur y uno pro suele ser el movimiento. Describe cómo se debe sentir el movimiento y Claude elige el easing correcto.

Vocabulario de movimiento:

• smooth: Desaceleración natural (estándar)
• snappy: Rápido y decidido (energía alta)
• bouncy: Rebota y se asienta (dinámico)
• dramatic: Arranca fuerte, glide largo (énfasis)
• dreamy: Lento y simétrico (cinematográfico)

A todas las imágenes ponles un efecto Ken Burns sutil: alterna zoom-in y zoom-out lento, y un paneo suave de izquierda a derecha. Movimiento dreamy, lento (1-2s). Cuando dos imágenes estén pegadas, haz una transición entre ellas.

En el momento donde digo "totalmente gratis", hazme un punch-in rápido (snappy, 0.2s) sobre mi cara para darle énfasis, y vuelve al plano normal después de la frase. Que se sienta intencional, no brusco.

Agrega transiciones entre todas las escenas (los cortes secos se ven como error). Para las partes informativas usa crossfades calmados; para el reveal final usa un zoom dramático. Máximo 2 tipos para mantener consistencia.

Estilos de video

Un video se ve pro cuando tiene una sola identidad clara. Nombra el estilo en tu primer prompt y todo (tipografía, color, motion, transiciones) se alinea solo:

• Warm grain / analógico: Cálido, grano fino, serif elegante. Para storytelling y lifestyle.
• Minimal Swiss / editorial: Grid limpio, sans neutra, cortes precisos. Para explicar con seriedad.
• High-energy social: Captions hype, scale-pop, SFX, zooms rápidos. Para TikTok / Reels / Shorts.
• Hand-drawn / sketch: Ilustraciones a mano, personajes de palitos. Para explainers accesibles.
• Cold tech / clínico: Frío, alto contraste, monospace. Para producto / SaaS.
• Cinematic / cine: Teal-orange, motion lento, viñeta. Para hero videos y trailers.

El estilo de todo el video es [high-energy social]. Aplícalo de forma consistente: tipografía acorde, captions hype con scale-pop, color grade punchy, transiciones rápidas tipo whip-pan y SFX en los momentos de énfasis. Si algo se sale de ese mood, ajústalo para que todo combine.

Render y exportar

Itera siempre en calidad draft y reserva el high para el final:

• draft: Para iterar rápido (ahorra recursos y tokens)
• standard: Para revisar y pedir feedback
• high: Para la entrega final

npx hyperframes render --output final.mp4

Ya me gustó. Haz el render en alta calidad y descárgamelo. Después genera una variación vertical 9:16 para Reels: transforma el formato, reacomoda los textos y el encuadre para que se vea bien en móvil.

Escalar a producción

El primer video es el más lento. El poder real aparece cuando conviertes un resultado que te encanta en un skill reutilizable: después solo le das el material y él hace todo.

Me encantó cómo quedó esta edición. Crea un skill que capture todo este flujo: transcribir, captions estilo X, generar imágenes hand-drawn, color grade teal-orange, Ken Burns en imágenes, SFX desde mi carpeta, música y fade final. Documenta los pasos para que la próxima vez solo te dé un MP4 nuevo y lo edites igual sin que yo repita nada.

Tengo un nuevo video, clip-02.mp4, en el proyecto. Edítalo con mi skill de edición. Avísame cuando esté en preview.

Checklist antes del primer render final

• Claude Code + Node 22 + FFmpeg instalados; skill de HyperFrames registrado
• MP4 o material dentro de la carpeta del proyecto; nombres claros
• Storyboard aprobado antes de renderizar
• Captions sincronizados, sin encimarse, con resaltados en palabras clave
• Color grade consistente en todas las escenas
• Voz por encima de la música (ducking); SFX en los timestamps correctos
• Movimiento en todo: Ken Burns, punch-ins, máximo 2 tipos de transición
• Un solo estilo de principio a fin
• Render en high + variación de formato si la necesitas
• Skill creado para repetirlo a escala sin repetir instrucciones

Fuentes: documentación oficial de HyperFrames (HeyGen). HyperFrames es open-source (Apache 2.0). Las APIs externas (ElevenLabs, Suno, Kie.ai) son opcionales y de pago.