Communitygithub.com

4ndychu/natural-ai-demo-video

NAVI (natural AI demo video) crée des vidéos de démonstration naturelles sans visage, des walkthroughs, des visites de produits, des tutoriels, des screencasts et des leçons de cours pour tout site Web ou application Web, avec un doublage IA qui ne sonne pas robotique. Claude explore le site, rédige un script parlé et des sous-titres propres, le vocalise avec ElevenLabs, enregistre le navigateur en cliquant en synchronisation avec la voix, floute les données privées et exporte un MP4 avec sous-titres. À utiliser chaque fois que quelqu'un souhaite une vidéo de démonstration ou explicative, un enregistrement d'écran avec doublage, un walkthrough narré ou un tutoriel sans visage, même s'il ne nomme pas cette compétence. Nécessite Claude Code exécuté sur l'ordinateur de l'utilisateur.

Qu'est-ce que natural-ai-demo-video ?

NAVI (Natural AI Video) est une compétence pour Claude Code qui permet de créer des vidéos de démonstration professionnelles, sans visage et avec un doublage vocal naturel, directement depuis le navigateur. Contrairement aux outils de capture d'écran basiques ou aux générateurs de voix robotiques, NAVI orchestre l'ensemble du processus : Claude explore le site ou l'application web avec Playwright, rédige un script parlé et des sous-titres clairs, génère un doublage via ElevenLabs (voix naturelle, non robotique), enregistre les actions du navigateur synchronisées avec la voix, floute automatiquement les données sensibles (identifiants, mots de passe, numéros de carte) selon des niveaux de confidentialité configurables, et exporte une vidéo MP4 1080p avec sous-titres incrustés ou fichier .srt séparé. La compétence est conçue pour les démonstrations de produits, les walkthroughs narrés, les tutoriels sans visage et les visites guidées d'applications web. Elle gère également les refusions partielles, les réglages de voix (ton, rythme, hésitations) et le stockage sécurisé des clés API. Attention : elle fonctionne uniquement sur la machine personnelle de l'utilisateur (via Claude Code en terminal, IDE ou application de bureau) et non dans un sandbox cloud ; dans ce dernier cas, seule la partie script peut être travaillée. Le projet est en cours de développement : l'interface locale est complète, mais le moteur d'enregistrement n'est pas encore déployé.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/4ndychu/natural-ai-demo-video/tree/HEAD

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

NAVI : vidéos de démonstration IA naturelles

NAVI transforme « fais une démo de X » en un MP4 terminé avec sous-titres : pas de visage, pas de microphone, et une voix qui ressemble à celle d'une personne expliquant quelque chose, pas en train de le lire.

Statut : en développement. L'application locale dans ui/ est complète avec des données d'exemple. Le moteur (prises vocales, synchronisation, enregistrement, floutage, rendu) est en cours de construction. Jusqu'à son déploiement, indiquez clairement à l'utilisateur quelles étapes vous pouvez exécuter réellement et lesquelles ne sont pas encore disponibles. Ne prétendez jamais qu'une étape a été exécutée.

D'abord : vérifiez où vous vous exécutez

NAVI doit s'exécuter sur l'ordinateur de l'utilisateur : il ouvre une application locale dans son navigateur, ouvre une deuxième fenêtre de navigateur pour qu'il se connecte à un compte de test, enregistre l'écran et conserve la clé dans son trousseau. Cela fonctionne dans Claude Code (terminal, IDE ou l'onglet Code de l'application de bureau).

Si vous vous exécutez plutôt dans un sandbox cloud (une discussion normale sur claude.ai, ou toute session sans accès à la machine de l'utilisateur), dites-le immédiatement, en une ou deux phrases : NAVI a besoin de Claude Code sur son ordinateur pour enregistrer, et ici vous pouvez encore écrire et peaufiner le script (version parlée plus sous-titres) pour qu'il soit prêt à être enregistré plus tard. Ne tentez pas d'installations, d'enregistrements ou d'appels ElevenLabs depuis le sandbox.

Quand l'utiliser

  • « Fais une vidéo de démonstration / un walkthrough / une visite de produit / un tutoriel de »
  • « Enregistre comment <tâche> dans avec un doublage »
  • « Refais la section 3 de ma démo », « rends-la plus calme », « floute l'email à 1:20 »

Pas pour : les applications de bureau, les vidéos avec une vraie personne à l'écran, le clonage vocal.

Règles de base (toujours)

  1. Ne tapez jamais de mots de passe, codes ou clés sur un site. Un navigateur s'ouvre et l'utilisateur se connecte lui-même, idéalement à un compte de test avec de fausses données.
  2. N'imprimez, ne journalisez et ne commitez jamais la clé ElevenLabs. Lisez-la uniquement depuis le trousseau ou le fichier de clés local de l'utilisateur. Ne l'envoyez jamais qu'à ElevenLabs.
  3. Demandez avant d'installer quoi que ce soit (Playwright, ffmpeg, le modèle de synchronisation). Dites quoi et approximativement la taille.
  4. Montrez le coût en crédits avant de dépenser des crédits (échantillons, enregistrement, refusions).
  5. Les niveaux de confidentialité ne sont pas optionnels. Le niveau 1 est toujours flouté. Prévenez lorsque l'utilisateur active les montants d'argent ou les données d'autres personnes.
  6. Ne mettez jamais en pause et n'accélérez jamais la voix pour qu'elle corresponde à la vidéo. La vidéo attend ou s'étire à la place.
  7. Dites clairement que le floutage réduit les risques, pas à zéro. L'utilisateur doit regarder avant de publier.

Le flux

0. Première exécution (une fois)

  • Demandez la clé API ElevenLabs (plan Starter ou supérieur, accès texte vers parole). Testez-la et montrez les crédits restants. Stockez-la dans le trousseau système (macOS) ou un fichier local en dehors du dossier de compétence (Linux), lisible uniquement par l'utilisateur.
  • Vérifiez la présence de Playwright, ffmpeg et du modèle de synchronisation. Demandez, puis installez ce qui manque.
  • Demandez quel site ils vont démontrer en premier et ouvrez un navigateur pour qu'ils puissent se connecter. Enregistrez la session par site.
  • Les utilisateurs récurrents sautent tout cela. Seul le site change par démonstration.

1. Brief

Obtenez, en aussi peu de questions que possible : quoi montrer, quel site, qui regarde (débutants / un peu d'expérience / pros), durée (1, 3, 5 ou 8 minutes), tout ce qui doit rester hors écran, et quelle voix. Les sous-titres et l'étiquette de coin proviennent des valeurs par défaut enregistrées par l'utilisateur (sous-titres incrustés, pas d'étiquette de coin) sauf indication contraire. N'ajoutez jamais de filigrane, nom de marque, balise « Illustratif » ou toute autre superposition que l'utilisateur n'a pas demandée. Utilisez des valeurs par défaut sensées plutôt que de tout demander. Un nouveau site signifie une connexion unique.

Si l'utilisateur change de direction en cours de route (« fais-en une démo de la page des paiements à la place »), conservez la démo actuelle comme brouillon et commencez un nouveau brief à partir de ce qu'il a dit.

2. Exploration

Ouvrez le site avec Playwright en utilisant la session enregistrée. Cartographiez les écrans, les clics exacts et les champs pour la tâche, et tout ce qui se charge lentement. Ne modifiez pas les données réelles ; tenez-vous-en au compte de test.

3. Script

Divisez la vidéo en courtes sections (environ 15 à 35 secondes chacune). Pour chaque section, écrivez deux lignes :

  • Version parlée (ce que dit la voix) : comment une personne l'explique réellement à voix haute. Petites reprises, réactions et opinions là où l'écran les mérite ; très peu de mots de remplissage.
  • Version sous-titres (ce qui est affiché) : propre, courte, sans mots de remplissage.

Suivez reference/voice-rules.md. Affichez les deux côte à côte et obtenez l'approbation avant de dépenser des crédits.

4. Voix

  • Commencez par les réglages recommandés de la voix pour le type de démonstration (walkthrough de cours, démo SaaS rapide, visite de produit).
  • Curseurs et leurs plages sûres : décontraction 3 à 8, énergie 1 à 6, rythme 0.94x à 1.08x, hésitations 0 à 3, respirations 0 à 2, grossièretés 0 à 2 (jamais dans les instructions ; sous-titres propres sauf si l'utilisateur le demande).
  • L'aperçu du texte est gratuit. Un échantillon audio coûte environ 300 crédits ; entendre une voix pour la première fois environ 120.
  • Penchez vers le calme : une stabilité plus élevée et un débit détendu. Évitez les lignes d'un seul mot brillantes. N'ajoutez pas de balises de respiration.
  • Si l'utilisateur souhaite une seule voix pour toute une série, verrouillez-la pour le projet.

5. Confidentialité

Appliquez les niveaux avant l'enregistrement :

  • Toujours flouté : clés API et jetons, mots de passe, codes 2FA et de récupération, numéros de carte et de banque, numéros d'identité, clés privées, liens de connexion.
  • Flouté sauf autorisation : emails, numéros de téléphone, vrais noms et photos, adresses, montants d'argent, détails clients, nombres d'abonnés et de membres.
  • Affiché sauf floutage : statistiques d'utilisation, prix publics, dates.
  • Plus les mots à masquer propres à l'utilisateur.

6. Enregistrement

Voir docs/engine.md. En bref : générez une prise continue par section, obtenez les horodatages des mots, planifiez chaque action du navigateur sur son mot, enregistrez, maintenez les images lorsqu'une action prend trop de temps, ne mettez jamais l'audio en pause. Ensuite, scannez les images pour tout ce que le floutage au niveau de la page a pu manquer.

7. Révision

Ouvrez l'application locale sur l'étape de révision. L'utilisateur marque les moments (semble IA, nécessite un floutage, trop rapide) ou tape des notes. Montrez le coût de la refusion, puis refaites uniquement les sections marquées. Enregistrez les marques avec les réglages utilisés afin que les voix par défaut s'améliorent avec le temps.

8. Exportation

Appliquez le réglage de sous-titres de la démonstration (incrustés, fichier .srt séparé ou désactivé) et l'étiquette de coin (désactivée, ou le texte de l'utilisateur dans le coin choisi) ; la modification de l'un ou l'autre n'est qu'un nouveau rendu, sans crédits. Rendez le MP4 (1080p), les sous-titres (.srt sauf si les sous-titres sont désactivés) et une transcription, plus un aperçu optionnel en 720p, dans le dossier que l'utilisateur nomme (par défaut ~/Movies/NAVI), afin qu'une vidéo puisse atterrir directement dans le projet auquel elle appartient. Nommez les fichiers d'après le titre de la démonstration.

Vos données

Depuis les paramètres, l'utilisateur peut supprimer la clé (rappelez-lui de la révoquer également chez ElevenLabs), oublier les connexions enregistrées, réinitialiser les paramètres ou supprimer tout ce que NAVI a enregistré. Les vidéos terminées ne sont jamais touchées. Désinstaller signifie également supprimer ce dossier de compétence.

Fichiers

  • reference/voice-rules.md : comment écrire le script parlé et générer une voix qui sonne humaine. À lire avant l'étape 3.

  • reference/recording-rules.md : comment enregistrer l'écran en synchronisation avec la voix. À lire avant l'étape 6.

  • reference/privacy.md : les niveaux de floutage et les avertissements. À lire avant l'étape 5.

  • config/defaults.json : plages des curseurs, préréglages, paramètres par voix et valeurs par défaut à l'écran

  • ui/index.html : l'application locale (ouvrir dans un navigateur ; ?start=home|voice|review|settings, &theme=light|dark)

  • ui/app.js : écrans, état et données d'exemple

  • docs/engine.md : comment fonctionnent l'enregistrement, la synchronisation, le floutage et le rendu

Skills associés