lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

mkt-full-video-with-11-hyperframe-heygen-16-9

Orchestrateur de bout en bout : script → fichier MP4 final 16:9 (1920×1080) de type podcast-keynote.

Le résultat est un fichier MP4 1920×1080 de type « tête parlante + diapositive » — l'avatar HeyGen dans un cadre flottant arrondi à droite (bordure de marque orange Claude), le contenu des diapositives modernes AI / Claude editorial à gauche, avec des moments de zoom arrière PIP lorsque la diapositive nécessite une mise en valeur plein écran. Les compositions intègrent automatiquement les motifs ci-dessous — aucun montage manuel n'est nécessaire.

Motifs intégrés automatiquement (sortie Phase 3)

Toute vidéo générée par l'orchestrateur inclut automatiquement :

1. Composition HTML par scène — créée par des sous-agents LLM parallèles (1 sous-agent par scène, déployé en une seule requête), PAS par des modèles Python :

   • Résultat : compositions/scene-1.html … compositions/scene-N.html (1 fichier par scène, nom unique pour tout N)
   • Chaque sous-agent lit son bloc de scène dans visual-plan.json + les documents de référence (references/composition-patterns.md, slide-design-tokens.md, infographic-prompt-template.md) puis crée le HTML/CSS/GSAP à partir de zéro — il choisit le motif approprié pour la métaphore spécifique de cette scène, sans se limiter à 5 archétypes fixes
   • Pourquoi LLM et pas Python : HyperFrames possède d'innombrables motifs de pensée visuelle (avant-après, hub-and-spokes, comparaison à deux horloges, comparaison à trois niveaux, scroll-tape, trio hero-orb-spec, terminal-mock, boîte-cadeau…). Un générateur Python ne connaît que 5 archétypes fixes → ennuyeux, incapable de s'adapter à une métaphore spécifique comme « scroll-tape-wasted » ou « right-tool-vehicles ». La création LLM par scène est suffisamment créative pour servir l'intention de conception.
   • Les logos de marque sont attachés automatiquement : l'orchestrateur transmet le contexte de marque (claude / chatgpt / gemini / claude-code) au sous-agent, qui référence les logos dans assets/logos/ et les intègre dans la composition lorsque le motif le nécessite (orb glow, badge d'outil en pilule, icône d'échec en ligne)

2. Stratégie de zoom visuel « Hybrid Hook » sur .avatar-breathing (Phase 3e via generate_root_index.py) :

   • Scène HOOK : rampe lente 1.0 → 1.10 sur la durée de la scène (construction du drame)
   • Transition HOOK→BODY : réinitialisation instantanée 1.10 → 1.0 (relâchement de la tension)
   • Scènes BODY : impulsions de 1.06 lors des événements PIP-IN (rythme)
   • Scène CTA : poussée douce 1.0 → 1.04 (fermeture)
   • Remplace le « breathing yoyo » plat — chaque archétype de scène a son propre mouvement de zoom

3. Calque de swap PIP « cream-paper » en b-roll (architecture à division du travail — IMPORTANT) :

   • La composition HTML (montage de diapositives) porte les DONNÉES / LETTRES DE NIVEAU / ÉLÉMENTS / BADGES / TITRE / logos de marque — toujours actif
   • L'image d'illustration éditoriale <img class="broll-image"> cream-paper porte la MÉTAPHORE / L'ÉMOTION — pleine scène 1920×1080, elle apparaît en fondu pendant les fenêtres PIP de sa scène, disparaît en fondu autrement
   • Chaque calque dit une moitié différente du message (HTML = « QUOI », image = « POURQUOI / SENTIMENT »)
   • CRITIQUE : l'image vit UNIQUEMENT au niveau racine (<img id="broll-N"> dans index.html). La composition HTML ne doit PAS intégrer <div class="image-slot"> — cela comprime l'image 16:9 dans une petite zone → moche. Les compositions sont des calques de DONNÉES uniquement.
   • Source de l'image : la compétence de planification écrit prompts.md → l'utilisateur génère 1.png-N.png via AI33/Nano Banana Pro ou mkt-broll-image
   • Pleine scène 1920×1080, object-fit: contain, les bordures crème #F0EEE6 se fondent de manière invisible

4. Bordure de cadre d'avatar colorée selon la marque (Phase 3e via generate_root_index.py) :

   • État par défaut SPLIT : orange Claude #d97757 3px solide + halo 6px + lueur externe 80px (cadre de marque chaud, PAS de bordure blanche)
   • État PIP : violet #a78bfa 3px solide + halo 6px + lueur 60px (signal d'emphase lorsque l'avatar rétrécit)
   • Surcharge par marque : si l'utilisateur choisit l'emphase de marque chatgpt/gemini/claude-code, le générateur utilise l'accent correspondant

5. Superposition de sous-titres (activée par défaut lorsque compositions/captions.html existe) :

   • Pilule centrée en bas à bottom: 100px, Inter 600 38px blanc sur pilule à bordure violet foncé
   • Apparition/disparition phrase par phrase (0,18 s), arrêt brutal tl.set à la fin de chaque bloc
   • Généré par generate_captions.py à partir d'un modèle Jinja constant + captions.json par vidéo (ou fallback sur les segments Whisper)
   • Monté automatiquement par generate_root_index.py à l'indice z 28 ; désactiver avec --no-captions
   • Voir Phase 3e Étape 2 ci-dessous

6. Bandeau inférieur d'abonnement YouTube aux 3 dernières secondes (activé par défaut) :

   • Composition yt-lower-third.html montée à data-start = total_duration - 3.0s
   • Animation de glissement + pression du bouton S'abonner + échange d'état Abonné
   • Indice z 60 (au-dessus de tous les calques), pointer-events: none
   • Nom de la chaîne + nombre d'abonnés intégrés dans compositions/yt-lower-third.html (éditer si l'utilisateur souhaite renommer)
   • Désactiver : generate_root_index.py --no-yt-lower-third. Durée personnalisée : --yt-lower-third-duration 4.5

Les 5 motifs sont tous intégrés automatiquement — l'orchestrateur n'a pas besoin d'étapes supplémentaires. L'utilisateur n'a qu'à rendre 1.png-N.png (Phase 3.5) pour que la division du travail soit pleinement visible. Si la génération d'images est ignorée, la vidéo reste belle avec les compositions HTML pures (calque d'image à opacité 0).

Différences avec la compétence sœur 9:16

	mkt-full-video-with-11-hyperframe-heygen (9:16)	-16-9 (cette compétence)
Format	1080×1920 portrait	1920×1080 paysage
Disposition	Avatar plein écran + bande de sous-titres + coupures b-roll	Panneau de diapositives à gauche (1200) + cadre d'avatar flottant à droite (540×880)
Montage des sous-titres	Oui (mot par mot style TikTok)	Pas de sous-titres par défaut (la diapositive porte le message visuellement)
Mécanisme PIP	Aucun	Transitions SPLIT ↔ PIP — la diapositive s'étend à 1920, l'avatar rétrécit en coin 320×420
Mouvement de l'avatar	Plein écran statique	Breathing yoyo + zoom punch-in en début de scène
Style de diapositive	Maquettes basées sur des variantes (post-stack, ai-window, app-card…)	Compositions par scène créées par LLM + palette AI moderne + b-roll cream-paper au niveau racine
Création de la composition	Modèles Python	Sous-agents LLM parallèles N (1 par scène)
Rendu	TikTok/Reels/Shorts	Podcast keynote / YouTube savoir / LinkedIn
Rendu HeyGen	720×1280 portrait	720×1280 portrait TOUJOURS (recadré via object-position: center 25% dans le cadre d'avatar paysage — pas 1280×720 !)

Choisissez cette compétence pour chaque vidéo de savoir en paysage. Choisissez la sœur pour chaque format court vertical.

Quand l'utiliser

• L'utilisateur a un script en vietnamien (60–150 s) et souhaite une vidéo de savoir de type podcast keynote paysage
• L'utilisateur veut un résultat avec le « feel » Claude AI / Anthropic editorial : fond de diapositive sombre, lettre de niveau néon, carte en verre, infographie cream-paper au niveau racine
• Sujet : partage de savoir / étude de cas / avant-après / comparaison d'outils / listicle 5+ conseils — adapté aux diapositives, prend en charge un nombre N de scènes quelconque (3, 5, 7, 10…)
• Chaînes de publication : YouTube paysage, vidéo LinkedIn, clip de podcast, site web intégré
• L'utilisateur a déjà un fichier MP3 + source.mp4 et souhaite replanifier la Phase 3 → l'orchestrateur saute les Phases 1+2 et passe directement à la Phase 3

N'utilisez PAS cette compétence si :

• L'utilisateur a besoin de TikTok/Reels/Shorts vertical → utilisez la sœur 9:16
• Script > 5000 caractères → divisez sémantiquement d'abord
• Sujet purement visuel (montage, clip musical) — cette compétence est optimisée pour tête parlante + diapositive

Aperçu du pipeline

Script (vietnamien, ≤ 5000 caractères)
    │
    ▼
[Phase 0.5 Détection de reprise — si voiceover.mp3 + source.mp4 existent déjà → sauter Phase 1+2]
    │
    ▼
Phase 1 ── mkt-elevenlabs-tts-to-mp3 ─────► voiceover.mp3
    │                                          │
    │                              POINT DE CONTRÔLE #1 — l'utilisateur écoute et vérifie le MP3
    │                                          │
    │                                          ▼ (OK)
Phase 2 ── heygen-mp3-to-mp4 ─────────────► source.mp4 (720×1280 portrait, synchronisation labiale)
    │                                          (NE PAS rendre en 1280×720)
    │
    ▼
Phase 3a ── transcrire (Whisper) → voiceover.srt + transcript.json
Phase 3b ── plan_visuals.py → visual-plan.json + prompts.md
              (compétence de planification : mkt-plan-short-video-edit-16-9)
              POINT DE CONTRÔLE #2 — l'utilisateur vérifie le plan
    │
    ▼ (LLM personnalise visual-plan.json par scène, métaphore/lettre de niveau/éléments)
    │
Phase 3c ── apply_plan_to_scenes.py → scenes.json (compatible éditeur)
Phase 3d ── 🔥 DÉPLOIEMENT de N sous-agents LLM parallèles (1 par scène) 🔥
              → compositions/scene-1.html … scene-N.html
              (chaque sous-agent : lit le bloc de scène dans visual-plan + références → crée HTML/CSS/GSAP)
Phase 3e ── scaffold_project.py (sfx/ + logos/ + avatar.jpg + yt-lower-third.html)
            generate_root_index.py → index.html (1920×1080, monte scene-N.html, calque broll, PIP, SFX, marque de marque, bordure d'avatar orange Claude)
Phase 3f ── lint + prévisualisation (Studio @ http://localhost:3002)
            (Phase 3.5 optionnelle : générer 1.png-N.png en cream-paper via AI33/Nano)
    │
    ▼
L'utilisateur vérifie la prévisualisation Studio → « render » → npx hyperframes render → out.mp4 1920×1080

Points de contrôle :

• #1 MP3 voiceover — porte de l'orchestrateur (sauter si mode reprise).
• #2 Plan visuel — porte de la Phase 3b (peut être sauté si auto_scenes=true).
• Porte de rendu — l'utilisateur confirme dans Studio avant de lancer le rendu.

Entrées

Entrée	Requise	Format / exemple
Sujet	Oui	Titre court ("Avantages de Claude AI", "5 astuces pour économiser les tokens Claude")
Emphase de marque	Oui	claude / chatgpt / gemini / claude-code / generic — détermine la palette d'accentuation + logo + couleur de bordure de l'avatar
Texte du script	Oui (sauf mode reprise)	Fichier .txt/.md ou en ligne. Vietnamien. ≤ 5000 caractères
Slug de sortie	Non	Dérivé automatiquement du sujet. Minuscules, ASCII, tirets.
Nombre de scènes	Non	Par défaut 5 (Accroche / Problème / Solution / Récapitulatif / CTA). Peut être 3–10 selon la longueur. Listicle 5+ conseils OK — déploiement 1 sous-agent par conseil + 1 accroche + 1 CTA.
Apparence de l'avatar	Non	1 ID tiré de la variable d'environnement HEYGEN_AVATAR_LOOKS. Aléatoire si non choisi.
Mode infographique	Non	now (générer l'image immédiatement via mkt-broll-image) / scaffold (écrire seulement prompts.md, l'utilisateur génère manuellement après) / none. Par défaut scaffold.
auto_scenes	Non	Par défaut false. true pour sauter le point de contrôle du plan des scènes.
start_at	Non	phase_1 (par défaut) / phase_2 / phase_3. Point d'entrée de la reprise.
skip_phase_1 / skip_phase_2	Non	Raccourci booléen pour le mode reprise (alternative à start_at=phase_3).

Structure de l'espace de travail

workspace/content/YYYY-MM-DD/<slug>/
├── script.txt                  # Phase 0 — texte propre fourni par l'utilisateur
├── script-tagged.txt           # Phase 1a — script + balises audio ElevenLabs v3 ([excited], [sigh]…)
├── voiceover.mp3               # Phase 1b
├── voiceover.srt               # Phase 3a (Whisper)
├── voiceover_segments.json     # Phase 3a (segments au niveau du mot)
├── source.mp4                  # Phase 2 (720×1280 portrait — NE PAS rendre en paysage)
├── transcript.json             # Phase 3a (mots Whisper)
├── transcript-cleaned.json     # Phase 3a (correction manuelle des fautes de frappe)
├── scenes-outline.json         # Phase 3b — plan avant le point de contrôle
├── visual-plan.json            # Phase 3b — plan complet lisible par machine (sortie du planificateur)
├── scenes.json                 # Phase 3c — aplatissement compatible éditeur de visual-plan
├── prompts.md                  # Phase 3b — invites éditoriales cream-paper (1 par scène)
├── 1.png  2.png  ... N.png     # Phase 3.5 — images infographiques cream (1 par scène), calque broll racine
├── captions.json               # Phase 3e (optionnel) — [{text,start,end},...] organisé par l'orchestrateur ; fallback sur voiceover_segments.json si manquant
├── compositions/
│   ├── scene-1.html            # Phase 3d — créé par LLM, paysage natif 1200×1080
│   ├── scene-2.html            # 1 fichier par scène, quel que soit N
│   ├── ...
│   ├── scene-N.html
│   ├── captions.html           # Phase 3e — généré à partir de captions.html.j2 + captions.json (ou segments Whisper)
│   └── yt-lower-third.html     # Phase 3e — copié automatiquement depuis les ressources de la compétence
├── assets/
│   └── logos/                  # Phase 3e — copiés automatiquement (claude.png, chatgpt.png, gemini.jpg, claude-code.png)
├── sfx/                        # Phase 3e — 6 SFX par défaut
└── index.html                  # Phase 3e — Composition racine 1920×1080

YYYY-MM-DD = aujourd'hui (UTC+7).

Flux de travail

Étape 0 — Configuration + détection de reprise

1. Valider len(script_text) <= 5000 (sauter si mode reprise + pas d'entrée de script). Si échec → arrêter.
2. Dériver le slug du sujet si manquant.
3. Créer workspace/content/YYYY-MM-DD/<slug>/. Enregistrer script.txt (sauter si reprise + script existe déjà).
4. Choisir la palette d'accent de marque (voir references/slide-design-tokens.md).
5. Détection de reprise — si voiceover.mp3 et source.mp4 existent dans le dossier slug → définir l'état resume_mode = true.

Étape 1 — Phase 1 : Synthèse vocale → MP3 (sauter si mode reprise)

1. Appeler mkt-elevenlabs-tts-to-mp3 avec le script.
2. Résultat : voiceover.mp3.
3. Point de contrôle #1 — l'utilisateur écoute. Si pas satisfait → modifier le script et recommencer. Si OK → continuer.

Étape 2 — Phase 2 : Audio → Vidéo avatar (sauter si mode reprise)

1. Appeler heygen-mp3-to-mp4 avec voiceover.mp3 + HEYGEN_AVATAR_LOOKS (ou aléatoire).
2. Résultat : source.mp4 — portrait 720×1280 (NE PAS rendre en paysage).

Étape 3 — Phase 3a : Transcription

1. Exécuter Whisper sur voiceover.mp3 → voiceover.srt + transcript.json (segments au niveau du mot).

Étape 4 — Phase 3b : Planification visuelle

1. Appeler la compétence mkt-plan-short-video-edit-16-9 avec script.txt + transcript.json.
2. Résultat : visual-plan.json + prompts.md. visual-plan.json contient des blocs de scène détaillés : plage temporelle (secondes de début/fin), phrase, métaphore, lettre de niveau, éléments/badges, type de motif de composition, emphase d'image b-roll.
3. Point de contrôle #2 — l'utilisateur vérifie le plan. Peut personnaliser les métaphores/lettres de niveau/éléments. Si auto_scenes=true → sauter ce point de contrôle.

Étape 5 — Phase 3c : Appliquer le plan aux scènes

1. Exécuter apply_plan_to_scenes.py — génère scenes.json (aplanit pour compatibilité éditeur).

Étape 6 — Phase 3d : Déploiement de N sous-agents LLM parallèles 🔥

1. Déployer 1 sous-agent LLM par scène dans visual-plan.json (y compris Hook + CTA). Chaque sous-agent voit le bloc de sa scène + les documents de référence :
   • references/composition-patterns.md — catalogue exhaustif des motifs visuels avec extraits de code HTML
   • references/slide-design-tokens.md — jetons de conception de diapositive
   • references/infographic-prompt-template.md — modèle d'invite pour le calque image racine
2. Chaque sous-agent écrit compositions/scene-N.html — HTML/CSS/GSAP complet pour cette scène, paysage 1920×1080.
3. Important : la composition de scène est un calque de DONNÉES pur. Pas de <div class="image-slot"> — l'image b-roll vit au niveau racine dans index.html.

Étape 7 — Phase 3e : Échafaudage + composition racine

1. Exécuter scaffold_project.py :
   • Copier sfx/ (6 par défaut)
   • Copier les logos depuis assets/logos/ selon l'emphase de marque
   • Copier yt-lower-third.html avec les valeurs encodées (nom de chaîne, nombre d'abonnés)
   • Copier captions.html (généré à partir du modèle + captions.json ou segments Whisper)
   • Copier avatar.jpg (image clé de source.mp4 pour prévisualisation)
2. Exécuter generate_root_index.py :
   • Monte toutes les compositions de scène + calque b-roll + cadre d'avatar + sous-titres + SFX + marque de marque + bordures d'avatar
   • Options : --no-captions, --no-yt-lower-third, --yt-lower-third-duration 4.5

Étape 8 — Phase 3f : Lint + prévisualisation

1. Exécuter npx hyperframes lint — vérifie les erreurs de composition, les problèmes de montage, les chemins de fichiers.
2. Démarrer npx hyperframes preview — Studio local à http://localhost:3002. L'utilisateur vérifie le rendu.

Étape 9 — Phase 3.5 (optionnelle) : Images infographiques cream-paper

1. Si infographic_mode=scaffold : l'utilisateur lit prompts.md et génère 1.png-N.png via un générateur d'images.
2. Si infographic_mode=now : appeler mkt-broll-image pour générer toutes les images immédiatement.
3. Si infographic_mode=none : sauter. Le calque b-roll reste invisible (opacité 0) mais la Division du Travail est préservée.

Étape 10 — Rendu

1. L'utilisateur appuie sur « render » dans Studio → npx hyperframes render → out.mp4 1920×1080.
2. Le fichier réside dans workspace/content/YYYY-MM-DD/<slug>/out.mp4.

Variables d'environnement

La compétence s'attend à ce que ces variables soient définies dans l'environnement du terminal de l'utilisateur :

Variable d'environnement	Objectif
ELEVENLABS_API_KEY	Clé API ElevenLabs pour la synthèse vocale
HEYGEN_API_KEY	Clé API HeyGen pour la vidéo d'avatar
HEYGEN_AVATAR_LOOKS	JSON array d'IDs de look d'avatar; peut être défini une fois puis référencé
OPENAI_API_KEY	Clé API OpenAI pour Whisper + LLM (Phase 3d, 3e) — vérifier quel modèle est utilisé localement
ANTHROPIC_API_KEY	Optionnel si le LLM local utilise claude-sonnet-4-20250514 pour les sous-agents de composition

Ressources

• references/composition-patterns.md — Catalogue des motifs visuels HyperFrames : extraits de code HTML, instructions d'utilisation pour les sous-agents LLM
• references/slide-design-tokens.md — Palette de conception de diapositive : couleurs (fond, accent, verre), typographie, espacement, tailles de logo
• references/infographic-prompt-template.md — Structure d'invite pour générer des images cream-paper éditoriales b-roll
• assets/logos/ — Fichiers de logo de marque : claude.png, chatgpt.png, gemini.jpg, claude-code.png
• assets/sfx/ — 6 fichiers audio SFX par défaut pour les transitions/emphases

Exemple de flux

Invite utilisateur : "Tạo video 16:9 chia sẻ 5 mẹo tiết kiệm token Claude"

Actions de l'orchestrateur :

1. Slug : 5-meo-tiet-kiem-token-claude
2. Emphase de marque : claude (palette orange)
3. Appel ElevenLabs → voiceover.mp3
4. Appel HeyGen → source.mp4 (avatar portrait 720×1280)
5. Whisper → transcript.json
6. Appel à la compétence de planification → visual-plan.json : Hook ("Bạn đang tốn token một cách lãng phí") + 5 conseils ("Dùng system prompt ngắn", "Batch các câu hỏi"…) + CTA ("Tối ưu ngay")
7. Déploiement 7 sous-agents LLM : 1 pour l'accroche, 1 pour chaque conseil, 1 pour le CTA. Chaque sous-agent choisit un motif de composition :
   • Hook : motif scroll-tape (métaphore du gaspillage)
   • Conseil 1 : motif avant-après (prompt long vs court)
   • Conseil 2 : motif hub-and-spokes (batch central)
   • …
8. generate_root_index.py → index.html + bordures orange Claude + stratégie Hybrid Hook zoom
9. L'utilisateur génère des images cream-paper (Phase 3.5) pour le calque b-roll émotionnel
10. Rend final → out.mp4 1920×1080, prêt pour YouTube

Traitement des erreurs

• Phase 1 échoue (ElevenLabs) : vérifier la connexion API + solde utilisateur. Réessayer après correction.
• Phase 2 échoue (HeyGen) : le rendu d'avatar peut prendre 30-120 s. Si délai d'attente dépassé → vérifier l'état du travail dans le tableau de bord HeyGen.
• Phase 3b échoue (planification) : le LLM peut produire un JSON invalide. Réessayer avec un modèle de température plus basse ou un modèle plus grand.
• Phase 3d échoue (composition LLM) : les compositions HTML invalides sont attrapées par le lint (Phase 3f). Les sous-agents échoués sont réessayés avec plus de contexte.
• Erreur de rendu : problèmes de mémoire (si vidéo très longue avec beaucoup d'images/scènes). Envisager de diviser par chapitres.

Notes de performance

• Phase 3d : le déploiement de N sous-agents LLM parallèles réduit le temps de 5-15 min (séquentiel) à 30-90 s (parallèle) selon la charge du LLM.
• Phase 3e : generate_root_index.py prend < 5 s.
• Rendu : vidéo 60 s → environ 2-4 min de rendu (dépend du matériel).
• Le calque b-roll cream-paper (Phase 3.5) est la seule étape manuelle — tout le reste est automatisé.

Documentation connexe

• mkt-elevenlabs-tts-to-mp3 — Détails de la Phase 1
• heygen-mp3-to-mp4 — Détails de la Phase 2
• mkt-plan-short-video-edit-16-9 — Détails de la planification vidéo (Phase 3b)
• mkt-broll-image — Générateur d'images cream-paper (Phase 3.5)
• mkt-full-video-with-11-hyperframe-heygen — Compétence sœur 9:16 pour vidéos verticales