product-video

product-video — Produktvorstellungsvideos mit Code erstellen

Die Benutzeroberfläche eines Produkts wird als HTML nachgebaut, Bewegungen werden so programmiert, dass sie „nur von der Zeit abhängen“, und dann wird jeder Frame mit einem Headless-Browser gerendert. Musik und Soundeffekte werden ebenfalls direkt im Browser synthetisiert. Verwendet werden nur Node.js, ffmpeg und Chromium.

Dieses Skill enthält eine sofort einsatzbereite Vorlage (assets/template/) mit Render-, Audio- und Prüfwerkzeugen sowie einem 30-Sekunden-Beispielvideo. Statt das System von Grund auf zu entwickeln, wird die Vorlage kopiert und deren Inhalt ausgetauscht.

Wichtige Grundannahme: Sie können es weder sehen noch hören

Sie können das Video nicht abspielen und überprüfen. Daher hängt die Qualität dieser Arbeit von der Anzahl der Male, die Sie Einzelframes ausgeben und mit eigenen Augen prüfen, und der numerischen Prüfung ab. Wenn Sie einfach Code schreiben und davon ausgehen, dass es „schon funktioniert“, werden mit Sicherheit abgeschnittener Text, Überlappungen oder flüchtige Störungen übersehen. Nach dem Schreiben jeder Szene müssen Sie die Frames nebeneinanderlegen, korrigieren und erst dann zur nächsten übergehen. Da Sie den Ton nicht hören können, müssen Sie die gemessenen Werte angeben und die auditive Überprüfung einer anderen Person überlassen.

Regeln (mit Begründung)

1. Das Erscheinungsbild wird nur durch die Zeit bestimmt. Bewegungen werden entweder als tl.* mit dem Befehl „bei welcher Sekunde“ eingefügt oder in onFrame((t) => …) direkt aus t berechnet. CSS-Animationen / -Transitions, setTimeout, Math.random() und die aktuelle Uhrzeit werden nicht verwendet. Nur weil das Bild zu jedem Zeitpunkt gleich aussieht, können Frames parallel gerendert und einzelne Abschnitte erneut gerendert werden.
2. Nach dem Schreiben sofort visuell prüfen. Nach jeder Szene mit --sheet ein Raster erstellen und das Bild öffnen. Übergänge zwischen Szenen in 0,1–0,2-Sekunden-Schritten prüfen. Nicht zur nächsten Szene übergehen, ohne sie gesehen zu haben.
3. Text enthaltende Elemente nicht langsam bewegen. Browser rastern Text an Pixel aus; wenn er über mehrere Sekunden langsam bewegt wird, zittert der Text. Container und Überschriften sollten in etwa einer Sekunde an ihre endgültige Position gebracht werden, und die Bewegung des Inhalts erfolgt dann im statischen Bild. Nur Hintergrundlichter dürfen sich langsam bewegen.
4. Für Erscheinen tl.in verwenden, für Verschwinden tl.out / tl.hide. tl.fromTo belässt den Wert „vor der Startzeit“ auf seinem ursprünglichen Wert. Wenn es für Erscheinen verwendet wird, ist das Element einen Moment vor dem Start sichtbar.
5. CSS für die Produktoberfläche unter der Klasse der Bildschirmwurzel schreiben. (z. B. .ui-chat .row). Kurze Namen wie .row, .title ohne Kontext kollidieren mit Vorlagen- oder anderen Bildschirmkomponenten und verursachen schwer zu findende Layoutfehler.
6. Lesbare Größe sicherstellen. Das Video wird auch auf Smartphones angesehen. Überschriften müssen mindestens 68 px, Text in Containern auf dem Bildschirm mindestens 18 px (Schriftgröße × Skalierung) groß sein. Kleine Bildschirme: Container entweder größer platzieren oder die Ansicht auf den relevanten Bereich zoomen.
7. Keine Tatsachen verfälschen. Keine unbelegten Behauptungen aufstellen. Keine Unmöglichkeiten als „machbar“ darstellen. Keine unbestätigten Zahlen, Vergleiche mit Wettbewerbern oder Empfehlungen verwenden. Keine Logos von Drittfirmen zeichnen; deren Namen klar als Text schreiben. Am Ende des Videos mit einem kleinen Hinweis (brand.fine) darauf hinweisen, dass die Oberfläche nachgebaut wurde.
8. Szenengrenzen und große Bewegungen an den Anfang eines Taktes setzen. Der Moment, in dem ein Logo einrastet, Szenenwechsel und die letzte Karte müssen mit dem Schlag des Songs (hit: true) zeitgleich sein. Das allein verleiht dem Ganzen eine straffe Optik.
9. Lautstärke und Klangfarbe nicht ändern. Die Werte in kit/audio.js wurden abgemessen und balanciert. Änderungen ohne Hörkontrolle führen zu Verzerrungen. Es dürfen nur die Song-Segmente (plan.js) und die Cues für Soundeffekte geändert werden.
10. Nicht behaupten, etwas „geprüft“ zu haben, das nicht gemessen wurde. Immer angeben, dass der Ton nicht gehört wurde.

Arbeitsablauf

Am Ende jeder Phase gibt es eine Überprüfung. Überspringen Sie keine Überprüfung und gehen Sie nicht zur nächsten Phase über (das nachträgliche Korrigieren ist viel teurer).

Die Arbeit kann lang sein. Wenn der Kontext im Laufe der Arbeit knapp wird und Sie Details vergessen, lesen Sie diese Datei und die references/ der jeweiligen Phase erneut. Die festgelegte Struktur (Szenentabelle) sollte als Kommentar am Anfang von src/js/plan.js notiert werden – so können Sie auch nach einer Unterbrechung nahtlos weitermachen.

0. Vorbereitung

node "${CLAUDE_SKILL_DIR}/scripts/new.mjs" video     # Vorlage in video/ kopieren (Ort ggf. anpassen)
cd video && npm install --ignore-scripts
node render.mjs --sheet 0:29:2                       # Raster des Beispielvideos → out/sheet.png – fertig zur Vorbereitung

${CLAUDE_SKILL_DIR} ist der Ordner, in dem sich diese SKILL.md befindet. Wenn Sie den String wörtlich sehen, ersetzen Sie ihn durch den absoluten Pfad zu diesem Ordner.

Falls der Browser fehlt: npx playwright install chromium. Falls das nicht möglich ist, verwenden Sie Chrome oder Edge (Umgebungsvariable CHROME_CHANNEL=chrome oder CHROME_CHANNEL=msedge). Falls ffmpeg fehlt, lassen Sie es installieren.

Öffnen Sie zuerst die Beispieldatei src/js/scenes.js und das generierte out/sheet.png. Das Beispiel ist schneller verstanden als jede Erklärung.

1. Recherche

Alle Fakten, die im Video gezeigt werden, müssen eine Quelle haben. Lesen Sie README, Dokumentation, Designvorgaben (Farben, Schriftarten, Abstände) und die tatsächlichen Bildschirmtexte. Notieren Sie:

• Für wen das Produkt ist, welches Problem es löst und wie (in einem Satz)
• Welche Funktionen gezeigt werden sollen und die Belege (welche Quelle, welcher Abschnitt)
• Authentische Bildschirmtexte (Button-Namen, Statusmeldungen, Benachrichtigungen). Erfundene Texte fallen sofort auf.
• Das Aussehen des echten Bildschirms. Screenshots oder UI-Mocks (falls vorhanden) öffnen und Layout, Farben, Abstände, Schriftgrößen ablesen. Falls nicht vorhanden, aus dem UI-Code (Komponenten, Styles, Design-Tokens) extrahieren.
• Umgebungen, Einschränkungen, Annahmen (um keine falschen Behauptungen aufzustellen)

Falls nicht in der Aufgabe angegeben, treffen Sie selbst Entscheidungen und dokumentieren Sie diese im Bericht: Gesamtlänge (60–90 Sekunden, bei kurzen Aufgaben 30 Sekunden), Sprache (entsprechend der Produktoberfläche und der Quellen), helles vs. dunkles Farbschema. Fragen Sie den Auftraggeber nur, wenn Brand-Farben, -Logo oder -Schriftart nicht aus den Quellen hervorgehen.

2. Struktur festlegen

Erstellen Sie vor dem eigentlichen Schreiben eine Szenentabelle. Vorlagen für die Struktur, das Schreiben von Überschriften und die Zeitplanung finden Sie in references/direction.md. Lesen Sie diese Datei unbedingt.

• Eine Szene vermittelt genau eine Botschaft. Jede Szenenüberschrift enthält genau eine Botschaft. Keine bloßen Funktionslisten.
• Das Video beginnt nicht mit dem Produkt, sondern mit dem „Problem“.
• Szenengrenzen am Anfang eines Taktes (bei 120 BPM alle 2 Sekunden).
• Tragen Sie die Startzeit jeder Szene (T) und die Song-Segmente (music) in src/js/plan.js gemäß der Tabelle ein.

Zeigen Sie die festgelegte Struktur kurz dem Auftraggeber. Sie können aber auch ohne Rückmeldung mit der Umsetzung beginnen (wenn die Richtung falsch ist, wird es früh auffallen).

3. Brand und Bildschirm vorbereiten

• src/js/brand.js: Name, Kurzbeschreibung, Farben, Schriftarten, Logo. Werte aus dem echten Produkt übernehmen.
• src/css/app.css und HTML in scenes.js: Nachbau der Produktoberfläche. Farben, Abmessungen, Texte exakt wie im Original.
• Vor dem Animieren: --shot eines statischen Zustands generieren und mit dem Original vergleichen. Wenn es hier nicht ähnlich aussieht, wird es auch animiert nicht ähnlich aussehen.

Der Bildschirm wird als HTML nachgebaut, nicht als Screenshot überlagert. Das ermöglicht das unabhängige Bewegen einzelner Komponenten, scharfe Darstellung auch bei Vergrößerung und farbliche Anpassung an die Szene.

4. Szenen einzeln erstellen

In scenes.js wird für jede Szene eine eigene Funktion geschrieben. Komponenten und deren Verwendung sind in references/kit.md beschrieben. Lesen Sie diese Datei vor dem Schreiben.

Wiederholen Sie für jede Szene:

node render.mjs --sheet 14:26:1        # Szene in 1-Sekunden-Schritten anzeigen → out/sheet.png öffnen und prüfen
node render.mjs --shot 16.6,22.5       # Verdächtige Zeitpunkte in 1:1-Größe prüfen → out/shots/
node render.mjs --sheet 13.4:14.6:0.1 --cols 7 --w 420   # Szenenübergänge in 0,1–0,2-Sekunden-Schritten prüfen
node render.mjs --lint                 # Automatische Prüfung auf Textüberlappungen, abgeschnittene Zeichen, zu kleine Schrift

Prüfkriterien: Ist Text abgeschnitten? Überlappt etwas? Ist die Schrift lesbar? Sind Abstände gleichmäßig? Ist auf den ersten Blick klar, worauf zu achten ist? Sind Komponenten der vorherigen Szene versehentlich sichtbar?

Als Faustregel: Jede Szene wird mindestens dreimal geprüft (direkt nach dem Schreiben, nach Korrekturen, beim Übergang zur vorherigen/nächsten Szene). Stellen, die im Raster zu klein sind, mit --shot in 1:1-Größe prüfen.

5. Audio hinzufügen

Der Song wird automatisch aus den in plan.js definierten Segmenten arrangiert. Soundeffekte werden beim Erstellen der Szene mit cue("Typ", Zeit) getriggert. Details in references/audio.md.

node render.mjs --audio                # out/audio-master.wav. Lautstärke und Peaks werden angezeigt

6. Durchgängige Vorschau und Qualitätssicherung

node render.mjs                        # 1:1-Durchlauf für das gesamte Video (30 Sek. Video → wenige Minuten). out/video.mp4
node tools/qa.mjs                      # Format, Lautstärke, Einzelframe-Störungen, Ruckeln, schwarze Frames, Stille
node render.mjs --sheet 0:90:1.5 --cols 6     # Gesamtes Video als Raster anzeigen (Sekundenzahl an die Videolänge anpassen)

Beheben Sie alle ✗-Fehler. Die Interpretation der Prüfergebnisse und häufige Fehlerbehebungen finden Sie in references/qa.md.

Ab hier beginnt die Feinarbeit. Die erste Version, die keine offensichtlichen Fehler enthält, wirkt meist „nicht kaputt, aber noch nicht gut genug“. Schauen Sie sich das Raster des gesamten Videos an, notieren Sie mindestens 5 Verbesserungspunkte und beheben Sie diese. Suchen Sie nach:

• Abschnitten von mehr als 2 Sekunden, in denen nichts passiert
• Zu großen Leerräumen, einseitigem Layout, leerem Platz in Containern (z. B. untere Hälfte eines Smartphone-Bildschirms ist weiß)
• Unklaren Ursache-Wirkungs-Ketten („Drücken → Änderung“ ist nicht erkennbar)
• Abweichungen vom Original (Texte, Farben, Layout)

Wenn Sie keine 5 Punkte finden, prüfen Sie in zu groben zeitlichen Abständen. Prüfen Sie alle 1 Sekunde, bei heiklen Szenen alle 0,25 Sekunden.

7. Finales Rendern

node render.mjs --scale 2 --keep-frames     # Mit 2x-Skalierung rendern und herunterskalieren (3–4x Laufzeit). Im Hintergrund laufen lassen.
node tools/qa.mjs
node tools/extras.mjs web                   # Leichtgewichtige Version <10 MB (für Chat oder GitHub)
node tools/extras.mjs poster 15.9           # Standbild für die Titelansicht (zum Zeitpunkt der größten Informationsdichte)

Das Rendern in 2x-Skalierung glättet Kanten und halbiert Textzittern. Falls der Vorgang unterbrochen wird, mit --resume --reuse-audio fortsetzen. Wenn nur ein Abschnitt korrigiert wurde, die entsprechenden Frames aus out/frames/ löschen und --resume ausführen – dann werden nur diese neu gerendert.

8. Bericht

Schreiben Sie kurz und ehrlich (Vorlage am Ende von references/qa.md):

• Was erstellt wurde (Dateipfad, Länge, Auflösung) und eine Zusammenfassung der Struktur
• Was geprüft wurde (QS-Ergebnisse) und was nicht geprüft werden konnte. Da der Ton nicht gehört wurde, muss zwingend „Die Werte liegen innerhalb der Toleranz. Bitte auditive Prüfung veranlassen“ geschrieben werden.
• Selbst getroffene Entscheidungen (Länge, Sprache, Farbwahl usw.) und welche Fakten aus den Quellen nicht bestätigt werden konnten und daher weggelassen wurden
• Den Hinweis, dass die Oberfläche nachgebaut wurde, sowie die Anleitung für Korrekturen

Wenn eine Nachbesserung gewünscht wird

Wenn ein mit dieser Vorlage erstelltes Video überarbeitet werden soll, führen Sie nicht die gesamte obige Prozedur erneut aus.

1. Lesen Sie references/kit.md und den Code der zu ändernden Stelle. Überschriften und Bildschirmtexte sind in scenes.js, der Text der Abschlusskarte in brand.js, Zeitplan und Song in plan.js, das visuelle Erscheinungsbild in app.css.
2. Führen Sie die Änderung durch.
3. Prüfen Sie die geänderte Szene und ihre Übergänge mit --shot / --sheet. Führen Sie auch --lint aus.
4. Wenn Sie Längen oder Songabschnitte geändert haben, prüfen Sie mit node render.mjs --audio, ob keine Warnungen erscheinen.
5. Wenn das endgültige Videofile gewünscht ist, führen Sie die Schritte 6–7 aus. Falls nicht, berichten Sie, was Sie geprüft haben, und fragen Sie, ob ein Rendern gewünscht ist.

node render.mjs ohne Optionen startet einen vollständigen Render-Durchlauf (mehrere Minuten). Verwenden Sie für reine Prüfungen zwingend --shot, --sheet oder --lint. Verwenden Sie node render.mjs --help für die genauen Optionen.

Qualitätskriterien

Prüfen Sie vor der Auslieferung selbst:

• Auch ohne Ton ist die Botschaft allein anhand der Überschriften vollständig verständlich.
• In den ersten 3 Sekunden wird ein Problem gezeigt, das den Zuschauer mit „das betrifft mich“ anspricht.
• In jeder Szene ist klar, worauf der Betrachter achten soll (nicht zwei Dinge gleichzeitig bewegen).
• Ein Kenner des Produkts findet keine Unstimmigkeiten in Oberfläche oder Texten.
• Keine ✗-Fehler in --lint und tools/qa.mjs.
• Alle Szenenübergänge wurden in 0,1–0,2-Sekunden-Schritten vollständig geprüft.

Referenzmaterial

Datei	Inhalt	Wann lesen
references/direction.md	Strukturvorlagen, Zeitplanung, Schreiben von Überschriften, Layout und Animation	Vor der Strukturfestlegung (unbedingt)
references/kit.md	Rollen der Vorlagendateien, Verwendung von Engine und Komponenten	Vor dem Schreiben der Szenen (unbedingt)
references/audio.md	Song-Segmente, Cue-Liste für Soundeffekte, Messmethoden	Beim Hinzufügen von Audio
references/qa.md	Interpretation der Prüfergebnisse, häufige Fehler und Behebungen, Berichtsvorlage	Bei Vorschau und finalem Rendern
assets/template/src/js/scenes.js	Beispielvideo; praktische Beispiele für die Komponentennutzung	Zu Beginn