lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

mkt-plan-short-video-edit-16-9

Planificateur à deux niveaux pour les diapositives vidéo 16:9 :

1. Couche structurelle (15 types de pensée visuelle) — disposition des diapositives : Avant-Après, Carte Mentale, Diagramme de Flux, Matrice 2×2, Venn, Chronologie, Pyramide, Tableau Comparatif, Iceberg, Cycle, Entonnoir, Carte Conceptuelle, Grille d'icônes, Infographie Numérique, 3 Piliers. Guidé par l'archétype de la scène (accroche → avant-après, problème → grille d'icônes, solution → 3 piliers, …).
2. Couche d'illustration (bibliothèque de 25 métaphores) — images dessinées à la main sur fond crème, composées à l'intérieur de la structure : sablier, chaîne brisée, robot-orb, tirelire cassée, escargot ↔ fusée, lego emboîté, échelle, clé-serrure, sommet de montagne…

Le JSON de sortie est consommé par l'éditeur mkt-hyperframe-talking-head-video-16-9 — il remplit automatiquement le point de contrôle scenes-outline avec un plan reproductible.

Sortie

Fichier	Description
visual-plan.json	Validé par schéma. Par scène : visual_type (1 parmi 15) + metaphor + tier_letter + items[] + badges[] + pip_events[].
prompts.md	Consignes numérotées (1.png, 2.png, …) sur fond crème. Chacune contient la directive structurelle (Avant-Après / Pyramide / Entonnoir / …) + la métaphore + le titre/sous-titre en vietnamien. Coller dans AI33 / Nano Banana Pro.
scenes.json (via apply_plan_to_scenes.py)	Adaptateur pour le format de l'éditeur.

Schéma (résumé 1 page) :

{ workspace_slug, total_duration, brand,
  scenes: [{
    id, num, kind, variant, start, end,
    kicker, heading, accent_words[], voiceover_anchor,
    tier_letter,                 // ≤5 caractères : "8h" / "0h" / "∞" / "100tr" / "IA"
    items[], badges[],
    broll: [{
      kind: "infographic-cream-paper",
      visual_type,               // 1 parmi 15 — voir references/visual-thinking-types.md
      metaphor,                  // 1 parmi 25 — voir references/visual-thinking-library.md (ou "none")
      title_vi, subtitle_vi,
      palette_accents[], layout_description,
      placeholder_filename, aspect
    }],
    pip_events: [{t_in, t_out, trigger}]
  }]
}

Exigences strictes

• Chaque b-roll infographic-cream-paper doit porter à la fois visual_type (1 parmi 15) ET metaphor (1 parmi 25 ou "none" pour les diagrammes purement structurels). Les diapositives de texte seul sont rejetées.
• Lettre-clé ≤ 5 caractères (les chiffres/symboles/mots-clés de marque gagnent — voir references/tier-letter-selection-rules.md).
• Fenêtres PIP sans chevauchement, intervalle ≥ 0,3 s.
• Titres vietnamiens avec tous les diacritiques. Les noms de marque et les symboles mathématiques restent en anglais.

Pipeline

1. Détection des scènes

Lire script.txt + transcript.json (ou transcript-cleaned.json). Réutiliser le detect_scenes.py de l'éditeur s'il existe, sinon utiliser une heuristique à 5 scènes (accroche → problème → solution → récapitulation → appel à l'action).

Support des listicles : scripts avec structure de listicles (1 accroche + N conseils + 1 CTA) → produire N+2 scènes. Utiliser kind: "tip-1", "tip-2", …, "tip-N" pour les scènes du corps — le generate_root_index.py de l'éditeur les monte en tant que compositions/scene-{num}.html quel que soit N (pas de collision fs-lesson-1/recap-card). N recommandé = 3..7 (10 max).

1b. Répartition en sous-agents LLM en aval (CONTRAT CONSOMMATEUR)

Une fois que ce planificateur a écrit visual-plan.json, l'orchestrateur (mkt-full-video-with-11-hyperframe-heygen-16-9) n'appelle PAS generate_compositions.py (générateur Python Jinja2 déprécié). Il lance plutôt N agents general-purpose en parallèle en 1 message — 1 sous-agent par scène — chacun créant compositions/scene-{num}.html à partir du visual-plan.json de cette compétence.

Cela signifie :

• Chaque bloc de scène dans visual-plan.json doit être suffisamment autonome pour qu'un sous-agent isolé puisse créer sa composition sans coordination — kicker, heading, accent_words, tier_letter, items, badges, métaphore du b-roll avec layout_description, pip_events avec timing relatif+absolu.
• La métaphore par défaut "robot-orb-with-tasks" doit être remplacée (par édition manuelle LLM de l'orchestrateur) par une métaphore spécifique à la scène (scroll-tape-wasted, edit-regenerate-loop, projects-vault-shared-knowledge, right-tool-for-job-vehicles, pacific-vs-vietnam-timezone, …) avant la répartition — une métaphore générique donne une composition ennuyeuse.
• Les champs metaphor et layout_description sont lus directement dans le prompt du sous-agent ; des descriptions plus riches donnent de meilleures compositions.
• L'image ne se trouve qu'au niveau racine (<img id="broll-N"> dans index.html). Le HTML de la composition ne doit PAS intégrer image-slot. Le prompt du sous-agent doit explicitement interdire les slots d'image intégrés.

2. Choisir visual_type par scène (LA NOUVELLE ÉTAPE)

Consulter references/visual-thinking-types.md pour la carte des archétypes. Valeurs par défaut par archétype :

Archétype	visual_type par défaut	Repli
accroche	before-after	number-infographic
problème / échec	icon-grid	iceberg
pivot	before-after	flowchart
solution	three-pillar	flowchart
différenciateur	comparison-table	venn
preuve / résultat	number-infographic	comparison-table
récapitulation	number-infographic	mind-map
appel à l'action	icon-grid	three-pillar

3. Choisir metaphor dans la bibliothèque

references/visual-thinking-library.md — 25 entrées dessinées à la main. Choisir une métaphore dont l'imagerie s'intègre naturellement dans le visual_type choisi (par ex. before-after + dong-ho-cat, three-pillar + robot-orb-with-tasks, number-infographic + heo-dat-vo-ket-sat). Mettre "none" uniquement lorsqu'un diagramme structurel pur est plus lisible (par ex. comparison-table de vérifications de fonctionnalités).

4. Dériver tier-letter, items, badges

Voir references/tier-letter-selection-rules.md. Les chiffres + unités gagnent (8h, 100tr, 15h). Les symboles sont acceptés (∞, →, ×). Plafond strict de ≤ 5 caractères.

5. Calculer les événements PIP

1 fenêtre par scène par défaut : t_in = debut_scene + 1,4 s, t_out = t_in + 3,5 s (plafonné à 0,3 s avant la fin de la scène). Les scènes de solution longues (≥ 12 s) reçoivent 2 fenêtres. L'accroche n'en reçoit aucune.

6. Générer prompts.md

render_infographic_prompts.py parcourt visual-plan.json, injecte la directive visual_type en haut de chaque prompt, puis superpose la métaphore + les éléments décoratifs + la palette. Le résultat est une consigne éditoriale prête à être copiée-collée.

Point de contrôle avec l'utilisateur

Après l'exécution de plan_visuals.py, présenter un résumé en Markdown (PAS le JSON brut) — voir references/plan-checkpoint-protocol.md. Format :

### Scène 1 · ACCROCHE (0,07–13,73 s)
- Type visuel : **before-after** → HyperFrame `tier-row`
- Lettre-clé : **8h → 0h** (rose ↔ lime)
- Métaphore : **sablier plein↔vide** (1.png)
- PIP : non (scène d'accroche)

### Scène 3 · SOLUTION (27,37–47,75 s)
- Type visuel : **three-pillar** → HyperFrame `hero-orb`
- Spécifications : ∞ Se souvenir de discuter · 100tr Lire la documentation · 8h Appuyer soi-même
- Métaphore : **robot-orb-with-tasks** (3.png)
- PIP : 28,77→32,77 s + 34,37→38,87 s

Réponses possibles de l'utilisateur :

• OK → finaliser + transmettre à l'éditeur
• đổi scene N visual sang funnel → corriger visual_type
• đổi scene N metaphor sang escargot → corriger metaphor + regénérer prompts.md
• đổi tier-letter scene N thành 25 → corriger tier_letter
• gộp scene N+M → redécouper

Fichiers

mkt-plan-short-video-edit-16-9/
├── SKILL.md
├── scripts/
│   ├── plan_visuals.py                      ← PRINCIPAL. --workspace <dir>
│   ├── render_infographic_prompts.py        ← visual-plan.json → prompts.md
│   └── apply_plan_to_scenes.py              ← visual-plan.json → scenes.json (adaptateur éditeur)
├── assets/templates/
│   ├── visual-plan.schema.json              ← Schéma JSON (visual_type + metaphor obligatoires)
│   └── infographic-prompt.j2                ← Jinja : directive structurelle + métaphore + palette
└── references/
    ├── visual-thinking-types.md             ← 15 types structurels (LE prisme principal)
    ├── visual-thinking-library.md           ← 25 entrées de métaphores (couche d'illustration)
    ├── tier-letter-selection-rules.md       ← Sélecteur de glyphes
    ├── scene-archetype-pattern-mapping.md   ← Archétype → variante + arbre de décision des métaphores
    └── plan-checkpoint-protocol.md          ← Modèle de résumé + gestionnaires de révision

Exemple concret

Projet de production loi-ich-claude-ai :

Scène	Type	visual_type	Métaphore	Lettre-clé	Variante HyperFrame
1	accroche	before-after	dong-ho-cat	8h / 0h	tier-row
2	problème	icon-grid	broken-chain	3×	chats-stack
3	solution	three-pillar	robot-orb-with-tasks	∞ / 100tr / 8h	hero-orb
4	récapitulation	number-infographic	heo-dat-vo-ket-sat	15h	counter-row
5	appel à l'action	icon-grid	gift-box-open	IA	terminal-row

Voilà l'étalon-or — étant donné script.txt + transcript.json pour ce projet, plan_visuals.py --workspace . devrait redériver ce tableau.