Fldicoahkiin/demo-video-skill

Demo-Video-Studio

Verwandle eine laufende Web-App in einen polierten Demofilm: echte aufgezeichnete Interaktion (keine Diashow, kein Mock) + lokale TTS-Erzählung + wortgenaue Untertitel + eine dezente Musikuntermalung, deterministisch komponiert mit HyperFrames.

Wann verwenden

Für jedes Demo-/Walkthrough-/Produkt-/Launch-/Hackathon-Video einer Web-App, besonders wenn es das echte, laufende Produkt mit Erzählung und Untertiteln zeigen soll. Zeichnet eine bereitgestellte URL oder einen lokalen Entwicklungsserver auf.

Pipeline

① aufnehmen     eine von drei Engines (unten)                    → out/*.mp4|webm
② erzählen      VO pro Szene schreiben → Kokoro TTS (lokal)      → narration/*.wav
③ transkribieren Whisper Wort-Zeitstempel                        → *.transcript.json
④ untertiteln   zu Phrasen gruppieren + Markenfehlhörungen korrigieren → captions.js
⑤ musik         ffmpeg ambient Bett (leise unter der Stimme)     → music/bed.wav
⑥ komponieren   HyperFrames HTML eine Zeitachse: Clips+Sprache+Untertitel+Musik → MP4

① hat drei Engines – wähle je nach Ziel (references/screen-studio-look.md):

Ziel	Engine	Look
Web-/Desktop-App, macOS	Cap CLI – scripts/record-cap.mjs	Screen Studio nativ: automatischer Zoom bei echten Klicks, Feder-Cursor + Bewegungsunschärfe, Tapete / Rundung / Schatten, GPU-gerendert
CLI-Tool	VHS Tape → mp4	Gestyltes Terminal (Abstände, Randausfüllung, Randradius, Fensterleiste), deterministisch
Headless / CI / Linux	Playwright – scripts/record.mjs	synthetischer Cursor + Wellen; schreibt <scene>.events.json (Zeitstempel + Koordinaten) für spätere Zoom-Komposition

Egal welche Engine aufzeichnet, ihr Output ist nur der Clip, der in ②–⑥ eingespeist wird – Aufnahme und Komposition bleiben unabhängig: Nimm eine Szene neu auf oder führe die Erzählung erneut aus, ohne die andere Phase zu wiederholen. Eine codegenerierte GIF-Spur (in MP4 gerenderte HTML-Szenen ohne Aufnahme) ist ein optionaler Nebenpfad für Dokumentationsseiten.

Arbeitsablauf

0. Wähle die Engine MIT dem Benutzer – niemals stillschweigend. Sieh dir das tatsächliche Projekt an (Web-App? CLI? Desktop? Hat dieser Rechner eine GUI-Sitzung? Muss es in CI laufen?), präsentiere dann die Engine-Optionen mit Vor- und Nachteilen für dieses spezifische Projekt und lass den Benutzer wählen. Z. B. für eine Web-App auf einem Mac: „Cap CLI liefert den Screen-Studio-Look nativ, benötigt aber Bildschirmaufnahmeerlaubnis und eine Ersteinrichtungskalibrierung; Playwright läuft überall und zeichnet einzelne Szenen schnell neu auf, hat aber keinen automatischen Zoom; VHS ist hier nicht anwendbar." Engine-Details: references/screen-studio-look.md.
1. Verstehe das Produkt zuerst. Lies seine README / Demo-Dokumentation. Schreibe einen Demo-Ablauf, bevor du die Werkzeuge anfasst: Problem → Produktdurchlauf → Beweis → Schlussfolgerung. Wähle den empfohlenen Klick-Pfad und das sichtbare Ergebnis, das jede Szene erreichen muss. Siehe references/templates.md.
2. Aufnehmen. Kopiere scripts/record.mjs, setze APP und SIZE, ersetze scenes mit deiner Choreographie (gleiten → pausieren → agieren → halten). Nimm im 1:1-Geräte-Maßstab auf. node scripts/record.mjs [szene]. Engine + ausgearbeitetes Beispiel: references/recording.md.
3. Erzählen → Untertitel. Schreibe eine assets/narration/NN-*.txt pro Szene in der VO-Stimme (du sprichst zu einem Betrachter, liest keine README vor – dies ist eine andere Fertigkeit als Marketing-Kopier; die Marketing-Fertigkeit liefert Thema/Haken/Storyboard, diese Fertigkeit schreibt die gesprochenen Worte). Dann: bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs. Bearbeite PHRASE_FIX in build-captions.mjs für deine Markennamen. Die Stimme ist vertraglich austauschbar: Die Erzählung besteht aus einer WAV-Datei pro Szene (narration/NN-*.wav) – ersetze jede WAV durch eine menschliche Aufnahme, einen Kopfton-Dub oder eine andere TTS, führe Transkription+Untertitel erneut aus, komponiere neu; nichts anderes ändert sich. Kokoro (lokal, Apache-2.0) ist die Standardeinstellung und hat Mandarin-Stimmen; edge-tts ist eine freie Online-Alternative. Anleitung: references/narration-and-captions.md.
4. Komponieren & rendern. Beginne mit references/composition-skeleton.html (ein Clip + Untertitelspur + Audio), erweitere die Zeitachse, dann npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high. Rendere 1:1 (1080p erstellt → 1080p Ausgabe) – skaliere niemals auf 4K hoch, das macht die Benutzeroberfläche weicher. references/composition.md.
5. Qualitätskontrolle vor dem Versand. Prüfe mit ffprobe die Dauer/das Audio, taste 1–2 Frames ab (nicht schwarz, nicht leer), Untertitel innerhalb des Bildes, Erzählung nicht abgeschnitten, die wichtigste Ergebnissseite tatsächlich sichtbar. Korrigiere Ablauf/Zeitablauf, dann rendere neu.

Schnellstart

# Systemabhängigkeiten
brew install node ffmpeg
npx playwright install chromium

# Python venv für lokale TTS + Transkription (einmalig)
python3 -m venv .ttsvenv && .ttsvenv/bin/pip install kokoro-onnx soundfile
export PATH="$(pwd)/.ttsvenv/bin:$PATH"

# 1) aufnehmen  2) erzählen  3) untertitel  4) komponieren+rendern
node scripts/record.mjs
bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs
npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high --output out/demo.mp4

Erstes TTS lädt ~340 MB (Kokoro), erste Transkription ~466 MB (Whisper small.en); beide werden in ~/.cache/hyperframes/ zwischengespeichert.

Hart erarbeitete Regeln

• Echte Interaktion schlägt Folien – nimm das tatsächlich laufende Produkt auf.
• 1:1, niemals 2× hochskalieren – Aufnahme mit 2× DPR und Rendern in 4K macht jeden UI-Clip weicher. Erstelle und rendere in 1080p.
• Deterministische Komposition – kein Date.now(), Math.random() oder Netzwerk im HTML; HyperFrames sucht nach Frames, also muss Bewegung reproduzierbar sein.
• Sichtbarer Cursor + auf Ergebnissen halten – gleite bewusst, pausiere auf dem Gewinn.
• VO, keine Dokumente – Erzählung folgt dem Bild; sie ist nicht die README, die vorgelesen wird.
• Video ≥ Erzählung – polstere die Clip-Zeit, sodass die Bilder nie vor der Stimme enden.

Abhängigkeiten

Node 22+, FFmpeg, Playwright (Chromium) und die HyperFrames CLI (npx hyperframes, installiere deren Fähigkeiten mit npx skills add heygen-com/hyperframes). Lokale TTS/Whisper benötigen Python + kokoro-onnx. Pro Engine (optional): Der Cap-Pfad benötigt cap (curl -fsSL https://cap.so/install-cli.sh | sh) + cliclick (brew install cliclick) + Bildschirmaufnahmeerlaubnis; der Terminal-Pfad benötigt vhs (brew install vhs). Alle kostenlos – Lizenzierungstabelle in references/screen-studio-look.md. Siehe references/composition.md für die HyperFrames Einrichtung.

Referenzen

• references/pipeline.md – die sechs Phasen und der Datenfluss
• references/screen-studio-look.md – die drei Aufnahme-Engines; Cap CLI Lebenszyklus, Zoom-Clustering, VHS Tapes, worauf nicht aufgebaut werden sollte
• references/recording.md – Director Engine + ausgearbeitetes Beispiel + Aufnahmefallen
• references/narration-and-captions.md – VO-Schreiben, TTS, Whisper, Untertitelkorrekturen
• references/composition.md – HyperFrames Zeitachse, Überblendungen, 1080p, Rendern
• references/composition-skeleton.html – minimale renderbare Komposition zum Kopieren als index.html
• references/templates.md – Hackathon- + Produktdemo-Strukturen und VO-Grundgerüste
• references/troubleshooting.md – Untertitel, weißer Bildschirm, Audio, Schriftarten