Guía gratis · Claude Opus 5.5 + HyperFrames

El prompt con el que Claude hizo este video

Ningún diseñador lo tocó y no hay After Effects. Claude escribió cada cuadro en HTML y lo convirtió en video. Acá está el paso a paso y el prompt completo para que hagás uno de tu producto.

Ir al prompt
01

Lo que necesitás

Claude Code

Con un plan Pro o Max, en la app de escritorio o en la terminal.

Node.js y ffmpeg

Si no los tenés, pedile a Claude que los instale.

Tu producto

Lo ideal es la carpeta con el código. Si no, sirve el link de tu web y capturas de las pantallas.

02

Paso a paso

  1. 1

    Instalá HyperFrames

    Es un framework gratis y de código abierto (lo hizo HeyGen) que convierte HTML en video. Corré esto en la terminal, elegí las skills del grupo Core y reiniciá Claude Code para que las cargue.

    $ npx skills add heygen-com/hyperframes
  2. 2

    Abrí Claude Code en la carpeta de tu producto

    Elegí el modelo Opus 5.5 y poné el esfuerzo en máximo. Sonnet 5.5 también funciona y gasta menos.

  3. 3

    Pegá el prompt

    Está abajo. Claude va a leer tu producto, armar un brief, hacer el video, revisarlo y entregarte el MP4. Puede tardar un buen rato: dejalo trabajar.

  4. 4

    Corregí con el segundo exacto

    Si algo no te gusta, decíselo así: en el 0:08 el texto entra muy lento, o la escena del 0:12 tiene mucho texto. Con dos o tres rondas queda.

03

El prompt

Cambiá lo que está entre corchetes por lo de tu producto.

prompt.md
Quiero que hagás un video de motion design de lanzamiento para [NOMBRE DEL PRODUCTO]. Tiene que mostrar lo mejor que podés hacer. Hacelo como si fuera tu showreel de motion designer para una hoja de vida. Go all out.

## 1. Marca y producto (sacalo del código o de la web, no lo inventes)
Antes de diseñar, revisá [la carpeta del proyecto o el link de la web] y armá un brief.md con esto:
- La paleta exacta en hex, las tipografías, el logo y el ícono.
- La propuesta de valor en una frase y las 3 o 4 funcionalidades que hoy funcionan de verdad.
- Las 3 o 4 pantallas más vistosas. Recrealas en HTML y CSS fieles a las reales: mismos colores, radios, íconos y jerarquía.
- Un storyboard escena por escena con los segundos.
Los datos de ejemplo tienen que ser inventados y verosímiles. No uses datos reales de clientes.

## 2. Herramienta
Usá HyperFrames (HTML y GSAP con render determinista a MP4). Arrancá por la skill /hyperframes y seguí su flujo (init, preview, render).
El video va en una carpeta nueva al lado del código. No toques el código del producto.

## 3. Formato
- [1920x1080 horizontal o 1080x1920 vertical], 60 fps, entre 15 y 30 segundos.
- Nada importante pegado a los bordes: dejá un margen del 5 % en todos los lados.
- Textos cortos que se entiendan sin sonido.
- El último frame empalma con el primero para que el loop no se note.

## 4. Dirección
- Estructura: un gancho visual fuerte desde el frame 0, el problema en una línea, una funcionalidad por escena con la UI animándose como si alguien la estuviera usando, y un cierre con el logo y una frase que salga de la propuesta de valor.
- Algo cambia cada 1.5 a 3 segundos. Los cortes y los acentos caen en los beats de la música.
- Nivel profesional: easings con intención (nada lineal), overshoot sutil, transiciones match-cut donde un elemento de una escena se convierte en el de la siguiente, cámara con profundidad, tipografía cinética con la fuente de la marca, números que cuentan y gráficas que se dibujan.
- Que no parezca hecho con IA: nada de gradientes morados genéricos, glows, partículas sin motivo, emojis, texto pequeño ni más de una idea por pantalla. Solo la paleta de la marca.

## 5. Audio
Usá la canción que está en [ruta de la canción]. Medí el BPM y los beats y armá todo el timing sobre eso. Poné efectos de sonido puntuales (whoosh, pop, click) en los acentos, sin saturar. Mezcla final a -14 LUFS. Si no hay canción, armá el timing a 120 BPM y entregá el video sin música.

## 6. Revisión antes de entregar
Renderizá un preview y sacá un fotograma por segundo en una hoja de contacto. Miralos de verdad: textos cortados, saltos raros, escenas vacías, cosas pegadas al borde. Corregí y repetí al menos dos rondas antes del render final.

## 7. Entrega
El MP4 final en H.264, una versión sin música y una portada en JPG. Al final contame qué hiciste en cada escena y cuántas rondas de corrección hiciste.
04

Tres cosas que hacen la diferencia

01

Lo de un solo prompt es verdad a medias

Lo que más sube la calidad es que Claude tenga el código o los assets reales de tu marca. Con un prompt genérico el video queda bonito pero con cara de IA.

02

La música, con derechos

Si lo vas a subir a Instagram y la canción no es tuya, subí la versión sin música y elegí la canción desde la app.

03

No es un generador como Sora o Veo

Claude no inventa imágenes: dibuja con código. Sirve para interfaces, tipografía, datos y logos. Para tomas reales necesitás otra herramienta.

Si hacés el tuyo, mandámelo.

Quiero verlo. Y si querés que tu empresa use la IA así de en serio, en Divine Machinery construimos software a la medida con IA.