Claude Design + Hyperframes : Le montage vidéo piloté par prompts
Il était 23h14 un vendredi soir lorsque j’ai enfin admis la chose que j’évitais d’affronter depuis deux semaines.
J’en étais à ma troisième tasse de cold brew, mon troisième rendu du même explainer vidéo de 90 secondes, et ma troisième tentative pour faire apparaître un cartouche texte pile sur le mot « automatisation » plutôt que 0,4 seconde après celui-ci. La piste audio était un enregistrement de moi commentant le tableau de bord d’un client. Les éléments visuels devaient se limiter à du texte à l’écran bien lisible, deux ou trois graphiques, et un bandeau inférieur aux couleurs de notre marque. Du classique.
Ce que je découvrais, à mes dépens, c’est que le montage vidéo piloté par prompts — celui dont tout le monde parle avec enthousiasme depuis que HeyGen a lancé Hyperframes le 17 avril et qu’Anthropic a discrètement ajouté les exports au format vidéo sur Claude Design la même semaine — comporte un mode d’échec très particulier. L’IA n’écoute pas la piste audio. Elle ne peut pas. Elle ne sait absolument pas quand vous prononcez « automatisation ». Elle ne sait que ce que vous lui indiquez.
C’est le premier point que personne n’aborde dans les vidéos de lancement. Et c’est ce point qui a réellement déterminé, au final, si ce workflow me faisait réellement gagner du temps, ou devenait juste un énième gadget que j’abandonnerais au bout d’une semaine.
Voici la version honnête de ce qui s’est passé pendant ces deux semaines. J’ai construit le même vidéo de 90 secondes dans les deux outils — d’abord sur Claude Design, puis dans Hyperframes via Claude Code — et je vais vous détailler ce que chaque outil propose vraiment, où chacun a flanché, et la logique d’itérations que j’ai mise en place et qui me permet aujourd’hui de sortir un motion design piloté par prompts en moins de 30 minutes par vidéo.
Si vous suivez de près ces lancements en espérant pouvoir enfin arrêter de lutter avec Premiere ou After Effects, c’est désormais possible. Mais pas pour les raisons avancées par les démos. Laissez-moi vous montrer où se cache la vraie valeur.
Les deux outils, le même problème
Avant d’entrer dans la phase de test, il est essentiel de bien définir la nature de ces deux outils. Beaucoup d’avis confus que j’ai pu lire en ligne tendent à les confondre — on les traite comme des concurrents alors qu’ils assurent en réalité des rôles distincts au sein d’une même chaîne de production.
Claude Design est un espace de travail web disponible sur claude.ai/design, fonctionnant avec Opus 4.7, et accessible depuis un navigateur. J’ai rédigé une analyse complète de ce que c’est et pourquoi cet outil a vu le jour dans mon test de Claude Design, mais voici la version courte : il s’agit de la surface visuelle développée par Anthropic pour concevoir des maquettes, des slides, des prototypes, des one-pagers et, désormais — via la nouvelle chaîne d'export — des scènes animées que vous pouvez exporter sous forme de bundle HTML ou enregistrer en vidéo par capture d’écran.
Hyperframes est un framework de rendu open source créé par HeyGen, lancé le 17 avril 2026 sous licence Apache 2.0. On l’installe dans Claude Code avec npx skills add heygen-com/hyperframes et il ajoute trois commandes slash à votre agent : /hyperframes pour rédiger les compositions, /hyperframes-cli pour les opérations en ligne de commande, et /gsap pour l’aide à l’animation. Les scènes sont créées en HTML, CSS et JavaScript natifs. Le pipeline de rendu convertit chaque frame en image réelle, puis assemble le tout en MP4, MOV ou WebM. Tout s’exécute en local. Pas de cloud. Pas de clé API.
Les deux outils se heurtent exactement à la même limite dès qu’on tente de les intégrer dans un véritable workflow de montage : aucun ne gère l’audio. Ils n’entendent pas votre voix-off. Ils ne savent pas à quel moment précis tombent les mots. Ils ne connaissent que ce que vous leur fournissez textuellement.
C’est pourquoi la transcription s’impose comme l’élément central de tout ce flux de travail — bien plus que le prompt, le système de design, ou même le modèle que vous utilisez. J’ai passé les trois premiers jours de test sans comprendre cela, et ce furent trois jours perdus.
Permettez-moi de préciser mon propos.
La transcription est le script
Voici le modèle mental qui a débloqué tout ce workflow pour moi. Cessez de considérer la transcription comme « les sous-titres ». Commencez à la considérer comme la timeline. C’est grâce à elle que l’IA sait où se trouvent vos mots. Sans timecodes au niveau des mots, chaque animation à l’écran que vous demandez devient approximative.
Je génère mes transcriptions avec Whisper — comme je le fais pour mon pipeline de montage vidéo Claude Code. Le format de sortie précis est important. Vous ne voulez pas un simple fichier texte brut. Ce qu’il vous faut, c’est un fichier JSON structuré ainsi, avec des timecodes sur chaque mot :
{
"words": [
{ "text": "I", "start": 0.00, "end": 0.12 },
{ "text": "automated", "start": 0.14, "end": 0.78 },
{ "text": "this", "start": 0.80, "end": 0.96 },
{ "text": "entire", "start": 1.00, "end": 1.42 },
{ "text": "workflow", "start": 1.46, "end": 2.08 }
],
"segments": [
{ "start": 0.0, "end": 4.2, "text": "I automated this entire workflow..." }
]
}
Avec un tel fichier, vous pouvez rédiger des prompts qui ont réellement du sens pour l’IA. Au lieu de « anime le mot automation au bon moment », vous pouvez demander : « lis transcript.json et affiche un encadré en surbrillance sur le mot automated en utilisant ses champs start et end. » Cette instruction est exploitable. Le modèle peut l’exécuter de manière déterministe. Il tombe sur la bonne frame à chaque fois.
Autre avantage clé de la transcription — et c’est là que se libère tout le levier — : vous pouvez effectuer du pattern-matching dans votre propre discours. Vous voulez afficher un graphique à chaque fois que vous prononcez un chiffre ? Scannez la transcription à la recherche de chaînes numériques. Besoin de mettre en valeur un nom de marque à chaque occurrence ? Cherchez la chaîne. Envie de colorer différemment vos tics de langage par rapport à vos mots d’emphase ? Écrivez la règle une seule fois et appliquez-la à chaque vidéo suivante.
Au quatrième jour de mes tests, j’ai compris que la transcription n’était pas un simple input vidéo. Elle constituait la source de vérité pour la vidéo. Dès que j’ai opéré ce déclic mental, les deux outils ont commencé à se comporter exactement comme dans les démos de lancement.
Je vais maintenant vous montrer ce que chacun a réalisé à partir du même extrait source de 90 secondes.
Test 1 : Claude Design a créé mon explainer en trente-sept minutes
La source de ce test était une vidéo explicative destinée à un client pour un projet de tableau de bord Ramlit. 90 secondes de voix off. Je parcourais trois écrans, commentant le fonctionnement de chacun, avec trois chiffres que je voulais faire ressortir et une carte d’appel à l’action finale.
J’ai commencé par Claude Design parce que la barrière à l’entrée est quasiment inexistante. Ouvrir le navigateur. Cliquer sur l’icône de palette. Coller un prompt. C’est tout le processus d’onboarding.
Mon premier prompt était volontairement long. J’avais appris à mes dépens, lors du travail d’extraction de marque, que Claude Design valorise le contexte. Voici, à peu près, ce que j’ai écrit :
« J’ai une vidéo explicative de 90 secondes pour un tableau de bord de gestion de projet. Le transcript JSON avec horodatage mot par mot et les captures d’écran du tableau de bord sont joints. Merci de construire trois scènes animées correspondant à la charte de mon site mejba.me (fond bleu marine foncé, accent en dégradé violet-vers-cyan, typographie Inter). La scène 1 s’ouvre sur l’écran d’accueil du tableau de bord de 0 à 18 secondes. La scène 2 met en avant le panneau analytique de 18 à 52 secondes. La scène 3 est un CTA de clôture de 52 à 90 secondes. Pour chaque chiffre mentionné dans le transcript, animer une carte stat en forme de pilule, centrée sur la zone d’écran concernée, en respectant les horodatages de début et de fin mentionnés dans le JSON. Exporter le tout sous forme de bundle HTML. »
Ce que j’ai reçu au bout d’environ dix-huit minutes était réellement impressionnant. Trois scènes composées. Les couleurs de ma charte correctement appliquées. Des stats animées en forme de pilule superposées à mes captures d’écran. Un titre d’intro généré en SVG qui aurait pu être signé par un junior en forme.
Mais il y avait du drift. Les animations se lançaient à la frontière des sections, mais pas à l’exacte apparition des mots. Lorsque je narrais « nous avons réduit le temps de montage de quarante pour cent », la pilule « quarante pour cent » apparaissait quelque part entre « montage » et « temps » : environ 0,6 seconde trop tôt. Sur trois scènes, quatre des cinq stats animées étaient décalées de plus d’une demi-seconde. Deux semblaient complètement hors sujet.
J’ai demandé à Claude Design pourquoi. La réponse était celle que je soupçonnais déjà : l’outil lisait les frontières de mes scènes à partir du prompt, mais ne traitait pas les horodatages au mot dans le fichier transcript. Il calait l’animation sur le segment le plus proche. Une synchronisation au niveau du segment suffit pour de grands changements d’ambiance. Elle est inadaptée pour une stat censée « pop » sur un mot précis.
C’est la limite structurelle de Claude Design pour la vidéo. Il excelle en composition, en layout, en cohérence de marque, pour produire des scènes où l’on croit voir passer un designer. Mais il n’est pas conçu comme un moteur d’animation frame-accurate. Cela se ressent aussi à l’exportation : vous obtenez un bundle HTML, mais pour générer un MP4, vous devez soit enregistrer l’aperçu à l’écran, soit passer le bundle à Claude Code et le rendre via un second outil. C’est exactement ce que j’ai fait ensuite.
Je veux être absolument clair sur ce que Claude Design réalise vraiment, pour ne pas le sous-estimer. C’est le moyen le plus rapide que j’ai trouvé pour générer les éléments statiques d’une vidéo : cartes d’intro, cartes d’outro, lower-thirds, modèles de callout, designs de stats en pilule, variantes de thumbnails. Vous passez quinze minutes dans Claude Design, vous en ressortez avec cinq templates graphiques prêts à l’emploi pour votre projet Hyperframes, et vous venez d’éviter la partie la plus fastidieuse de la production vidéo : le design du look. L’IA se comporte comme un meilleur junior que la plupart des juniors avec qui j’ai travaillé, précisément parce qu’elle lit votre codebase réelle pour extraire les tokens de marque plutôt que de les deviner.
Ce qu’elle n’est pas, c’est toute la chaîne de production. C’en est la moitié.
Test 2 : Hyperframes a généré la même vidéo en trois itérations
Pour le test Hyperframes, j’ai ouvert Claude Code dans un terminal neuf, cloné un nouveau dossier de projet et exécuté l’installation :
npx skills add heygen-com/hyperframes
La compétence a enregistré /hyperframes, /hyperframes-cli et /gsap comme commandes slash dans ma session Claude Code. J’ai glissé le même MP3 de voice-over dans un dossier assets/, le même fichier transcript.json avec le minutage mot à mot, et les mêmes trois captures d'écran du dashboard. Ensuite, j’ai tapé :
"/hyperframes build a 90-second composition. Read transcript.json for word-level timestamps. For each numeric value spoken in the audio, render a pill-shaped stat card centered over the corresponding screen image using the exact start and end timestamps from the JSON. Use GSAP for the animations. My brand colors are #0F172A background, gradient accent from #8B5CF6 to #3B82F6 to #06B6D4, Inter typography. Output a single scene composition in HTML with GSAP timelines."
Le premier rendu a pris environ neuf minutes. Claude Code a généré un unique fichier de composition, mis en place les timelines GSAP, lié les animations aux timestamps du transcript, puis affiché un aperçu dans le navigateur. Je l’ai regardé défiler. Chaque pill stat se synchronisait exactement sur son mot. À chaque fois. Pas approximativement, pas "à une frame près" — sur la frame.
La raison pour laquelle cela fonctionne est mécanique, non magique. Les compositions Hyperframes ne sont que du HTML. Les timelines GSAP acceptent un delay et une duration en secondes. Quand Claude Code lit une entrée de transcript { "text": "forty", "start": 34.21, "end": 34.68 } et écrit gsap.to(statPill, { opacity: 1, delay: 34.21, duration: 0.47 }), il n’y a aucune ambiguïté. L’outil fait exactement ce que je lui ai demandé, avec précisément les timestamps que je lui ai fournis. Claude Design faisait des suppositions. Hyperframes exécutait.
Le premier jet n’était évidemment pas parfait. Les pillules de stats s’animaient avec un effet rebond inapproprié pour une vidéo de dashboard sérieuse. L’identité de mon client est sereine et précise. J’ai fourni à Claude Code un feedback minuté :
"At 34.21 seconds, the 40% pill bounces in. Replace the elastic easing with
power2.out. Same change for the pills at 48.9 and 71.4. Also, at 12.5 seconds, the intro title is still fading out when the first screenshot appears — delay the screenshot entrance by 0.3 seconds."
Onze minutes plus tard, j’avais la deuxième itération. L’easing était sobre. Le passage du titre s’effectuait sans accroc. Mais le CTA final avait son sous-titre qui chevauchait le bouton pendant environ une seconde. Encore un commentaire minuté, un nouveau rendu, et la troisième itération était le montage final. Temps total écoulé entre le dossier vide et le MP4 rendu : environ trente-quatre minutes, dont sans doute neuf effectives "clavier en main". Le reste, c’était de l’attente de rendu.
J’ai réalisé exactement la même vidéo sous Premiere le mois précédent. Cela m’avait pris 2 heures et 40 minutes, retouches incluses. Ce n’était pas un delta mineur. C’était une différence structurelle dans la manière dont on ressent le travail à produire.
Ce que l’IA ne peut pas faire
Si vous avez lu les deux dernières sections en pensant « ça a l’air trop beau pour être vrai », vous avez raison d’être attentif. Voici les principaux échecs rencontrés en deux semaines, classés par fréquence.
Le nettoyage audio brut requiert toujours un humain. L’ensemble du pipeline guidé par prompt suppose que votre voix-off est déjà propre. Pas de euh parasites, pas de longues pauses, pas de coupes respiratoires étranges. Si votre enregistrement brut est approximatif, les outils se contenteront d’ajouter des motion designs sur un son médiocre. Passez d’abord par une transcription Whisper, un rapide nettoyage dans Descript pour supprimer les mots de remplissage, puis réexportez l’audio avant même de toucher au transcript. J’ai détaillé cette étape amont dans le post sur le workflow montage vidéo.
Des bugs de prévisualisation dans les deux outils. La prévisualisation dans le navigateur de Claude Design saccadait sur mon MacBook Pro M2 environ toutes les quinze images. Celle d’Hyperframes était meilleure, mais perdait encore parfois la synchro entre le son et la timeline GSAP lorsqu’on scrubbait. Le rendu final était toujours correct. Ce bug de preview est réel et peut vous pousser à corriger des problèmes inexistants. Si une prévisualisation semble bizarre, exportez un test de 10 secondes avant de réécrire vos prompts.
La consommation de tokens est significative. Une composition complète de 90 secondes avec animations horodatées, feedbacks itératifs et trois previews exportées m’a coûté environ 340 000 tokens d’utilisation Opus 4.7 dans Claude Code, de bout en bout. Ce n’est pas rien. Pour un abonné Pro qui produit une vidéo par semaine, c’est confortable. Pour une équipe qui vise dix vidéos hebdomadaires, il faudra basculer sur Sonnet pour les boucles d’itération et réserver Opus à l’étape de build initiale. En général, je fais le premier draft sur Opus, je passe sur Sonnet pour itérer, et je ne reviens à Opus qu’en cas de refonte structurelle.
Les effets 3D complexes nécessitent une intervention humaine. Hyperframes prend en charge Three.js, et oui, Claude Code peut générer une scène Three.js sans problème. Mais pour des rendus réellement 3D — visualisateurs audio réactifs, effets de révélation en volume, mouvements de caméra dans l’espace — il faut un ingénieur qui maîtrise Three.js pour le debugging. L’IA génère l’ossature. L’humain ajuste ensuite les physiques et le timing. Ce n’est pas tant une critique qu’une réalité : c’est là que l’outil cesse de remplacer l’expertise pour commencer à l’amplifier.
Aucun des deux outils n’édite de rushs bruts. Ça mérite d’être dit explicitement, car un client m’a posé la question la semaine dernière. Vous ne pouvez pas déposer un enregistrement brut de 40 minutes dans Claude Design ou Hyperframes et en sortir un montage finalisé. Ces outils construisent la couche de motion design qui s’ajoute sur une vidéo déjà montée. Le dérushage se fait encore dans Descript, Premiere, ou par un pipeline automatisé via Whisper. Ce qui change désormais, c’est l’étape après le cut — celle où vous passiez trois heures dans After Effects.
Le modèle qui livre désormais mes vidéos
Après deux semaines d’expérimentation, j’ai abouti à un workflow précis que j’utilise pour chaque vidéo explicative que je produis. Il nécessite environ trente minutes de manipulation pour une vidéo de 90 secondes, et voici à quoi il ressemble.
Étape 1 : Nettoyer l’audio en premier. Enregistrez, transcrivez avec Whisper, nettoyez dans Descript, ré-exportez un MP3. Ne négligez absolument pas cette étape. Un mauvais enregistrement audio rendra votre vidéo mauvaise, quelle que soit la qualité de l’animation.
Étape 2 : Générez le transcript JSON au niveau des mots. L’option --output_format json de Whisper fournit exactement ce dont vous avez besoin. Conservez le fichier à la racine de votre projet, nommez-le transcript.json. Toutes les instructions ultérieures dépendent de l’existence de ce fichier à cet emplacement.
Étape 3 : Produisez les assets statiques dans Claude Design. Cartes d’intro, cartes d’outro, templates de statistiques, habillages lower-third… Déposez-les dans le dossier assets/ de votre projet au format SVG ou comme snippets HTML. Faites-le en une seule session Claude Design d’environ quinze minutes. C’est clairement sur cet aspect que Claude Design excelle.
Étape 4 : Préparez la composition dans Hyperframes via Claude Code. Rédigez le premier prompt en y intégrant le plan de la scène, le transcript en référence, les tokens de marque et les chemins des assets. Laissez Opus 4.7 générer le premier jet. Prévoyez environ dix à quinze minutes par rendu.
Étape 5 : Itérez avec feedback et timestamps. Visionnez l’aperçu. Lorsqu’un élément nécessite une correction, décrivez-le ainsi : « à 34,2 secondes, [objet] fait [mauvais comportement], modifier par [bon comportement]. » Pour ces boucles d’itération, passez Claude Code sur Sonnet afin d’économiser des tokens. Je dépasse rarement trois itérations.
Étape 6 : Rendez le MP4 final en local. npx hyperframes render --format mp4 --output final.mp4. Cela prend environ deux à quatre minutes pour 90 secondes de vidéo sur mon M2. Vérifiez la synchronisation audio, vérifiez tous les timestamps, livrez.
Voilà. Deux outils, un transcript, une séquence bien définie.
Si je devais le résumer à l’essentiel : utilisez Claude Design pour les visuels statiques, Hyperframes via Claude Code pour l’animation composée, et appuyez systématiquement la synchronisation sur un transcript JSON calé au mot. Tout le reste relève de l’habillage de workflow.
Ce que cela signifie si vous montez des vidéos professionnellement
Je veux conclure avec une réflexion pour tous ceux qui lisent ceci et qui gagnent actuellement leur vie en montant des vidéos, car j’ai reçu des messages privés de monteurs indépendants qui me posent franchement cette question : est-ce que je serai sans emploi dans six mois ?
Non. Absolument pas. Mais le métier est en train de changer, et la nature de ce changement est cruciale.
Les aspects mécaniques du montage — positionner du texte, créer des images clés, garantir la cohérence de la marque sur une centaine de scènes, générer des sous-titres pour une série, produire des cartes d’appel à l’action selon le cahier des charges — tout cela peut désormais se réduire à quelques minutes. Un agent IA équipé de Hyperframes effectuera ce travail plus vite que vous, pour moins cher que ce que vous facturez, et avec moins d’erreurs.
Ce qui ne peut pas être compressé, et ce que je ne vois pas devenir compressible dans les dix-huit prochains mois, c’est précisément ce pourquoi vos meilleurs clients vous paient : le goût. La capacité de discerner quel moment de trois secondes dans un enregistrement de douze minutes porte à lui seul tout le projet. L’instinct qui vous dit qu’un silence doit durer une demi-seconde de plus. Le discernement pour décider si une carte statistique sert la narration ou détourne l’attention d’une expression faciale sur le point de marquer les esprits.
C’est pour ces choix que les monteurs sont embauchés. Les outils que j’ai testés ce mois-ci ne prennent pas ces décisions. Ils exécutent celles que vous avez déjà prises, et à une vitesse qui était simplement inimaginable il y a encore huit semaines.
Les monteurs qui réussiront sur les deux prochaines années seront ceux qui cesseront de se voir comme de simples assembleurs de clips sur une timeline, et commenceront à penser comme des réalisateurs supervisant une équipe d’animation IA. Le travail devient plus stratégique, moins mécanique. Et si vous jouez bien vos cartes, votre taux de facturation augmentera, pas l’inverse.
Foire aux questions
Quelle est la différence entre Claude Design et Hyperframes ?
Claude Design est un espace de travail visuel en ligne, accessible sur claude.ai/design, destiné à la création de mises en page, de diapositives et de visuels statiques tout en garantissant la cohérence de l'image de marque. Hyperframes est un framework open-source de rendu HTML-vers-MP4 développé par HeyGen, qui s'utilise via Claude Code pour l’assemblage et le rendu de véritables vidéos. Utilisez Claude Design pour les éléments statiques ; privilégiez Hyperframes pour les sorties vidéo animées, synchronisées à la seconde.
Claude Design ou Hyperframes peuvent-ils lire mon fichier audio ?
Non. Aucune de ces solutions n'analyse l’audio de manière native. Les deux nécessitent un transcript pré-généré, avec minutage précis au niveau du mot — généralement produit par Whisper — afin de synchroniser les animations affichées à l’écran avec le contenu parlé. Le transcript sert de ligne temporelle. Sans lui, le minutage est purement spéculatif.
Comment installer Hyperframes avec Claude Code ?
Lancez npx skills add heygen-com/hyperframes dans une session Claude Code. Cette compétence enregistre trois slash commands : /hyperframes pour écrire des compositions, /hyperframes-cli pour les opérations en ligne de commande, et /gsap pour l’assistance à l’animation. L’installation complète prend moins d’une minute sur la plupart des machines.
Combien de temps faut-il réellement pour produire une vidéo à partir d’un prompt ?
Pour un explicatif de 90 secondes avec motion design, mon workflow actuel requiert environ trente minutes de travail effectif : une quinzaine de minutes dans Claude Design pour les visuels statiques, puis quinze minutes dans Claude Code et Hyperframes pour l’assemblage et deux ou trois cycles d’itération. À comparer avec plus de deux heures dans un éditeur traditionnel comme Premiere.
Pour quel type de vidéos cette méthode n’est-elle pas adaptée ?
Le montage brut (réduction d’heures d’interviews à des extraits clés), toute vidéo nécessitant de la physique 3D complexe sans développeur humain Three.js, et les projets où la couche motion design porte une charge émotionnelle dont la synchronisation dépend de l’intuition humaine pour le rythme. Ces outils amplifient la sensibilité éditoriale ; ils ne la remplacent pas.
Travaillons ensemble
Vous cherchez à concevoir des systèmes d’IA, automatiser vos workflows, ou faire évoluer votre infrastructure technologique ? Je serais ravi de vous accompagner.
- Fiverr (développements et intégrations sur mesure) : fiverr.com/s/EgxYmWD
- Portfolio : mejba.me
- Ramlit Limited (solutions pour entreprises) : ramlit.com
- ColorPark (design & branding) : colorpark.io
- xCyberSecurity (services de sécurité) : xcybersecurity.io
