open-kbs/skills-demo-video

Demovideo

Erzeugt ein Full-HD-MP4, das die Live-Website oder App des Projekts demonstriert: echte Bildschirmaufnahmen, eine Sprachausgabe in der Sprache des Benutzers, eingebrannte Untertitel, eine Hintergrundmusik und einen Link zum Teilen. Alles läuft im Container mit agent-browser, ffmpeg und dem KI-Proxy des Projekts (abgerechnet über die Projektguthaben). Typisches Ergebnis: 1–3 Min, 10–20 MB, etwa 1–2 Stunden Agentenarbeit. Alle Arbeiten befinden sich in video/ (build/ und out/ bleiben außerhalb von Git).

Wann verwenden

• „Erstelle ein Video, das zeigt, wie das System funktioniert“, Werbung, Anzeige, Kundendemo
• Ein Rundgang für ein Angebot, eine Release-Notiz oder eine Landingpage
• Nicht für Aufnahmen, die der Benutzer selbst macht: Schreibe ihnen dann ein Drehbuch in docs/demo/script.md (Szene, Aktion, zu sagender Text)

Pipeline (jeder Schritt ist fortsetzbar: Eine erneute Ausführung überspringt fertige Ausgaben)

Schritt	Befehl	Ausgabe
0. Einrichtung	bash .claude/skills/demo-video/setup.sh	ffmpeg, Untertitel-Schriftarten, video/-Ordner
1. Skript	video/vo/narrator.json und video/scenes.mjs schreiben (von examples/ ausgehend)	den Plan
2. Sprachaufnahme	node .claude/skills/demo-video/tts.mjs video/vo/narrator.json video/build/vo	s01.wav… + s01.txt (was gesagt wurde)
3. Aufnahmen	source .claude/skills/demo-video/rec-lib.sh dann take_start, mark, take_stop	video/build/rec/<take>.mp4 + .marks
4. Karten	card_take <name> "file://$PWD/video/cards/<name>.html?…" <seconds>	video/build/rec/card-<name>.mp4
5. Sounds	node .claude/skills/demo-video/sfx.mjs	video/build/sfx/chime.wav, click.wav
6. Schnitt	node .claude/skills/demo-video/compose.mjs video/scenes.mjs	video/out/<name>.mp4 (+ Musik, wenn keine angegeben)
7. QA	node .claude/skills/demo-video/listen.mjs video/out/<name>.mp4 "<Frage>" und Einzelbildaufnahmen	Korrekturen, dann Schritt 6 erneut
8. Veröffentlichen	node .claude/skills/demo-video/publish.mjs video/out/<name>.mp4 --cover 16	Schlüssel im Projektspeicher + Cover-JPG

(.agents/skills/demo-video/ wenn es mit npx skills add installiert wurde.)

Wie man es gut macht

Zuerst das Skript. 10–15 Sprecherzeilen, eine Idee pro Zeile, 8–15 Wörter, in der Sprache des Benutzers. Nur Fakten: Gib niemals Zahlen, Kunden oder Auszeichnungen an, die du nicht in den eigenen Daten des Projekts überprüfen kannst. Setze Markennamen und Akronyme in pronounce, damit sie richtig gelesen werden. Jede Zeile entspricht einer Szene.

Stimme. Der Proxy hat kein TTS-Modell; tts.mjs verwendet das Live-Modell (gemini-3.8-live), das jede Zeile wörtlich vorliest, behält das Beste von 3 Versuchen durch Vergleich des eigenen Transkripts mit dem Skript (80 % Wortübereinstimmung) und schreibt eine WAV pro Zeile. Stimmen: Kore, Charon, Puck, Fenrir, Aoede. Eine Stimme für den Sprecher; eine andere für eine „Kunden“-Rolle. Lies nach dem Lauf die s*.txt und generiere jede Zeile neu, die abweicht (rm ihrer wav und erneuter Durchlauf).

Aufnahmen. Starte von einem sauberen Zustand: frischer Browser-Kontext, leerer Warenkorb, keine gespeicherten Formularentwürfe (agent-browser eval 'sessionStorage.clear()' und dasselbe für localStorage-Schlüssel, die die App verwendet), vor der Aufnahme eingeloggt, damit kein Passwort vor der Kamera getippt wird. Tippe mit typeslow, rufe mark <label> vor jedem Klick auf, den der Schnitt schneiden soll, warte auf KI-Antworten mit wait_gone "<Suchtext>", scrolle niemals das Element aus dem Bild, das du zeigst. Klicke per Elementreferenz (@e12 von snapshot), nicht per Labeltext. take_start setzt den Viewport auf 1600×900 (der Standard ist 1280×720, zu klein für 1080p); eine Aufnahme pro Szene. Wenn das Produkt einen Sprachagenten hat, nimm einen echten Austausch über dessen eigene API auf (examples/voice-exchange.mjs) und spiele ihn über eine Karte ab, anstatt ihn zu simulieren.

Karten. examples/cards/ enthält einen Intro (animierte Zahlen, Logo, Pills), eine Sprachanrufkarte und ein Outro. Kopiere nach video/cards/, ändere Farben, Logo und Texte auf die Marke. Übergib Zeitsteuerungen in der URL (?t1=<s>), damit Animationen auf die Stimme treffen.

Schnitt (scenes.mjs). Jede Szene besteht aus Teilen einer Aufnahme [take, in, out, speed, zoom?] plus Audio ['vo:s01', at]. Beschleunige Wartezeiten um das 2–5-fache, zoome zoom auf Panels mit kleinem Text, chapter-Chip bei jedem neuen Abschnitt, cap: 'left' wenn die unteren Untertitel die angezeigte Benutzeroberfläche verdecken würden, sfx-Klingel bei Erfolgsmomenten (in den Warenkorb gelegt, Bestellung aufgegeben). Der Schnitt wird pro Szene zwischengespeichert; nur geänderte Szenen werden neu gerendert.

Audio. Die Hintergrundmusik wird von compose.mjs synthetisiert (kein Lizenzrisiko) und unter die Stimme geduckt; setze music: 'path/to/track.mp3' in scenes.mjs für den eigenen Track des Benutzers. Die Ausgabe wird auf −16 LUFS normalisiert.

QA vor der Auslieferung. listen.mjs sendet den Mix an Gemini: Frage nach Diktion, falsch ausgesprochenen Wörtern, Musik-Stimme-Balance, Störungen und langen Stillephasen. Dann nimm ein Einzelbild pro Szene in voller Auflösung auf (ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.png) und schau es dir an: Untertitel, die die Benutzeroberfläche überlappen, abgeschnittener Text, falscher Zustand auf dem Bildschirm. Korrigiere, wiederhole Schritt 6.

Ausliefern. Lösche Testbestellungen/-daten, die die Aufnahmen erstellt haben, führe agent-browser close --all aus, committe video/-Werkzeuge und Skript (nicht build/, out/). Gib den Link, den lokalen Pfad, eine kurze Liste dessen, was das Video zeigt, und alles im Produkt, das du während der Aufnahme korrigiert hast (das Aufzeichnen eines End-to-End-Ablaufs findet normalerweise echte Fehler; korrigiere sie, sie betreffen echte Benutzer).

Veröffentlichen

publish.mjs lädt in den Projektspeicher mit dem richtigen Inhaltstyp hoch (der einfache Speicher-Upload liefert das Video als Download) und gibt die öffentliche URL aus: mit "storage": { "cloudfront": "media" } in openkbs.json ist die Datei unter <site>/media/<key>, sobald openkbs deploy diesen Pfad eingerichtet hat. Ohne Speicher auf dem CDN lege die Datei unter site/ ab und deploye, oder teile einen openkbs storage download. --cover <seconds> lädt außerdem ein JPG-Bild als Miniaturansicht hoch.

Anforderungen

• Studio-Container: ffmpeg (Setup installiert es), agent-browser, Proxy-JWT in ~/.openkbs/projectJWT. Außerhalb von Studio setze OPENKBS_API_KEY.
• Schriftarten für Untertitel werden von setup.sh in video/build/fonts heruntergeladen (Golos Text, Fira Sans Extra Condensed: Latein + Kyrillisch, OFL).