Méthode et prompt

L'IA sait faire la vidéo.
Elle ignore votre charte.

Nous avons demandé à Claude une vidéo de motion design de 56 secondes, calée sur une voix off, aux couleurs exactes d'une marque. Sans logiciel de montage. La méthode tient en quatre temps, et le prompt complet est plus bas, prêt à copier.

L'équipe DesignBrain 8 min de lecture

Demander « une vidéo » en une phrase ne suffit pas.

Si vous écrivez « fais-moi une vidéo pour ma marque », vous obtenez la moyenne de ce que le modèle a vu. Des dégradés violets, des cartes arrondies, des titres passe-partout.

Votre charte n'y est pas, parce que le modèle ne la connaît pas. Ce n'est pas un défaut de goût, c'est un fait mécanique : un LLM ne travaille que sur ce qui se trouve dans son contexte à l'instant où il produit. Vos tokens sont dans un dépôt, vos polices dans un Figma, votre ton dans un PDF : aucun de ces endroits n'est consulté.

Deuxième problème, celui-là purement technique : une animation qui tourne en temps réel dans un navigateur se capture mal. Les images sautent, et la synchronisation avec la voix off dérive au fil des secondes.

Troisième problème, plus sournois. L'environnement d'exécution de Claude n'accède pas à tout. Sur notre premier essai, impossible de récupérer le logo officiel depuis Figma ou depuis le site. Claude l'a redessiné. Proche, mais faux. Dans une vidéo qui prétend respecter une charte, c'est le premier détail qu'un directeur artistique remarque.

Claude construit une page, et on la photographie 30 fois par seconde.

L'idée est simple. Claude construit une page HTML où chaque élément dépend d'une seule variable : le temps. Une fonction render(t) place tout à l'instant t. Un navigateur sans interface prend une capture pour chaque image, puis les captures sont assemblées avec le son.

Chaque image devient recalculable à l'identique. Vous pouvez caler un mot à un trentième de seconde près, corriger un plan et relancer le rendu sans rien casser ailleurs.

  1. 3 fichiers

    Rassembler les entrées

    Voix off en MP3, et ses timestamps en .srt si votre outil les exporte. Logo en SVG. Polices, si ce ne sont pas des Google Fonts. Ajoutez une vidéo de référence pour le rythme si vous en avez une. Tout ce qui n'est pas joint sera approximé.

  2. 6 images clés

    Arbitrer le storyboard

    Premier tour : un tableau (timecode, phrase, visuel, mouvement) et six images clés rendues en PNG. Vous tranchez avant tout rendu complet. Corriger une direction à ce stade ne coûte presque rien ; la corriger après, c'est tout refaire.

  3. 1 680 trames

    Rendre image par image

    Second tour : le rendu complet, par lots d'environ 600 images. Sur notre test, 1 680 images en 1080p, environ 90 millisecondes chacune, soit deux minutes et demie de calcul.

  4. 112 vignettes

    Relire, puis mixer

    Claude se relit sur une planche de contrôle : une image toutes les demi-secondes, soit 112 vignettes pour 56 secondes. C'est là que se voient les chevauchements, les textes coupés et les plans vides. Puis la voix et les effets sonores se mixent à −14 LUFS, le niveau attendu sur les réseaux.

Le procédé tient pour quatre raisons.

  • La charte vient d'une source vérifiable. Connecteur de marque, Figma ou PDF : le modèle lit des valeurs au lieu de les deviner. C'est le point qui décide de tout le reste, et nous y revenons plus bas.
  • La synchronisation s'appuie sur les silences de la voix off. Les pauses sont détectées, chaque phrase du transcript est alignée sur son segment, et chaque élément arrive un dixième de seconde avant son mot.
  • Le rendu est déterministe. Aucune animation en temps réel, donc aucune saccade ni dérive : la même seconde recalculée donne la même image.
  • Le modèle se relit à l'œil. La planche de contrôle révèle ce que le code seul ne montre pas — un titre qui déborde, un plan resté vide.

Copiez ce prompt, et remplissez les crochets.

Remplissez les crochets, joignez les fichiers, envoyez. Supprimez les lignes qui ne s'appliquent pas à votre cas. Avant d'envoyer, joignez au minimum trois fichiers : la voix off, le logo en SVG, et vos polices si elles ne sont pas sur Google Fonts.

Prompt · motion design

Objectif
Crée une vidéo de motion design pour [NOM DE LA MARQUE] ([URL DU SITE]), calée sur la voix off jointe. Formats : 1920×1080 à 30 i/s, plus une variante 1080×1350 pour le fil mobile. Style : [sobre / énergique / éditorial], une idée par plan, coupes calées sur la voix, aucun effet décoratif gratuit.
Si une vidéo de référence est jointe, reprends seulement son rythme (fréquence des coupes, manière de faire entrer le texte et les éléments, type de final), jamais son contenu ni ses couleurs.

Pièces jointes
- voix-off.mp3, et voix-off.srt avec timestamps mot à mot si disponible
- reference.mp4/.mov (optionnel)
- logo.svg : logo officiel, à utiliser tel quel, interdiction de le redessiner
- polices de la marque en .woff2/.ttf, si ce ne sont pas des Google Fonts
- visuels de marque utiles (pictos, illustrations, photos, éléments décoratifs)
- musique.mp3 (optionnel)

Transcript
"""[TEXTE EXACT DE LA VOIX OFF]"""

Source de la charte, par priorité
1. Si un connecteur de marque ou de design system est disponible, lis-le avant toute autre action. S'il échoue, dis-le en une ligne et passe au point suivant.
2. Figma : [URL DU NODE] → capture d'écran, puis contexte de design sur un bloc représentatif (titre principal, boutons), pour extraire polices, couleurs, rayons et ombres.
3. Brand book ou charte en PDF, si joint.
4. Valeurs déclarées à défaut :
   - police : [nom + graisses]
   - couleur de texte : [#]
   - couleur primaire : [#]
   - couleurs secondaires : [#, #]
   - fond : [#]
   - rayons, ombres et éléments signature : [pilules, dégradé, grille, texture]
   - ton de voix : [3 adjectifs]
Ne mets à l'écran aucune affirmation que tu n'as pas pu vérifier.

Pipeline technique imposé
- Une seule page HTML avec une fonction render(t) pure : aucune animation CSS ou JS en temps réel. Rendu image par image avec Playwright/Chromium en JPEG, assemblage avec ffmpeg.
- Polices : pièces jointes en priorité, sinon npm @fontsource pour les Google Fonts. Le conteneur peut ne pas joindre Figma, Google Fonts ou le site : tout asset externe vient des pièces jointes.
- Synchronisation :
   - si le .srt est fourni, utilise-le ;
   - sinon, ffmpeg silencedetect en deux passes (-38 dB / 0,12 s, puis -32 dB / 0,05 s) et aligne les phrases du transcript sur les segments ;
   - chaque élément apparaît 0,1 à 0,15 s avant son mot.
- Rendu en premier plan, par lots d'environ 600 images par appel. Pas de process en arrière-plan.
- Son : voix off, whooshes discrets aux coupes, pops sur les apparitions, musique à -20 dB sous la voix. Normalisation à -14 LUFS, pic inférieur ou égal à -1,5 dBTP.

Règles de design
- Au maximum deux niveaux d'information par plan.
- Les éléments signature de la marque sont réservés aux moments clés (conclusion, appel à l'action) ; ne les répète pas partout.
- Si le script oppose « avant / après » ou « générique / notre marque », traite le côté générique dans un style volontairement banal (Inter, dégradés violet/rose) pour que le contraste se voie.
- Les messages clés sont écrits à l'écran : la vidéo doit se comprendre sans le son.
- Aucun logo tiers dessiné : les noms d'outils ou de partenaires apparaissent en texte.

Déroulé
Étape 1, ce tour-ci : storyboard en tableau (timecode, phrase de la voix off, visuel, mouvement) et 6 images clés rendues en PNG. Ensuite tu t'arrêtes, j'arbitre.
Étape 2 :
   - rendu complet ;
   - planche de contrôle à une image toutes les 0,5 s, que tu relis toi-même ;
   - corrections ;
   - livraison du MP4.

Livrables
- MP4 en H.264/AAC
- 5 timecodes de synchro à vérifier
- liste de tout ce qui a été approximé ou n'était pas accessible

Au retour de l'étape 1, vérifiez trois choses sur les images clés : votre police, votre vrai logo, vos couleurs exactes. Si l'une manque, corrigez avant de lancer le rendu — une erreur de charte validée au storyboard se retrouve sur 1 680 images.

Une marque déjà encodée supprime la moitié de ce prompt.

Relisez la section « Source de la charte ». C'est la plus longue du prompt, la plus fragile, et la seule que vous devrez réécrire à chaque vidéo — pour chaque personne de l'équipe qui en produira une.

Elle existe parce que la marque n'est nulle part où le modèle regarde. Quand elle y est, elle tombe à une ligne.

Sans mémoire encodée

  • police : [nom + graisses]
  • couleur de texte : [#]
  • couleur primaire : [#]
  • couleurs secondaires : [#, #]
  • fond : [#]
  • rayons et ombres : […]
  • éléments signature : […]
  • ton de voix : [3 adjectifs]
  • interdits : […]

Recopié à la main, à chaque vidéo. Ce qui est oublié est deviné.

Avec mémoire encodée

  • Lis la mémoire de marque sur le connecteur avant toute autre action

Le modèle va chercher les valeurs lui-même, avant de produire. Rien à rappeler, rien à oublier.

Ce n'est pas une économie de frappe. Trois choses changent, et elles sont mesurables :

  • La valeur cesse de diverger. Un hexadécimal recopié dans un prompt est une deuxième source de vérité : le jour où la palette évolue, les anciennes vidéos gardent l'ancienne, et personne ne le voit.
  • Les interdits arrivent avec les valeurs. Une liste de ce qu'il faut faire laisse encore mille façons de mal faire. Ce sont les anti-patterns — « jamais l'accent en aplat de fond », « un seul fragment de titre en dégradé » — qui ferment les portes une par une, et ce sont eux qu'on oublie de recopier.
  • Le contrôle devient mécanique. Quand les règles existent quelque part sous forme explicite, un écart se repère et se corrige. Sans elles, il n'y a rien à comparer : on discute du résultat au ressenti.

C'est exactement ce que fait un Design Brain branché sur Claude, ChatGPT ou Cursor : votre identité cesse d'être un document à recopier et devient une ressource que le modèle interroge. Vous ne changez ni d'outil, ni d'abonnement, ni de méthode.

Voici ce que cette méthode ne fait pas.

  • Sans fichier .srt, la synchronisation est bonne à la phrase (environ un dixième de seconde) et plus approximative à l'intérieur des phrases longues.
  • Tout asset non joint est recréé. Logo, polices propriétaires, illustrations : joignez-les. Le logo, en particulier, se pose depuis un fichier — il ne se génère jamais.
  • Le style qui marche le mieux reste la typographie, les interfaces et les formes simples. Personnages animés, 3D réaliste et images filmées sortent du périmètre.
  • Aucune musique n'est générée. Le modèle synthétise des effets sonores discrets ; pour une ambiance, joignez votre propre piste.
  • Un rendu lancé en arrière-plan s'arrête à la fin du tour de conversation. D'où la consigne de rendre en premier plan, par lots.
  • Une mémoire encodée ne remplace pas le jugement. Elle applique des règles ; elle ne décide pas si un film est bon. C'est encore vous qui validez.

Ce déroulé sert trois situations.

  • Vous avez une charte claire et un besoin régulier de vidéos courtes — lancement, nouvelle fonctionnalité, publication sociale. Ce déroulé prend en charge une bonne partie du motion design.
  • Vous êtes designer et voulez tester une intention d'animation avant de passer sur After Effects : vous obtenez un prototype fidèle en quelques allers-retours.
  • Vous n'avez ni motion designer ni budget pour un teaser : vous repartez avec une base propre à faire valider.

Le point à retenir

La méthode décrite ici marche telle quelle : copiez le prompt, joignez vos fichiers, vous aurez un film. Ce qui se répète, c'est la moitié du prompt où vous redites au modèle ce qu'est votre marque — et cette moitié-là n'a pas à être écrite deux fois.

Si vous voulez voir ce que votre identité donnerait encodée, l'audit dure 30 minutes et il est gratuit.

Questions fréquentes

Faut-il un logiciel de montage ?

Non. La vidéo est une page HTML photographiée image par image, puis assemblée avec la piste son. Les retouches se font au timecode, dans la conversation : un plan à décaler, trois minutes de rendu.

Pourquoi le logo sort-il faux au premier essai ?

Parce que l'environnement d'exécution n'atteint pas toujours Figma ni votre site. Ce qui n'est pas joint est redessiné, et un logo redessiné est faux. Le logo se pose depuis un fichier ; il ne se génère jamais.

Combien de temps prend un film d'une minute ?

Deux allers-retours de conversation. Un storyboard à arbitrer au premier tour, le rendu complet au second : 1 680 images en 1080p, environ 90 millisecondes chacune, soit deux minutes et demie de calcul.

Qu'est-ce qu'une mémoire de marque encodée change à ce prompt ?

Elle supprime la section la plus longue et la plus fragile : celle où vous recopiez police, couleurs, rayons, ombres et interdits. Le modèle lit ces valeurs sur le connecteur avant de produire, à chaque vidéo, sans que personne ait à les rappeler.