lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

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

Zweischichtiger Planer für Slide-Videos 16:9:

1. Strukturschicht (15 Typen des visuellen Denkens) — Folienlayout: Vorher-Nachher, Mindmap, Flussdiagramm, Matrix 2×2, Venn, Zeitleiste, Pyramide, Vergleichstabelle, Eisberg, Kreislauf, Trichter, Konzeptkarte, Symbolraster, Zahlen-Infografik, 3-Säulen. Gesteuert durch den Szenen-Archetyp (Hook → Vorher-Nachher, Problem → Symbolraster, Lösung → 3-Säulen, …).
2. Illustrationsschicht (25 Metaphern-Bibliothek) — Handgezeichnete Cream-Paper-Bilder, die in die Struktur eingebettet sind: Sanduhr, zerbrochene Kette, Roboter-Orb, zerbrochenes Sparschwein, Schnecke ↔ Rakete, Lego-Bausteine, Treppe, Schlüssel-Schloss, Berggipfel…

JSON-Ausgabe, die vom Editor mkt-hyperframe-talking-head-video-16-9 konsumiert wird — ersetzt die manuelle Befüllung am Checkpoint scenes-outline durch einen reproduzierbaren Plan.

Ausgabe

Datei	Was
visual-plan.json	Schema-validiert. Pro Szene: visual_type (eins von 15) + metapher + tier_letter + items[] + badges[] + pip_events[].
prompts.md	Nummerierte (1.png, 2.png, …) Cream-Paper-Prompts. Jeder trägt die strukturelle Direktive (Vorher-Nachher/Pyramide/Trichter/…) + Metapher + vietnamesischen Titel/Untertitel. Einfügbar in AI33 / Nano Banana Pro.
scenes.json (via apply_plan_to_scenes.py)	Editor-Format-Shim.

Schema (1-Seiten-Zusammenfassung):

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

Harte Anforderungen

• Jedes infographic-cream-paper B-Roll muss sowohl visual_type (1 von 15) als auch metapher (1 von 25 oder "none" für reine Strukturdiagramme) enthalten. Nur-Text-Folien werden abgelehnt.
• Tier-Letter ≤ 5 Zeichen (Ziffern/Symbole/Marken-Keywords gewinnen — siehe references/tier-letter-selection-rules.md).
• PIP-Fenster überlappen sich nicht, Abstand ≥ 0,3s.
• Vietnamesische Titel mit vollständigen diakritischen Zeichen. Markennamen + mathematische Symbole bleiben Englisch.

Pipeline

1. Szenen erkennen

Lese script.txt + transcript.json (oder transcript-cleaned.json). Wiederverwende detect_scenes.py des Editors falls vorhanden, sonst Rückfall auf 5-Szene-Heuristik (Hook → Problem → Lösung → Zusammenfassung → CTA).

Listen-Unterstützung: Skripte mit Listenstruktur (1 Hook + N Tipps + 1 CTA) → erzeuge N+2 Szenen. Verwende kind: "tip-1", "tip-2", …, "tip-N" für die Hauptszenen — der nachgelagerte Editor generate_root_index.py mountet sie als compositions/scene-{num}.html unabhängig von N (keine fs-lesson-1/recap-card-Kollision). Empfohlen N = 3..7 (max. 10).

1b. Nachgelagerter LLM-Sub-Agent-Fan-Out (VERBRAUCHERVERTRAG)

Nachdem dieser Planer visual-plan.json geschrieben hat, ruft der Orchestrator (mkt-full-video-with-11-hyperframe-heygen-16-9) NICHT generate_compositions.py auf (Python-Jinja2-Generator veraltet). Stattdessen startet er N parallele general-purpose Agenten in 1 Nachricht — 1 Sub-Agent pro Szene — die jeweils compositions/scene-{num}.html aus dem visual-plan.json dieses Skills verfassen.

Dies bedeutet:

• Jeder Szenenblock in visual-plan.json muss ausreichend in sich geschlossen sein, damit ein isolierter Sub-Agent seine Komposition ohne Koordination verfassen kann — vollständiger Kicker, Heading, accent_words, tier_letter, items, badges, broll metaphor mit layout_description, pip_events mit relativer+absoluter Zeitsteuerung.
• Standard-Metapher "robot-orb-with-tasks" sollte (durch den Orchestrator-LLM-Hand-Edit) vor dem Fan-Out durch eine szenenspezifische Metapher ersetzt werden (scroll-tape-wasted, edit-regenerate-loop, projects-vault-shared-knowledge, right-tool-for-job-vehicles, pacific-vs-vietnam-timezone, …) — generische Metapher → langweilige Komposition.
• Die Felder metaphor und layout_description werden direkt in den Sub-Agent-Prompt eingelesen; reichhaltigere Beschreibungen → bessere Kompositionen.
• Das Bild befindet sich nur auf der ROOT-Ebene (<img id="broll-N"> in index.html). Die Kompositions-HTML darf KEIN image-slot einbetten. Der Sub-Agent-Prompt sollte explizit embedded image-slots verbieten.

2. visual_type pro Szene wählen (DER NEUE SCHRITT)

Siehe references/visual-thinking-types.md Archetyp-Karte. Standard pro Archetyp:

Archetyp	Standard visual_type	Rückfall
Hook	before-after	number-infographic
Problem / Fehler	icon-grid	iceberg
Wendepunkt	before-after	flowchart
Lösung	three-pillar	flowchart
Differenzierer	comparison-table	venn
Beweis / Ergebnis	number-infographic	comparison-table
Zusammenfassung	number-infographic	mind-map
CTA	icon-grid	three-pillar

3. metaphor aus der Bibliothek wählen

references/visual-thinking-library.md — 25 handgezeichnete Einträge. Wähle eine, deren Bildsprache natürlich in den gewählten visual_type passt (z.B. before-after + dong-ho-cat, three-pillar + robot-orb-with-tasks, number-infographic + heo-dat-vo-ket-sat). Setze "none" nur, wenn ein reines Strukturdiagramm lesbarer ist (z.B. comparison-table von Feature-Checks).

4. Tier-Letter, Items, Badges ableiten

Siehe references/tier-letter-selection-rules.md. Ziffern + Einheiten gewinnen (8h, 100tr, 15h). Symbole OK (∞, →, ×). ≤ 5 Zeichen harte Grenze.

5. PIP-Ereignisse berechnen

Standardmäßig 1 Fenster pro Szene: t_in = scene_start + 1.4s, t_out = t_in + 3.5s (max. 0,3s vor Szenenende). Lange Lösungsszenen (≥ 12s) erhalten 2 Fenster. Hook erhält keine.

6. prompts.md rendern

render_infographic_prompts.py durchläuft visual-plan.json, fügt visual_type-Direktive oben in jeden Prompt ein, schichtet dann Metapher + dekorative Elemente + Palette. Ergebnis ist ein einfügebereiter Cream-Paper-Editorial-Prompt.

Checkpoint mit Benutzer

Nachdem plan_visuals.py läuft, präsentiere eine Markdown-Zusammenfassung (KEIN rohes JSON) — siehe references/plan-checkpoint-protocol.md. Format:

### Szene 1 · HOOK (0.07–13.73s)
- Visueller Typ: **before-after** → HyperFrame `tier-row`
- Tier-Letter: **8h → 0h** (Rosa ↔ Limette)
- Metapher: **Sanduhr voll↔leer** (1.png)
- PIP: nein (Hook-Szene)

### Szene 3 · LÖSUNG (27.37–47.75s)
- Visueller Typ: **three-pillar** → HyperFrame `hero-orb`
- Spezifikationen: ∞ Gespräche merken · 100tr Dokumente lesen · 8h Selbst filmen
- Metapher: **robot-orb-with-tasks** (3.png)
- PIP: 28.77→32.77s + 34.37→38.87s

Benutzer-Antwortmuster:

• OK → finalisieren + Editor übergeben
• ändere Szene N visuell zu Trichter → visual_type patchen
• ändere Szene N Metapher zu Schnecke → metaphor patchen + prompts.md neu rendern
• ändere tier-letter Szene N zu 25 → tier_letter patchen
• zusammenführen Szene N+M → neu gliedern

Dateien

mkt-plan-short-video-edit-16-9/
├── SKILL.md
├── scripts/
│   ├── plan_visuals.py                      ← MAIN. --workspace <verz>
│   ├── render_infographic_prompts.py        ← visual-plan.json → prompts.md
│   └── apply_plan_to_scenes.py              ← visual-plan.json → scenes.json (editor shim)
├── assets/templates/
│   ├── visual-plan.schema.json              ← JSON Schema (visual_type + metaphor erforderlich)
│   └── infographic-prompt.j2                ← Jinja: strukturelle Direktive + Metapher + Palette
└── references/
    ├── visual-thinking-types.md             ← 15 Strukturtypen (DAS primäre Objektiv)
    ├── visual-thinking-library.md           ← 25 Metaphern-Einträge (Illustrationsschicht)
    ├── tier-letter-selection-rules.md       ← Glyphen-Auswahl
    ├── scene-archetype-pattern-mapping.md   ← Archetyp → Variante + Metaphern-Entscheidungsbaum
    └── plan-checkpoint-protocol.md          ← Zusammenfassungsvorlage + Revisionshandler

Ausgearbeitetes Beispiel

Produktionsprojekt loi-ich-claude-ai:

Szene	Art	visual_type	Metapher	Tier	HyperFrame-Variante
1	hook	before-after	dong-ho-cat	8h / 0h	tier-row
2	problem	icon-grid	broken-chain	3×	chats-stack
3	solution	three-pillar	robot-orb-with-tasks	∞ / 100tr / 8h	hero-orb
4	recap	number-infographic	heo-dat-vo-ket-sat	15h	counter-row
5	cta	icon-grid	gift-box-open	AI	terminal-row

Das ist der Goldstandard — gegeben script.txt + transcript.json für dieses Projekt sollte plan_visuals.py --workspace . diese Tabelle neu ableiten.