Installation du plugin : Avant les commandes de configuration ou de mise à jour, suivez les règles d'installation du plugin lorsque ce skill est utilisé dans un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
Tout d'abord, maintenez ce skill à jour — confirmez avec l'utilisateur avant d'exécuter :
npx hyperframes skills update product-launch-video. Une opération rapide sans effet si tout est à jour ; sinon, il actualise ce skill ainsi que les skills de base dont il dépend avant de les utiliser.
media-use : Avant de rechercher des sources audio/images/logos, appelez
/media-usepour résoudre la musique de fond / les effets sonores / les images à partir du catalogue HeyGen et les logos de marque à partir de leurs sources officielles. Exécutez d'abord--adoptpour enregistrer les assets existants. Voir le skill/media-use.
source figma : Si la source est une URL figma.com, exécutez d'abord
/figma— export d'assets, jetons de marque, et reconstruction des composants/storyboard si nécessaire — puis construisez ce workflow à partir de sa sortie. N'utilisez pas directement les outils MCP bruts pour piloter Figma : cela contourne l'assainissement SVG, la provenance.media/manifest.jsonl, et la liaisonvar()des jetons de marque, de sorte qu'un changement de marque ultérieur ne peut pas se propager sans une réimportation complète.
Lancement de produit vers HyperFrames
Utilisez ce skill pour capturer un produit, comprendre sa marque, planifier une vidéo de lancement et la construire image par image dans HyperFrames.
La porte d'entrée est
/hyperframes. Vous êtes l'orchestrateur. Exécutez chaque étape, vérifiez sa porte, et seulement ensuite passez à l'étape suivante. Ce skill est destiné à un produit qui est commercialisé, lancé, promu ou révélé, y compris les demandes telles que "promo pour notre site" lorsque l'objectif est promotionnel. Une visite guidée du site / une démonstration reste ici :BRIEF.mdcontient l'intention de montrer tel quel, et les captures d'écran deviennent les assets que la vidéo présente. 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 de toute façon par elle (règle d'ouverture de la configuration).
Vous êtes l'orchestrateur. Travaillez dans videos/<project>/. Exécutez les étapes dans l'ordre et passez chaque porte 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 — elle définit les types de portes et comment le flow/storyboard de BRIEF.md dérive le mode qui régit les portes des étapes 3/4/6. Faites vous-même chaque étape sauf l'étape 5, où vous déléguez un sous-agent par image. Ne mettez pas de règles de conception ou de mouvement ici ; celles-ci vivent dans le sous-agent de travail des images, dans les règles et blueprints locaux de ce skill (../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/) et dans hyperframes-creative.
Workflow : Configuration étape 0 -> hyperframes.json ; Capture étape 1 -> capture/ ; Système de design étape 2 -> frame.md ; Storyboard/script étape 3 -> STORYBOARD.md et SCRIPT.md ; Audio étape 3.1 -> audio_meta.json ; Conception visuelle étape 4 -> STORYBOARD.md enrichi ; Images étape 5 -> compositions/frames/NN-*.html et index.html ; Rendu final étape 6 -> renders/video.mp4.
Étape 0 : Configuration
Objectif : Entrer 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érive le mode (contrat de 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/product-launch-video.md) et remet le brief verrouillé. Les demandes de modification sautent tout cela — allez faire la modification.
N'initialisez que si hyperframes.json est manquant. Nommez <project> à partir de la marque ou du domaine en kebab-case, par exemple acme-promo ; n'utilisez jamais le nom de l'espace de travail ou un horodatage.
npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=product-launch-video — init vérifie les skills installés par rapport aux plus récents sur GitHub et met à jour l'ensemble global si certains sont obsolètes.
Après init, laissez <PROJECT_ROOT> être videos/<project> et exécutez chaque commande de chemin relatif suivante avec ce répertoire comme répertoire de travail. Dans les commandes ci-dessous, . signifie <PROJECT_ROOT> ; 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 du skill /media-use installé. 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 <name> ; elle copie son frame.md dans le projet (l'étape 2 est alors ignorée) et renvoie les squelettes à partir desquels l'étape 3 est rédigée. 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 passer la configuration — exécutez npx hyperframes auth status et relayez sa sortie textuellement. Il indique si la voix/BGM utilisera les moteurs HeyGen ou locaux et, lorsque vous êtes déconnecté, comment vous connecter. Notez le contrat de code de sortie : auth status se termine par 1 lorsque non connecté (et lorsque le justificatif stocké est rejeté) — cette sortie non nulle est l'état normal de déconnexion, pas un échec de commande, donc ne la traitez pas comme une erreur, ne la réessayez pas et ne l'enchaînez pas avec &&/set -e d'une manière qui interromprait le workflow. Appliquez une branche :
- Collaboratif : attendez que l'utilisateur se connecte ou choisisse explicitement
offline/go. - Autonome : indiquez l'état et continuez avec les moteurs locaux disponibles.
N'omettez pas silencieusement une capacité requise lorsqu'aucun fournisseur hors ligne n'existe ; signalez le blocage. N'intégrez pas cette décision dans une autre question et n'écrivez pas de clés dans un .env par référentiel. 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 de brief § 2) ; l'état de connexion a été affiché (connecté, ou continuant hors ligne).
Étape 1 : Capture des assets
Objectif : Collecter le matériel source, les signaux de marque et les assets utilisables pour la vidéo.
Classez l'entrée et choisissez le chemin. URL explicite -> capturez-la et utilisez le site pour la narration et les assets. Script/brief collé -> enregistrez textuellement dans user_script.txt ; VO_MODE (textuel ou restructuré) provient de BRIEF.md — la couche d'intention le demande lorsqu'un script arrive (ne le demandez ici qu'une seule fois si le brief ne le contient pas). Ensuite, résolvez la cible de capture : URL dans le texte -> utilisez-la ; nom de marque uniquement -> WebSearch, confirmez l'URL en une ligne, puis parcourez ; pas d'URL/site (ou le brief dit de ne pas récupérer) -> chemin sans capture.
Exécutez la capture avec : npx hyperframes capture "<URL>" -o ./capture --json. Conservez le budget de post-navigation par défaut, sauf si l'appelant a un délai plus court ; puis passez un --capture-budget <millisecondes> positif qui laisse du temps pour le travail en aval. --timeout contrôle uniquement la navigation de page. Utilisez --skip-vision uniquement lorsque le sous-titrage d'image facultatif est intentionnellement désactivé.
Inspectez immédiatement le résultat de la commande et le répertoire de sortie. Un code de sortie non nul, JSON ok: false, ou capture/BLOCKED.md est un arrêt brutal pour le chemin de capture : signalez la raison enregistrée et ne consommez pas de captures d'écran, de DOM, de jetons ou d'assets partiels. Ne créez pas de solution de repli synthétique sans capture après un échec de capture d'URL. Continuez par le chemin sans capture uniquement lorsque le brief original a fourni le matériel source, ou lorsque l'utilisateur passe explicitement à une capture d'écran ou un brief fourni après l'échec.
Les avertissements tels que "très peu de contenu textuel" accompagnés d'un catalogue d'assets vide ne prouvent pas une page utilisable. Pour une visite guidée du site ou un brief "montrer tel quel", exigez une structure capturée fiable ou une capture d'écran fournie ; si aucun n'existe, arrêtez-vous. N'inventez pas et ne reconstruisez pas la page simplement parce que la capture est inutilisable.
Pour une visite guidée du site ou un brief "montrer tel quel", la page capturée est la source visuelle de vérité. Utilisez la vraie capture d'écran au lieu de reconstruire le site Web complet en HTML. Si la photo a besoin d'un mouvement interne, conservez la capture d'écran comme base et superposez les assets capturés réels à des positions mesurées, ou reconstruisez uniquement le composant qui bouge. Pour une capture de défilement, animez la fenêtre d'affichage sur capture/screenshots/full-page.png — la plaque 1x du document entier, pixel parfait pour une fenêtre de 1920 px de large qui descend le long. Elle est absente lorsque la page est trop haute pour être capturée en un seul morceau ; utilisez alors les images de position de défilement qui se chevauchent dans le même répertoire. Un zoom avant au-delà de 1:1 nécessite sa propre capture 2x de cette région, car la plaque n'a pas de marge au-dessus de 1x. Recréez la page entière uniquement lorsque l'utilisateur demande explicitement une interprétation stylisée ; une capture inutilisable seule n'est pas une autorisation.
Si GEMINI_API_KEY, GOOGLE_API_KEY, ou une clé OpenRouter existe, la capture sous-titre automatiquement les assets dans capture/extracted/asset-descriptions.md. Ce n'est pas une porte de révision. Sans clé de vision, utilisez le contexte DOM et continuez.
Chemin sans capture : créez capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md et capture/assets/ manuellement. tokens.json doit être { "title": "", "description": "", "colors": [], "fonts": [] } ; remplissez le titre/la description à partir du brief si possible. visible-text.txt contient le brief ou le script complet. asset-descriptions.md doit indiquer qu'aucun asset n'a été capturé, sauf si l'utilisateur a donné des notes sur les assets.
Porte : la capture JSON a rapporté ok: true ; capture/BLOCKED.md n'existe pas ; capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md et capture/assets/ existent ; et vous pouvez énoncer la marque en une phrase claire. Considérez asset-descriptions.md comme l'inventaire principal des assets. S'il manque après une capture réelle, arrêtez-vous et signalez que la capture est incomplète. Les avertissements concernant une phase facultative dégradée sont acceptables uniquement si cette porte structurelle passe toujours.
Étape 2 : Système de design
Objectif : Choisir un preset d'image livré ; un script le transforme en frame.md + skin de légende de cette vidéo.
Lorsque BRIEF.md nomme un style_preset — l'utilisateur l'a choisi visuellement parmi les présentations de la couche d'intention — utilisez-le ; le jugement vous revient uniquement lorsque le brief est silencieux. Ensuite, vous faites le seul choix — quel preset : lisez ../hyperframes-creative/references/design-spec.md et choisissez le preset dont l'apparence correspond le mieux à la marque et au brief. 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 preset → frame.md et le remixe sur les jetons de marque de capture/extracted/tokens.json (les couleurs de la marque sont mappées sur les clés de couleur du preset par rôle — encre, toile, accents — en conservant les clés/la structure/les composants ; les polices d'affichage et de corps du preset sont remplacées par celles de la marque), copie le skin de légende du preset vers .hyperframes/caption-skin.html et s'auto-valide (se termine par 1 en cas de mappage cassé). Passez à l'étape suivante dès qu'il se termine par 0 — pas d'édition manuelle de la spécification.
tokens.json sans couleurs/polices de marque (par exemple, pas de capture) → le script conserve la propre palette du preset, un design livrable complet. Si le brief nomme des couleurs/polices de marque que la capture a manquées, ajoutez-les à capture/extracted/tokens.json avant d'exécuter (ou utilisez le design.md de l'utilisateur pour le remplir) ; modifiez frame.md à la main ensuite uniquement si un mappage le nécessite vraiment.
Porte : build-frame.mjs s'est terminé par 0 — frame.md existe à partir d'un preset nommé, et (lorsque le preset en livre un) .hyperframes/caption-skin.html existe comme source du skin de légende ; le preset choisi a été enregistré comme préférence (--key style_preset --workflow <ce workflow>, contrat de brief § 2).
Étape 3 : Storyboard et script
Objectif : Transformer le brief et le matériel capturé en un plan narratif image par image approuvé.
Lisez ../hyperframes-creative/references/story-spine.md (langage d'accroche, valeur avant preuve, storyboard comme proposition, visuels traçables par 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 la durée du frontmatter à partir de la length du brief — une attente approximative ; l'assemblage indique où la coupe se situe par rapport à celle-ci.
Utilisez story-design.md pour le blueprint de l'histoire, l'accroche, la logique de persuasion, les beats, VO_MODE et les choix d'assets. En tant que guide souple, consultez le menu rôle→blueprint dans ../hyperframes-animation/blueprints-index.md : pour chaque beat, notez un identifiant de blueprint candidat lorsque cela convient. La vérité de l'histoire décide toujours quels beats existent — ne forcez jamais un beat à correspondre à un blueprint, et n'inventez jamais un beat simplement parce qu'une forme éprouvée est disponible. Choisissez les asset_candidates de chaque image visuelle à partir de capture/extracted/asset-descriptions.md (l'inventaire canonique) — ne parcourez pas les capture/assets/ bruts. Ne demandez pas à l'utilisateur de choisir des assets, sauf si cet inventaire est manquant ou inutilisable. Utilisez les champs obligatoires exacts des références du storyboard et du script.
Après la rédaction, exécutez la passe 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 croquis d'abord (recommandé) ou sauter. Les commentaires arrivent sous forme de réponse dans le chat ; bouclez jusqu'à approbation. C'est une porte de point de contrôle (contrat de brief § 1) : en mode autonome, vous gardez le plan lui-même et procédez à l'étape 4.