Que fait product-demo-video ?
Intègre le design de produits réels (code + site en ligne) 1:1 et produit en série des vidéos de démonstration/promotion cinétiques de haute qualité avec une grande reproductibilité grâce à Claude Code.
Source : https://github.com/kzkhykw/product-demo-video
Marqué pour la tâche de découverte de vidéos de lancement Awesome Skills (soirée du 20 septembre 2026).
Note technique : Pour utiliser ce skill, assurez-vous que votre environnement Claude Code dispose des dépendances nécessaires (ex. : un navigateur headless ou un outil de capture d'écran). Le processus se base sur l'injection de design
1:1– le skill extrait les styles et la mise en page du code et du site live, puis génère une séquence vidéo animée qui correspond exactement à l'aspect du produit original.
Exemple d'utilisation
# Ajouter le skill à votre projet Claude Code
claude add skill kzkhykw/product-demo-video
# Lancer la génération d'une vidéo de démonstration
claude run "Génère une vidéo de démonstration pour le composant Header de mon application React"
Configuration requise
- Un projet avec un code source accessible et/ou une URL de site public
- Claude Code configuré avec les permissions d'accès au système de fichiers et au réseau
- (Optionnel) Modules complémentaires : puppeteer, ffmpeg ou tout autre outil de rendu vidéo spécifié par le skill
Workflow typique
- Le skill inspecte le code du produit et/ou la page live pour extraire les styles (couleurs, polices, espacements, animations)
- Il génère une séquence d'animations cinétiques (transitions, zooms, survols) basée sur la structure du composant
- Il assemble ces animations en une vidéo MP4 ou GIF prête à être partagée
- Il sauvegarde la vidéo dans le répertoire
./demos/du projet (ou un dossier personnalisé)
Personnalisation
Vous pouvez influencer la sortie en fournissant des instructions supplémentaires dans votre prompt Claude Code, par exemple :
- "> Utilise un fond sombre et une vitesse d'animation lente"
- "> Ajoute une légende en bas de la vidéo avec le nom du composant"
- "> Ne montre que les interactions de survol et de clic"
Pour plus de détails, consultez le dépôt GitHub : kzkhykw/product-demo-video