Product Demo Video
Produktdemos, die wie SaaS-Launchvideos aussehen, nicht wie Screencasts.
Die Kernidee: Nicht den Bildschirm aufnehmen. Erfassen Sie hochauflösende Screenshots + die tatsächlichen Koordinaten der Elemente mit Playwright und animieren Sie dieses Material anschließend in Remotion. Das gibt Ihnen volle Kontrolle über Kamera, Rhythmus und Untertitel – und ermöglicht ein erneutes Rendern in 10s, wenn der Nutzer sagt: "schneller", "größerer Zoom", "diesen Schritt entfernen", "mach eine 10s-Version". Neu aufnehmen wäre langsam und würde ein schlechteres Ergebnis liefern.
Ablauf
- Setup (einmal pro Projekt) →
node <skill>/scripts/setup.mjs - Drehbuch → schreiben Sie
demo.json(siehereferences/roteiro.md) - Aufnahme →
node .demo-video/tools/capture.mjs demo.json capture/(Playwright) - Rendering →
node .demo-video/tools/render.mjs --capture capture/ --out out/(Remotion) - Auslieferung →
out/<name>.mp4(1080p) +out/<name>.gif(in HTML einbettbar) - Iterieren → bearbeiten Sie
demo.jsonund führen Sie nur den geänderten Schritt aus
Zeit/Kamera/Untertitel geändert? Nur neu rendern (Schritt 3, ~30s). Der Ablauf in der App geändert? Auch neu aufnehmen (Schritt 2).
Von der Anfrage auf Portugiesisch zum Drehbuch
Der Nutzer beschreibt den Ablauf in natürlicher Sprache ("zeig, wie man einen Agenten erstellt");
Sie übersetzen das in Selektoren, indem Sie sich die App ansehen – niemals raten. Raten
#submit kostet eine gesamte Aufnahme, die in Szene 4 fehlschlägt.
- Öffnen Sie den Bildschirm mit den Browser-Entwicklertools und lesen Sie das DOM.
- Sammeln Sie die Selektoren in der Reihenfolge der Robustheit:
[data-testid=...]>#id> sichtbarer Text (text=Neuer Agent) > CSS-Pfad. CSS-Pfad bricht bei der ersten Layout-Änderung; Text bricht, wenn die Oberfläche übersetzt wird. - Bestätigen Sie den Ablauf mit dem Nutzer, bevor Sie aufnehmen – zeigen Sie das Drehbuch und fragen Sie, ob die Reihenfolge der Schritte so stimmt. Er kennt das Produkt; Sie nicht.
- Wenn die App eine Anmeldung erfordert, bitten Sie ihn, zuerst
auth.mjsauszuführen.
Wenn es keine Möglichkeit gibt, die App zu öffnen (internes Produkt, kein Zugang), bitten Sie um Selektoren oder einen Screenshot mit HTML – das ist schneller als Raten.
Das Drehbuch ist die Quelle der Wahrheit
Ein einziges JSON steuert Playwright und Remotion. Bevor Sie etwas aufnehmen, schreiben Sie
das Drehbuch und zeigen es dem Nutzer – es ist billig, dort zu korrigieren, und teuer, danach zu
korrigieren. Vollständiges Schema in references/roteiro.md.
{
"name": "agent-erstellen",
"url": "https://app.beispiel.com",
"viewport": { "width": 1600, "height": 900 },
"scenes": [
{ "action": "goto", "value": "/dashboard", "camera": "wide", "caption": "Ihr Dashboard", "duration": 2 },
{ "action": "click", "target": "[data-testid='new-agent']", "camera": "zoom", "caption": "Erstellen Sie Ihren Agenten", "duration": 2 },
{ "action": "type", "target": "#agent-name", "value": "Finanzanalyst", "camera": "focus", "duration": 2.5 },
{ "action": "click", "target": "button[type=submit]", "camera": "zoom", "duration": 1.5 },
{ "action": "wait", "value": 1200, "camera": "wide", "caption": "Bereit in 3 Klicks", "duration": 2.5 }
]
}
Setup (erstes Mal im Projekt)
node "$HOME/.claude/skills/product-demo-video/scripts/setup.mjs"
Erstellt .demo-video/ (Remotion-Komposition + Werkzeuge in .demo-video/tools/),
installiert die Abhängigkeiten und lädt Chromium herunter – ~300MB. Bestätigen Sie mit dem Nutzer,
bevor Sie es ausführen; danach dauern Aufnahme und Rendering nur Sekunden. Schlagen Sie vor,
.demo-video/, capture/ und .auth/ zur .gitignore hinzuzufügen.
Um das Ergebnis live zu verfeinern, öffnen Sie cd .demo-video && npx remotion studio – eine
Vorschau mit Scrubber, viel besser als Rendern zur Timing-Überprüfung.
Kameraführung
Was eine gute von einer schlechten Demo unterscheidet, ist Rhythmus, nicht Effekt. Regeln, die funktionieren:
- Öffnen und schließen Sie mit
wide. Der Zuschauer muss sich vor dem Zoom orientieren und das Ergebnis danach sehen. Dauerhafter Zoom durch den ganzen Film ermüdet und desorientiert. - Ein Zoom pro Absicht, nicht pro Klick. Aufeinanderfolgende Klicks im selben Bereich =
eine einzige Szene mit
zoom. Zoom rein/raus bei jedem Klick verursacht Übelkeit. focusnur für Texteingabe. Ein Textfeld muss lesbar sein; ein Button nicht.- 2 bis 3 Sekunden pro Szene. Weniger als 1,5s und niemand liest die Untertitel; mehr als 4s wird zu Leerlauf. Eine gute Demo ist 15–25s lang und hat 5–8 Szenen.
- Untertitel sind Etiketten, keine Sätze. "Erstellen Sie Ihren Agenten", "Verbinden Sie Ihre Daten". Maximal ~4 Wörter, Verb am Anfang, kein Punkt. Nicht jede Szene braucht einen.
- Schneiden Sie Leerlauf an der Quelle. Ladevorgänge, Weiterleitungen, Eingangsanimationen: Verwenden Sie
settlein der Szene, anstatt Sekunden stillstehen zu lassen im Video.
Die Kamera ist kontinuierlich zwischen Szenen (mit Easing interpoliert), sodass die Bewegung bereits weich ist – versuchen Sie nicht, das im Drehbuch mit zusätzlichen Szenen zu kompensieren.
Die Textebene ist die Erzählung
Es gibt kein Audio (GIF hat keins, und Videos im Feed laufen stumm). Die Geschichte wird durch Typografie erzählt, und die funktioniert nur mit Hierarchie: Wenn jeder Text das gleiche Gewicht hat, weiß der Zuschauer nicht, was Schritt und was Argument ist.
| Stil | Rolle | Wann |
|---|---|---|
title (Szene) | Eröffnung/Schluss in Vollbild, mit sub | 1 am Anfang, manchmal 1 am Ende |
hero | Der Wendepunkt – groß, zentriert, über Farbverlauf | maximal 1 pro Demo |
label | Die Beschriftung des Schritts (Standard), mit optionalem sub | in den meisten Szenen |
stat | Zahl, die das Produkt rechtfertigt: "22s", "3 Klicks" | 1 im Schluss |
note | Nebendetail, dezent | wenn der Schritt einen Vorbehalt braucht |
Zwei Regeln, die den Rest stützen: Ein hero pro Demo (zwei werden zu keinem) und das stat
schließt – eine große Zahl bleibt als Letztes im Kopf des Betrachters. Für eine Führungsdemo ist
der Bogen meist title → labels → hero im entscheidenden Moment → stat am Ende.
"highlight": true dunkelt den gesamten Bildschirm ab, außer dem Element der Szene. Es ist die
stärkste Waffe im Set und daher die leichteste, um sie zu verderben: Verwenden Sie sie, wenn der
Zuschauer genau dieses Element mitnehmen muss, nicht als Dekoration. Es kommt herein, nachdem die
Kamera sich gesetzt hat, und verschwindet von selbst im Moment der Aktion, um das Ergebnis nicht zu
verdecken.
Anmeldedaten
Setzen Sie niemals ein Passwort in demo.json. Zwei Optionen, in dieser Reihenfolge bevorzugt:
"auth": { "storageState": ".auth/state.json" }– bereits eingeloggte Sitzung, einmal erstellt mitnode .demo-video/tools/auth.mjs <url>(Browser wird geöffnet, der Nutzer loggt manuell ein)."auth": { "login": { "user": "#email", "pass": "#password", "submit": "button[type=submit]" } }mit den Anmeldedaten inDEMO_USER/DEMO_PASSin der Umgebung.
Wenn die Demo echte Daten zeigt, verwenden Sie "redact": ["selector"] im Drehbuch, um sensible
Elemente vor der Aufnahme unkenntlich zu machen – das wird bereits im PNG unscharf und kann nicht
wiederhergestellt werden.
Ausgaben
| Format | Verwendung | Wie |
|---|---|---|
demo.mp4 1920×1080 | Landing, LinkedIn, YouTube | Standard |
demo.gif 960×540 | README, Docs, E-Mail, HTML | --formats mp4,gif (Standard) |
demo-square.mp4 1080×1080 | Instagram/Feed | --formats mp4,square |
GIF ist groß. render.mjs verwendet bereits palettegen (dedizierte Palette für das Video) über ffmpeg,
das in Remotion integriert ist – keine zusätzliche Installation nötig. Trotzdem wiegen 15s bei 960px
etwa 3.5MB; für README bevorzugen Sie --gif-width 720 --gif-fps 12, das auf unter 1.5MB reduziert.
Zum Einbetten in HTML: <img src="demo.gif" width="720" alt="...">. Wenn der Nutzer MP4 akzeptiert,
<video autoplay loop muted playsinline> wiegt etwa 10x weniger.
Installation testen, ohne das Produkt zu berühren
assets/exemplo/ enthält eine Fake-App (app-exemplo.html) und das dazugehörige Drehbuch,
das alle Aktionen übt – title, shot, click, type, select, hold,
redact. Führen Sie dies zuerst aus, um zu unterscheiden zwischen "die Skill ist kaputt" und "der
Selektor der App ist falsch" – das ist die teure Frage, wenn etwas in der ersten echten Demo fehlschlägt.
Wenn etwas schiefgeht
- Selektor nicht gefunden →
capture.mjsschlägt in der Szene fehl und gibt an, welche. Bitten Sie den Nutzer um URL/Bildschirm und inspizieren Sie mit dem Browser, bevor Sie einen anderen Selektor raten. - Zoom unscharf → erhöhen Sie
scaleauf 3 im Drehbuch (Screenshots 3×) oder reduzieren Sie den Zoom. - Video nicht synchron mit Untertiteln →
durationder Szene ist maßgeblich; passen Sie sie dort an. - Details zu Komposition, Kamera, Cursor und visueller Anpassung:
references/remotion.md.