Vidéos de formation système
Enregistre l'utilisation réelle d'un système web et le transforme en vidéos de formation finies : une vidéo courte par chapitre, et une vidéo complète avec des marqueurs de chapitre. Il n'y a pas de voix. De courtes bulles expliquent ce qui se passe et pourquoi.
La méthode est fixe car chaque partie résout un problème d'enregistrement réel. Seul l'aspect change d'un système à l'autre.
| Reste identique dans chaque système | Provient du système lui-même |
|---|---|
| Vidéo 1920 × 1080, 30 images par seconde, MP4 | Couleurs des cartes et des bulles, lues depuis ses pages |
| Carte de titre : logo, accroche, titre, une ligne, bande de couleur | Couleur de surbrillance, de flèche et de cercle de clic |
| Bulle avec flèche, et une surbrillance sur l'élément | Polices de titres et de corps, y compris les polices web |
| Compteur "Étape n sur N" dans un coin | Arrondi des coins, depuis ses boutons |
| Curseur lent, cercles de clic, zooms fluides, coupures au chargement | Logo |
| Effets sonores, générés par code | Bulles claires ou sombres, selon son arrière-plan |
| Cartes chapitre noires et marqueurs dans la vidéo complète | Langue et texte de droite à gauche |
Règles et pourquoi elles existent
- Une copie locale avec des données fictives uniquement. Les scripts cliquent et sauvegardent pour de vrai, et une vidéo peut être partagée avec n'importe qui. Le moteur refuse les adresses non locales. Seul le propriétaire du système peut définir
allowRemote: true, et uniquement pour un serveur de test qui ne contient aucune donnée réelle. Ne le pointez jamais sur un système en production, et n'affichez jamais les vrais noms, e-mails ou documents de personnes. - L'application n'est pas modifiée. Tout se trouve dans le dossier
video-tour/du projet, qui a ses propres packages. Si une tâche ne peut pas être montrée sans modifier l'application, omettez-la et signalez-le. - Les vidéos restent hors du dépôt. Elles vont dans un dossier en dehors de celui-ci.
- Suivez les propres règles du projet. Lisez d'abord son
CLAUDE.mdou équivalent. S'il indique que le propriétaire utilise git, n'utilisez pas git. Sur une petite machine, exécutez une tâche lourde à la fois. - Ne simulez pas ce que le système ne peut pas faire. Une tâche qui dépend de la date du jour, d'un service externe ou d'une fonctionnalité avec des réponses changeantes (un chatbot) est omise et signalée. Toute donnée préparée avant l'enregistrement est divulguée dans le rapport.
Étape 1 : Rassemblez ce dont vous avez besoin, une fois
Regardez d'abord dans le projet : README, package.json, docs, données d'amorçage, comptes de test. Demandez ensuite ce qui manque encore en une seule liste, et ne vous arrêtez pas pour redemander avant la première validation.
- Comment démarrer le système localement, et son adresse.
- Comment réinitialiser les données de test. Sans réinitialisation, les chapitres entrent en conflit avec les données des autres.
- Comptes de test, un pour chaque rôle dont les vidéos ont besoin.
- À qui sont destinées les vidéos. Cela détermine quelles tâches comptent et les mots sur les cartes.
- La langue des bulles. Par défaut : la langue des écrans du système.
- Où les vidéos doivent être placées. Par défaut : un dossier à côté du projet.
Étape 2 : Apprenez le système et planifiez les chapitres
Lisez ses routes, son menu et toute documentation utilisateur, et ouvrez les pages dans le système en fonctionnement. Écrivez ensuite un plan de chapitres : un chapitre pour chaque domaine dans lequel une personne travaille réellement, chacun construit autour de tâches ("créer une commande et l'envoyer pour approbation"), pas une visite des écrans. Un chapitre comporte généralement 2 à 6 étapes et dure 1 à 4 minutes. Commencez par un chapitre "Pour commencer". Listez ce que vous prévoyez d'omettre, avec la raison.
Étape 3 : Configurez et lisez l'apparence du système
node ~/.claude/skills/system-training-videos/scripts/init.mjs <dossier du projet> --out "<dossier vidéo>"
cd <dossier du projet>/video-tour && npm install && npx playwright install chromium
Remplissez chaque TODO dans video-tour/tour.config.mjs. Vérifiez que la connexion fonctionne en exécutant la commande suivante, qui l'utilise :
node video-tour/tour.mjs brand
Ceci visite le système, lit son apparence, écrit theme.json et le logo, et sauvegarde quatre aperçus dans <dossier vidéo>/_work/brand/ : title-card.png, chapter-card.png, callout.png et counter.png. Regardez les quatre. La détection des couleurs est une bonne estimation, pas un fait, alors jugez-les comme le ferait un spectateur : cela ressemble-t-il au système ? Le bon logo est-il présent ? Le titre est-il dans sa vraie police ? Corrigez tout ce qui concerne le theme dans la configuration, puis exécutez à nouveau brand. Voir references/theme-and-config.md.
Étape 4 : Chapitre 1, puis une approbation
Écrivez le chapitre 1 (lisez d'abord references/writing-chapters.md), puis :
node video-tour/tour.mjs make 1
make réinitialise les données, fait une répétition rapide, réinitialise à nouveau, enregistre, construit et vérifie. Regardez l'image fixe et la feuille de contact qu'il imprime.
Arrêtez-vous ensuite et montrez au propriétaire le plan des chapitres, les tâches omises et l'image fixe. C'est la seule approbation. Il est peu coûteux de modifier l'apparence ou le plan maintenant, et coûteux après une série complète. Après l'accord, terminez la série sans vous arrêter.
Étape 5 : Les autres chapitres
Pour chaque chapitre : écrivez-le, exécutez make et regardez sa feuille de contact. check détecte ce qui peut être mesuré : bulles à l'écran pendant moins de 2,5 s, écrans de chargement devant la caméra, erreurs du navigateur, niveaux sonores. Il ne peut pas voir le sens, alors lisez les images vous-même pour :
- une bulle sur le mauvais élément, ou coupée au bord de l'écran ;
- une bulle, un compteur ou une popup couvrant ce que le spectateur doit voir ;
- un message d'erreur, une page vide ou quoi que ce soit qui ne soit pas fictif ;
- un zoom qui coupe ce qu'il devrait montrer.
Si quelque chose est douteux dans la feuille, extrayez une image complète : ffmpeg -ss 20 -i chapitre.mp4 -frames:v 1 frame.png.
Si un chapitre échoue encore après deux séries de corrections, sautez-le, signalez-le et continuez. Les problèmes déjà rencontrés sont dans references/troubleshooting.md.
Étape 6 : La vidéo complète
Avec tous les chapitres construits et le système en fonctionnement :
node video-tour/tour.mjs join
Ceci écrit <nom>-formation.mp4 avec une carte d'ouverture, une carte noire avant chaque chapitre, une carte de fermeture, des marqueurs de chapitre et chapters.txt (lignes "00:00 Titre", prêtes pour YouTube). Vérifiez la longueur et les marqueurs :
ffprobe -v error -show_entries chapter=start_time:chapter_tags=title -of csv=p=0 <vidéo complète>
Étape 7 : Rapport
Écrivez pour quelqu'un qui n'est pas technique, en phrases courtes :
- Le chemin et la durée de chaque chapitre et de la vidéo complète, dans un tableau.
- Le dossier avec une image fixe par chapitre.
- La liste des chapitres avec les heures de début.
- Ce qui a été omis ou sauté, et pourquoi.
- Les données préparées avant l'enregistrement, que la vidéo ne montre pas.
- Les petits défauts visuels que vous avez vus et acceptés.
- Que vous avez vérifié le son en le mesurant, pas en l'écoutant, donc une personne devrait écouter un chapitre avant de le partager.
Arrêtez ensuite les serveurs que vous avez démarrés.
Fichiers de référence
references/writing-chapters.md: à lire avant d'écrire un chapitre. Chaque action, les motifs qui gardent une vidéo propre, et comment écrire des bulles.references/theme-and-config.md: les paramètres, ce quebrandlit, et comment corriger l'apparence.references/troubleshooting.md: à lire lorsqu'un enregistrement échoue ou qu'une image semble incorrecte.