Note de l’auteur : il existe aujourd’hui deux grandes façons de créer une vidéo avec un agent de programmation : produire un MP4 par rendu image par image ou générer une présentation web, puis l’enregistrer. Cet article compare leurs principes, leurs livrables et leurs cas d’usage, et propose une méthode en 5 étapes pour choisir.
Beaucoup de développeurs ont déjà l’habitude de demander à Claude Code, Cursor ou Codex d’écrire des pages et des scripts. Mais « demander à un agent de programmation de créer directement une vidéo » suscite encore des hésitations. Une question revient souvent : si l’agent ne fait qu’écrire du code, comment peut-il produire une vidéo rythmée, sonorisée et prête à publier ? Cet article présente deux approches : le rendu image par image à partir de code et l’enregistrement d’une présentation web, pour vous aider à choisir celle qui répond à vos besoins.
Ce n’est pas un énième article de vulgarisation sur la « génération de vidéos par IA en un clic ». Les deux approches s’appuient sur des compétences bien réelles du recueil open source garden-skills : motion-showreel prend en charge le rendu image par image à partir de code, tandis que web-video-presentation s’occupe de l’enregistrement d’une présentation web. Leurs workflows, leurs points de contrôle et leurs livrables sont clairement définis.
Ce que vous allez en retirer : à la fin de cet article, vous connaîtrez les principes et les limites de chaque approche, vous pourrez choisir celle qui convient à votre projet vidéo en 5 étapes et vous saurez comment configurer un grand modèle de langage adapté à votre agent de programmation.
Deux approches pour créer des vidéos avec un agent de programmation
Voici les différences essentielles entre ces deux approches. En bref, avec le rendu image par image, l’agent joue le rôle de « réalisateur d’animations et ferme de rendu ». Avec l’enregistrement d’une présentation web, il conçoit la présentation, puis une personne lance l’enregistrement.
| Point clé | Rendu image par image par code (motion-showreel) | Enregistrement d’une présentation web (web-video-presentation) |
|---|---|---|
| Principe | Page déterministe avec render(t), capturée image par image au fil du temps |
Page Vite + React + TypeScript enregistrée pendant qu’on avance au clic ou au clavier |
| Livrable | Vidéo MP4 finale + code source modifiable | Projet de présentation web 16:9 prêt à être enregistré |
| Durée type | Vidéos courtes de 5 à 60 secondes ; jusqu’à environ 20 minutes pour les vidéos longues découpées en chapitres | Selon le script, avec une progression par chapitre et par étape |
| Traitement du son | Images, musique, effets sonores et narration partagent une même timeline | Synthèse vocale facultative : chaque étape visuelle correspond à une séquence de narration |
| Idéal pour | Vidéos promotionnelles, introductions de logo, typographie animée, animations en boucle | Cours, transformation d’articles en vidéos, démonstrations de produits, présentations techniques |
Le rendu image par image par code
La clé de motion-showreel, c’est son déterminisme. La page créée par l’agent expose une fonction render(t) qui produit une image précise pour un instant t donné. Le moteur de rendu l’appelle ensuite image par image, à la cadence définie, et capture le résultat. Une même page peut produire des images fixes, une planche-contact, des planches de style dans trois directions, une version proxy et un master. De la proposition au film final, tout part donc de la même source : pas de mauvaise surprise entre un aperçu réussi et un résultat final différent. Le flou de mouvement, le suréchantillonnage et le grain argentique s’activent simplement dans les paramètres de rendu.
Pour le son, les points de montage, les temps forts et les effets sonores partagent la même timeline et les mêmes repères temporels. La musique peut être créée avec le synthétiseur intégré sans dépendance ou avec un piano échantillonné via Tone.js. Elle peut aussi être synchronisée avec une piste fournie par l’utilisateur, avec détection des temps et des drops. La voix off lit uniquement le texte fourni par l’utilisateur : les images suivent les horodatages réels de la voix, et non l’inverse.
La capture vidéo d’une présentation web
web-video-presentation suit une autre logique : traiter la vidéo comme une « présentation animée ». Elle utilise une scène fixe de 1920×1080, mise à l’échelle selon la fenêtre d’affichage pour garantir une image stable pendant la capture. La présentation est pilotée par un curseur (chapter, step) : chaque clic ou touche fait avancer d’une étape visuelle, correspondant à une phrase de narration.
Cette approche ressemble davantage au processus classique « écrire le texte → créer les pages → enregistrer ». La compétence commence par réécrire l’article source en script de voix off, puis associe les séquences du script à des scènes en plein écran. Elle s’arrête pour vous demander confirmation à plusieurs étapes : le script, le thème, le plan, le mode d’implémentation et, éventuellement, l’audio. Pendant l’enregistrement, les commandes de progression n’apparaissent qu’au survol de la souris, pour garder une scène épurée.
Comparaison des deux workflows : ce qui change pour un Agent de programmation qui crée des vidéos
Les deux approches produisent un fichier vidéo, mais leurs workflows imposent des exigences très différentes aux personnes et aux modèles. Voici une comparaison selon 8 critères.
| Critère | Rendu image par image par code | Enregistrement d’une présentation web |
|---|---|---|
| Points de validation humaine | 2 : confirmation des besoins et de l’image de style | 5 : script, thème, plan, mode d’implémentation et audio facultatif |
| Ressources de style | Bibliothèque de 43 styles (éditorial suisse, peinture à l’encre, synthwave, 3D douce, générique de film, style chinois contemporain, etc.) | 23 thèmes intégrés (éditorial, terminal, plan d’ingénierie, style international suisse, etc.) |
| Périmètre du style | Apparence, mouvement, langage de caméra et palette sonore | Tokens de design qui contrôlent les couleurs, les polices et la mise en page |
| Solution vocale | Gemini / MiniMax TTS, qui lit uniquement le script fourni par l’utilisateur ; un véritable enregistrement vocal peut aussi être utilisé | TTS interchangeable, avec MiniMax mmx-cli et OpenAI TTS intégrés, ainsi que des extraits d’intégration pour ElevenLabs, edge-tts, Azure, Google Cloud et macOS say |
| Musique et effets sonores | Sources indépendantes, dont le volume baisse automatiquement pour laisser place à la voix | Principalement centré sur la narration, sans accent particulier sur la musique |
| Contrôle qualité | Les dimensions, la fréquence d’images, la durée, le nombre d’images, les images noires, la sonie, le niveau de crête réel, la jonction de boucle et le déterminisme doivent tous obtenir PASS | Repose sur un aperçu manuel avant l’enregistrement |
| Enregistrement humain nécessaire | Non, le rendu produit directement un MP4 | Oui, la page web doit être enregistrée avec un outil de capture d’écran |
| Version actuelle | v0.1.0 | v1.2.2 |
Un choix de conception mérite d’être souligné : motion-showreel sépare strictement la « validation technique » du « jugement esthétique ». La première repose sur des critères objectifs vérifiables par machine, qui doivent tous être respectés ; pour le second, les remarques sont transmises à l’utilisateur, qui prend la décision finale. Cette répartition évite que l’Agent ignore des images noires ou une sonie excessive sous prétexte que le résultat lui « semble réussi ».
L’enregistrement d’une présentation web laisse davantage de contrôle à la personne. Les 5 points de validation peuvent sembler fastidieux, mais ils sont utiles pour une vidéo explicative : le choix des mots et le découpage en chapitres sont au cœur de la qualité du contenu et gagnent à être confirmés par l’auteur.
Créer rapidement des vidéos avec un agent de programmation
Première étape : installer les compétences
Les deux compétences respectent la norme SKILL.md et peuvent être installées dans Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI, OpenCode et d’autres environnements. Le tableau ci-dessous présente les méthodes courantes. Saisissez les commandes directement dans le terminal ou dans la fenêtre de dialogue de l’agent.
| Méthode d’installation | Marche à suivre | Pour qui ? |
|---|---|---|
| skills CLI | Exécutez npx skills add ConardLi/garden-skills -s motion-showreel, ou remplacez la valeur après -s par web-video-presentation ; ajoutez -a claude-code pour préciser l’agent |
Utilisateurs de tout agent, installation en une ligne |
| Marketplace de plugins Claude Code | Exécutez d’abord /plugin marketplace add ConardLi/garden-skills, puis installez motion-showreel-skills@garden-skills ou presentation-skills@garden-skills |
Utilisateurs de Claude Code |
| Archive zip d’une version précise dans Releases | Téléchargez le zip de la version souhaitée, vérifiez son SHA-256, puis extrayez-le dans .claude/skills/, .agents/skills/ ou .codex/skills/ |
CI, environnements hors ligne, équipes ayant besoin d’une installation reproductible |
| Copie manuelle | Clonez le dépôt, puis copiez le dossier de la compétence dans le dossier des compétences du projet | Développeurs qui souhaitent modifier la compétence |
Deuxième étape : préparer le modèle qui pilote l’agent
Pour créer une vidéo, un agent de programmation passe l’essentiel de son temps à écrire du code, comprendre les besoins et examiner les images. Les capacités du modèle en matière de code et sa gestion des contextes longs sont donc essentielles. Si votre agent accepte une interface personnalisée, il suffit de configurer deux paramètres : la clé API et base_url. Pour le format compatible OpenAI, renseignez https://api.apiyi.com/v1. Pour l’adresse et les paramètres au format Anthropic, consultez le centre de documentation d’APIYI à docs.apiyi.com.
Troisième étape : démarrer avec une demande claire
Donner toutes les informations importantes dès le départ permet de limiter les allers-retours. Pour un rendu image par image à partir de code, la compétence vous demandera de préciser le sujet, la durée, l’orientation horizontale ou verticale, la source de la musique et des effets sonores, ainsi que le mode de narration. Pour l’enregistrement d’une présentation web, vous devrez fournir l’article ou le script d’origine et un découpage approximatif en chapitres.
- Exemple de demande pour un rendu image par image à partir de code : crée une vidéo produit de 30 secondes en format horizontal pour un outil de développement, dans un style synthwave, avec une musique produite par le synthétiseur intégré et sans narration.
- Exemple de demande pour l’enregistrement d’une présentation web : transforme un article technique en vidéo explicative de 8 minutes, sur le thème du plan d’ingénierie, avec une narration en chinois.
🚀 Pour commencer rapidement : si vous n’avez pas encore configuré d’interface de modèle pour votre agent, vous pouvez vous inscrire sur APIYI apiyi.com et obtenir un crédit de test. La plateforme prend en charge les formats d’interface OpenAI et Anthropic : vous pouvez donc y connecter directement des agents comme Claude Code ou vos propres scripts, réaliser un premier court exemple, puis choisir la suite.
Quatrième étape : trancher aux points de contrôle
Pour le rendu image par image par code, si aucun style n’a été précisé, trois directions bien distinctes sont proposées à l’étape des images de style. C’est le moment le moins coûteux pour choisir l’ambiance de la vidéo finale. Pour l’enregistrement d’une présentation web, la réalisation ne commence qu’après validation du plan : c’est donc à cette étape que les modifications de chapitres coûtent le moins cher. Dans les deux cas, mieux vaut concentrer vos principaux retours aux points de contrôle plutôt que de reprendre le travail après la production.
Cinquième étape : validation et livraison
Le rendu image par image par code fournit un fichier MP4 et le code source modifiable. Conservez ce dernier : pour modifier le texte ou les couleurs par la suite, il suffira de relancer le rendu. Pour l’enregistrement d’une présentation web, c’est le projet qui est livré. Vous devrez enregistrer chaque chapitre avec un outil de capture d’écran et, si nécessaire, synchroniser dans un logiciel de montage l’enregistrement avec l’audio généré par la synthèse vocale (TTS), proposée en option.
Choisir le modèle qui pilote un agent de programmation pour créer des vidéos
Les deux compétences ne sont pas liées à un modèle particulier, mais leurs résultats dépendent fortement du grand modèle de langage qui pilote l’agent. Le tableau ci-dessous présente les modèles pertinents accessibles sur APIYI. Les prix proviennent de la page docs.apiyi.com/models ; consultez-la pour connaître les unités et les modalités de facturation.
| Modèle | Rôle dans cet article | Prix APIYI (entrée / sortie / cache) | Plateforme disponible |
|---|---|---|---|
| claude-opus-5-5 | Orchestration d’animations complexes, planification des chapitres de vidéos longues, codage principal | $4 / $20 / $0.2 | APIYI apiyi.com |
| claude-sonnet-5-5 | Modèle principal pour le codage quotidien, bon rapport qualité-prix | $2 / $10 / $0.1 | APIYI apiyi.com |
| kimi-k3.1-pro | Adaptation de textes longs en scripts de narration, organisation de contenus en chinois | $2 / $10 / $0.2 | APIYI apiyi.com |
| deepseek-v4.1-flash | Tâches légères comme les petites modifications en lot et l’organisation des sous-titres | $0.3 / $1.2 / $0.006 | APIYI apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | Génération de couvertures, d’images de référence stylistiques et d’éléments visuels pour la vidéo | Entrée texte $5 / entrée image $8, sortie $30 | APIYI apiyi.com |
Un point important concernant la synthèse vocale : motion-showreel intègre Gemini et MiniMax TTS, tandis que web-video-presentation intègre MiniMax mmx-cli et OpenAI TTS. Si ces modèles TTS ne figurent pas sur la page des prix d’APIYI, cela signifie qu’ils ne sont pas encore disponibles sur APIYI. Nous les ajouterons dès que possible ; en attendant, utilisez directement le fournisseur correspondant en suivant la documentation de la compétence, ou choisissez une autre solution TTS prise en charge. De même, la série 文心 ERNIE n’est pas encore disponible sur APIYI : si votre workflow en dépend, vous devrez l’intégrer séparément.
💰 Conseil sur les coûts : lors de la création d’une vidéo, l’agent relit souvent le même brief, les mêmes définitions de style et le même code de projet. Le taux d’utilisation du cache est donc généralement élevé. Choisir un modèle avec un tarif de cache peut réduire sensiblement le coût des itérations successives. Comparez les modèles sur la page des prix d’APIYI, docs.apiyi.com/models.
Décider en 5 étapes : quelle approche choisir pour créer une vidéo avec un agent de programmation ?
Après les principes et les outils, voici cinq questions à se poser dans l’ordre pour choisir la bonne approche.
- Le contenu doit-il « expliquer clairement » ou « en mettre plein la vue » ? Pour transmettre de l’information, choisissez l’enregistrement d’une présentation web. Pour privilégier l’impact visuel, optez pour le rendu image par image par code.
- Quelle est la durée prévue ? Les vidéos de 60 secondes ou moins se prêtent naturellement au rendu image par image. Pour un cours de plus d’une dizaine de minutes, l’enregistrement d’une présentation web est plus facile à maintenir.
- Faut-il synchroniser précisément le son et l’image ? Pour caler le montage sur la musique, placer les effets sonores ou créer une boucle sans raccord visible, seul le rendu image par image avec une timeline commune offre un résultat fiable.
- Acceptez-vous d’enregistrer l’écran manuellement ? Pour une production entièrement automatique et reproductible dans un pipeline CI, choisissez le rendu image par image. Si vous préférez expliquer ou enregistrer vous-même à votre rythme, la présentation web offre plus de souplesse.
- Les modifications seront-elles fréquentes ? Les deux approches conservent le code source, mais les changements apportés au texte d’une page web sont visibles immédiatement. Avec le rendu image par image, il faut générer à nouveau la vidéo.
| Scénario typique | Approche recommandée | Raison |
|---|---|---|
| Vidéo promotionnelle de 30 secondes pour le lancement d’un produit | Rendu image par image par code | Large choix de styles, son et image sur une même timeline, export direct en MP4 |
| Animation d’ouverture avec logo / séquence de titre | Rendu image par image par code | Le rendu déterministe garantit un résultat identique à chaque génération |
| Transformer un article technique en vidéo explicative | Enregistrement d’une présentation web | Réécriture automatique du script de narration, une étape à la fois |
| Chapitre de cours en ligne | Enregistrement d’une présentation web | Thème cohérent, structure claire et maintenance facilitée pour chaque cours |
| Courte rétrospective annuelle avec narration | Rendu image par image par code | Les images suivent les horodatages réels de la voix, avec prise en charge des vidéos longues structurées en chapitres |
| Démonstration des fonctionnalités d’un produit | Enregistrement d’une présentation web | Navigation au clic et rythme de démonstration maîtrisé |
💡 Conseil : si vous hésitez, demandez d’abord à l’agent de créer un extrait de 15 secondes et une page de présentation à partir du même cahier des charges. Comparez ensuite la qualité du résultat et le coût des modifications. Avec APIYI apiyi.com, vous pouvez aussi passer de Claude à Kimi, DeepSeek ou d’autres modèles avec une même clé API, et comparer leurs performances sur votre projet.
Questions fréquentes FAQ
Q1 : Que signifie « faire créer des vidéos par un agent de programmation » ?
Cela consiste à demander à un agent de programmation comme Claude Code, Cursor ou Codex de produire une vidéo en écrivant du code. Au lieu d’appeler directement un modèle de génération vidéo, l’agent utilise des pages web, des animations et des scripts de rendu pour assembler l’image et le son. Le résultat est donc modifiable et reproductible.
Q2 : Quelle est la différence entre le rendu image par image par code et l’enregistrement d’une présentation web ?
Le rendu image par image par code offre davantage de possibilités visuelles et une meilleure synchronisation du son et de l’image. Il produit directement un fichier MP4, mais convient surtout aux vidéos courtes. L’enregistrement d’une présentation web facilite la structuration des explications et la maintenance ultérieure, mais nécessite un enregistrement manuel. Le premier ressemble au travail d’un studio d’animation, le second à la création d’une présentation avec des diapositives.
Q3 : Quelles sont les versions actuelles de ces deux compétences et quels agents prennent-elles en charge ?
Selon le dépôt garden-skills, motion-showreel est en version v0.1.0 et web-video-presentation en version v1.2.2. Les deux respectent la spécification SKILL.md et ont été officiellement testées avec Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI et OpenCode.
Q4 : À quels usages cette approche convient-elle le mieux ?
– **Marketing produit** : courtes vidéos annonçant un lancement, animations mettant en valeur des fonctionnalités.
– **Identité visuelle** : animations de logo, génériques d’ouverture et de fin, affiches typographiques animées.
– **Transmission des connaissances** : transformation d’articles techniques en vidéos explicatives, chapitres de cours, formations internes.
– **Contenu pour les développeurs** : explications d’architecture, démonstrations d’outils, présentations de projets open source.
Q5 : Comment configurer l’accès au modèle pour un agent de programmation ?
Inscrivez-vous sur APIYI apiyi.com et créez une clé API, puis renseignez la clé et base_url dans l’agent ou le script. APIYI est compatible avec les formats d’interface OpenAI et Anthropic. Consultez le centre de documentation docs.apiyi.com pour connaître les adresses et les paramètres, et docs.apiyi.com/models pour les tarifs des modèles.
Q6 : L’agent peut-il écrire lui-même la narration ?
Les deux compétences fonctionnent différemment. Le service TTS de motion-showreel lit uniquement le script fourni par l’utilisateur, pour éviter que l’agent écrive lui-même les répliques sans autorisation. web-video-presentation réécrit l’article d’origine sous forme de script de narration, mais vous devez le valider au point de contrôle prévu. Vous pouvez utiliser kimi-k3.1-pro ou claude-sonnet-5-5 sur APIYI pour rédiger une première version, puis la vérifier vous-même.
Q7 : Quelles sont les limites connues de ces deux approches ?
Le rendu image par image par code repose sur la capture de chaque image par un navigateur. Le rendu des vidéos longues prend donc du temps, et les effets 3D complexes ou les effets de particules peuvent l’allonger considérablement. Pour l’enregistrement d’une présentation web, la qualité finale dépend de l’outil de capture et de la personne qui l’utilise, ce qui rend l’automatisation complète difficile. Par ailleurs, certains services TTS intégrés nécessitent une activation séparée. Si le modèle correspondant ne figure pas sur la page des tarifs d’APIYI, cela signifie qu’il n’est pas encore disponible.
Q8 : Peut-on combiner les deux approches ?
Oui, et c’est même très courant. Par exemple, vous pouvez créer une introduction de 10 secondes et des transitions entre les chapitres par rendu image par image, enregistrer une présentation web pour l’explication principale, puis assembler le tout dans un logiciel de montage. Les deux approches reposent sur les technologies web : elles peuvent donc partager la même charte graphique pour les couleurs et les polices.
Créer des vidéos avec un agent de programmation : points clés Key Takeaways
- Deux approches fondamentalement différentes : le rendu image par image produit directement un MP4, tandis qu’une présentation web nécessite un enregistrement manuel de l’écran.
- Le rendu image par image repose sur le déterminisme : la même page
render(t)produit l’aperçu et le master, avec un résultat reproductible. - La présentation web repose sur la structure : une étape visuelle correspond à une phrase de narration, ce qui convient aux longues explications.
- Les points de contrôle déterminent la qualité : 2 ou 5 points de contrôle correspondent respectivement à une priorité donnée au visuel ou au contenu.
- La validation technique est distincte de l’évaluation esthétique : les critères techniques comme les images noires, la sonie et le nombre d’images doivent tous être validés avec le statut PASS.
- Le choix du modèle influence le coût : les modèles utilisés peuvent être accessibles via APIYI, avec des tarifs indiqués sur docs.apiyi.com/models.
Résumé
Pour créer une vidéo avec un agent de programmation, la question n’est pas tant de savoir si c’est possible que de choisir la bonne approche :
- Rendu image par image par code : idéal pour les courts métrages, les génériques et les créations visuelles au rythme marqué, avec une synchronisation audio-vidéo et une exportation directe.
- Enregistrement d’une présentation web : adapté aux explications, aux cours et à la conversion d’articles en vidéos, avec une structure claire et facile à maintenir.
- Décision en 5 étapes : examinez successivement l’objectif du contenu, la durée, la synchronisation audio-vidéo, l’acceptabilité d’un enregistrement d’écran et la fréquence des modifications.
Commencez par une vidéo d’essai de 15 secondes pour valider tout le processus, puis passez au projet final. Pour les modèles, APIYI apiyi.com permet d’invoquer Claude, Kimi, DeepSeek et la gamme GPT Image via une interface unifiée, compatible avec les formats OpenAI et Anthropic. Consultez la page des tarifs pour connaître les prix en vigueur.
📚 Références
- GitHub – garden-skills : dépôt contenant les compétences motion-showreel et web-video-presentation
- Lien :
github.com/ConardLi/garden-skills -
Description : README, SKILL.md et instructions d’installation des deux compétences
-
Spécification Agent Skills : documentation du format SKILL.md
- Lien :
agentskills.io -
Description : structure des répertoires de compétences et chargement à la demande par les agents
-
Centre de documentation APIYI : instructions d’intégration des interfaces
- Lien :
docs.apiyi.com -
Description : paramètres d’intégration pour les formats compatibles avec OpenAI et Anthropic
-
Page des tarifs des modèles APIYI : tarification réelle de chaque modèle
- Lien :
docs.apiyi.com/models - Description : cette page fait référence pour tous les prix mentionnés dans cet article
Auteur : équipe technique APIYI
Échanges techniques : contactez-nous depuis la page d’accueil d’APIYI. Pour plus de ressources sur l’intégration, consultez le centre de documentation docs.apiyi.com.
