Créer des vidéos produit IA qui arrêtent le scroll
Neuf vrais films, les premières images qui ont changé et un workflow pratique pour transformer une mise à jour produit en vidéo sociale, avec Claude Code, HyperFrames et des prompts réutilisables.
Présentation des cas
Vidéo de lancement d’OpenDesign Motion
Prompt de recréation (le prompt lui-même est en anglais)
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.Version verticale
Vidéo promotionnelle de Motion Week
Prompt de recréation (le prompt lui-même est en anglais)
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.Vidéo de clarification des tarifs
Prompt de recréation (le prompt lui-même est en anglais)
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.Vidéo de configuration en un clic
Prompt de recréation (le prompt lui-même est en anglais)
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.Vidéo tutoriel de l’API
Prompt de recréation (le prompt lui-même est en anglais)
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]).Vidéo des mises à jour
Prompt de recréation (le prompt lui-même est en anglais)
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.Vidéo d’exemples de design
Prompt de recréation (le prompt lui-même est en anglais)
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.Vidéo sur l’utilisation
Prompt de recréation (le prompt lui-même est en anglais)
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.Commencez par la publication, pas par l’animation
Avant d’ouvrir une timeline, écrivez une phrase pour chacune de ces questions :
- Où cela apparaîtra-t-il ? Une annonce principale, une publication de suivi, un tutoriel ou une clarification ?
- Que doit comprendre le spectateur ? Choisissez une affirmation que le film peut démontrer.
- Que doit-il se passer ensuite ? Visiter une page, essayer une fonctionnalité, enregistrer les étapes, répondre ou créer un projet ?
Pour un lancement principal, montrez tôt le résultat produit le plus fort et rendez le film compréhensible seul. Pour un suivi, isolez un seul angle. Pour une clarification, énoncez explicitement le fait corrigé avant que la blague ou l’effet visuel ne prenne le dessus.
Votre premier livrable : un court brief contenant l’audience, l’emplacement, un message, une action et la source de chaque affirmation produit. Si deux messages se font concurrence, séparez-les en deux films.
Étape 1 : rédiger un brief vérifiable
Configurez d’abord Claude Code. Le démarrage rapide de HyperFrames documente actuellement cette installation du plugin :
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesDans Claude Code, appelez /hyperframes:hyperframes dans un dossier de projet dédié. Demandez-lui de créer une courte composition de test, de la prévisualiser et d’exporter un MP4 avant de lancer le film de campagne. Suivez les instructions de rendu du plugin installé afin que les commandes correspondent à votre version.
Créez un fichier BRIEF.md dans le projet vidéo. Incluez l’URL actuelle du produit, la formulation approuvée, les unités exactes des chiffres et la date de vérification. Un prix sans sa période de facturation n’est pas un fait complet. Un nombre de bibliothèque issu d’un enregistrement précédent n’est pas un nombre actuel.
Rassemblez le logo officiel, les visuels de marque, les captures ou enregistrements d’écran, les exemples originaux et les films de référence que vous avez le droit d’étudier. Séparez les sources des exports afin de pouvoir remplacer une capture sans perdre un montage approuvé précédent.
Utilisez Claude Code pour planifier et implémenter le projet, HyperFrames pour rendre l’animation basée sur HTML, et GSAP ou Three.js lorsque l’idée visuelle l’exige. Utilisez FFmpeg pour le montage audio et Kokoro TTS pour la voix off. Vous n’avez pas besoin de tous les outils pour chaque film : une annonce centrée sur la typographie peut se contenter d’une composition en deux dimensions.
Ouvrez le vrai produit avant de planifier sa démonstration. Vérifiez les libellés de navigation, l’ordre des boutons et le résultat. Utilisez un compte de démonstration et remplacez les vraies clés, adresses et noms d’espaces de travail avant d’enregistrer.
Étape 2 : choisir une direction avant le rendu
Demandez deux ou trois directions concrètes : l’image d’ouverture, un dispositif visuel récurrent, la séquence de plans et la fin. Chaque direction doit expliquer comment elle communique le même brief.
Évitez de choisir entre des adjectifs vagues comme « premium » et « ludique ». Choisissez entre des idées visibles : une flèche qui fait baisser un prix, un curseur qui assemble un flux de configuration, ou un nombre élastique qui révèle un mur de mises à jour.
Demandez quelques style frames lorsque la direction est incertaine. Elles doivent contenir de vrais mots et de vrais éléments, notamment le titre le plus long et le plan d’interface le plus chargé. Approuvez la composition et le message avant de lancer un rendu complet.
Le film des mises à jour est un contre-exemple utile. Ses itérations sont passées par un compteur de versions, une timeline, un flipbook, un traitement pictural, puis enfin des chiffres 3D élastiques. Répéter les rendus ne pouvait pas remplacer un accord sur la direction.
Étape 3 : choisir la musique et planifier les temps forts
Écoutez vous-même les morceaux candidats. Demandez à l’agent des liens d’écoute, les détails de licence et une description de l’intro, de la montée et du drop. Ne choisissez pas uniquement d’après un classement de popularité ou un nom de fichier.
Faites correspondre la structure propre du morceau à l’histoire : affirmation d’ouverture, démonstration, résultat et carte de fin. Coupez aux limites musicales et préservez la phrase musicale. Quand une bonne scène a besoin de plus de temps, revoyez le montage musical plutôt que de supprimer la scène pour respecter une durée arbitraire.
Si le film comporte une narration, établissez le timing de la voix avant d’affiner l’animation. Rendez le message compréhensible sans le son, puis utilisez le son pour ajouter de l’énergie et clarifier les actions.
Vérifiez la licence pour l’usage commercial prévu. L’enregistrement Content ID et l’autorisation d’utiliser un morceau sont deux questions distinctes : l’absence de revendications automatiques ne prouve pas l’existence d’une licence. Conservez la licence et la source avec le projet.
Étape 4 : donner une mission à la première image
Mettez la vidéo en pause à l’instant zéro. Une personne qui n’a jamais vu la publication peut-elle dire de quoi parle la vidéo ? Une image presque vide qui devient claire une seconde plus tard peut échouer à ce test.
Intégrez à la composition un titre court et lisible. Affichez le produit ou le problème à l’écran. Utilisez le premier mouvement pour faire avancer ce message, au lieu de faire attendre l’arrivée du titre.
Clarification : un chiffre est devenu une explication
Présentation de l’API : une ouverture vide est devenue une promesse
Configuration en un clic : la question est devenue la réponse
Vérifiez ces images à la taille d’un téléphone. Si le titre exige un zoom, réduisez la décoration concurrente ou recomposez le plan. Ne comptez pas sur la publication d’accompagnement pour expliquer une image illisible.
Étape 5 : animer une histoire, pas un jeu de cartes
Choisissez un élément récurrent pour relier les scènes : un curseur, une flèche, un personnage ou un objet. Donnez-lui une raison de bouger. Une flèche peut tirer un prix ; un curseur peut guider une configuration ; un compteur peut révéler une collection qui grandit.
Utilisez la vraie interface du produit lorsqu’une étape dépend d’un contrôle réel. Une fausse interface décorative peut paraître plus propre mais enseigner la mauvaise action. Laissez la grande typographie porter l’expression clé et la démonstration porter le détail.
Pour la typographie en volume, vérifiez le contraste entre la face et les côtés de chaque lettre. Gardez un angle de lecture assez simple pour que le nombre soit reconnu immédiatement. Supprimez les petites étiquettes et les lignes décoratives de type HUD lorsqu’elles concurrencent le message.
Dans un rendu animé, chaque image doit être reproductible à partir de son horodatage. Évitez toute logique d’animation qui dépend de l’exécution de l’image précédente : un rendu segmenté ou parallèle peut évaluer les images dans le désordre. Testez quelques horodatages non consécutifs avant de passer du temps sur un export complet.
Étape 6 : revoir l’export complet
Les style frames prouvent la composition ; seul l’export prouve le rythme, les transitions, l’audio et la fin. Regardez chaque rendu de revue complet une fois avec le son et une fois sans. Puis inspectez les moments qui ont échoué.
Donnez de trois à six remarques précises par tour. Pour chacune, indiquez la plage de temps ou la scène, décrivez le problème visible et formulez le résultat voulu. Indiquez aussi ce qui doit rester inchangé. « Le premier titre fonctionne ; gardez-le. Entre 8 et 11 secondes, les cartes deviennent trop petites pour être lues sur mon téléphone » est une remarque exploitable.
Quand votre réaction se limite à « plat » ou « moche », demandez un diagnostic avant une nouvelle réécriture complète. Le problème vient-il du rythme, du contraste, de la typographie, du mouvement de caméra ou d’un trop grand nombre d’éléments sans lien ? Choisissez le plus petit changement qui traite le vrai problème.
Terminez le retour en demandant à l’agent d’inspecter indépendamment les problèmes voisins. Cela ne remplace pas votre revue ; cela évite que l’implémentation s’arrête à la liste littérale des commentaires.
Étape 7 : revérifier les faits et exporter
Utilisez le brief approuvé actuel comme liste de contrôle. Vérifiez les prix et unités, les noms pris en charge, les nombres, les logos, les URL et les dates d’offre par rapport à leurs sources. Si le lancement évolue encore, retenez l’export jusqu’à ce que les faits soient stables.
Inspectez les captures à la recherche de clés, e-mails, noms d’espaces de travail et détails de compte. Utilisez des valeurs de démonstration évidentes, pas des identifiants plausibles. Vérifiez que vos exemples, personnages, musiques et voix peuvent être utilisés dans la publication prévue.
Regardez le fichier exporté du début à la fin. Confirmez que l’audio est présent aux endroits prévus, que le texte résiste à la compression, que la fin reste assez longtemps à l’écran et que la dernière image n’est pas vide par accident. Conservez le projet modifiable, le brief, les ressources sous licence et l’export approuvé.
Étape 8 : recomposer, publier et apprendre
Créez l’autre format d’image après l’approbation du montage principal. Repositionnez le texte, mettez à l’échelle le protagoniste et choisissez quels plans d’interface doivent rester dans une carte intacte. Recadrer le fichier horizontal ne remplace pas la vérification de chaque plan.
Rédigez la publication autour du même message unique. Gardez l’action demandée cohérente entre la publication et la carte de fin. Si vous utilisez un lien suivi, testez la destination et notez le nom de campagne avant de publier.
Après la publication, repérez les questions répétées et les malentendus. Ils peuvent devenir le prochain court film. Comparez les résultats sur une période de rapport cohérente et distinguez portée, engagement, visites et actions produit.
Prompts réutilisables
Remplacez les crochets avant d’utiliser ces modèles.
Brief d’ouverture
Je veux promouvoir [fonctionnalité, page ou campagne] : [URL].
Public : [qui doit se sentir concerné].
Placement : [annonce principale / suivi / tutoriel / mise au point].
Un seul message : [la seule chose que les spectateurs doivent comprendre].
Prochaine action : [visiter / essayer / enregistrer / répondre / créer].
Format principal : 16:9. Prévoir ensuite une version 9:16 composée séparément.
Faits et sources :
[Documentation produit à jour, brief validé, page de tarifs et date de vérification.]
Consigne dans BRIEF.md les affirmations vérifiées et leurs unités. Signale tout ce qui est incertain.
Ressources :
- Logo officiel : [chemin]
- Visuels de marque et vidéos d'exemple originales : [chemins]
- Accès à un produit de démonstration ou enregistrements d'écran anonymisés : [détails]
Mise en œuvre : Claude Code + HyperFrames ; utilise GSAP ou Three.js lorsque l'idée l'exige.
Utilise de vraies étapes du produit. N'expose ni identifiants ni données personnelles de compte.
Étudie les références pour la composition et le motion (动效) ; ne réutilise pas de séquences de tiers sans autorisation.
La première image doit expliquer de quoi il s'agit. Garde les textes essentiels lisibles sur un téléphone.
Montre la valeur du produit par le mouvement et la démonstration. Évite les petites étiquettes décoratives.
Pour la musique, fournis des liens d'écoute et les informations de licence afin que je les vérifie et choisisse.
Ne produis pas encore le film complet. Propose 2 à 3 concepts concrets avec image d'ouverture,
protagoniste visuel, enchaînement des plans, direction sonore et conclusion.Revoir une itération
Conserve ces éléments validés : [scènes, durées, typographie ou musique].
1. À [timecode / scène], je vois [problème précis].
Le spectateur devrait plutôt comprendre ou ressentir [résultat attendu].
2. À [timecode / scène], modifie [élément précis] parce que [raison].
3. À [timecode / scène], vérifie [lisibilité / rythme / son / exactitude du produit].
Explique la cause avant de procéder à une refonte globale. Vérifie si les scènes adjacentes présentent le même problème.
Conserve le brief validé et les parties non concernées. Génère un nouveau MP4 complet.
Visionne l'export et signale tout problème restant avant de me le remettre.Vérification finale de l’export
Vérifie le MP4 final exporté, et pas seulement la composition source.
- À l'instant zéro, un nouveau spectateur peut-il identifier le sujet à la taille d'un téléphone ?
- Le message unique est-il clair sans le son ?
- Les étapes de l'interface, les chiffres, les unités, les logos et les URL ont-ils été vérifiés par rapport à BRIEF.md ?
- Les informations privées de compte ont-elles été supprimées ?
- Les autorisations pour la musique, les exemples, les personnages et les voix sont-elles documentées ?
- Chaque transition s'affiche-t-elle correctement à des timecodes non consécutifs ?
- As-tu visionné l'export complet avec le son et vérifié l'écran de fin ?
- La version verticale a-t-elle été recomposée et visionnée séparément ?
Énumère les vérifications réellement effectuées, les problèmes non résolus et l'export exact examiné.
Ne marque pas comme réussies des vérifications non effectuées.Questions fréquentes
Ai-je besoin d’After Effects pour ce workflow ?
Le workflow présenté utilise Claude Code et un rendu basé sur HTML avec HyperFrames. Il ne nécessite pas After Effects. Vous devez toujours diriger l’histoire, vérifier les ressources et revoir l’animation et le son exportés.
Dois-je commencer par un rendu complet ou par des style frames ?
Commencez par des style frames lorsque la direction visuelle est incertaine. Une fois le concept validé, revoyez des exports complets pour juger le timing et l’audio. Aucun des deux types de revue ne remplace l’autre.
Quelle doit être la durée d’une vidéo produit ?
Assez longue pour transmettre son message unique sans remplissage. Les exemples source vont de courts suivis à une présentation de configuration plus longue. Choisissez la durée en fonction de la tâche et vérifiez que chaque scène apporte quelque chose.
Puis-je utiliser le même montage en vertical ?
Réutilisez l’histoire et les ressources, mais vérifiez la composition plan par plan. Les démonstrations d’interface nécessitent souvent une carte intacte ou une nouvelle disposition pour rester lisibles en 9:16.
Votre premier projet
Choisissez une vraie fonctionnalité et une action que vous voulez faire accomplir au spectateur. Rédigez le brief, choisissez une image d’ouverture, approuvez une direction visuelle et réalisez un film horizontal complet. Revoyez-le sur un téléphone avant de passer à d’autres formats ou à des publications de suivi.
