Crea vídeos de producto con IA que detengan el scroll
Nueve películas reales, los primeros fotogramas que cambiaron y un flujo de trabajo práctico para convertir una novedad de producto en un vídeo social, con Claude Code, HyperFrames y prompts reutilizables.
Casos de estudio
Vídeo de lanzamiento de OpenDesign Motion
Prompt de recreación (el prompt está en inglés)
A 37s 16:9 launch film, "Introducing OpenDesign Motion" — the open-source alternative to Claude Motion. Playful, premium, minimal text, cut to an upbeat 115 BPM funk track.
Open on a living oil-painting sky where a prompt types itself in the OpenDesign composer; on send, the letters fly into a 3D title. On the drop, the Claude logo appears and "The open-source alternative" slams in above it. Pull back into a tilting wall of motion films and dive into three of them. Beat break: "Not just Opus 5.5." Then "Any model. Any agent." with logos flicking on the beat. In the real OpenDesign workspace, one click on the model pill spins a floating reel of models while the preview swaps films. The preview morphs into the OpenDesign logo, becomes a 3D die rolling one case per face (each arrow styled like its film), and lands on the classic mark — arrow spins on the final hit, "OpenDesign Motion", open-design.ai.Versión vertical
Vídeo promocional de Motion Week
Prompt de recreación (el prompt está en inglés)
A 40s 16:9 main-tweet film for "OpenDesign Motion Week" (Oct 20–27): DeepSeek V4.1 Flash runs at DeepSeek's official off-peak price all day for a week. Key line: "Opus 5.5-level motion. DeepSeek off-peak price." Glitch-hop track, dense playful motion, soft-shadow real-UI cards, Albert Sans with green italic accents. Never hard-shadow sticker style.
A price chart peaks under a DeepSeek ticker card; the OpenDesign arrow cursor grabs the peak and drags it down into a valley. A 3D "50% / Off-peak price" flips to "100% / Full model" with the chip "Official DeepSeek API · not quantized". A split-flap board flips "OCT 20 – 27" to "$60 / WEEK" as the official GO plan logo draws on; tiles compare ×0.5 vs ×0.25. Quick reset beat: the arrow turns once, the 5-hour and 7-day bars refill, "For every subscriber." Giant knockout letters "MOTION" act as windows into motion films; dive in for a beat-cut montage. Then the real flow: OpenDesign composer, Motion design chip, prompt, frames assemble, film plays → an X compose window, post, likes. Four reward objects, one per 1.5 beats: membership (GO/PLUS/PRO/MAX logos), creator verification, early beta access, usage reset card. A pill "Tag @OpenDesignHQ for a chance to win" rides over a tilted wall of posts for ~4s; the posts tile into a mosaic OpenDesign mark and the cursor arcs home into the arrow slot on the final hit.Vídeo de aclaración de precios
Prompt de recreación (el prompt está en inglés)
A 45s 16:9 comedic clarifier for OpenDesign Motion Week, with a cute original mascot and a sweet voiceover. Bouncy cute track (~150 BPM). Frame 0 is a full cover card, no entrance: OpenDesign logo, "// quick clarification · Motion Week, Oct 20 – 27", headline "DeepSeek off-peak week, explained." and chips "$60 a week? / Every plan 2× / Off-peak 24/7 / Full model".
Mascot: an original cute girl drawn in halftone — round face, big glossy eyes with two highlights, twin tails with curled ends, blue bows, pink heart-shaped sunglasses, an OpenDesign-logo pin. She is smug: "Think $60 is less than $120?" Record scratch: "Think again." A blue wipe: "It's $60 per week." Cards: usual week $30 vs this week $60, 2× stamp. "You read half. It's double." Then every plan doubles for this model (Go $30→$60, Plus $40→$80, Pro $90→$180, Max $150→$300 per week; resets every 7 days), so this month is "$150+, not $120". A 24-hour dial: off-peak price 24/7. "The full model." Official DeepSeek API, not quantized. A dotted globe with pins: "We serve users worldwide. In some regions, check your network and IP." "Questions? Find us on Discord." End card: "double. all week." Keep it generous and upbeat; never show the offer ending.Vídeo de configuración con un clic
Prompt de recreación (el prompt está en inglés)
A 47s 16:9 promo for OpenDesign's One-click agent setup. Happy cartoon track (~95 BPM), playful and eye-catching rather than faithful to the website's design spec. Frame 0: "OpenDesign API into [agent] in one click." with chips for Claude Code, Codex, Grok Build, OpenCode, OpenClaw, Hermes Agent; on each beat the agent name and a full-screen brand-colour flood swap.
Then the green one-click button is clicked on every beat and turns into something new each time: a toggle, a key in a lock, a slot machine of agents, an orbit of models, a crumpled .env file, a plug meeting a socket, confetti. The OpenDesign logo appears, the camera dives into its arrow, and the arrow grows eyes and becomes the guide. It walks through the real pages: OpenDesign app Upgrade → pricing (Go) → checkout ($8 first month) → console → API Keys → "One-click agent setup" → install CC Switch (free, open source) → pick Claude Code + model (default deepseek-v4.1-flash) → "Import into CC Switch" → confirm → a new key "Claude Code · Mac" turns Active. "Your original config is kept. Switch back anytime." Close with "One click. Any agent. Any model." and the path open-design.ai → API Keys → One-click setup; the guide flies back into the logo ring on the final hit.Vídeo tutorial de la API
Prompt de recreación (el prompt está en inglés)
A 67s 16:9 tutorial: "Use the OpenDesign API in your agent." Playful funk track, no voiceover, English on-screen text. Frame 0 states the topic with agent chips (Claude Code, Codex, Hermes, OpenCode, + more).
Hero character: the arrow from the OpenDesign logo, acting as the cursor. Opening: on each beat the screen floods with a different agent's brand colour while API keys rain into a messy pile, then implode into "One key." Show a wall of supported model logos (official icons from open-design.ai/pricing, never redrawn), then the agents they plug into. Then 3 clear steps in recreated product UI: 1) subscribe to Go monthly ($8 first month, then $10), 2) open the console → API Keys → Create API key, 3) paste the base URL and key into your agent (Chat Completions / Responses: https://amr-link.open-design.ai/v1; Anthropic Messages for Claude Code: https://amr-link.open-design.ai). Mention DeepSeek V4.1 Flash auto-upgraded to 1017 and the 5-hour / 7-day usage reset. Tease One-click setup (coming soon): "3 steps → 1 click", "Click once. Every agent ready." Mask all keys and emails (sk-amr-••••, [email protected]).Vídeo de novedades
Prompt de recreación (el prompt está en inglés)
A 22s 16:9 promo whose only goal is to get people to open open-design.ai/updates. Playful and bouncy, built in Three.js. Lime (#87EA5C) and ink, two-tone 3D type (ink faces, lime sides) shot at eye level so it reads on a phone.
A gummy, jelly-like 3D "39" (releases since Apr 28) drops in and hops with squash-and-stretch, then flips to "67" (updates). Real update cards swirl around it; four milestone cards fly at the camera: Plugin Everything, Team workspace, Arena, Motion. The cards fall and a 3D "Can't keep up?" lands. A thick 3D screen shows the real Updates page; the cursor taps RSS. The URL "open-design.ai/updates" drops in letter by letter, and an extruded OpenDesign logo lands on the final hit. No video clips, no stat slides.Vídeo de ejemplos de diseño
Prompt de recreación (el prompt está en inglés)
A 34s 16:9 promo for the OpenDesign Showcase (open-design.ai/showcase), a growing library of AI design examples, each with the full prompt that made it. Modern Apple-ad electronic track; smooth, continuous camera (no shaking or beat punches); one main message per screen, held long enough to read.
Frame 0 already carries the headline over a live, moving case (the Harbor Skirmish FPS island): "98+ AI design examples. Every prompt included." The camera glides back into a tilted 3D wall of real cases playing as footage, not screenshots. A giant word "Motion" appears with each letter windowing a different motion film; dive into the "o" for four beat cuts. Then a case goes full-bleed and its prompt card slides up, the prompt types out, a cursor clicks "Copy prompt". Same prompt, different models: side-by-side outputs with white monochrome model logos on a 3D arc. Never imply a fixed size — say "and counting", "latest models". End on the OpenDesign logo and the URL.Vídeo de uso
Prompt de recreación (el prompt está en inglés)
A 19s 16:9 quote-tweet video for OpenDesign's new Usage page. Same visual language and music grid as the Motion Week film. Opens on "How much have you used?"
Path in recreated product UI: Console → choose workspace → Usage (right under API Keys). A table of calls shows time, member, model, input/output/cache tokens and credits; filters by member, model and time range. Hover the ⓘ next to credits to open the breakdown: DeepSeek V4.1 Flash multiplier ×0.5 → ×0.25 during Motion Week. Click the underlined rules link: a browser bar types open-design.ai/model-credits and the page "Design Plan credit multipliers" slides in. End: "Stay on top of your usage. Track every call. Plan every credit." + OpenDesign logo.Empieza por la publicación, no por la animación
Antes de abrir una línea de tiempo, escribe una frase para cada una de estas preguntas:
- ¿Dónde aparecerá? ¿Un anuncio principal, una publicación de seguimiento, un tutorial o una aclaración?
- ¿Qué debe entender el espectador? Elige una afirmación que la película pueda demostrar.
- ¿Qué debería pasar después? ¿Visitar una página, probar una función, guardar los pasos, responder o crear un proyecto?
En un lanzamiento principal, muestra pronto el resultado más sólido del producto y haz que la película se entienda por sí sola. En un seguimiento, aísla un único ángulo. En una aclaración, expón de forma explícita el dato corregido antes de que el chiste o el adorno visual tomen el protagonismo.
Tu primer entregable: un breve brief con la audiencia, la ubicación, un mensaje, una acción y la fuente de cada afirmación sobre el producto. Si dos mensajes compiten, sepáralos en dos películas.
Paso 1: Crea un brief que puedas verificar
Configura primero Claude Code. La guía de inicio rápido de HyperFrames documenta actualmente esta instalación del plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesEn Claude Code, invoca /hyperframes:hyperframes en una carpeta de proyecto dedicada. Pídele que cree una composición de prueba breve, la previsualice y exporte un MP4 antes de empezar la película de la campaña. Sigue las instrucciones de renderizado del plugin instalado para que los comandos coincidan con tu versión.
Crea un archivo BRIEF.md en el proyecto de vídeo. Incluye la URL actual del producto, la redacción aprobada, las unidades exactas de las cifras y la fecha en que las comprobaste. Un precio sin su periodo de facturación no es un dato completo. El recuento de una biblioteca en una grabación anterior no es un recuento actual.
Reúne el logotipo oficial, los materiales de marca, las capturas o grabaciones de pantalla, los ejemplos originales y las películas de referencia que puedas estudiar. Mantén el material de origen separado de las exportaciones para poder sustituir una captura sin perder una edición anterior ya aprobada.
Usa Claude Code para planificar e implementar el proyecto, HyperFrames para renderizar el motion basado en HTML, y GSAP o Three.js cuando la idea visual los necesite. Usa FFmpeg para editar el audio y Kokoro TTS para la locución. No necesitas todas las herramientas en cada película: un anuncio basado en tipografía puede requerir solo una composición bidimensional.
Abre el producto real antes de planificar su demostración. Comprueba las etiquetas de navegación, el orden de los botones y el resultado. Usa una cuenta de demostración y sustituye las claves, direcciones y nombres de espacios de trabajo reales antes de grabar.
Paso 2: Elige una dirección antes de renderizar
Pide dos o tres direcciones concretas: el fotograma de apertura, un recurso visual recurrente, la secuencia de planos y el final. Cada dirección debe explicar cómo comunica el mismo brief.
Evita elegir entre adjetivos vagos como «premium» y «divertido». Elige entre ideas visibles: una flecha que tira de un precio hacia abajo, un cursor que monta un flujo de configuración o un número elástico que revela un muro de novedades.
Pide algunos fotogramas de estilo cuando la dirección sea incierta. Deben incluir palabras y recursos reales, sobre todo el titular más largo y el plano de interfaz más cargado. Aprueba la composición y el mensaje antes de comprometerte con un renderizado completo.
El vídeo de novedades es un buen contraejemplo. Sus iteraciones pasaron por un contador de versiones, una línea de tiempo, un flipbook, un tratamiento pictórico y, por fin, números 3D elásticos. Renderizar una y otra vez no pudo sustituir el acuerdo sobre una dirección.
Paso 3: Elige la música y planifica los ritmos
Escucha tú mismo las pistas candidatas. Pide al agente enlaces de vista previa, detalles de licencia y una descripción de la introducción, el crescendo y el drop. No elijas solo por un ranking de popularidad ni por el nombre de un archivo.
Ajusta la propia estructura de la pista a la historia: afirmación inicial, demostración, recompensa y pantalla final. Corta en los límites musicales y respeta la frase. Cuando una buena escena necesite más tiempo, revisa la edición musical en lugar de eliminar la escena solo para ajustarte a una duración arbitraria.
Si la película tiene narración, establece el tiempo de la voz antes de afinar la animación. Haz que el mensaje se entienda sin sonido y usa después el sonido para aportar energía y aclarar las acciones.
Comprueba la licencia para el uso comercial previsto. El registro en Content ID y el permiso para usar una pista son cuestiones distintas: la ausencia de reclamaciones automáticas no prueba que exista una licencia. Guarda la licencia y la fuente junto al proyecto.
Paso 4: Dale una función al primer fotograma
Pausa el vídeo en el instante cero. ¿Puede una persona que nunca ha visto la publicación saber de qué trata el vídeo? Un fotograma casi vacío que se aclara un segundo después puede no superar esa prueba.
Escribe un título breve y legible en la composición. Pon el producto o el problema en pantalla. Usa el primer movimiento para avanzar ese mensaje, en lugar de hacer esperar al espectador a que llegue el título.
Aclaración: un número se convirtió en una explicación
Recorrido por la API: una apertura en blanco se convirtió en una promesa
Configuración con un clic: la pregunta se convirtió en la respuesta
Comprueba estos fotogramas al tamaño de un teléfono. Si el título obliga a hacer zoom, reduce la decoración que compite o recompón el plano. No confíes en que la publicación que lo acompaña explique una imagen ilegible.
Paso 5: Anima una historia, no una baraja de tarjetas
Elige un elemento recurrente que conecte las escenas: un cursor, una flecha, un personaje o un objeto. Dale una razón para moverse. Una flecha puede tirar de un precio; un cursor puede guiar una configuración; un contador puede revelar una colección creciente.
Usa la interfaz real del producto cuando un paso dependa de un control auténtico. Una interfaz simulada decorativa puede verse más limpia, pero enseñar la acción equivocada. Deja que la tipografía grande lleve la frase clave y que la demostración lleve el detalle.
En la tipografía con volumen, comprueba el contraste entre la cara y los laterales de cada letra. Mantén un ángulo de lectura lo bastante simple para que el número se reconozca de inmediato. Elimina las etiquetas diminutas y las líneas decorativas de tipo HUD cuando compitan con el mensaje.
En el motion renderizado, cada fotograma debe poder reproducirse a partir de su marca de tiempo. Evita una lógica de animación que dependa de que se haya ejecutado el fotograma anterior: el renderizado segmentado o en paralelo puede evaluar los fotogramas fuera de secuencia. Prueba algunas marcas de tiempo no consecutivas antes de invertir tiempo en una exportación completa.
Paso 6: Revisa la exportación completa
Los fotogramas de estilo demuestran la composición; solo la exportación demuestra el ritmo, las transiciones, el audio y el final. Ve cada renderizado de revisión completo una vez con sonido y otra sin él. Después inspecciona los momentos que fallaron.
Da de tres a seis notas concretas por ronda. En cada una, indica el intervalo de tiempo o la escena, describe el problema visible y expón el resultado deseado. Señala también lo que debe quedar sin cambios. «El primer título funciona; mantenlo. Entre los segundos 8 y 11 las tarjetas se vuelven demasiado pequeñas para leerlas en mi teléfono» es una nota accionable.
Cuando tu reacción sea solo «plano» o «feo», pide un diagnóstico antes de otra reescritura completa. ¿El problema es el ritmo, el contraste, la tipografía, el movimiento de cámara o demasiados elementos sin relación? Elige el cambio más pequeño que resuelva el problema real.
Termina los comentarios pidiendo al agente que revise por su cuenta los problemas relacionados. Eso no sustituye tu revisión; evita que la implementación se detenga en la lista literal de comentarios.
Paso 7: Vuelve a comprobar los datos y exporta
Usa el brief aprobado vigente como lista de verificación. Comprueba los precios y las unidades, los nombres admitidos, los recuentos, los logotipos, las URL y las fechas de cualquier oferta con sus fuentes. Si el lanzamiento sigue cambiando, retén la exportación hasta que los datos sean estables.
Inspecciona las capturas en busca de claves, correos electrónicos, nombres de espacios de trabajo y datos de cuenta. Usa valores de demostración obvios, no credenciales verosímiles. Verifica que tus ejemplos, personajes, música y recursos de voz puedan usarse en la publicación prevista.
Ve el archivo exportado de principio a fin. Confirma que el audio está presente donde corresponde, que el texto resiste la compresión, que el final permanece en pantalla el tiempo suficiente y que el último fotograma no queda en blanco por accidente. Conserva el proyecto editable, el brief, los recursos con licencia y la exportación aprobada.
Paso 8: Recompón, publica y aprende
Crea la relación de aspecto adicional cuando el corte principal esté aprobado. Recoloca el texto, escala al protagonista y decide qué planos de interfaz deben permanecer dentro de una tarjeta intacta. Recortar el archivo horizontal no sustituye la comprobación de cada plano.
Redacta la publicación en torno al mismo mensaje único. Mantén coherente la acción solicitada entre la publicación y la pantalla final. Si usas un enlace con seguimiento, prueba el destino y registra la nomenclatura de campaña antes de publicar.
Tras la publicación, busca preguntas y malentendidos repetidos. Pueden convertirse en la siguiente película breve. Compara los resultados dentro de una ventana de informe coherente y distingue entre alcance, interacción, visitas y acciones de producto.
Prompts reutilizables
Sustituye los corchetes antes de usar estas plantillas.
Brief inicial
Quiero promocionar [función, página o campaña]: [URL].
Público: [a quién debería interesarle].
Ubicación: [anuncio principal / seguimiento / tutorial / aclaración].
Un solo mensaje: [lo único que los espectadores deben entender].
Siguiente acción: [visitar / probar / guardar / responder / crear].
Formato principal: 16:9. Planifica después una versión 9:16 compuesta por separado.
Datos y fuentes:
[Documentación actual del producto, brief aprobado, página de precios y fecha de verificación.]
Escribe en BRIEF.md las afirmaciones verificadas y sus unidades. Señala cualquier cosa que no esté clara.
Recursos:
- Logotipo oficial: [ruta]
- Material gráfico de la marca y videos de ejemplo originales: [rutas]
- Acceso a un producto de demostración o grabaciones de pantalla depuradas: [detalles]
Implementación: Claude Code + HyperFrames; usa GSAP o Three.js cuando la idea lo requiera.
Usa pasos reales del producto. No expongas credenciales ni datos personales de cuentas.
Estudia las referencias para la composición y el movimiento; no reutilices material de terceros sin permiso.
El primer fotograma debe explicar de qué se trata. Mantén el texto esencial legible en un teléfono.
Muestra el valor del producto mediante el movimiento y la demostración. Evita etiquetas decorativas diminutas.
En cuanto a la música, proporciona enlaces de vista previa e información de licencia para que yo los revise y elija.
No renderices todavía el video completo. Propón 2–3 conceptos concretos con fotograma inicial,
protagonista visual, secuencia de planos, dirección de sonido y final.Revisar una iteración
Conserva estas partes aprobadas: [escenas, tiempos, tipografía o música].
1. En [marca de tiempo / escena], veo [problema específico].
En cambio, el espectador debería entender o sentir [resultado deseado].
2. En [marca de tiempo / escena], cambia [elemento específico] porque [motivo].
3. En [marca de tiempo / escena], comprueba [legibilidad / ritmo / sonido / exactitud del producto].
Explica la causa antes de hacer un rediseño general. Revisa las escenas adyacentes por si tienen el mismo problema.
Conserva el brief aprobado y las partes no relacionadas. Renderiza un MP4 nuevo y completo.
Ve la exportación e informa de cualquier problema restante antes de devolvérmela.Comprobación final de la exportación
Revisa el MP4 final exportado, no solo la composición de origen.
- En el segundo cero, ¿puede un espectador nuevo identificar el tema en tamaño de teléfono?
- ¿Se entiende con claridad el mensaje único sin sonido?
- ¿Los pasos de la interfaz, números, unidades, logotipos y URL se han verificado con BRIEF.md?
- ¿Se han eliminado los datos privados de cuentas?
- ¿Están documentados los permisos de música, ejemplos, personajes y voz?
- ¿Se renderiza correctamente cada transición en marcas de tiempo no consecutivas?
- ¿Has visto la exportación completa con sonido y revisado la tarjeta final?
- ¿Se ha recompuesto y visto por separado la versión vertical?
Enumera las comprobaciones realizadas, los problemas sin resolver y la exportación exacta que revisaste.
No marques como superadas las comprobaciones que no se hayan realizado.Preguntas frecuentes
¿Necesito After Effects para este flujo de trabajo?
El flujo de trabajo mostrado usa Claude Code y renderizado basado en HTML con HyperFrames. No requiere After Effects. Aun así, tienes que dirigir la historia, comprobar los recursos y revisar el motion y el sonido exportados.
¿Debo empezar con un renderizado completo o con fotogramas de estilo?
Empieza con fotogramas de estilo cuando la dirección visual sea incierta. Una vez acordado el concepto, revisa exportaciones completas para valorar el ritmo y el audio. Ningún tipo de revisión sustituye al otro.
¿Cuánto debe durar un vídeo de producto?
Lo suficiente para transmitir su único mensaje sin relleno. Los ejemplos de origen van desde seguimientos breves hasta un recorrido de configuración más largo. Elige la duración según la tarea y comprueba que cada escena aporte algo.
¿Puedo usar la misma edición en vertical?
Reutiliza la historia y los recursos, pero comprueba la composición plano por plano. Las demostraciones de interfaz suelen necesitar una tarjeta intacta o una nueva disposición para seguir siendo legibles en 9:16.
Tu primer proyecto
Elige una función real y una acción que quieras que realice el espectador. Escribe el brief, elige un fotograma de apertura, aprueba una dirección visual y crea una película horizontal completa. Revísala en un teléfono antes de ampliar a otros formatos o publicaciones de seguimiento.
