Demo-Video-Erstellungsskill

Skill zur Erstellung von Demo-Videos

Erstellen Sie ein professionelles Produkt-Demo-Video aus einer Unternehmens-URL oder Produkt-Assets. Das Standard-Ergebnis ist ein 60-90 Sekunden langes 1080p+ Video; rendern Sie in 4K, wenn die Maschine, die Assets und das Ausgabeziel dies unterstützen.

Arbeitsstandard

• Das Video basiert auf der tatsächlichen Produktoberfläche: Webseiten, App-Bildschirme, eingeloggte Workflows, Screenshots, benutzerbereitgestellte Assets oder verifizierte öffentliche Demos.
• Nur-URL-Eingabe wird als ausreichend für den Start behandelt. Das Produkt, die Zielgruppe, der Kernworkflow und das Markensystem werden aus der Website abgeleitet; dann wird nur nach fehlendem Zugriff oder wichtigen Präferenzen gefragt.
• Die Erzählweise eines Produktmanagers wird gegenüber generischem Marketing bevorzugt. Es wird gezeigt, welches Problem der Benutzer hat, was er im Produkt tut, was sich auf dem Bildschirm ändert und warum das Ergebnis wichtig ist.
• Remotion wird für die Bewegungszusammenstellung verwendet, wenn praktikabel, und FFmpeg für Inspektion, Kodierung, Kontaktbögen, Audioverarbeitung und Ausgabekonvertierung.
• Behauptungen müssen verteidigbar sein. Es werden keine Kennzahlen, Kundenlogos, Detektor-Ergebnisse, Integrationen, Compliance-Status oder Preise erfunden, es sei denn, sie sind aus Quellmaterial verifiziert.
• Es wird vermieden, sich auf einen vorherigen Kunden zu spezialisieren. Der Workflow, die Qualitätsstandards und die Bewegungsmuster werden wiederverwendet; wiederverwendet werden nicht kundenspezifische Screenshots, Texte, Farben, Preise, Personas oder Version-zu-Version-Fixes.

Eingaben

Wenn der Benutzer nur eine Website-URL angibt:

1. Öffnen Sie die Website in einem Browser, kartieren Sie die Navigation, das Wertversprechen, die Produktseiten, die Preise, die Hilfedokumentation und die sichtbaren interaktiven Zustände.
2. Erstellen Sie hochauflösende Screenshots der Seiten und UI-Oberflächen, die das Produkt am besten erklären.
3. Entwickeln Sie eine Erzählung um den stärksten Produkt-Loop, der auf der Website entdeckt wurde.
4. Geben Sie etwaige Zugriffsbeschränkungen an, wenn ein eingeloggter Produktbereich erforderlich ist.

Wenn der Benutzer mehr Kontext bereitstellt, verwenden Sie ihn, um die Qualität zu steigern:

• Zielgruppe, Kampagnenplattform, Seitenverhältnis, bevorzugte Dauer, CTA, Startziel.
• Produktworkflow-Schritte, Demo-Kontozugriff, Beispieleingaben oder erwartete Vorher/Nachher-Ausgabe.
• Marken-Assets, Screenshots, Videoreferenzen, Schriftarten, Musikrichtung, verbotene Behauptungen und rechtliche Hinweise.

Referenz-Routing

• Lesen Sie references/capture-workflow.md vor der Browser-Recherche, der Erfassung eingeloggter Bereiche oder der Screenshot-Arbeit.
• Lesen Sie references/storytelling.md vor dem Schreiben des Skripts, des Storyboards, der Aufnahmeliste oder der Produkt-Erzählung.
• Lesen Sie references/visual-system.md vor der Auswahl der Bewegungssprache, Typografie, Übergänge, Layout oder Musik.
• Lesen Sie references/remotion-ffmpeg.md vor der Implementierung des Videoprojekts oder dem Rendern von Dateien.
• Lesen Sie references/qc-checklist.md, bevor Sie das Video als abgeschlossen bezeichnen.

Produktionsworkflow

1. Umfang des Ergebnisses definieren

   • Bestätigen Sie die Zieldauer, das Seitenverhältnis, die Auflösung, die Sprache und die Ausgabeplattform, wenn verfügbar.
   • Standardeinstellung: 16:9, 60-90 Sekunden, 30fps, H.264 MP4, mindestens 1080p.
   • Verwenden Sie 4K, wenn gewünscht oder wenn das Video für Launch, Investoren, Konferenzen oder bezahlte Anzeigen verwendet wird.

2. Produkt recherchieren

   • Durchsuchen Sie die Website und Produktseiten tief genug, um den Kern-Loop zu identifizieren, nicht nur das Versprechen der Startseite.
   • Erstellen Sie eine schnelle Feature-Map: Hauptnutzer, Schmerzpunkt, primäre Aktion, sichtbares Produktergebnis, Beweis, CTA.
   • Wenn das Produkt hinter einem Login liegt, verwenden Sie die aktive Browsersitzung des Benutzers oder bitten Sie ihn, sich anzumelden, und fahren Sie dann von der authentifizierten UI aus fort.

3. Produktbeweise erfassen

   • Erfassen Sie Desktop-Screenshots mit 2x oder höherer Geräteskalierung, wenn möglich.
   • Erfassen Sie gefüllte und leere Zustände, wenn sie die Transformation erklären.
   • Benennen Sie Assets nach Szene und Zustand, z.B. dashboard-empty.png, workflow-result.png, pricing.png.
   • Führen Sie ein Manifest mit URL, Seitentitel, Aufnahmezeitpunkt, Viewport, Dateiname und Notizen.

4. Produktgeschichte schreiben

   • Beginnen Sie mit dem Problem des Benutzers oder dem gewünschten Ergebnis in einfacher Sprache.
   • Gehen Sie in dieser Reihenfolge durch den Produkt-Loop: Einrichtung, Aktion, Transformation, Überprüfung/Beweis, breiterer Workflow, CTA.
   • Halten Sie den Text kurz genug für ein bewegtes Video. Verwenden Sie Untertitel als Anker, nicht als Absätze.
   • Verwenden Sie natürlich klingenden Text für die Zielgruppe; vermeiden Sie generische KI-Phrasen wie „Produktivität freischalten“, es sei denn, das Produkt sagt dies tatsächlich.

5. Bewegungssystem entwerfen

   • Verwenden Sie die echten Farben und die Typografie der Marke als Basis, und fügen Sie dann eine zurückhaltende Display-Schriftart oder Akzentfarbe hinzu, wenn dies die Hierarchie verbessert.
   • Verwenden Sie Produkt-Screenshots als Haupt-Assets. Fügen Sie Browser-Frames, Cursor-Pfade, Zooms, Masken, Scan-Linien, Vergleichs-Panels oder kinetische Typografie nur hinzu, wenn sie den Workflow verdeutlichen.
   • Wählen Sie Übergänge, die zum Produkt passen: flüssig/wellenförmig für fließende Transformation, Scan-Wipe für Analyse, Spotlight-Enthüllung für Beweise, räumlicher Push für Navigation, Split-Vergleich für Vorher/Nachher.
   • Halten Sie die Bewegung kontinuierlich. Szenenwechsel sollten sich anfühlen, als ob sich die Kamera oder die Oberfläche durch eine Produktgeschichte bewegt, nicht durch separate Folien.

6. Erstellen und rendern

   • Verwenden Sie die Starter-Vorlage in assets/remotion-starter/, wenn ein Projektgerüst nützlich ist.
   • Rendern Sie Überprüfungs-Standbilder oder einen Kontaktbogen, bevor Sie das endgültige Video rendern.
   • Rendern Sie zuerst 1080p für die Qualitätssicherung, dann 4K-Endversion, falls gewünscht.
   • Verwenden Sie FFmpeg oder ffprobe, um Dauer, Auflösung, Codec, Bildrate und Audiostream zu überprüfen.

7. Qualitätssicherung vor Auslieferung

   • Überprüfen Sie, dass kein Text überlappt, ungeschickt beschnitten oder bei schnellen Schnitten unlesbar wird.
   • Überprüfen Sie, dass Schaltflächen, Cursor, Markierungen und Masken mit der zugrunde liegenden UI ausgerichtet sind.
   • Überprüfen Sie, dass alle Screenshots bei endgültiger Skalierung scharf genug sind.
   • Überprüfen Sie, dass die Musik instrumental, rechtefrei und ausgewogen unter Voiceover oder SFX ist.
   • Liefern Sie das endgültige MP4 plus nützliche Produktionsartefakte: Storyboard, Asset-Manifest, Kontaktbogen und Quellprojekt, wenn relevant.

Wiederverwendbare Skripte

• scripts/create_demo_brief.py erstellt eine strukturierte Kurzbeschreibung aus einer URL und optionalem Produktkontext.
• scripts/qc_video.py überprüft die Metadaten des endgültigen Videos mit ffprobe und meldet Probleme mit Auflösung, Dauer, Codec und Audio.
• scripts/make_contact_sheet.py erstellt einen visuellen Kontaktbogen mit FFmpeg zur schnellen Überprüfung.

Führen Sie Skripte aus einem Projektordner oder mit absoluten Pfaden aus. Sie sind Helfer, kein Ersatz für visuelles Urteilsvermögen.

Starter-Vorlage

Kopieren Sie assets/remotion-starter/ in das Arbeitsprojekt, wenn Sie ein neues Video starten. Ersetzen Sie die Platzhalter-Konfiguration in src/demoConfig.ts, fügen Sie Screenshots zu public/ oder Remotion-Statik-Assets hinzu und passen Sie Szenen an die Produkt-Erzählung an.

Die Vorlage ist bewusst generisch gehalten:

• Sie enthält eine Produktgeschichts-Komposition mit Eröffnungs-, Workflow-, Beweis- und CTA-Szenen.
• Sie verwendet echte Screenshot-Plätze, fällt aber auf saubere UI-Platzhalter zurück.
• Sie enthält Bewegungs-Primitive für Einblendungen, Zooms, Schienenbewegungen, Cursor-Hervorhebungen und Vergleichs-Panels.
• Sie vermeidet kundenspezifische Texte, Farben oder Assets.

Abschlussbalken

Bezeichnen Sie das Video erst dann als fertig, wenn diese Bedingungen erfüllt sind:

• Die Produktgeschichte basiert auf echten Produktbeweisen.
• Der endgültige Render ist mindestens 1080p, oder der Benutzer hat explizit ein niedrigeres Ziel akzeptiert.
• Das Video wurde visuell durch Standbilder, Vorschau-Render oder Kontaktbogen überprüft.
• FFmpeg/ffprobe-Metadaten bestätigen Auflösung, Dauer, Video-Codec und Audiostatus.
• Etwaige Lizenz- oder Quellenbeschränkungen für Musik, Schriftarten, Stockmaterial oder Drittanbieter-Seiten sind dokumentiert.
• Der Benutzer erhält eine konkrete Videodatei, nicht nur einen Plan oder ein Skript.