Installation du plugin : Avant les commandes de configuration ou de mise à jour, suivez les règles d'exécution du plugin lorsque cette compétence se trouve dans un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
Premièrement, gardez cette compétence à jour — confirmez avec l'utilisateur avant d'exécuter :
npx hyperframes skills update faceless-explainer. Une opération rapide sans effet si tout est à jour ; sinon, elle rafraîchit cette compétence ainsi que les compétences de base dont elle dépend avant de les utiliser.
media-use : Avant de rechercher des fichiers audio/images/logos, appelez
/media-usepour trouver la BGM/les effets sonores/les images du catalogue HeyGen et les logos des marques à partir de leurs sources officielles. Exécutez d'abord--adoptpour enregistrer les actifs existants. Voir la compétence/media-use. Lorsque l'application hôte fournit ses propres outils de musique ou d'effets sonores, utilisez-les pour la musique et les effets sonores.
Faceless Explainer vers HyperFrames
Utilisez cette compétence pour transformer un corps de texte en une vidéo explicative : choisissez un système de design, planifiez une histoire pédagogique, et construisez-la image par image dans HyperFrames. Sans visage signifie que chaque visuel est inventé en aval — il n'y a pas d'étape de capture et aucun inventaire d'actifs réel.
La porte d'entrée est
/hyperframes. Vous êtes l'orchestrateur. Exécutez chaque étape, vérifiez sa porte de validation, et continuez seulement ensuite. Cette compétence est destinée à expliquer un sujet à partir d'un texte, sans produit ni site web à capturer. Toute autre intention, un simple "faire une vidéo", ou toute incertitude → lisez d'abord/hyperframes— la couche d'intention possède chaque décision d'itinéraire, et une création fraîche arrivant ici sansBRIEF.mdpasse quand même par elle (règle d'ouverture de la configuration).
Vous êtes l'orchestrateur. Travaillez dans videos/<projet>/. Exécutez les étapes dans l'ordre et passez chaque porte de validation avant de continuer. Les étapes avec porte utilisateur sont l'étape 0, l'étape 3 et l'étape 6. Lisez ../hyperframes/references/brief-contract.md avant l'étape 0 — il définit les types de portes et comment flow/storyboard de BRIEF.md dérivent le mode qui régit les portes des étapes 3/4/6. Effectuez chaque étape vous-même, à l'exception de l'étape 5, où vous déléguez un sous-agent par image. Ne placez pas de règles de conception ou de mouvement ici ; celles-ci se trouvent dans le sous-agent de travail des images, les ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ locaux de cette compétence, et hyperframes-creative.
Workflow : Étape 0 configuration → hyperframes.json ; Étape 1 brief → capture/extracted/ ; Étape 2 système de design → frame.md ; Étape 3 storyboard/script → STORYBOARD.md et SCRIPT.md ; Étape 3.1 audio → audio_meta.json ; Étape 4 conception visuelle → STORYBOARD.md enrichi ; Étape 5 images → compositions/frames/NN-*.html et index.html ; Étape 6 rendu final → renders/video.mp4.
Étape 0 : Configuration
Objectif : Démarrer avec un brief confirmé, créer le projet HyperFrames et rendre le brief durable.
Le brief est confirmé par la couche d'intention, pas par des questions posées ici. Règle d'ouverture, dans l'ordre : (1) BRIEF.md existe → lisez-le et ne posez aucune question — le brief est réglé, et son flow/storyboard dérivent le mode (contrat du brief § 1). (2) Pas de BRIEF.md mais le projet existe (hyperframes.json / STORYBOARD.md sur le disque) → reprenez à partir du frontmatter du storyboard et des préférences enregistrées ; ne réinterrogez jamais un projet à moitié construit. (3) Ni l'un ni l'autre — une demande de création fraîche arrivée directement ici → lisez /hyperframes et exécutez sa couche d'intention (references/intent-interview.md) : elle vérifie les recettes et les valeurs par défaut mémorisées, mène les questions de cet itinéraire (../hyperframes/references/routes/faceless-explainer.md), et renvoie le brief verrouillé. Les demandes de modification sautent tout cela — allez faire la modification.
Initialisez uniquement si hyperframes.json est manquant. Nommez <projet> à partir du sujet en kebab-case, par exemple interets-composes-expliques ; n'utilisez jamais le nom de l'espace de travail ou un horodatage.
npx hyperframes init "videos/<projet>" --non-interactive --example=blank --skill=faceless-explainer — init vérifie les compétences installées par rapport aux dernières sur GitHub et met à jour l'ensemble global si certaines sont obsolètes.
Après init, laissez <RACINE_PROJET> être videos/<projet> et exécutez chaque commande de chemin relatif ultérieure avec ce répertoire comme répertoire de travail. Dans les commandes ci-dessous, . signifie <RACINE_PROJET> ; n'écrivez jamais .media, capture ou des fichiers de sortie dans le répertoire appelant.
Écrivez BRIEF.md immédiatement après init (jamais avant — init refuse un répertoire non vide) : le brief verrouillé de la couche d'intention, formaté selon ../hyperframes/references/brief-format.md. Résolvez <MEDIA_DIR> comme le répertoire de la compétence /media-use installée. Ensuite, enregistrez chaque réponse basée sur une préférence avec node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . (brief-format.md nomme le sous-ensemble). Si la couche d'intention a adopté une recette, exécutez node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <nom> ; elle copie son frame.md dans le projet (l'étape 2 est alors sautée) et renvoie les squelettes à partir desquels l'étape 3 ébauche. Une recette remplit les réponses, pas les approbations ; les portes de révision s'exécutent toujours.
Affichez l'état de connexion avant de continuer au-delà de la configuration — exécutez npx hyperframes auth status et relayez sa sortie textuellement. Il signale si la voix/BGM utilisera HeyGen ou les moteurs locaux et, en cas de déconnexion, comment se connecter. Appliquez une branche :
- Collaboratif : attendez que l'utilisateur se connecte ou choisisse explicitement
offline/go. - Autonome : indiquez l'état et continuez via les moteurs locaux disponibles.
Ne passez pas silencieusement sous silence une capacité requise lorsqu'aucun fournisseur hors ligne n'existe ; faites remonter le blocage. N'intégrez pas cette décision dans une autre question et n'écrivez pas de clés dans un .env par dépôt. Propriété de l'authentification et solutions de repli hors ligne : /media-use references/setup-providers.md § Fournisseurs.
Porte : hyperframes.json et BRIEF.md existent ; les réponses basées sur les préférences ont été enregistrées (contrat du brief § 2) ; l'état de connexion a été affiché (connecté, ou poursuite hors ligne).
Étape 1 : Brief (sans capture)
Objectif : Incorporer le texte de l'utilisateur dans le projet comme source d'information. Il n'y a pas de capture de site web ni d'actifs réels — c'est un explicateur sans visage.
Enregistrez l'intégralité de l'entrée de l'utilisateur textuellement, puis créez le paquet de capture synthétique à la main :
capture/extracted/visible-text.txt— l'article / les notes / le sujet / le brief complets, textuellement. C'est la source d'information, pas un modèle d'histoire (l'étape 3 le remodèle).capture/extracted/tokens.json—{ "title": "", "description": "", "colors": [], "fonts": [] }. Remplisseztitle/descriptionà partir du brief. Laissezcolors/fontsvides sauf si l'utilisateur a explicitement donné des couleurs ou polices de marque — alors ajoutez-les (le préréglage de conception fournit de toute façon une palette complète).
Si l'utilisateur a collé un script ou souhaite que son wording soit conservé, enregistrez-le textuellement sous user_script.txt ; VO_MODE (textuellement ou restructuré) vient de BRIEF.md — la couche d'intention le demande lorsqu'un script arrive. Ne demandez ici qu'une seule fois si le brief manque et stockez la réponse pour l'étape 3.
N'exécutez pas npx hyperframes capture (il n'y a pas d'URL). Ne créez pas asset-descriptions.md et ne remplissez pas capture/assets/ — les visuels sans visage sont inventés aux étapes 4-5, pas capturés. La seule exception : si l'utilisateur a fourni une image réelle, placez-la sous public/<nom_de_base> et notez-la pour l'étape 3.
Porte : capture/extracted/visible-text.txt et capture/extracted/tokens.json existent ; vous pouvez énoncer le sujet et le public de l'explicateur en une phrase claire.
Étape 2 : Système de design
Objectif : Choisir un préréglage d'image livré ; un script le transforme en frame.md + habillage de sous-titres de cette vidéo.
Lorsque BRIEF.md nomme un style_preset — l'utilisateur l'a choisi visuellement dans les présentations au niveau de la couche d'intention — utilisez-le ; la décision vous appartient uniquement lorsque le brief est silencieux. Ensuite, faites le seul appel — quel préréglage : lisez ../hyperframes-creative/references/design-spec.md et parcourez ../hyperframes-creative/frame-presets/ ; choisissez le préréglage dont le look correspond le mieux au sujet, au ton et au public. Exécutez ensuite :
node <SKILL_DIR>/scripts/build-frame.mjs --preset <nom> --hyperframes .
Le script fait le reste de manière déterministe : copie le FRAME.md du préréglage → frame.md et le remixe sur tous les jetons de marque dans capture/extracted/tokens.json (couleurs de marque mappées sur les clés de couleur du préréglage par rôle ; les polices d'affichage + corps du préréglage échangées avec celles de la marque), copie l'habillage de sous-titres du préréglage dans .hyperframes/caption-skin.html, et s'auto-valide (sort avec 1 en cas de mapping cassé). Continuez dès qu'il sort avec 0 — pas d'édition manuelle de la spécification.
Un explicateur sans visage n'a généralement pas de couleurs/polices de marque (tokens.json couleurs/polices vides) → le script conserve la palette du préréglage, un design complet et livrable. Ce n'est que lorsque l'utilisateur a nommé des couleurs/polices de marque que vous les ajoutez à tokens.json avant d'exécuter, et n'ajustez frame.md à la main ensuite que si un mapping en a vraiment besoin.
Porte : build-frame.mjs a terminé avec 0 — frame.md existe à partir d'un préréglage nommé, et (lorsque le préréglage en livre un) .hyperframes/caption-skin.html existe comme source de l'habillage de sous-titres ; le préréglage choisi a été enregistré comme préférence (--key style_preset --workflow <ce workflow>, contrat du brief § 2).
Étape 3 : Storyboard et Script
Objectif : Transformer le texte en un plan pédagogique image par image approuvé.
Lisez ../hyperframes-creative/references/story-spine.md (langage d'accroche, valeur avant preuve, storyboard comme proposition, visuels traçables à la source), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md, et ../hyperframes/references/script-format.md. Utilisez-les pour écrire STORYBOARD.md et, lorsque la narration est nécessaire, SCRIPT.md. Définissez duration: dans le frontmatter à partir du length du brief — une attente approximative ; le montage rapporte où la coupe se situe par rapport à celle-ci.
Utilisez story-design.md pour la structure de l'explicateur (concept / tutoriel / listicle / histoire), la stratégie d'accroche, les techniques de clarté, les moments émotionnels, le mapping d'énumération des types et VO_MODE. La séquence vidéo provient de la conception narrative, pas de l'ordre des paragraphes du texte d'entrée — réordonnez, fusionnez, omettez, compressez. En tant que guide souple, consultez le menu rôle→blueprint dans ../hyperframes-animation/blueprints-index.md : pour chaque temps fort, écrivez la voix off dans la forme qu'implique son blueprint candidat et étiquetez ce candidat avec l'id blueprint: lorsqu'il correspond. La vérité pédagogique décide toujours quels temps forts existent — ne forcez jamais un temps fort pour correspondre à un blueprint, et n'inventez jamais un temps fort simplement parce qu'une forme éprouvée est disponible. Les visuels sans visage sont inventés en aval, donc les images n'ont pas d'inventaire d'actifs : laissez asset_candidates vide sauf si l'utilisateur a fourni une image public/<nom_de_base> réelle. Utilisez les champs exacts requis à partir des références du storyboard et du script.
Après la rédaction, exécutez le passage de plan de la boucle de révision — ../hyperframes/references/review-loop.md § 1 : présentez le plan comme une proposition, et posez les deux questions — approuver ou modifier, et esquisses d'abord (recommandé) ou sauter. Les commentaires arrivent sous forme de chat ; bouclez jusqu'à approbation. C'est une porte de point de contrôle (contrat du brief § 1) : en mode autonome, il n'y a rien à demander — affichez le même résumé à titre d'information et continuez ; les esquisses sont intégrées à la construction, et l'aperçu final avec sa question unique vient à l'étape 6.
Porte : STORYBOARD.md existe, chaque image a les champs narratifs requis, SCRIPT.md existe lorsque la narration est nécessaire, et l'utilisateur a approuvé le plan image par image (autonome : le résumé a été affiché à titre d'information).
Étape 3.1 : Audio
Objectif : Générer la narration, les minutages des mots, la musique et les métadonnées audio à partir du script approuvé.
Commencez l'audio après l'approbation de l'étape 3. Exécutez-le en arrière-plan, puis continuez à l'étape 4. (L'état de connexion a déjà été affiché à l'étape 0 ; le moteur se rabat automatiquement.)
Choisissez la voix de narration à partir de la demande de l'utilisateur avant d'invoquer. Si la demande nommait une voix, un genre ou un ton, choisissez un ID de voix correspondant et passez-le avec --voice <id>. La valeur par défaut du pipeline est autrement Marcia (femme) sur HeyGen / am_michael sur Kokoro — donc une demande comme "une voix masculine" est ignorée silencieusement sauf si vous passez le drapeau. Les ID de voix sont spécifiques au fournisseur ; résolvez par rapport au fournisseur que l'état de connexion de l'étape 0 a sélectionné : HeyGen (connecté) via node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (ou GET /v3/voices?engine=starfish) ; Kokoro (hors ligne) via le tableau des voix dans <MEDIA_DIR>/audio/references/tts.md (préfixes am_/bm_ masculin, af_/bf_ féminin). Lorsque l'utilisateur n'a exprimé aucune préférence, revenez à la voix mémorisée (contrat du brief § 2) avant la valeur par défaut du pipeline, et dites laquelle vous avez utilisée ; omettez --voice uniquement lorsque ni l'une ni l'autre n'en nomme une. Lorsque l'utilisateur a explicitement choisi une voix pour cette exécution, enregistrez-la (prefs.mjs record --key voice).
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <id-voix> &
Le script audio gère la narration, les minutages des mots, la recherche de BGM dans la bibliothèque musicale de HeyGen et les métadonnées de minutage. L'ambiance de la BGM provient du champ music: du storyboard. Cela utilise l'API Audio de HeyGen pour la récupération, pas la génération, et la même information d'identification ~/.heygen que la TTS. Pour les détails du fournisseur, lisez ../media-use/audio/references/tts.md. Lorsque les propres outils de l'application hôte créent la musique ou un effet sonore, placez le fichier sous assets/ et listez-le dans le fichier audio_meta.json marqué "source": "host" : la musique comme bgm { "path": "assets/...", "source": "host" } avec music: none dans le storyboard ; un son comme une entrée sfx { "frame": <n>, "file": "assets/...", "offset_s": 0, "duration_s": <sa longueur>, "source": "host" }. Chaque passe audio les conserve, et une image avec un son hôte n'obtient aucun signal trouvé.
S'il n'y a pas de narration et pas de SCRIPT.md, sautez la génération de la voix. La BGM peut toujours s'exécuter si le storyboard a une ambiance musicale.
Le marqueur silencieux canonique complet (partagé entre les workflows qui réutilisent ce modèle audio) : music: none dans le bloc YAML supérieur de STORYBOARD.md, pas de SCRIPT.md, et pas de signaux sfx: ni d'audio hôte. Cette combinaison marque le projet comme silencieux — la composition ignore tout ce qui est lié à l'audio. Toute autre combinaison déclenche une tentative de génération de narration (SCRIPT.md présent) ou de récupération de BGM (music: non vide, pas none).
Porte : L'un des deux : le script audio s'est terminé (fichier audio_meta.json JSON valide écrit) ou le marqueur silencieux canonique a été reconnu ; l'audio est à jour avec le script approuvé.
Étape 4 : Conception visuelle
Objectif : Développer le plan visuel : par image, décrivez la composition, le mouvement, la typographie et les animations, en utilisant le système de design sélectionné.
Cette étape remplace les storyboards bruts (blocs narratifs) par des storyboards enrichis (compositions visuelles). Écrivez les champs restants dans STORYBOARD.md : visual, composition, motion, typography, animation. Utilisez ../hyperframes-animation/blueprints/ — la candidature blueprint: de l'étape 3 détermine le modèle. La source reste les métadonnées de l'étape 1 et les champs de l'étape 3, pas le texte d'entrée d'origine. Les visuels sans visage utilisent une typographie expressive, des formes abstraites et des graphiques animés. Utilisez story-design.md § couleurs et ambiance pour mapper l'ambiance narrative d'un temps fort à une direction visuelle.
Chaque image obtient ses champs visuels remplis maintenant. Les propriétés d'affichage de texte (taille, alignement, animation) sont écrites ici ; leur payload de contenu provient du script de l'étape 3.
Porte : Chaque image dans STORYBOARD.md a des champs visual, composition, motion, typography et animation remplis.
Étape 5 : Images
Objectif : Construire chaque image comme un fichier HTML et générer la page d'accueil index.html qui les orchestre toutes.
Processus de construction de l'image : Le storyboard enrichi et frame.md définissent la composition, le style et l'animation de chaque image. Pour chaque image du storyboard :
- Ramassez le modèle :
compositions/frames/contient les fichiers générés. Chaque image a un dossier et un fichier (NN-description/index.html). Utilisez../hyperframes-animation/blueprints/pour la structure HTML, les styles CSS et les directives d'animation. La sélection du blueprint est déterminée par le champblueprint:dans le storyboard (défini à l'étape 3). - Designe de l'image : Utilisez
../hyperframes-animation/rules/pour l'approche de conception. Appliquezframe.md(système de design) et les directives créatives (hyperframes-creative/). - Contenu : Le texte et la voix off du script. Les visuels sont générés à partir de zéro en utilisant la conception basée sur le blueprint. Construisez l'image dans son répertoire dédié, en suivant la structure du blueprint et en respectant les règles de la bibliothèque de composants.
- Animation : Toutes les animations sont CSS-in-JS ou animations CSS dans le fichier HTML. Utilisez
../hyperframes-animation/rules/motion.mdpour les directives de timing et de mouvement. Assurez l'accessibilité (préfèreprefers-reduced-motion). - Indexage : Ajoutez un lien vers cette image dans la barre latérale de navigation de
index.html.
Votre rôle : Vous ne construisez pas vous-même les images individuelles. Vous êtes un orchestrateur. Pour chaque image du storyboard, vous déléguez la construction à un sous-agent spécialisé. Chaque sous-agent reçoit :
- La structur de l'image, le contenu et les directives visuelles du storyboard enrichi.
- Le système
frame.md. - Le blueprint référencé par
blueprint:. - Les règles d'animation de
motion.md. - Le schéma de couleurs et la typographie du système de design.
- Le chemin de sortie (
compositions/frames/NN-description/).
Le sous-agent ne construit qu'une seule image, puis retourne le chemin complet du fichier et un résumé de ce qui a été construit. Vous validez que l'image a été construite correctement et vous passez à l'image suivante. Assurez-vous que les sous-agents aient les bons contextes (ils n'ont pas le mémoire d'une image à l'autre).
Une fois toutes les images construites, vérifiez qu'il existe au moins une page d'accueil index.html fonctionnelle qui charge toutes les images.
Porte : Un répertoire compositions/frames/ contenant tous les fichiers d'image ; un fichier index.html fonctionnel prêt pour l'aperçu.
Étape 6 : Rendu final
Objectif : Produire la vidéo finale et faciliter l'approbation par l'utilisateur.
Exécutez la commande de rendu pour générer la vidéo MP4 ou GIF :
npx hyperframes render --compositions ./compositions --out ./renders/video.mp4
Tous les sous-titres (caption skin) sont intégrés ici — le script de rendu utilise .hyperframes/caption-skin.html s'il existe et n'est pas vide. Après un rendu réussi, passez en revue la vidéo et présentez-la à l'utilisateur (lancez l'aperçu ou montrez la sortie) avec une question : approuver ou demander des modifications ?
En cas de demandes de modification :
- Modifications du storyboard → éditez les fichiers pertinents et répétez le rendu.
- Modifications visuelles → éditez l'image concernée dans
compositions/frames/. Utilisez le même sous-agent que celui qui l'a construite. - Après toute modification, répétez l'étape 6 complète (rendu + examen + approbation).
Porte : Le fichier renders/video.mp4 existe et est approuvé par l'utilisateur (ou : aucune vidéo nécessaire, et tout le matériel livré a été approuvé).