{"id":3420,"date":"2026-11-10T18:15:23","date_gmt":"2026-11-10T18:15:23","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=3420"},"modified":"2026-11-10T18:15:23","modified_gmt":"2026-11-10T18:15:23","slug":"prompt-video-animado-hyperframes","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/prompt-video-animado-hyperframes\/","title":{"rendered":"Prob\u00e9 Fable 5.2 para crear v\u00eddeos\u2026 \u00bfmejor que Opus 5.5?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Este es el <strong>prompt para crear v\u00eddeos animados con IA<\/strong> que us\u00e9 para poner a prueba a Fable 5.2, el nuevo modelo de Anthropic, contra Opus 5.5. Les pas\u00e9 mi voz en off de un patrocinio con Hostinger y les ped\u00ed un comercial animado desde cero, con motion graphics y efectos de sonido, usando Hyperframes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes el prompt completo, bloque por bloque, con el porqu\u00e9 de cada regla. Tambi\u00e9n te cuento cu\u00e1ntos cr\u00e9ditos gast\u00f3 cada modelo, cu\u00e1l me gust\u00f3 m\u00e1s y el truco para gastar menos.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=nmK30Lv0m9w\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe0a7de2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.youtube.com\/watch?v=nmK30Lv0m9w\" target=\"_blank\" rel=\"noreferrer noopener\">Ver el video en YouTube<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">En este tutorial<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Resultado:<\/strong> un comercial animado de Hostinger en MP4, creado desde cero por la IA a partir de tu voz<\/li>\n\n\n\n<li><strong>Herramientas:<\/strong> Claude Code, la skill de Hyperframes (HTML, CSS y JavaScript) y Fable 5.2 u Opus 5.5<\/li>\n\n\n\n<li><strong>Nivel:<\/strong> principiante: no escribes c\u00f3digo, escribes el prompt<\/li>\n\n\n\n<li><a href=\"#codigo-fuente\">Ir directo al prompt completo<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 vas a construir<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un comercial de unos 53 segundos para el Plan Unlimited de Hostinger: la IA escucha tu narraci\u00f3n, inventa la historia visual y entrega el MP4 con animaciones y efectos de sonido sincronizados. Lanc\u00e9 el mismo prompt con los dos modelos y este fue el resultado:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Opus 5.5:<\/strong> la primera versi\u00f3n gast\u00f3 el 12\u201313 % de la sesi\u00f3n. No me gust\u00f3 tanto, as\u00ed que le ped\u00ed m\u00e1s dinamismo sin cambiar el concepto, y con esa segunda iteraci\u00f3n lleg\u00f3 al <strong>25 %<\/strong> de mi sesi\u00f3n de 5 horas (plan Pro de 20 d\u00f3lares).<\/li>\n\n\n\n<li><strong>Fable 5.2:<\/strong> el primer intento ya fue el definitivo y me encant\u00f3. Gast\u00f3 el <strong>30\u201335 %<\/strong> de la sesi\u00f3n, que es considerable, pero como Opus necesit\u00f3 dos iteraciones y algunas correcciones, al final el gasto es parecido.<\/li>\n\n\n\n<li><strong>Lo \u00fanico que a\u00f1ad\u00ed a mano:<\/strong> la m\u00fasica de fondo, con una sola petici\u00f3n al final y la misma canci\u00f3n para los dos.<\/li>\n\n\n\n<li><strong>Esfuerzo:<\/strong> ambos modelos trabajaron en esfuerzo medio.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Mi elecci\u00f3n es Fable 5.2, aunque con Opus 5.5 tambi\u00e9n se pueden lograr resultados similares con m\u00e1s ajustes. En el v\u00eddeo puedes ver los dos comerciales completos y, al final, la primera versi\u00f3n de Opus para compararla.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 necesitas<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Claude Code con un plan de Claude (yo uso el plan Pro, de 20 d\u00f3lares al mes)<\/li>\n\n\n\n<li>La skill de <strong>Hyperframes<\/strong> instalada en Claude Code (es gratuita)<\/li>\n\n\n\n<li>Tu narraci\u00f3n grabada en un archivo de audio: ser\u00e1 el guion del v\u00eddeo<\/li>\n\n\n\n<li>El logo de la marca en SVG y su paleta de colores, si quieres que respete una identidad<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Paso a paso<\/h2>\n\n\n\n<div class=\"wp-block-group acg-steps is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Instala Hyperframes como skill<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hyperframes es la herramienta que usamos para crear este v\u00eddeo y es totalmente gratuita. Permite crear v\u00eddeos animados con c\u00f3digo, precisamente con <strong>HTML, CSS y JavaScript<\/strong>: cada escena es una p\u00e1gina que se anima y despu\u00e9s se renderiza a MP4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En Claude Code se instala como skill y se llama directamente escribiendo su nombre. Si prefieres React, la alternativa es <strong>Remotion<\/strong>: tambi\u00e9n puedes pedirle a Claude Code que use su skill para crear v\u00eddeos animados.<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>\/hyperframes<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Define el objetivo: un MP4 terminado<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El prompt empieza con una frase que parece obvia, pero no lo es: quiero un <strong>MP4 terminado<\/strong>, no un storyboard, c\u00f3digo sin ejecutar ni una vista previa HTML. Sin esta l\u00ednea, muchos modelos se paran a mitad y te ense\u00f1an un plan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s vienen nueve bloques. Cada uno resuelve un problema concreto que me encontr\u00e9 creando v\u00eddeos con IA.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code># Comercial animado de Hostinger\n\nCrea y renderiza un comercial de Hostinger con motion graphics usando\nHyperframes, a partir del audio de narraci\u00f3n que adjunto. Necesito un\nMP4 terminado, no solo un storyboard, c\u00f3digo sin ejecutar o una vista\nprevia HTML.\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 1: herramientas y contexto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El primer bloque es el m\u00e1s importante para que la comparaci\u00f3n sea justa. Le dije que la <strong>\u00fanica skill autorizada era Hyperframes<\/strong>. Yo tengo skills propias que ya crean motion graphics y no quer\u00eda que se mezclaran con el resultado: si Fable u Opus las usaban, ya no estar\u00eda midiendo al modelo, sino a mis plantillas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por la misma raz\u00f3n le prohib\u00ed leer la memoria, los archivos <code>CLAUDE.md<\/code> o <code>AGENTS.md<\/code> y los proyectos anteriores. As\u00ed los dos modelos empiezan desde cero, en una sesi\u00f3n nueva y con las mismas reglas, aunque deleguen trabajo a subagentes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 1. Herramientas y contexto\n\n- Trabaja en una sesi\u00f3n nueva, dentro de la carpeta `hostinger` de mi\n  Escritorio.\n- La \u00fanica skill autorizada es Hyperframes. No consultes ni utilices mis\n  otras skills, plantillas personales, agentes personalizados o\n  proyectos anteriores.\n- No consultes ni actualices memoria persistente, recuerdos de otras\n  conversaciones, auto-memory de Claude, archivos `MEMORY.md`,\n  `CLAUDE.md`, `CLAUDE.local.md`, `AGENTS.md` ni directorios de memoria\n  del usuario.\n- Puedes utilizar herramientas de archivos, terminal, c\u00f3digo, an\u00e1lisis\n  de audio y navegador, adem\u00e1s de la documentaci\u00f3n de Hyperframes.\n- Puedes delegar tareas a subagentes. Decide c\u00f3mo organizar el trabajo;\n  todos deben respetar las mismas restricciones de skills y memoria.\n- No explores carpetas personales ajenas a este encargo, no cambies\n  configuraciones globales ni elimines memorias. Si recibiste contexto\n  personal precargado, decl\u00e1ralo sin afirmar que lo has eliminado.\n  Respeta las instrucciones de mayor prioridad.\n- Usa la versi\u00f3n disponible de Hyperframes y su documentaci\u00f3n\n  correspondiente. Si no est\u00e1 disponible, informa del bloqueo; no\n  inventes su API ni sustituyas el framework.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 2: la narraci\u00f3n manda<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El v\u00eddeo se basa totalmente en el audio que grab\u00e9. Ese audio es el guion definitivo: la IA no lo puede reescribir, recortar, acelerar ni sustituir por una voz generada. Lo que s\u00ed tiene que hacer es transcribirlo con tiempos y organizar todas las animaciones alrededor de la voz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n le di el logo de Hostinger en SVG, con libertad para crear ilustraciones, iconos o interfaces propias. Y una regla que evita sustos: si usa un recurso externo, tiene que comprobar y documentar su licencia.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 2. Narraci\u00f3n y recursos\n\nUtiliza el audio adjunto. Si no puedes acceder a \u00e9l, p\u00eddelo antes de\ncomenzar; no generes una voz de reemplazo.\n\nMide su duraci\u00f3n y prepara una transcripci\u00f3n con tiempos. La narraci\u00f3n\nes el guion definitivo: no la reescribas, recortes, reordenes, aceleres\nni sustituyas. Puedes ajustar su nivel de reproducci\u00f3n sin cambiar su\ncontenido.\n\nLa duraci\u00f3n del v\u00eddeo debe coincidir con la del audio. Organiza las\nanimaciones alrededor de la voz. Si una palabra importante no se\nentiende, ind\u00edcalo en lugar de inventarla.\n\nTienes disponible un logo de Hostinger en:\n\n`assets\/logos\/hostinger.svg`\n\nPuedes utilizarlo como parte de tu propuesta. El logo no limita los\nrecursos visuales que puedes emplear: tienes libertad para crear\nilustraciones, iconos, objetos, interfaces y otros elementos, o\nincorporar recursos adicionales cuando aporten valor. Decide qu\u00e9\nnecesita tu concepto.\n\nSi incorporas recursos externos, verifica y documenta su procedencia y\npermiso de uso; no asumas que una imagen encontrada en internet est\u00e1\nautorizada. Conserva las proporciones y trazados del logo cuando lo\nutilices.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 3: la direcci\u00f3n de arte<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed no dej\u00e9 nada al azar. Investigu\u00e9 la paleta de colores de Hostinger y se la pas\u00e9 en el prompt, porque quer\u00eda un resultado con su identidad: fondo <code>#F5F6FF<\/code>, texto <code>#251951<\/code> y el morado <code>#673DE6<\/code> como acento, con DM Sans como tipograf\u00eda.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lo m\u00e1s \u00fatil de este bloque es lo que <strong>no<\/strong> quiero: que parezca una landing page que se desplaza, una presentaci\u00f3n de diapositivas o tarjetas repetidas. Decirle a la IA qu\u00e9 evitar ahorra muchas iteraciones.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 3. Direcci\u00f3n de arte: Claro editorial\n\nBusca un lenguaje visual claro y explicativo: fondos claros, composici\u00f3n\neditorial, jerarqu\u00eda precisa y movimiento que ayude a entender.\n\n### Paleta\n\n- Fondo: `#F5F6FF`\n- Texto principal: `#251951`\n- Acento de marca: `#673DE6`\n- Superficies secundarias: `#D9DBFF`\n\n### Tipograf\u00eda\n\nUtiliza DM Sans, la familia observada en los estilos del sitio de\nHostinger. Para este v\u00eddeo, usa peso 400 en textos y 600\u2013700 en t\u00edtulos.\nSi no est\u00e1 disponible, utiliza una sans serif de respaldo e ind\u00edcalo.\n\n### Acabado\n\nUsa espacios amplios, bordes discretos y sombras suaves cuando ayuden a\nseparar planos. Decide c\u00f3mo combinar tipograf\u00eda, ilustraciones, objetos\ne interfaces de acuerdo con tu concepto.\n\nEl resultado debe sentirse como un v\u00eddeo dise\u00f1ado y animado, no una\nlanding page que se desplaza, una presentaci\u00f3n de diapositivas o una\nplantilla de tarjetas repetidas.\n\nEvita efectos decorativos sin intenci\u00f3n, zooms constantes, texto\nexcesivo y movimiento simult\u00e1neo que impida comprender la escena. Mant\u00e9n\nla identidad clara y editorial; no la conviertas en una est\u00e9tica oscura\no de ne\u00f3n.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 4: libertad creativa<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En este bloque le di la libertad creativa al modelo: Fable y Opus ten\u00edan que imaginar el concepto, la historia visual y el storyboard. No hay escenas predefinidas ni tiene que pedirme aprobaci\u00f3n a mitad de camino.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La libertad tiene l\u00edmites claros: no puede a\u00f1adir precios, descuentos ni promesas, ni presentar una interfaz inventada como si fuera una captura real. Y el cierre debe mostrar la URL y el cup\u00f3n legibles hasta el \u00faltimo fotograma.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 4. Concepto e historia visual\n\nInventa t\u00fa el concepto, la historia visual y el storyboard a partir de\nla narraci\u00f3n.\n\nTienes libertad para decidir las met\u00e1foras, los recursos, las\ncomposiciones, el n\u00famero de escenas, las transiciones, el ritmo y la\nmanera de conectar las ideas.\n\nNo hay una secuencia de escenas predefinida. No te limites a ilustrar\nliteralmente cada frase ni a mostrar el nombre de cada funci\u00f3n. Busca\nuna propuesta coherente, original y comprensible que comunique los\nbeneficios del audio.\n\nPlanifica la historia y despu\u00e9s implem\u00e9ntala. No te detengas en\npresentar un storyboard ni esperes aprobaci\u00f3n intermedia, salvo que\nfalte un insumo imprescindible. Resume el concepto elegido en el reporte\nfinal.\n\n### Contenido que debes respetar\n\n- No a\u00f1adas ni cambies prestaciones, precios, descuentos o promesas.\n- Si utilizas r\u00f3tulos, escribe \u00abSitios web ilimitados\u00bb, no \u00abrecursos\n  ilimitados\u00bb.\n- Si muestras el l\u00edmite de Node.js, utiliza \u00abHasta 5 apps Node.js\u00bb.\n- No presentes una interfaz ilustrativa como si fuera una captura real\n  del producto.\n- El cierre debe mostrar Hostinger.com\/alexcg y Cup\u00f3n: alexcg, legibles\n  durante la frase final y hasta el \u00faltimo fotograma. Decide su\n  composici\u00f3n y c\u00f3mo integrar la marca.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 5: motion graphics con intenci\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Le ped\u00ed que los gr\u00e1ficos animados fueran parte de la historia, es decir, que complementaran lo que digo en vez de repetirlo. Por eso la regla de \u00abno conviertas la narraci\u00f3n en un karaoke\u00bb: solo t\u00edtulos y datos esenciales, y que los gr\u00e1ficos cuenten el resto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El resto del bloque cuida el movimiento: sincronizar los momentos importantes con la palabra justa, curvas de aceleraci\u00f3n cuidadas y alternar movimiento con pausas para que cada escena se entienda.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 5. Motion graphics\n\nElige las t\u00e9cnicas de animaci\u00f3n que mejor sirvan a tu concepto. Puedes\nutilizar transformaciones, revelaciones, movimiento tipogr\u00e1fico,\nprofundidad, desplazamientos y transiciones entre objetos.\n\n- Sincroniza los momentos importantes con la palabra o idea\n  correspondiente.\n- Utiliza aceleraciones y desaceleraciones cuidadas, evitando\n  movimientos mec\u00e1nicos o rebotes indiscriminados.\n- Busca continuidad entre escenas cuando tenga sentido, sin repetir una\n  \u00fanica transici\u00f3n durante todo el v\u00eddeo.\n- Alterna movimiento y estabilidad para que las composiciones se puedan\n  comprender.\n- No conviertas la narraci\u00f3n en un karaoke. Muestra t\u00edtulos y datos\n  esenciales; deja que los gr\u00e1ficos cuenten el resto.\n- No deformes los elementos de marca para conseguir una transici\u00f3n.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 6: efectos de sonido sintetizados<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los efectos de sonido hacen que el v\u00eddeo sea mucho m\u00e1s din\u00e1mico. Para no tener problemas de licencias, le ped\u00ed que los creara \u00e9l mismo con s\u00edntesis de audio por c\u00f3digo y que guardara tanto los WAV como el c\u00f3digo que los genera.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sin m\u00fasica de fondo: la voz siempre tiene que o\u00edrse mejor que todo lo dem\u00e1s. La m\u00fasica la a\u00f1ad\u00ed yo al final, con una sola petici\u00f3n, igual para los dos modelos.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 6. Efectos de sonido\n\nCrea SFX originales mediante s\u00edntesis de audio por c\u00f3digo. Guarda los\nWAV y el c\u00f3digo que los genera en `proyecto\/audio\/sfx\/`.\n\nDecide qu\u00e9 sonidos necesita la propuesta: acciones de interfaz,\ndesplazamientos, transformaciones, acentos o confirmaciones. \u00dasalos con\nintenci\u00f3n, no en cada palabra.\n\nNo a\u00f1adas m\u00fasica de fondo. La voz debe ser siempre lo m\u00e1s f\u00e1cil de\nescuchar. Ajusta niveles y envolventes para evitar saturaci\u00f3n, clics\naccidentales y cortes bruscos.\n\nComprueba que los efectos est\u00e1n presentes y sincronizados en el MP4\nexportado. Documenta que fueron sintetizados para este v\u00eddeo; no\npresentes archivos ajenos como \u00absin copyright\u00bb.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 7: implementaci\u00f3n y formato<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Este bloque fija el formato de entrega: 1920 \u00d7 1080 a 30 fps, MP4 H.264 con audio AAC. Tambi\u00e9n deja claro que la composici\u00f3n se hace con Hyperframes y que FFmpeg solo sirve de apoyo, para que el modelo no se salte el framework montando el v\u00eddeo con otra herramienta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al final va el texto legal del plan, que tiene que aparecer discreto pero legible sin tapar el cierre.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 7. Implementaci\u00f3n y formato\n\n- Implementa la composici\u00f3n y su l\u00ednea de tiempo en Hyperframes, y\n  renderiza con Hyperframes.\n- Puedes usar FFmpeg y otras utilidades como apoyo para an\u00e1lisis,\n  s\u00edntesis, codificaci\u00f3n y validaci\u00f3n, no para sustituir la composici\u00f3n\n  por un montaje hecho en otro framework.\n- Entrega horizontal 1920 \u00d7 1080, 30 fps, MP4 H.264 con audio AAC.\n- Conserva los recursos necesarios y registra las dependencias para\n  reproducir el render. No dependas de descargas durante la exportaci\u00f3n\n  ni del reloj real para controlar las animaciones.\n- Organiza los recursos adicionales y archivos de trabajo sin\n  sobrescribir la narraci\u00f3n ni el logo originales.\n- A\u00f1ade de manera discreta pero legible, sin cubrir el cierre:\n\n&gt; Sitios sujetos a uso razonable. Node.js: hasta 5 apps. IA sujeta a\n  cr\u00e9ditos y condiciones del plan.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 8: los entregables<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pedir entregables concretos te permite revisar el trabajo sin abrir el c\u00f3digo. Adem\u00e1s del MP4, le ped\u00ed el proyecto editable, un <code>timeline.json<\/code> con escenas, tiempos y sonidos, y un <code>REPORTE.md<\/code> con el concepto, la versi\u00f3n de Hyperframes, el comando real de render y las skills que us\u00f3.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El reporte es la prueba de que respet\u00f3 las reglas del bloque 1: ah\u00ed tiene que declarar cualquier contexto precargado.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 8. Entregables\n\n1. `resultado-hostinger.mp4`: v\u00eddeo final con narraci\u00f3n y efectos de\n   sonido.\n2. `proyecto\/`: fuentes editables, composici\u00f3n de Hyperframes,\n   dependencias y recursos necesarios para reproducir el render.\n3. `timeline.json`: escenas, tiempos, fragmentos de narraci\u00f3n y eventos\n   de sonido.\n4. `REPORTE.md`: concepto elegido, versi\u00f3n de Hyperframes, comando real\n   de render, verificaciones, procedencia de recursos adicionales,\n   limitaciones, skills y subagentes utilizados, y cualquier contexto\n   persistente precargado.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bloque 9: verificaci\u00f3n obligatoria<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El \u00faltimo bloque obliga al modelo a ver su propio v\u00eddeo antes de entregarlo: el principio, la mitad, el cierre y cada cambio de escena. Tiene que corregir pantallas vac\u00edas, textos cortados o efectos demasiado fuertes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n le pido comprobar con herramientas la resoluci\u00f3n, la duraci\u00f3n, los fps y el audio, y que la URL y el cup\u00f3n aparezcan exactamente como se los di. Con esto se evitan la mayor\u00eda de errores que normalmente tendr\u00edas que corregir t\u00fa.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code>## 9. Verificaci\u00f3n obligatoria\n\nRenderiza, abre y revisa el MP4. Comprueba el principio, la mitad, el\ncierre y cada cambio de escena.\n\nCorrige pantallas vac\u00edas, recursos faltantes, textos cortados o\nilegibles, superposiciones, audio truncado, efectos demasiado fuertes y\nerrores de sincronizaci\u00f3n o codificaci\u00f3n.\n\nComprueba con herramientas los metadatos reales de resoluci\u00f3n, duraci\u00f3n,\nfps y pistas de audio. Confirma que Hostinger.com\/alexcg y alexcg\naparecen exactamente como se proporcionaron.<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Consejo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si quieres gastar menos cr\u00e9ditos, usa a Fable 5.2 en <strong>modo plan<\/strong> para que dise\u00f1e el concepto y el storyboard, y despu\u00e9s deja que Sonnet u Opus codifiquen el v\u00eddeo. Aprovechas la creatividad de Fable sin pagarla en cada l\u00ednea de c\u00f3digo.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"codigo-fuente\">C\u00f3digo fuente<\/h2>\n\n\n\n<div class=\"wp-block-group acg-download is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">En este proyecto el \u00abc\u00f3digo\u00bb es el prompt. Aqu\u00ed lo tienes completo para copiarlo y pegarlo en Claude Code. Cambia el audio, el logo y la paleta por los de tu marca, y el cierre por tu propio enlace.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markdown\"><code># Comercial animado de Hostinger\n\nCrea y renderiza un comercial de Hostinger con motion graphics usando\nHyperframes, a partir del audio de narraci\u00f3n que adjunto. Necesito un\nMP4 terminado, no solo un storyboard, c\u00f3digo sin ejecutar o una vista\nprevia HTML.\n\n## 1. Herramientas y contexto\n\n- Trabaja en una sesi\u00f3n nueva, dentro de la carpeta `hostinger` de mi\n  Escritorio.\n- La \u00fanica skill autorizada es Hyperframes. No consultes ni utilices mis\n  otras skills, plantillas personales, agentes personalizados o\n  proyectos anteriores.\n- No consultes ni actualices memoria persistente, recuerdos de otras\n  conversaciones, auto-memory de Claude, archivos `MEMORY.md`,\n  `CLAUDE.md`, `CLAUDE.local.md`, `AGENTS.md` ni directorios de memoria\n  del usuario.\n- Puedes utilizar herramientas de archivos, terminal, c\u00f3digo, an\u00e1lisis\n  de audio y navegador, adem\u00e1s de la documentaci\u00f3n de Hyperframes.\n- Puedes delegar tareas a subagentes. Decide c\u00f3mo organizar el trabajo;\n  todos deben respetar las mismas restricciones de skills y memoria.\n- No explores carpetas personales ajenas a este encargo, no cambies\n  configuraciones globales ni elimines memorias. Si recibiste contexto\n  personal precargado, decl\u00e1ralo sin afirmar que lo has eliminado.\n  Respeta las instrucciones de mayor prioridad.\n- Usa la versi\u00f3n disponible de Hyperframes y su documentaci\u00f3n\n  correspondiente. Si no est\u00e1 disponible, informa del bloqueo; no\n  inventes su API ni sustituyas el framework.\n\n## 2. Narraci\u00f3n y recursos\n\nUtiliza el audio adjunto. Si no puedes acceder a \u00e9l, p\u00eddelo antes de\ncomenzar; no generes una voz de reemplazo.\n\nMide su duraci\u00f3n y prepara una transcripci\u00f3n con tiempos. La narraci\u00f3n\nes el guion definitivo: no la reescribas, recortes, reordenes, aceleres\nni sustituyas. Puedes ajustar su nivel de reproducci\u00f3n sin cambiar su\ncontenido.\n\nLa duraci\u00f3n del v\u00eddeo debe coincidir con la del audio. Organiza las\nanimaciones alrededor de la voz. Si una palabra importante no se\nentiende, ind\u00edcalo en lugar de inventarla.\n\nTienes disponible un logo de Hostinger en:\n\n`assets\/logos\/hostinger.svg`\n\nPuedes utilizarlo como parte de tu propuesta. El logo no limita los\nrecursos visuales que puedes emplear: tienes libertad para crear\nilustraciones, iconos, objetos, interfaces y otros elementos, o\nincorporar recursos adicionales cuando aporten valor. Decide qu\u00e9\nnecesita tu concepto.\n\nSi incorporas recursos externos, verifica y documenta su procedencia y\npermiso de uso; no asumas que una imagen encontrada en internet est\u00e1\nautorizada. Conserva las proporciones y trazados del logo cuando lo\nutilices.\n\n## 3. Direcci\u00f3n de arte: Claro editorial\n\nBusca un lenguaje visual claro y explicativo: fondos claros, composici\u00f3n\neditorial, jerarqu\u00eda precisa y movimiento que ayude a entender.\n\n### Paleta\n\n- Fondo: `#F5F6FF`\n- Texto principal: `#251951`\n- Acento de marca: `#673DE6`\n- Superficies secundarias: `#D9DBFF`\n\n### Tipograf\u00eda\n\nUtiliza DM Sans, la familia observada en los estilos del sitio de\nHostinger. Para este v\u00eddeo, usa peso 400 en textos y 600\u2013700 en t\u00edtulos.\nSi no est\u00e1 disponible, utiliza una sans serif de respaldo e ind\u00edcalo.\n\n### Acabado\n\nUsa espacios amplios, bordes discretos y sombras suaves cuando ayuden a\nseparar planos. Decide c\u00f3mo combinar tipograf\u00eda, ilustraciones, objetos\ne interfaces de acuerdo con tu concepto.\n\nEl resultado debe sentirse como un v\u00eddeo dise\u00f1ado y animado, no una\nlanding page que se desplaza, una presentaci\u00f3n de diapositivas o una\nplantilla de tarjetas repetidas.\n\nEvita efectos decorativos sin intenci\u00f3n, zooms constantes, texto\nexcesivo y movimiento simult\u00e1neo que impida comprender la escena. Mant\u00e9n\nla identidad clara y editorial; no la conviertas en una est\u00e9tica oscura\no de ne\u00f3n.\n\n## 4. Concepto e historia visual\n\nInventa t\u00fa el concepto, la historia visual y el storyboard a partir de\nla narraci\u00f3n.\n\nTienes libertad para decidir las met\u00e1foras, los recursos, las\ncomposiciones, el n\u00famero de escenas, las transiciones, el ritmo y la\nmanera de conectar las ideas.\n\nNo hay una secuencia de escenas predefinida. No te limites a ilustrar\nliteralmente cada frase ni a mostrar el nombre de cada funci\u00f3n. Busca\nuna propuesta coherente, original y comprensible que comunique los\nbeneficios del audio.\n\nPlanifica la historia y despu\u00e9s implem\u00e9ntala. No te detengas en\npresentar un storyboard ni esperes aprobaci\u00f3n intermedia, salvo que\nfalte un insumo imprescindible. Resume el concepto elegido en el reporte\nfinal.\n\n### Contenido que debes respetar\n\n- No a\u00f1adas ni cambies prestaciones, precios, descuentos o promesas.\n- Si utilizas r\u00f3tulos, escribe \u00abSitios web ilimitados\u00bb, no \u00abrecursos\n  ilimitados\u00bb.\n- Si muestras el l\u00edmite de Node.js, utiliza \u00abHasta 5 apps Node.js\u00bb.\n- No presentes una interfaz ilustrativa como si fuera una captura real\n  del producto.\n- El cierre debe mostrar Hostinger.com\/alexcg y Cup\u00f3n: alexcg, legibles\n  durante la frase final y hasta el \u00faltimo fotograma. Decide su\n  composici\u00f3n y c\u00f3mo integrar la marca.\n\n## 5. Motion graphics\n\nElige las t\u00e9cnicas de animaci\u00f3n que mejor sirvan a tu concepto. Puedes\nutilizar transformaciones, revelaciones, movimiento tipogr\u00e1fico,\nprofundidad, desplazamientos y transiciones entre objetos.\n\n- Sincroniza los momentos importantes con la palabra o idea\n  correspondiente.\n- Utiliza aceleraciones y desaceleraciones cuidadas, evitando\n  movimientos mec\u00e1nicos o rebotes indiscriminados.\n- Busca continuidad entre escenas cuando tenga sentido, sin repetir una\n  \u00fanica transici\u00f3n durante todo el v\u00eddeo.\n- Alterna movimiento y estabilidad para que las composiciones se puedan\n  comprender.\n- No conviertas la narraci\u00f3n en un karaoke. Muestra t\u00edtulos y datos\n  esenciales; deja que los gr\u00e1ficos cuenten el resto.\n- No deformes los elementos de marca para conseguir una transici\u00f3n.\n\n## 6. Efectos de sonido\n\nCrea SFX originales mediante s\u00edntesis de audio por c\u00f3digo. Guarda los\nWAV y el c\u00f3digo que los genera en `proyecto\/audio\/sfx\/`.\n\nDecide qu\u00e9 sonidos necesita la propuesta: acciones de interfaz,\ndesplazamientos, transformaciones, acentos o confirmaciones. \u00dasalos con\nintenci\u00f3n, no en cada palabra.\n\nNo a\u00f1adas m\u00fasica de fondo. La voz debe ser siempre lo m\u00e1s f\u00e1cil de\nescuchar. Ajusta niveles y envolventes para evitar saturaci\u00f3n, clics\naccidentales y cortes bruscos.\n\nComprueba que los efectos est\u00e1n presentes y sincronizados en el MP4\nexportado. Documenta que fueron sintetizados para este v\u00eddeo; no\npresentes archivos ajenos como \u00absin copyright\u00bb.\n\n## 7. Implementaci\u00f3n y formato\n\n- Implementa la composici\u00f3n y su l\u00ednea de tiempo en Hyperframes, y\n  renderiza con Hyperframes.\n- Puedes usar FFmpeg y otras utilidades como apoyo para an\u00e1lisis,\n  s\u00edntesis, codificaci\u00f3n y validaci\u00f3n, no para sustituir la composici\u00f3n\n  por un montaje hecho en otro framework.\n- Entrega horizontal 1920 \u00d7 1080, 30 fps, MP4 H.264 con audio AAC.\n- Conserva los recursos necesarios y registra las dependencias para\n  reproducir el render. No dependas de descargas durante la exportaci\u00f3n\n  ni del reloj real para controlar las animaciones.\n- Organiza los recursos adicionales y archivos de trabajo sin\n  sobrescribir la narraci\u00f3n ni el logo originales.\n- A\u00f1ade de manera discreta pero legible, sin cubrir el cierre:\n\n&gt; Sitios sujetos a uso razonable. Node.js: hasta 5 apps. IA sujeta a\n  cr\u00e9ditos y condiciones del plan.\n\n## 8. Entregables\n\n1. `resultado-hostinger.mp4`: v\u00eddeo final con narraci\u00f3n y efectos de\n   sonido.\n2. `proyecto\/`: fuentes editables, composici\u00f3n de Hyperframes,\n   dependencias y recursos necesarios para reproducir el render.\n3. `timeline.json`: escenas, tiempos, fragmentos de narraci\u00f3n y eventos\n   de sonido.\n4. `REPORTE.md`: concepto elegido, versi\u00f3n de Hyperframes, comando real\n   de render, verificaciones, procedencia de recursos adicionales,\n   limitaciones, skills y subagentes utilizados, y cualquier contexto\n   persistente precargado.\n\n## 9. Verificaci\u00f3n obligatoria\n\nRenderiza, abre y revisa el MP4. Comprueba el principio, la mitad, el\ncierre y cada cambio de escena.\n\nCorrige pantallas vac\u00edas, recursos faltantes, textos cortados o\nilegibles, superposiciones, audio truncado, efectos demasiado fuertes y\nerrores de sincronizaci\u00f3n o codificaci\u00f3n.\n\nComprueba con herramientas los metadatos reales de resoluci\u00f3n, duraci\u00f3n,\nfps y pistas de audio. Confirma que Hostinger.com\/alexcg y alexcg\naparecen exactamente como se proporcionaron.<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-cta acg-cta--sponsor is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Patrocinador oficial del curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Publica tus proyectos con Hostinger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hostinger es el patrocinador oficial del curso. Con el Plan Unlimited tienes sitios web ilimitados y hasta 5 apps Node.js. Entra con el enlace de AlexCG Design y usa el cup\u00f3n ALEXCG para un descuento extra.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/hostinger.com\/alexcg\" rel=\"sponsored noopener\" target=\"_blank\">Obtener el descuento<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Preguntas frecuentes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 es Hyperframes y es gratis?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hyperframes es una herramienta gratuita para crear v\u00eddeos animados con c\u00f3digo: cada escena se escribe con HTML, CSS y JavaScript y despu\u00e9s se renderiza a MP4. En Claude Code se instala como skill, as\u00ed que basta con llamarla y describir el v\u00eddeo que quieres. Es lo que us\u00e9 con Fable 5.2 y con Opus 5.5 para crear el comercial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfCu\u00e1ntos cr\u00e9ditos gasta crear un v\u00eddeo animado con Fable 5.2 u Opus 5.5?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En mi prueba, con el plan Pro y esfuerzo medio, Fable 5.2 gast\u00f3 el 30\u201335 % de la sesi\u00f3n de 5 horas en su primer intento. Opus 5.5 gast\u00f3 el 12\u201313 % en la primera versi\u00f3n y lleg\u00f3 al 25 % tras una segunda iteraci\u00f3n, m\u00e1s algunas correcciones. Al final, el gasto de los dos fue parecido.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfPuedo usar Remotion en lugar de Hyperframes?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00ed. Remotion es la alternativa si prefieres React, y tambi\u00e9n se puede usar desde Claude Code pidi\u00e9ndole que use su skill. Si cambias de herramienta, adapta el prompt: sustituye Hyperframes por Remotion en los bloques 1 y 7, que son los que fijan la herramienta y la forma de renderizar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e1s proyectos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/crear-formulario-tipo-typeform-con-ia\/\">Formulario tipo Typeform creado con IA<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/hermes-agent\/\">Hermes Agent: tu asistente de IA 24\/7 en Telegram<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/animar-variables-css-property\/\">Animaciones avanzadas en CSS con @property<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/transiciones-css\/\">Transiciones en CSS desde cero<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group acg-cta is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Domina CSS desde cero<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hyperframes anima HTML y CSS: cuanto mejor domines CSS, m\u00e1s control tendr\u00e1s sobre lo que crea la IA y m\u00e1s f\u00e1cil ser\u00e1 corregirlo.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alexcgdesign.com\/cursocss\">Ver el curso<\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>El prompt completo con el que Fable 5.2 y Opus 5.5 crearon un comercial animado con Hyperframes: 9 bloques, cr\u00e9ditos que gast\u00f3 cada uno y cu\u00e1l gan\u00f3.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acg_migrated":"2026-11-10","footnotes":""},"categories":[2,5],"tags":[],"class_list":["post-3420","post","type-post","status-publish","format-standard","hentry","category-diseno-web","category-tutorial"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=3420"}],"version-history":[{"count":3,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3420\/revisions"}],"predecessor-version":[{"id":3423,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3420\/revisions\/3423"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=3420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=3420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=3420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}