Démo pitch deck (app réelle)

/pitch-deck-video

Génère une vidéo de démonstration de produit commentée à partir d'une application web locale en cours d'exécution. Le montage est dérivé, jamais chronométré manuellement, donc lorsque le frontend change, vous ré-enregistrez et la coupe suit — aucun numéro d'image à réparer.

Conçu pour le cas qui se produit réellement : l'interface utilisateur bouge encore pendant que vous avez besoin de la vidéo.

Utilisation

/pitch-deck-video                          # filme l'application dans le répertoire actuel
/pitch-deck-video <chemin-vers-app>        # filme une application spécifique
/pitch-deck-video --rebuild                # ré-enregistre et remonte un projet vidéo existant
/pitch-deck-video --script                 # narration modifiée uniquement ; réutilise la dernière prise
/pitch-deck-video --render                 # cartes/légendes modifiées uniquement ; relance le rendu

Sa structure

Quatre fichiers générés pilotent tout. Seul le premier est écrit par un humain.

fichier	contient	écrit par
shots.json	ce qui est dit, la voix, la musique, le thème, et ce que le navigateur fait	vous
src/vo-durations.json	combien de temps chaque ligne prend réellement	scripts/tts.mjs
capture/marks.json	quand chaque plan a commencé dans la prise, et où regarder	scripts/record.mjs
src/frames.json	combien d'images sont issues de la prise	scripts/frames.mjs

src/timeline.ts dérive l'intégralité du montage à partir de ces fichiers. Les durées des scènes proviennent de l'audio de la narration mesuré. Les séquences sont étirées pour correspondre. Les mouvements de caméra proviennent des boîtes englobantes des éléments mesurées en direct pendant l'enregistrement, donc un bouton déplacé déplace le plan au lieu de le casser.

Flux de travail

1 · Structure initiale

Copiez template/ de cette compétence dans <nom-app>-video/ à côté de l'application, puis npm install. Le modèle est livré avec des JSON d'exemple pour qu'il soit typé et rendu avant le premier enregistrement.

Ne modifiez jamais les fichiers sous ~/.claude/skills/pitch-deck-video/template/ pour un seul projet — c'est le modèle partagé. Modifiez la copie.

2 · Vérifiez d'abord une connexion enregistrée

Si l'application a une authentification, cherchez un état de stockage Playwright que le dépôt conserve déjà pour ses propres tests e2e (.auth/*.json, storageState, playwright/.auth/). Pointez app.storageState vers ce fichier et l'enregistrement commence connecté sans écran de connexion filmé. Ne construisez un plan de connexion que s'il n'existe pas de tel fichier — et alors utilisez {"type": {"sel": "…", "env": "DEMO_PASSWORD"}} pour que le mot de passe ne soit jamais écrit dans shots.json.

3 · Apprenez l'application avant d'écrire un mot

Lancez le serveur de développement de l'application et prenez une capture d'écran de chaque route en 1920×1080, puis lisez les images. N'écrivez pas la narration à partir du code source. Vous écrivez sur ce qu'un juge verra, et seules les captures d'écran vous le disent.

// script unique ; Playwright est fourni avec le modèle
for (const r of routes) {
  await p.goto(base + r, { waitUntil: 'networkidle' });
  await p.waitForTimeout(700);
  await p.screenshot({ path: `/tmp/shots/${r}.png` });
  console.log(r, await p.evaluate(() => document.documentElement.scrollHeight));
}

Notez les hauteurs de défilement : tout ce qui dépasse 1080 nécessite une action scroll sinon cela n'apparaît jamais à l'écran.

4 · Écrivez shots.json

Partez de template/shots.example.json. Voir references/shots-reference.md pour chaque champ et action.

Extrayez les theme.colors des tokens de design de l'application elle-même pour que les cartes et les séquences soient harmonieuses. Remplissez cards.arch.nodes avec l'architecture réelle — quels blocs sont des appels de modèle et lesquels sont du code déterministe. Ce détail distingue une démo d'un simple wrapper, et les juges le cherchent.

Règles de narration qui comptent :

• 12 à 16 séquences, 1:30 à 1:50 au total. Sous une limite de 2:00, laissez 10 secondes de marge.
• Une idée par séquence. La séquence se termine quand l'idée se termine.
• Dites le nombre. « Six personnes ont marqué, Priya gagne » bat « ça choisit quelqu'un ».
• Ne racontez jamais l'interface utilisateur. Pas « ici nous cliquons sur Approuver » — dites ce que cela signifie.
• Commencez par le problème dans les mots de l'utilisateur, avant que le nom du produit n'existe.
• Terminez sur une phrase que vous voulez laisser à l'écran.

5 · Construction

APP_DIR=/chemin/vers/app npm run all

Narration → enregistrement → images → rendu. Cela démarre le serveur de développement si rien ne sert app.url, en lisant le script dev de l'application pour déterminer comment ce framework gère un port. Définissez app.devCommand si quelque chose de spécifique est nécessaire. Reconstruction complète typique : ~2 minutes.

shots.json est d'abord validé, donc un identifiant en double ou une action inconnue échoue en deux secondes plutôt que de produire une vidéo confuse deux minutes plus tard.

6 · Assurance qualité en regardant — ce n'est pas optionnel

npm run qa          # une image par plan, regroupée en planches contacts
npm run qa 3        # trois par plan, pour vérifier une transition

Ensuite lisez les planches comme des images. Parcourir la vidéo est lent et vous risquez de manquer des choses ; une planche contact prend quelques secondes et capture exactement les échecs qui comptent.

Vérifiez : capture/marks.json → warnings est vide (un sélecteur manquant est un avertissement, pas un plantage — vous obtenez quand même une vidéo, et une liste de ce qui a cassé). Ensuite : chaque légende tombe-t-elle sur une image qui la soutient ? Y a-t-il des images blanches ou vides ? Le petit texte est-il lisible, ou nécessite-t-il un focus ?

references/troubleshooting.md contient chaque échec que ce pipeline a réellement rencontré et le correctif pour chacun. Lisez-le avant de déboguer à partir de zéro.

Remontage après des changements de l'interface utilisateur

C'est tout l'intérêt de l'outil.

APP_DIR=/chemin/vers/app npm run all

La plupart des changements ne nécessitent rien d'autre — éléments déplacés, pages restylisées, nouveau contenu. Ce qui nécessite encore un jugement :

• Une page a été supprimée ou renommée → redirigez ou remplacez ce plan.
• Une fonctionnalité a été réécrite → la narration pour cette séquence est désormais une affirmation sur quelque chose qui n'existe plus. Réécrivez la ligne.
• Un sélecteur a véritablement disparu → vérifiez la liste des avertissements et corrigez-le là.

La narration est mise en cache par ligne, donc seules les lignes modifiées sont resynthétisées.

Voix

La voix est le plus grand facteur de différence de qualité dans la vidéo finale, et le repli est vraiment médiocre. Dites-le clairement avant la première construction plutôt qu'après.

• tts.provider: "minimax" — bien. Demandez à l'utilisateur où se trouve sa clé MiniMax et pointez tts.envFile vers ce fichier. Les identifiants vocaux proviennent de la liste des voix système de MiniMax ; l'étiquette de langue sur une voix est une indication, pas une restriction (une voix étiquetée ukrainienne lit bien l'anglais avec languageBoost: "English").
• tts.provider: "say" — le synthétiseur intégré de macOS, et seules les voix héritées sont généralement installées. C'est robotique, il déforme les noms de produits, et c'est évident pour quiconque regarde. Utilisable pour vérifier le timing, faible pour tout ce qu'un juge ou un client verra.
• Un enregistrement humain bat les deux. Déposez des fichiers <id>.wav dans public/vo/ et exécutez npm run script ; les durées sont remesurées et la vidéo entière se recalibre sans autre édition.

S'il n'y a pas de clé, construisez la vidéo quand même — mais dites à l'utilisateur d'avance que la voix est le point faible et qu'une clé ou dix minutes avec un microphone le corrigent. Ne livrez pas discrètement une voix off say comme si c'était fini.

MiniMax revient à say par ligne si l'API est inaccessible, donc une exécution n'échoue jamais complètement.

Ne copiez jamais une clé API dans le projet. scripts/tts.mjs lit MINIMAX_API_KEY / MINIMAX_GROUP_ID depuis l'environnement, et sinon les analyse à partir du fichier nommé par tts.envFile. Demandez à l'utilisateur où se trouve sa clé et pointez envFile vers ce fichier.

Un enregistrement humain bat n'importe quel synthétiseur : déposez des fichiers <id>.wav dans public/vo/ et exécutez npm run script — il les remesure et recalibre toute la vidéo.

Musique

scripts/music.mjs récupère la piste nommée dans music.url avec yt-dlp et coupe un fond musical à la durée actuelle de la vidéo. Dites à l'utilisateur de vérifier la licence de la piste avant de publier — les pistes de bibliothèque sont généralement gratuites avec attribution dans la description et payantes sans. Le titre et l'URL sont sauvegardés dans public/music/SOURCE.txt pour que le crédit soit facile à copier.

À ne pas faire

• Ne réglez pas manuellement les timings. Si une séquence semble précipitée, la narration est trop longue pour le plan — corrigez shots.json, pas la timeline.
• Ne mettez pas <Screen /> à l'intérieur d'un <Sequence>. Il lit le temps absolu par conception ; useCurrentFrame() à l'intérieur d'une Sequence renvoie des images locales à la séquence. Cela a déjà cassé la vidéo et le symptôme (séquence subtilement décalée par rapport à la voix) est difficile à repérer.
• Ne laissez pas le temps de configuration apparaître à l'écran. La navigation, le chargement des données et la fermeture d'une bannière se produisent dans la fenêtre de capture du plan et sont étirés sous la narration. Mettez {"cut": true} après les étapes de configuration ; la séquence commence alors à partir de là.
• Ne filmez rien qui soit simulé. Si un bouton renvoie « connectez le backend », laissez-le de côté et dites à l'utilisateur quel plan ajouter une fois qu'il est câblé.
• Ne livrez pas sans vérifier la liste des avertissements.
• Ne racontez pas un nombre que vous pouvez voir varier entre les exécutions, et ne décrivez jamais un écran comme plein quand la version de ce compte est vide. Un juge qui repère une fausse affirmation remet en doute le reste.