"Production vidéo avec Claude Code : Le stack de 3 outils que j'utilise"

"## Production vidéo avec Claude Code : Le stack de 3 outils que j'utilise\n\nJ'ai failli fermer l'onglet du walkthrough de Jack Roberts deux fois.\n\nLa miniature ressemblait à tous les autres vidéos du genre « J'ai automatisé mon pipeline vidéo avec l'IA » qui ont encombré mon fil depuis qu'HeyGen a mis HyperFrames en open source le 17 avril 2026. J'étais à trois minutes, sceptique, quand il a fait quelque chose que je n'avais vu personne d'autre faire dans une démo vidéo cette année — il a arrêté de traiter Claude Code comme un outil unique et a commencé à l'utiliser comme la couche d'orchestration d'un système de production entier. Le design à un endroit. L'animation à un autre. L'audio à un troisième. Le tout gouverné par des skills qu'il a écrits une fois et réutilisés indéfiniment.\n\nCe recadrage est ce qui m'a fait arrêter de scroller, ouvrir une nouvelle fenêtre de terminal et construire ma propre version. Et c'est de cela que traite cet article — pas une revue d'outil, pas un résumé haletant du jour de lancement, mais le véritable stack de trois outils Claude Code pour la production vidéo que j'utilise maintenant, ce que chaque couche fait bien, où chaque couche tombe silencieusement en panne, et les parties inconfortables que Jack a glossées et que j'ai dû apprendre sur ma propre machine.\n\n## Pourquoi « un outil fait tout » s'effondre\n\nTous les six mois, un nouveau produit promet un seul prompt qui transforme un enregistrement brut en vidéo finie. Certains fonctionnent même — pour la démo. Puis vous l'essayez sur vos vraies images, avec votre vraie marque, et le résultat ressemble à quelque chose fait par quelqu'un qui ne vous a jamais rencontré.\n\nLa raison est ennuyeuse et structurelle. La production vidéo n'est pas un seul travail. C'est au moins trois travaux qui partagent par hasard une timeline : la conception du système visuel (à quoi ressemble votre marque en mouvement), la composition et l'animation (ce qui se passe à l'écran, seconde par seconde) et le conditionnement audio (comment sonne la piste vocale quand le spectateur appuie sur play). Chacun de ces travaux a ses propres outils, ses propres modes d'échec et son propre plafond de qualité. Les réduire à un seul prompt explique pourquoi tant de vidéos éditées par l'IA semblent bon marché de la même manière spécifique.\n\nLe cadrage de Jack était le premier que j'avais vu qui traitait chaque travail comme un citoyen de première classe. Claude Code Design System pour le langage visuel. HyperFrames pour la couche de composition et d'animation. Auphonic pour le nettoyage audio programmatique. Claude Code lui-même comme le chef d'orchestre — pas l'orchestre, le chef d'orchestre. Cette distinction compte plus qu'il n'y paraît, et c'est la principale raison pour laquelle la qualité de ma production a augmenté quand j'ai arrêté d'essayer de passer à travers une vidéo avec un seul prompt.\n\n## Couche 1 : Claude Code Design System — la marque qui voyage partout\n\nL'idée d'un « système de design » est généralement associée aux travaux web et produit. Ce qu'Anthropic a livré avec le produit Claude Design le 16 avril 2026 — parallèlement à la sortie du modèle Opus 4.7 — était une surface de système de design qui s'étend naturellement aux graphiques animés et au multimédia.\n\nLa version que j'utilise vit dans Claude Code via l'application de bureau Claude Design. Voici le flux de travail que j'exécute pour chaque nouveau cluster de contenu :\n\n1. Définir le style de contenu en langage courant. Éducatif et minimaliste. Des accents style esquisse là où c'est utile. Pas de photographies de stock. Un écran, un point, des visuels simples.\n2. Télécharger les primitives de la marque. Logo, logotype, jeu d'icônes, deux ou trois captures d'écran de référence de pièces finies.\n3. Définir les préférences d'animation. Durée courte par temps — cinq à vingt secondes. Texte minimal à l'écran. Easing lent en entrée, easing rapide en sortie.\n4. Exporter le système en ZIP ou PDF. Le système exporté est une spécification portable que je peux confier à un autre outil — ou à un autre agent — pour qu'il rende de nouveaux éléments qui restent dans la charte graphique.\n\nLa première fois que j'ai testé ceci, j'ai demandé à Claude de générer trois courtes animations — une carte de titre, un callout mid-roll et une carte de fin — uniquement à partir du système exporté. Les trois sont revenues visuellement cohérentes entre elles. Pas identiques. Cohérentes. Sans système de design partagé, les animations générées par l'IA semblent avoir été réalisées par trois personnes différentes en trois jours différents. Avec le système en place, elles se lisent comme une seule voix.\n\nLe système de design que vous définissez au départ semblera faux après le premier vrai projet. C'est normal. Le système est une spécification vivante, pas un contrat. Chaque fois que je publie une pièce qui me plaît, je reviens et mets à jour l'export avant la prochaine exécution. Après environ quatre projets, le système cesse de dériver et commence à s'accélérer.\n\nSi vous avez lu mon analyse sur comment Claude Code automatise les flux de travail des systèmes de design avec Figma, c'est la même philosophie étendue au mouvement. Le système de design est l'endroit où votre marque devient réutilisable.\n\n## Couche 2 : HyperFrames — écrire de la vidéo comme on écrit une page web\n\nHyperFrames est un framework de rendu vidéo open source qu'HeyGen a lancé le 17 avril 2026 sous la licence Apache 2.0. La promesse : écrire du HTML, du CSS et du JavaScript. Rendre de la vidéo. Conçu pour les agents IA.\n\nVous exécutez une seule commande — npx skills add heygen-com/hyperframes — et votre instance Claude Code gagne trois nouvelles commandes slash : /hyperframes pour créer des compositions, /hyperframes-cli pour les opérations en ligne de commande et /gsap pour l'aide à l'animation.\n\nLa première fois que ça a vraiment cliqué pour moi, c'était sur un test d'étiquette lower-third. J'ai prompté : « ajoute une étiquette lower-third qui affiche 'Mejba Ahmed — Software Engineer' en bas à gauche, alignée sur la typographie de mon système de design, glissant depuis la gauche à 0,5 seconde, maintenue pendant 4 secondes, glissant vers l'extérieur. » Claude Code a écrit une composition qui a importé les tokens du système de design, placé le texte avec le bon poids et enregistré une timeline GSAP. Un rendu plus tard, j'avais l'overlay. Temps total : environ quatre-vingt-dix secondes.\n\nLe framework utilise un pattern Frame Adapter — GSAP, Lottie, CSS ou Three.js. Les timelines GSAP doivent être créées avec { paused: true } et enregistrées sur window.__timelines, pour que le renderer sache quand chaque frame s'affiche. Cette contrainte rend la sortie déterministe. Chaque rendu est identique au pixel près.\n\nMises en garde :\n- Plafond de résolution. Les rendus sont limités à 1080p. Le 4K n'est pas encore pris en charge.\n- Exécution locale. Votre machine effectue le travail de rendu. Testez avec votre propre matériel.\n- L'audio est le point faible par défaut. Pour une bonne piste vocale, vous avez besoin de la troisième couche.\n\nPour l'analyse technique complète du pipeline vidéo, mon précédent article sur la construction d'un flux de travail d'édition vidéo avec Claude Code va plus loin sur le côté Remotion et Whisper.\n\n## Couche 3 : Auphonic — le correctif audio que personne ne voit mais que tout le monde entend\n\nSi vous ne retenez qu'une seule chose de cet article : les spectateurs pardonnent les visuels médiocres. Ils ne pardonnent pas le mauvais audio. Une vidéo avec un audio propre et des visuels amateurs ressemble à un documentaire indie à petit budget. Une vidéo avec d'excellents visuels et un mauvais audio paraît non professionnelle, point final.\n\nAuphonic effectue la post-production audio automatique : normalisation du volume, nivellement, réduction du bruit, filtrage, reconnaissance vocale. Leur API REST dispose d'une couverture complète OpenAPI 3.0.3. Je l'ai intégré à Claude Code pour qu'après qu'HyperFrames produise le MP4 rendu, une deuxième skill achemine l'audio via Auphonic avec un preset enregistré.\n\nMon preset : objectif de volume de -16 LUFS pour la livraison web, réduction du bruit modérée, compresseur léger. Enregistré sous le nom « voiceover-web-16 » — la mise à jour de l'API 2026 permet de référencer les presets par nom plutôt que par UUID, ce qui rend la skill portable.\n\nLa Simple API : une seule requête HTTP multipart — télécharger le fichier, définir les métadonnées, référencer un preset, démarrer la production. C'est ce que j'utilise.\n\nLe résultat : ma piste vocale sonne de manière cohérente dans chaque vidéo que je publie. Pas « mixée en studio » — mais suffisamment cohérente pour qu'un spectateur ne soit jamais sorti du contenu par des problèmes de qualité audio.\n\n## Les skills sont le véritable avantage concurrentiel\n\nLes outils sont des commodités. HyperFrames est open source. Claude Design est disponible pour tous ceux qui ont un abonnement Claude. Auphonic a une API publique. Aucun d'entre eux n'est difficile à installer.\n\nL'effet de levier réside dans la skill que vous écrivez une fois et utilisez pour toujours.\n\nQuand j'ai publié mon premier pipeline, j'y ai passé quatre heures. La deuxième vidéo a pris deux heures. La troisième a pris quarante minutes. La cinquième a pris environ quinze minutes. Chaque étape que j'ai réussie une fois, je l'ai enveloppée dans une skill Claude Code.\n\nMa bibliothèque actuelle de skills de production vidéo :\n\n- brand-motion-system — charge le système de design exporté et l'applique à toute composition HyperFrames\n- lower-third-standard — crée l'overlay lower-third que j'utilise dans 80 % de mes clips\n- caption-sync-srt — prend un fichier SRT et rend des sous-titres avec la charte graphique appliquée\n- audio-cleanup-voiceover — achemine l'audio via Auphonic avec le preset « voiceover-web-16 »\n- thumbnail-from-video — extrait une image et génère des variantes de miniature\n\nChaque skill représente peut-être quarante lignes d'instruction plus des exemples. C'est la vraie production de ce stack — pas les vidéos individuelles, mais l'actif cumulatif des skills elles-mêmes.\n\nSi vous avez lu mon article sur pourquoi les skills Claude Code sont le véritable point de levier, c'est la version pipeline de production de cet argument.\n\n## Ce que j'ai mal fait la première fois\n\nJ'ai commencé trop grand. Ma première tentative était un explicatif de trois minutes avec cinq segments animés. Il m'a fallu tout un après-midi pour déboguer. Publiez d'abord un clip de quinze secondes. Faites fonctionner l'intégralité du pipeline sur un actif trivial. Ensuite, montez en puissance.\n\nJ'ai sur-prompté HyperFrames. Les premières compositions que j'ai demandées étaient trop élaborées. La règle pratique : un écran, un point, une animation principale.\n\nJ'ai traité Opus 4.7 comme le modèle toujours correct. Pour le travail lourd d'écriture d'une nouvelle composition de zéro, Opus 4.7 en vaut la peine. Pour les modifications itératives, un modèle plus léger est plus rapide et produit une sortie identique.\n\nJ'ai sauté l'étape de prévisualisation. HyperFrames est livré avec npx hyperframes preview. Prévisualisez d'abord. Rendez ensuite. Cette habitude m'a économisé des heures.\n\n## La comparaison honnête — ce que ce stack ne fait pas\n\nCe stack est excellent pour : le contenu éducatif en format court, la vidéo sociale, les overlays de talking-head et les sous-titres, les vidéos promotionnelles, les walkthroughs de code, les animations de PDF, les pièces de texte cinétique.\n\nCe stack n'est pas adapté pour : le travail narratif cinématographique, les clips musicaux, la livraison en 4K (HyperFrames est limité à 1080p), les projets à fort volume d'images où les coupes sont des jugements sur l'énergie et le rythme. Ces travaux appartiennent à DaVinci Resolve ou Premiere.\n\n## Une première semaine réaliste\n\nJour un. Installez HyperFrames avec npx skills add heygen-com/hyperframes. Exécutez npx hyperframes init. Prévisualisez la composition par défaut. Rendez-la. Vérifiez simplement que les outils fonctionnent.\n\nJour deux. Exportez un système de design minimal depuis Claude Design — juste votre logo, deux couleurs, une paire de polices. Un mauvais système de design vaut mieux qu'aucun système de design.\n\nJour trois. Construisez un overlay lower-third de bout en bout avec votre système de marque appliqué. Publiez le clip quelque part. Bouclez le cycle complet une fois.\n\nJour quatre. Configurez Auphonic, enregistrez un preset, connectez l'étape audio. Comparez les versions brutes et propres côte à côte.\n\nJour cinq. Enveloppez tout le flux dans une skill Claude Code. Donnez-lui un nom. Enregistrez-la. Utilisez-la sur un nouveau clip.\n\n## Questions fréquemment posées\n\n### Dois-je savoir coder pour utiliser HyperFrames avec Claude Code ?\nNon — Claude Code écrit le HTML, CSS et JavaScript pour vous à partir de prompts en langage naturel. Vous avez besoin d'une familiarité de base avec la ligne de commande pour npx hyperframes init, preview et render. Pour le code d'animation lui-même, Claude Code s'en charge.\n\n### Puis-je utiliser ce stack pour la livraison vidéo en 4K ?\nPas aujourd'hui. HyperFrames est actuellement limité à 1080p. Rendez dans HyperFrames et composez dans un NLE traditionnel pour les masters 4K.\n\n### Quel modèle Claude dois-je utiliser — Opus 4.7 ou Opus 4.6 ?\nOpus 4.7 pour le travail créatif lourd d'écriture d'une nouvelle scène de zéro. Opus 4.6 pour les modifications itératives — plus rapide et moins cher sans perte de qualité sur le travail de précision.\n\n### Comment Auphonic se compare-t-il au nettoyage audio manuel ?\nAuphonic remplace le fait de rester assis dans une DAW à appliquer la même compression, l'égalisation et l'objectif de volume à chaque vidéo que vous publiez. Pour le travail de voix off pour le web et les réseaux sociaux, il produit une sortie cohérente à chaque fois.\n\n## Travaillons ensemble\n\nVous souhaitez construire des systèmes d'IA, automatiser des flux de travail ou faire évoluer votre infrastructure technologique ? Je serais ravi de vous aider.\n\n* Fiverr (développements personnalisés et intégrations) : fiverr.com/s/EgxYmWD\n* Portfolio : mejba.me\n* Ramlit Limited (solutions entreprise) : ramlit.com\n* ColorPark (design et branding) : colorpark.io\n* xCyberSecurity (services de sécurité) : xcybersecurity.io"