MKT.LANDINGPAGE.SKILLS – Orchestrierung: Skript → finales MP4 1…

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

End-to-End-Orchestrierung: Skript → finales MP4 16:9 (1920×1080) Podcast-Keynote.

Das Ergebnis ist eine einzige MP4-Datei (1920×1080) im „Talking-Head + Slide“-Format – HeyGen-Avatar in einem abgerundeten Floating Frame rechts (claude-orange Brand-Border), moderne AI-/Claude-Editorial-Slides links, mit PIP-Zoom-Out-Momenten, wenn Slides eine Vollbild-Betonung benötigen. Die Kompositionen backen die unten stehenden Muster automatisch ein – kein manuelles Editieren nötig.

Automatisch eingebackene Muster (Phase-3-Ausgabe)

Jedes von der Orchestrierung erzeugte Video enthält automatisch:

1. Pro-Szene-Kompositions-HTML – erstellt von parallelen LLM-Sub-Agenten (1 Sub-Agent pro Szene, in einer Nachricht ausgefächert), NICHT von Python-Templates:

   • Ausgabe: compositions/scene-1.html … compositions/scene-N.html (1 Datei pro Szene, eindeutiger Dateiname für jedes N)
   • Jeder Sub-Agent liest seinen Szenenblock aus visual-plan.json + Referenzdokumente (references/composition-patterns.md, slide-design-tokens.md, infographic-prompt-template.md) und erstellt HTML/CSS/GSAP von Grund auf – wählt das richtige Muster für die spezifische Metapher der Szene aus, ohne sich auf 5 feste Archetypen zu beschränken
   • Warum LLM, nicht Python: HyperFrames hat unzählige visuelle Denkmuster (Before-After, Hub-and-Spokes, Two-Clock-Comparison, Three-Tier-Comparison, Scroll-Tape, Hero-Orb-Spec-Trio, Terminal-Mock, Gift-Box …). Ein Python-Generator kennt nur 5 feste Archetypen → langweilig, passt sich nicht an szenenspezifische Metaphern wie „Scroll-Tape-Wasted“ oder „Right-Tool-Vehicles“ an. LLM-Authoring pro Szene ist kreativ genug, um die Design-Intention zu bedienen.
   • Brand-Logos werden automatisch angehängt: Der Orchestrator übergibt den Brand-Kontext (claude / chatgpt / gemini / claude-code) an den Sub-Agenten, der Logos aus assets/logos/ referenziert und bei Bedarf in die Komposition einbettet (Orb-Glow, Tool-Badge-Pill, Fail-Row-Icon)

2. „Hybrid Hook“ visuelle Zoom-Strategie auf .avatar-breathing (Phase 3e via generate_root_index.py):

   • HOOK-Szene: Langsamer Anstieg 1.0 → 1.10 über die Szenendauer (Spannungsaufbau)
   • HOOK→BODY: Snap-Reset 1.10 → 1.0 (Spannungsabbau)
   • BODY-Szenen: 1.06 Punch-Beats bei PIP-IN-Ereignissen (Rhythmus)
   • CTA-Szene: Sanfter 1.0 → 1.04 Push (Abschluss)
   • Ersetzt das flache „Atmungs-Yoyo“ – jeder Szenen-Archetyp hat seine eigene Zoom-Bewegung

3. Cream-Paper B-Roll PIP-Swap-Layer (Split-Labor-Architektur – WICHTIG):

   • Die HTML-Komposition (Slide-Mount) trägt DATEN / STUFENBUCHSTABEN / ITEMS / BADGES / TITEL / Brand-Logos – immer eingeschaltet
   • <img class="broll-image"> Cream-Paper-Editorial-Illustration trägt METAPHER / EMOTION – vollflächig 1920×1080, blendet während der PIP-Fenster seiner Szene ein, sonst aus
   • Jede Schicht sagt eine andere Hälfte der Botschaft (HTML = „WAS“, Bild = „WARUM/GEFÜHLE“)
   • KRITISCH: Das Bild lebt NUR in der Root-Ebene (<img id="broll-N"> in index.html). Die Kompositions-HTML darf KEIN <div class="image-slot"> enthalten – das quetscht das 16:9-Bild in eine kleine Box → hässlich. Kompositionen sind eine reine DATA-Ebene.
   • Bildquelle: Der Planner-Skill schreibt prompts.md → der Benutzer generiert 1.png-N.png über AI33/Nano Banana Pro oder mkt-broll-image
   • Vollflächig 1920×1080, object-fit: contain, Cremeton #F0EEE6 Letterbox verschmilzt unsichtbar

4. Avatar-Rahmen in Brand-Farbe (Phase 3e via generate_root_index.py):

   • SPLIT-Standardzustand: Claude-Orange #d97757 3px solid + 6px Halo + 80px Outer Glow (warmer Brand-Rahmen, KEIN weißer Rand)
   • PIP-Zustand: Violett #a78bfa 3px solid + 6px Halo + 60px Glow (Betonungssignal, wenn der Avatar schrumpft)
   • Überschreibung pro Brand: Wenn der Benutzer chatgpt/gemini/claude-code Brand-Betonung wählt, verwendet der Generator die passende Akzentfarbe

5. Untertitel-Overlay (standardmäßig EIN, wenn compositions/captions.html existiert):

   • Pill in der unteren Mitte bei bottom: 100px, Inter 600 38px weiß auf dunkelviolett umrandetem Pill
   • Phrasenweise Ein-/Ausblendung (0,18s), hartes tl.set am Ende jedes Abschnitts
   • Generiert von generate_captions.py aus konstantem Jinja-Template + video-spezifischem captions.json (oder Whisper-Segmente als Fallback)
   • Wird automatisch von generate_root_index.py bei z-index 28 eingebunden; deaktivieren mit --no-captions
   • Siehe Phase 3e Schritt 2 unten

6. YT-Abonnenten-Lower-Third in den letzten 3s (standardmäßig EIN):

   • Komposition yt-lower-third.html wird bei data-start = total_duration - 3.0s eingebunden
   • Slide-In-Animation + Subscribe-Button-Druck + Abonniert-Zustandswechsel
   • z-index 60 (über allen Ebenen), pointer-events: none
   • Kanalname + Abonnentenzahl sind in compositions/yt-lower-third.html eingebacken (bearbeiten, wenn der Benutzer umbenennen möchte)
   • Deaktivieren: generate_root_index.py --no-yt-lower-third. Benutzerdefinierte Dauer: --yt-lower-third-duration 4.5

Alle 6 Muster werden automatisch eingebacken – der Orchestrator benötigt keinen zusätzlichen Schritt. Der Benutzer muss nur 1.png-N.png rendern (Phase 3.5), damit das Split-Labor vollständig sichtbar ist. Wenn die Bildgenerierung übersprungen wird, läuft das Video dennoch gut mit reinen HTML-Kompositionen (die Bildebene bei Opacity 0).

Unterschiede zum 9:16-Schwesterskill

	mkt-full-video-with-11-hyperframe-heygen (9:16)	-16-9 (dieser Skill)
Seitenverhältnis	1080×1920 Hochformat	1920×1080 Querformat
Layout	Avatar Vollbild + Caption-Strip + B-Roll-Cuts	Slide-Bereich links (1200) + Avatar Floating Frame rechts (540×880)
Captions	Ja (TikTok-Stil Wort-für-Wort)	Standardmäßig keine Captions (Slide trägt die Botschaft visuell)
PIP-Mechanik	Keine	SPLIT ↔ PIP-Übergänge – Slide wird auf 1920 erweitert, Avatar schrumpft auf 320×420 Ecke
Avatar-Bewegung	Statisches Vollbild	Atmungs-Yoyo + Szenenstart-Punch-In
Slide-Stil	Variantenbasierte Mockups (Post-Stack, AI-Window, App-Card …)	LLM-erstellte Pro-Szene-Kompositionen + modernes AI-Palette + Cream-Paper B-Roll in der Root-Ebene
Kompositions-Autor	Python-Templates	N parallele LLM-Sub-Agenten (1 pro Szene)
Render	TikTok/Reels/Shorts	Podcast-Keynote / YouTube-Wissen / LinkedIn
HeyGen-Render	720×1280 Hochformat	720×1280 Hochformat IMMER NOCH (zugeschnitten via object-position: center 25% in Querformat-Avatar-Rahmen – nicht 1280×720!)

Verwenden Sie diesen Skill für jedes Querformat-Wissensvideo. Verwenden Sie den Schwesterskill für jedes vertikale Kurzformat.

Wann verwenden

• Der Benutzer hat ein vietnamesisches Skript (60–150s) und möchte ein Wissensvideo im Format Podcast-Keynote Querformat
• Der Benutzer möchte einen Output mit „Claude AI / Anthropic Editorial“-Feeling: dunkler Slide-Hintergrund, Neon-Glow-Stufenbuchstabe, Glaskarte, Cream-Paper-Infografik in der Root-Ebene
• Thema: Wissensaustausch / Case Study / Before-After / Tool-Vergleich / Listicle 5+ Tipps – geeignet für Slide-getrieben, unterstützt beliebig viele Szenen (3, 5, 7, 10…)
• Kanal: YouTube Querformat, LinkedIn-Video, Podcast-Clip, Website-Einbettung
• Der Benutzer hat bereits MP3 + source.mp4 und möchte Phase 3 neu planen → Orchestrator überspringt Phase 1+2, geht direkt zu Phase 3

Diesen Skill NICHT verwenden, wenn:

• Der Benutzer TikTok/Reels/Shorts vertikal benötigt → den 9:16-Schwesterskill verwenden
• Skript > 5000 Zeichen → vorher semantisch aufteilen
• Thema rein visuell (Montage, Musikvideo) – dieser Skill ist optimiert für Talking-Head + Slide

Pipeline-Übersicht

Skript (Vietnamesisch, ≤ 5000 Zeichen)
    │
    ▼
[Phase 0.5 Resume-Erkennung – wenn voiceover.mp3 + source.mp4 bereits existieren → Phase 1+2 überspringen]
    │
    ▼
Phase 1 ── mkt-elevenlabs-tts-to-mp3 ─────► voiceover.mp3
    │                                          │
    │                              CHECKPOINT #1 – Benutzer hört und prüft MP3
    │                                          │
    │                                          ▼ (OK)
Phase 2 ── heygen-mp3-to-mp4 ─────────────► source.mp4 (720×1280 Hochformat, Lippen-synchronisiert)
    │                                          (KEIN 1280×720 render)
    │
    ▼
Phase 3a ── transkribieren (Whisper) → voiceover.srt + transcript.json
Phase 3b ── plan_visuals.py → visual-plan.json + prompts.md
              (Planner-Skill: mkt-plan-short-video-edit-16-9)
              CHECKPOINT #2 – Benutzer prüft den Plan
    │
    ▼ (LLM passt visual-plan.json pro Szene an: Metapher/Stufenbuchstabe/Items)
    │
Phase 3c ── apply_plan_to_scenes.py → scenes.json (editor-kompatibel)
Phase 3d ── 🔥 AUSFÄCHERN N parallele LLM-Sub-Agenten (1 pro Szene) 🔥
              → compositions/scene-1.html … scene-N.html
              (jeder Sub-Agent: liest Szenenblock aus visual-plan + Referenzen → erstellt HTML/CSS/GSAP)
Phase 3e ── scaffold_project.py (sfx/ + logos/ + avatar.jpg + yt-lower-third.html)
            generate_root_index.py → index.html (1920×1080, bindet scene-N.html, broll-layer, PIP, SFX, Brand-Mark, claude-orange Avatar-Rand ein)
Phase 3f ── lint + Vorschau (Studio @ http://localhost:3002)
            (optional Phase 3.5: 1.png-N.png Cream-Paper über AI33/Nano generieren)
    │
    ▼
Benutzer prüft Studio-Vorschau → „rendern“ → npx hyperframes render → out.mp4 1920×1080

Checkpoints:

• #1 MP3-Sprachausgabe – Orchestrator-Gate (überspringen, wenn Resume-Modus).
• #2 Visueller Plan – Phase-3b-Gate (kann mit auto_scenes=true übersprungen werden).
• Render-Gate – Benutzer bestätigt im Studio, dann wird gerendert.

Eingaben

Eingabe	Erforderlich	Format / Beispiel
Thema	Ja	Kurzer Titel („Vorteile von Claude AI“, „5 Tipps zum Sparen von Claude-Token“)
Brand-Betonung	Ja	claude / chatgpt / gemini / claude-code / generic – bestimmt Akzentpalette + Logo + Avatar-Randfarbe
Skripttext	Ja (außer Resume-Modus)	Datei .txt/.md oder inline. Vietnamesisch. ≤ 5000 Zeichen
Ausgabe-Slug	Nein	Wird automatisch vom Thema abgeleitet. Kleinbuchstaben, ASCII, Bindestrich.
Anzahl der Szenen	Nein	Standard 5 (Hook / Problem / Lösung / Zusammenfassung / CTA). Kann 3–10 je nach Länge sein. Listicle 5+ Tipp OK – Fanout 1 Sub-Agent pro Tipp + 1 Hook + 1 CTA.
Avatar-Look	Nein	1 ID aus HEYGEN_AVATAR_LOOKS env. Zufällig, wenn nicht ausgewählt.
Infografik-Modus	Nein	now (Bild sofort über mkt-broll-image generieren) / scaffold (nur prompts.md schreiben, Benutzer generiert später manuell) / none. Standard scaffold.
auto_scenes	Nein	Standard false. true, um den Szenen-Gliederungs-Checkpoint zu überspringen.
start_at	Nein	phase_1 (Standard) / phase_2 / phase_3. Resume-Einstiegspunkt.
skip_phase_1 / skip_phase_2	Nein	Boolesche Abkürzung für Resume-Modus (Alternative zu start_at=phase_3).

Workspace-Layout

workspace/content/YYYY-MM-DD/<slug>/
├── script.txt                  # Phase 0 – vom Benutzer bereitgestellter, bereinigter Text
├── script-tagged.txt           # Phase 1a – Skript + ElevenLabs v3 Audio-Tags ([excited], [sigh]…)
├── voiceover.mp3               # Phase 1b
├── voiceover.srt               # Phase 3a (Whisper)
├── voiceover_segments.json     # Phase 3a (Wort-Ebene Segmente)
├── source.mp4                  # Phase 2 (720×1280 Hochformat – NICHT im Querformat rendern)
├── transcript.json             # Phase 3a (Whisper-Wörter)
├── transcript-cleaned.json     # Phase 3a (manuelle Fehlerkorrektur)
├── scenes-outline.json         # Phase 3b – Gliederung vor Checkpoint
├── visual-plan.json            # Phase 3b – vollständiger maschinenlesbarer Plan (Planner-Ausgabe)
├── scenes.json                 # Phase 3c – editor-kompatible Abflachung von visual-plan
├── prompts.md                  # Phase 3b – Cream-Paper-Editorial-Prompts (1 pro Szene)
├── 1.png  2.png  ... N.png     # Phase 3.5 – Cream-Infografikbilder (1 pro Szene), Root B-Roll-Ebene
├── captions.json               # Phase 3e (optional) – vom Orchestrator kuratiert [{text,start,end},...]; falls nicht vorhanden, Fallback auf voiceover_segments.json
├── compositions/
│   ├── scene-1.html            # Phase 3d – von LLM erstellt, 1200×1080 natives Querformat
│   ├── scene-2.html            # 1 Datei pro Szene, unabhängig von N
│   ├── ...
│   ├── scene-N.html
│   ├── captions.html           # Phase 3e – generiert aus captions.html.j2 + captions.json (oder Whisper-Segmente)
│   └── yt-lower-third.html     # Phase 3e – automatisch aus Skill-Assets kopiert
├── assets/
│   └── logos/                  # Phase 3e – automatisch kopiert (claude.png, chatgpt.png, gemini.jpg, claude-code.png)
├── sfx/                        # Phase 3e – 6 standardmäßige SFX
└── index.html                  # Phase 3e – Root-Komposition 1920×1080

YYYY-MM-DD = heute (UTC+7).

Workflow

Schritt 0 – Einrichtung + Resume-Erkennung

1. Validiere len(script_text) <= 5000 (überspringen, wenn Resume-Modus + kein Skript-Input). Überschreitung → Stopp.
2. Leite Slug aus Thema ab, falls nicht vorhanden.
3. Erstelle workspace/content/YYYY-MM-DD/<slug>/. Speichere script.txt (überspringen, wenn Resume + Skript bereits existiert).
4. Wähle Brand-Akzentpalette (siehe references/slide-design-tokens.md).
5. Resume-Erkennung – wenn voiceover.mp3 + source.mp4 existieren → Überspringe Phase 1+2, gehe zu Schritt 3a (oder start_at-Punkt).