Innate-Labs/product-demo-video

Product Demo Video（产品演示片）

Transformez une application web réelle en une vidéo de démonstration élégante : captures d'écran réelles de pages + interfaces reconstruites en code, intégrées dans un mockup de navigateur, avec sous-titres, logo, musique, et rendu final en courte vidéo verticale/carrée.

C'est automatique — donnez simplement un projet fonctionnel à Claude, et il :

• Comprend automatiquement le produit : lit CLAUDE.md / README / les routes, détermine la fonction de chaque page et la tonalité du produit.
• Génère automatiquement le texte à partir du code : en se basant sur la fonction réelle de chaque page, il rédige les titres/sous-titres des scènes et le contenu de la barre d'adresse, sans écrire manuellement.
• Localise automatiquement le logo : trouve le vrai logo vectoriel de votre projet dans public/ et l'utilise pour l'intro et l'outro.

Vous n'intervenez que sur quelques choix clés (rapport de canvas, pages à inclure, rythme, son).

Compétences préalables : Cette compétence dépend de [remotion-best-practices] (cadre vidéo) et [agent-browser] (captures d'écran). Avant de manipuler le code Remotion, chargez d'abord remotion-best-practices pour obtenir les connaissances du domaine.

Quand l'utiliser

L'utilisateur souhaite transformer une application web fonctionnelle (son propre projet / un répertoire donné) en une courte vidéo de démonstration / promotion. Exemple typique : "Fais une vidéo de démo de notre produit", "Transforme cette page en clip promotionnel vertical".

Format du livrable

Un projet Remotion qui rend une vidéo MP4 :

• Canvas : Vertical 1280×1706 (3:4, par défaut, adapté aux réseaux sociaux) / Carré 1080×1080 / Paysage 1920×1080
• Structure : N scènes, chaque scène = une page produit (capture d'écran réelle ou reconstruite en code) placée dans un mockup de navigateur, avec sous-titres en bas ; transitions crossfade entre les scènes + Ken Burns lent sur l'ensemble de la fenêtre ; terminer par le logo et le slogan de la marque
• Son : Musique libre de droits (par défaut) ou narration TTS (optionnelle)

Processus complet (5 phases)

Phase 1 — Comprendre le produit & planifier le récit

1. Lisez les fichiers CLAUDE.md / README.md / DESIGN.md du projet pour comprendre : quel est le produit, quelles sont ses pages/fonctionnalités clés, et les contraintes de tonalité (couleurs/polices/interdits — voir reference/tone.md, respectez impérativement le DESIGN.md du projet).
2. Listez les routes des pages (find app -name page.tsx), comprenez la fonction de chaque page, déduisez automatiquement un fil narratif « parcours utilisateur » (ex. « Fonctionnalité principale A → B → C → page de résultats »), et rédigez automatiquement le texte des sous-titres pour chaque segment.
3. Confirmez avec l'utilisateur : rapport de canvas, étapes à inclure, rythme, solution sonore. Signalez à l'avance les pages qui ne peuvent pas être capturées en vrai (pages en temps réel / nécessitant des données spéciales).

Phase 2 — Capturer les pages réelles (priorité aux pages capturables)

Utilisez agent-browser. Voir scripts/capture-pages.md. Points clés :

• Démarrez le frontend et le backend du projet cible (en arrière-plan), attendez qu'ils soient prêts.
• Définissez une fenêtre d'affichage standard : agent-browser set viewport 1440 900 2 (@2x retina, ratio 16:10 normal pour navigateur, captures nettes).
• Gérez la connexion : la plupart des pages (app) nécessitent une connexion. Trouvez un compte de test dans dev.db ; le mot de passe est hashé, avec l'autorisation de l'utilisateur utilisez la fonction de hachage du projet pour le réinitialiser temporairement (après la capture, vous devez le restaurer, voir les leçons).
• Supprimez les badges de développement : agent-browser eval "document.querySelectorAll('nextjs-portal').forEach(e=>e.remove())".
• Pour chaque page cible, prenez une capture nette et stockez-la dans le projet Remotion sous public/<brand>/.

Phase 3 — Reconstruire en code les pages non capturables (point crucial pour la qualité)

Certaines pages ne peuvent pas être capturées en vrai (salle d'entretien vocal en temps réel sans micro en headless, page de rapport dépendant du backend, données manquantes). N'inventez pas visuellement —

1. Lisez le code des composants réels (components/.../XxxLayout.tsx etc.) pour comprendre la mise en page réelle, les éléments et la structure des données.
2. Reconstruisez 1:1 la structure réelle dans Remotion sous forme de composant React, à rendre dans la zone de contenu de la fenêtre (dimensions = W×H de la zone de contenu).
3. Exemples dans templates/screens/InterviewScreen.tsx (interface de conversation) et templates/screens/ReportScreen.tsx (interface de rapport) — ce sont des modèles neutres pour « reconstruire à partir du code réel ». Adaptez la technique pour votre produit en écrivant le contenu réel.

Phase 4 — Assembler la vidéo de démonstration

Utilisez templates/PromoVideo.tsx comme squelette (mockup navigateur + crossfade de scènes + Ken Burns + sous-titres + Outro + audio) et templates/PromoRoot.tsx pour enregistrer la composition.

• Chaque scène configure { type: 'image'|'<custom>', src?, addr, title, sub }.
• La barre d'adresse change avec la scène (réalisme accru).
• Localisez et utilisez automatiquement le vrai logo du projet pour l'intro et l'outro (cherchez dans public/ des fichiers comme icons/logo.svg — des logos vectoriels réels, pas de texte simulé).
• Respectez scrupuleusement la charte graphique (voir ci-dessous).

Phase 5 — Son & rendu

• BGM (par défaut) : Musique libre de droits utilisable commercialement via Mixkit, scripts/get-bgm.sh pour télécharger et faire écouter à l'utilisateur. Musique de fond sur toute la vidéo, fondu entrée/sortie.
• Narration TTS (optionnelle) : scripts/gen-tts.sh, utilise l'API compatible AiHubMix/OpenAI /audio/speech (gpt-4o-mini-tts, qualité humaine, nécessite une clé utilisateur). Chaque phrase alignée sur une scène, durée de la scène adaptée à la longueur de la narration. N'utilisez pas say de macOS (voix mécanique, mauvaise qualité).
• Rendu : npx remotion render <id> out/<name>.mp4, vérifiez la présence de la piste audio et la durée, copiez dans ~/Desktop/.

Tone — Charte graphique (c'est la clé de la qualité « terminal », voir reference/tone.md)

Tonalité par défaut = sobre, professionnelle, authentique. Sauf si DESIGN.md du projet en décide autrement :

• Couleurs : fond blanc (#F4F4F6 pour le canvas / #FFF pour la fenêtre) + texte en noir et blanc/gris (#141414 / #8A8A90), pas de couleurs vives ; les points rouges fonctionnels (enregistrement/connexion) sont conservés tels quels.
• Polices : Unifiée PingFang pour le chinois et l'anglais ("PingFang SC","Heiti SC",sans-serif), directement disponible sur macOS ; n'utilisez pas Inter (le fallback chinois est incohérent).
• Mockup navigateur : Fenêtre blanche avec coins arrondis de 18px + barre chrome en haut (trois points gris, pas de couleurs rouge/jaune/vert + pilule d'adresse), ombre douce.
• Mouvements de caméra : Easing uniforme Easing.bezier(0.16,1,0.3,1) ; entrée de la fenêtre en spring ; Ken Burns lent scale 1→1.03 sur la fenêtre entière, pas sur l'image intérieure (sinon recadrage du contenu).
• Rythme : Durée uniforme des scènes (par défaut 60 images/2s à 30fps), régulier ; pour synchroniser avec la musique, mesurez le BPM et alignez sur les mesures.
• Sous-titres : Centrés en bas, titre large en PingFang Semibold + sous-titre gris plus petit, crossfade.
• Pas d'émoji.

Liste des interdits (à ne pas faire) : Couleurs vives, points de couleur rouge/jaune/vert, Inter avec du chinois, objectFit cover qui recadre le contenu de la page, inventer visuellement des pages non capturables, TTS mécanique, rythme irrégulier, faux logo textuel.

Leçons apprises (à lire impérativement)

• Le navigateur headless n'a pas de micro/caméra : Les pages de voix/vidéo en temps réel bloqueront sur « Préparation / Périphérique indisponible », impossibles à capturer — allez directement à la reconstruction en code, n'insistez pas.
• Décalage de schéma de base de données en développement local : Le code a ajouté une migration mais la base locale n'a pas été exécutée, ce qui provoque une erreur 500 (ex. no such column: xxx). Pour les captures / remplissage de données, vous pouvez ALTER TABLE ADD COLUMN pour ajouter les colonnes manquantes (sûr, ne supprime pas les données), mais expliquez-le.
• Les modifications de la base de données locale doivent être restaurées : Les mots de passe de test réinitialisés, les données d'exemple temporairement remplies, doivent être restaurées à leur valeur d'origine après la capture (sauvegardez d'abord le hash/JSON d'origine). Les colonnes ajoutées peuvent être conservées (le code les attend).
• objectFit ne doit pas recadrer le contenu : Pour intégrer la capture dans la fenêtre, utilisez objectFit:"contain" pour afficher l'image entière ; l'agrandissement Ken Burns doit s'appliquer à la fenêtre externe, pas à l'image, sinon le bas de la page est recadré.
• Pour remplir des données d'exemple, vérifiez les noms de champs dans le code : Les noms de champs lus par le frontend diffèrent souvent de l'intuition (pluriel, underscore, etc.). Lisez impérativement le composant de rendu pour confirmer, ne devinez pas.
• Texte en chinois contenant des guillemets ASCII → utilisez des backticks pour toute la chaîne (règle globale de CLAUDE.md).
• Le répertoire de travail Bash persiste entre les appels : Utilisez des chemins absolus, ne répétez pas cd sous-répertoire.

Vérification rapide

Après avoir modifié le code Remotion : npx tsc --noEmit ; rendez une image clé npx remotion still <id> out/check.png --frame=N --scale=0.5 pour une auto-vérification visuelle ; après le rendu final, utilisez ffprobe pour confirmer la piste audio et la durée.