"Producción de vídeo con Claude Code: El stack de 3 herramientas que uso"

"## Producción de vídeo con Claude Code: El stack de 3 herramientas que uso\n\nEstuve a punto de cerrar la pestaña del walkthrough de Jack Roberts dos veces.\n\nLa miniatura se parecía a todos los demás vídeos del tipo "automaticé mi pipeline de vídeo con IA" que han inundado mi feed desde que HeyGen publicó HyperFrames como código abierto el 17 de abril de 2026. Llevaba tres minutos viéndolo, escéptico, cuando hizo algo que no había visto a nadie más hacer en una demo de vídeo este año: dejó de tratar Claude Code como una única herramienta y empezó a usarlo como la capa de orquestación de todo un sistema de producción. Diseño en un lugar. Animación en otro. Audio en un tercero. Todo gobernado por skills que escribió una vez y reutilizó para siempre.\n\nEse reencuadre fue lo que me hizo dejar de hacer scroll, abrir una nueva ventana de terminal y construir mi propia versión. Y de eso trata este artículo: no una reseña de herramientas, no un resumen apresurado del día de lanzamiento, sino el stack real de tres herramientas con Claude Code para producción de vídeo que uso ahora, lo que hace bien cada capa, dónde falla silenciosamente cada una, y las partes incómodas que Jack pasó por alto y que tuve que aprender en mi propia máquina.\n\n## Por qué "una herramienta lo hace todo" se rompe\n\nCada seis meses, algún nuevo producto promete un único prompt que convierte una grabación en bruto en un vídeo terminado. Algunos incluso funcionan — para la demo. Luego lo intentas con tu material real, con tu marca real, y el resultado parece hecho por alguien que nunca te ha conocido.\n\nLa razón es aburrida y estructural. La producción de vídeo no es un solo trabajo. Son al menos tres trabajos que comparten una línea de tiempo: diseño del sistema visual (cómo se ve tu marca en movimiento), composición y animación (lo que ocurre en pantalla, segundo a segundo) y acondicionamiento de audio (cómo suena la pista de voz cuando el espectador pulsa play). Cada uno de esos trabajos tiene sus propias herramientas, sus propios modos de fallo y su propio techo de calidad. Colapsarlos en un único prompt es la razón por la que tanto vídeo editado con IA parece barato de la misma manera específica.\n\nEl enfoque de Jack fue el primero que vi que trataba cada trabajo como un ciudadano de primera clase. Claude Code Design System para el lenguaje visual. HyperFrames para la capa de composición y animación. Auphonic para la limpieza de audio programática. Claude Code mismo como el director — no la orquesta, el director. Esa distinción importa más de lo que parece, y es la razón más importante por la que la calidad de mi producción mejoró cuando dejé de intentar resolver un vídeo con un único prompt.\n\n## Capa 1: Claude Code Design System — la marca que viaja a todas partes\n\nLa idea de un "sistema de diseño" suele asociarse al trabajo web y de producto. Lo que Anthropic lanzó con el producto Claude Design el 16 de abril de 2026 — junto con el lanzamiento del modelo Opus 4.7 — fue una interfaz de sistema de diseño que se extiende de forma natural a gráficos animados y multimedia.\n\nLa versión que uso vive dentro de Claude Code a través de la aplicación de escritorio Claude Design. Este es el flujo de trabajo que sigo para cada nuevo clúster de contenido:\n\n1. Definir el estilo del contenido en lenguaje llano. Educativo y minimalista. Acentos estilo boceto donde sea útil. Sin fotografías de stock. Una pantalla, un punto, imágenes simples.\n2. Subir los primitivos de marca. Logo, logotipo de texto, conjunto de iconos, dos o tres capturas de referencia de piezas terminadas.\n3. Establecer las preferencias de animación. Duración corta por beat — de cinco a veinte segundos. Texto mínimo en pantalla. Easing lento en entradas, easing rápido en salidas.\n4. Exportar el sistema como ZIP o PDF. El sistema exportado es una especificación portátil que puedo entregar a otra herramienta — o a otro agente — para que renderice nuevos recursos que permanezcan dentro de la marca.\n\nLa primera vez que lo probé, hice que Claude generara tres animaciones cortas — una tarjeta de título, un callout de mid-roll y una tarjeta final — únicamente a partir del sistema exportado. Las tres volvieron visualmente coherentes entre sí. No idénticas. Coherentes. Sin un sistema de diseño compartido, las animaciones generadas por IA parecen hechas por tres personas distintas en tres días distintos. Con el sistema en su lugar, se leen como una sola voz.\n\nEl sistema de diseño que definas al principio se sentirá incorrecto después del primer proyecto real. Está bien. El sistema es una especificación viva, no un contrato. Cada vez que publico una pieza que me gusta, vuelvo y actualizo la exportación antes de la siguiente ejecución. Después de unos cuatro proyectos, el sistema deja de derivar y comienza a acelerar.\n\nSi has leído mi análisis sobre cómo Claude Code automatiza los flujos de trabajo del sistema de diseño con Figma, esta es la misma filosofía extendida al movimiento. El sistema de diseño es donde tu marca se vuelve reutilizable.\n\n## Capa 2: HyperFrames — escribir vídeo como se escribe una página web\n\nHyperFrames es un framework de renderizado de vídeo de código abierto que HeyGen lanzó el 17 de abril de 2026 bajo la licencia Apache 2.0. La propuesta: escribe HTML, CSS y JavaScript. Renderiza vídeo. Construido para agentes de IA.\n\nEjecutas un comando — npx skills add heygen-com/hyperframes — y tu instancia de Claude Code obtiene tres nuevos comandos slash: /hyperframes para crear composiciones, /hyperframes-cli para operaciones de línea de comandos y /gsap para ayuda con animaciones.\n\nLa primera vez que esto me resultó intuitivo fue en una prueba de etiqueta de nombre en tercio inferior. Escribí el prompt: "añade una etiqueta de tercio inferior que diga 'Mejba Ahmed — Software Engineer' en la esquina inferior izquierda, alineada con la tipografía de mi sistema de diseño, deslizándose desde la izquierda a los 0,5 segundos, manteniéndose 4 segundos, deslizándose hacia fuera." Claude Code escribió una composición que importó los tokens del sistema de diseño, colocó el texto con el peso correcto y registró una timeline de GSAP. Un render después, tenía el overlay. Tiempo total: unos noventa segundos.\n\nEl framework usa un patrón Frame Adapter — GSAP, Lottie, CSS o Three.js. Las timelines de GSAP deben crearse con { paused: true } y registrarse en window.__timelines, para que el renderizador sepa cuándo se muestra cada fotograma. Esa restricción hace que la salida sea determinista. Cada render es idéntico al pixel.\n\nAdvertencias:\n- Límite de resolución. Los renders están limitados a 1080p. El 4K aún no está soportado.\n- Ejecución local. Tu máquina hace el trabajo de renderizado. Prueba con tu propio hardware.\n- El audio es el punto débil por defecto. Para una buena pista de voz, necesitas la tercera capa.\n\nPara el análisis técnico completo de la pipeline de vídeo, mi entrada anterior sobre cómo construir un flujo de trabajo de edición de vídeo con Claude Code profundiza más en el lado de Remotion y Whisper.\n\n## Capa 3: Auphonic — el arreglo de audio que nadie ve pero todos escuchan\n\nSi te llevas una sola cosa de este artículo: los espectadores perdonan los visuales mediocres. No perdonan el mal audio. Un vídeo con audio limpio y visuales de aficionado parece un documental indie con presupuesto ajustado. Un vídeo con visuales excelentes y mal audio parece poco profesional, sin más.\n\nAuphonic hace postproducción de audio automática: normalización de volumen, nivelación, reducción de ruido, filtrado, reconocimiento de voz. Su API REST tiene cobertura completa de OpenAPI 3.0.3. Lo integré en Claude Code para que después de que HyperFrames produzca el MP4 renderizado, una segunda skill enrute el audio a través de Auphonic con un preset guardado.\n\nMi preset: objetivo de volumen de -16 LUFS para entrega web, reducción de ruido moderada, compresor suave. Guardado como "voiceover-web-16" — la actualización de la API de 2026 permite referenciar presets por nombre en lugar de UUID, lo que hace que la skill sea portable.\n\nLa Simple API: un único request HTTP multipart — subir el archivo, establecer metadatos, referenciar un preset, iniciar la producción. Eso es lo que uso.\n\nEl resultado: mi pista de voz suena consistente en cada vídeo que publico. No "mezclado en estudio" — pero consistente suficiente para que un espectador nunca sea sacado del contenido por problemas de calidad de audio.\n\n## Las skills son el verdadero foso defensivo\n\nLas herramientas son commodities. HyperFrames es código abierto. Claude Design está disponible para cualquiera con una suscripción a Claude. Auphonic tiene una API pública. Ninguna de ellas es difícil de instalar.\n\nEl apalancamiento está en la skill que escribes una vez y usas para siempre.\n\nCuando publiqué mi primera pipeline, invertí cuatro horas. El segundo vídeo llevó dos horas. El tercero, cuarenta minutos. El quinto, unos quince minutos. Cada paso que hice bien una vez lo envolví en una skill de Claude Code.\n\nMi biblioteca actual de skills de producción de vídeo:\n\n- brand-motion-system — carga el sistema de diseño exportado y lo aplica a cualquier composición de HyperFrames\n- lower-third-standard — crea el overlay de tercio inferior que uso en el 80 % de mis clips\n- caption-sync-srt — toma un archivo SRT y renderiza subtítulos con la marca aplicada\n- audio-cleanup-voiceover — enruta el audio a través de Auphonic con el preset "voiceover-web-16"\n- thumbnail-from-video — extrae un fotograma y genera variantes de miniatura\n\nCada skill tiene unas cuarenta líneas de instrucción más ejemplos. Esa es la producción real de este stack — no los vídeos individuales, sino el activo compuesto de las skills en sí mismas.\n\nSi has leído mi entrada sobre por qué las skills de Claude Code son el verdadero punto de apalancamiento, esta es la versión de pipeline de producción de ese argumento.\n\n## Lo que hice mal la primera vez\n\nEmpecé demasiado en grande. Mi primer intento fue un explicativo de tres minutos con cinco segmentos animados. Me llevó toda una tarde depurarlo. Primero publica un clip de quince segundos. Haz que la pipeline completa funcione con un recurso trivial. Luego escala.\n\nHice over-prompting a HyperFrames. Las primeras composiciones que pedí eran demasiado elaboradas. La regla práctica: una pantalla, un punto, una animación principal.\n\nTraté Opus 4.7 como el modelo siempre correcto. Para el trabajo pesado de escribir una nueva composición desde cero, Opus 4.7 vale la pena. Para ediciones iterativas, un modelo más ligero es más rápido y produce una salida idéntica.\n\nMe salté el paso de previsualización. HyperFrames viene con npx hyperframes preview. Previsualiza primero. Renderiza después. Ese hábito me ahorró horas.\n\n## La comparación honesta — lo que este stack no hace\n\nEste stack es excelente para: contenido educativo de formato corto, vídeo para redes sociales, overlays de talking-head y subtítulos, vídeos promocionales, walkthroughs de código, animaciones de PDF, piezas de texto cinético.\n\nEste stack no es una buena opción para: trabajo narrativo cinematográfico, videoclips musicales, entrega en 4K (HyperFrames está limitado a 1080p), proyectos con mucho material de archivo donde los cortes son decisiones de criterio sobre energía y ritmo. Esos trabajos pertenecen a DaVinci Resolve o Premiere.\n\n## Una primera semana realista\n\nDía uno. Instala HyperFrames con npx skills add heygen-com/hyperframes. Ejecuta npx hyperframes init. Previsualiza la composición predeterminada. Renderízala. Simplemente verifica que las herramientas funcionan.\n\nDía dos. Exporta un sistema de diseño mínimo desde Claude Design — solo tu logo, dos colores, un par de tipografías. Un sistema de diseño malo es mejor que ninguno.\n\nDía tres. Construye un overlay de tercio inferior de principio a fin con tu sistema de marca aplicado. Publica el clip en algún lugar. Cierra el ciclo completo una vez.\n\nDía cuatro. Configura Auphonic, guarda un preset, conecta el paso de audio. Compara las versiones en bruto y limpia una al lado de la otra.\n\nDía cinco. Envuelve todo el flujo en una skill de Claude Code. Dale un nombre. Guárdala. Úsala en un nuevo clip.\n\n## Preguntas frecuentes\n\n### ¿Necesito saber programar para usar HyperFrames con Claude Code?\nNo — Claude Code escribe el HTML, CSS y JavaScript por ti a partir de prompts en lenguaje natural. Necesitas familiaridad básica con la línea de comandos para npx hyperframes init, preview y render. Para el código de animación en sí, Claude Code se encarga.\n\n### ¿Puedo usar este stack para entrega de vídeo en 4K?\nHoy no. HyperFrames actualmente está limitado a 1080p. Renderiza en HyperFrames y combínalo en un NLE tradicional para masters en 4K.\n\n### ¿Qué modelo de Claude debería usar — Opus 4.7 u Opus 4.6?\nOpus 4.7 para trabajo creativo pesado escribiendo una nueva escena desde cero. Opus 4.6 para ediciones iterativas — más rápido y más económico sin pérdida de calidad en trabajo de precisión.\n\n### ¿Cómo se compara Auphonic con la limpieza de audio manual?\nAuphonic reemplaza sentarse en un DAW aplicando la misma compresión, ecualización y objetivo de volumen a cada vídeo que publicas. Para trabajo de voz en off para web y redes sociales, produce una salida consistente cada vez.\n\n## Trabajemos juntos\n\n¿Quieres construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudarte.\n\n* Fiverr (desarrollos personalizados e integraciones): fiverr.com/s/EgxYmWD\n* Portfolio: mejba.me\n* Ramlit Limited (soluciones empresariales): ramlit.com\n* ColorPark (diseño y branding): colorpark.io\n* xCyberSecurity (servicios de seguridad): xcybersecurity.io"