demo-video — URL→Remotion Launch

Fähigkeit zur Erstellung von Demo-Videos

Erstellen Sie ein professionelles Produkt-Demo-Video von einer Unternehmens-URL oder Produkt-Assets. Die Standardausgabe ist ein 60-90 Sekunden langes 1080p+ Video; rendern Sie 4K, wenn Maschine, Assets und Auslieferungsziel dies unterstützen.

Betriebsstandard

• Basieren Sie das Video auf der realen Produktoberfläche: Webseiten, App-Bildschirme, eingeloggte Workflows, Screenshots, vom Benutzer bereitgestellte Assets oder verifizierte öffentliche Demos.
• Behandeln Sie eine URL als alleinige Eingabe als ausreichend, um zu beginnen. Leiten Sie das Produkt, die Zielgruppe, den Kern-Workflow und das Brandsystem von der Website ab und fragen Sie dann nur nach fehlendem Zugriff oder wichtigen Präferenzen.
• Bevorzugen Sie das Storytelling des Produktmanagers gegenüber generischem Marketing. Zeigen Sie, welches Problem der Benutzer hat, was er im Produkt tut, was sich auf dem Bildschirm ändert und warum das Ergebnis wichtig ist.
• Verwenden Sie Remotion für die Bewegungszusammensetzung, wenn praktikabel, und FFmpeg für Inspektion, Kodierung, Kontaktblätter, Audioverarbeitung und Auslieferungskonvertierung.
• Halten Sie Behauptungen verteidigbar. Erfinden Sie keine Metriken, Kundenlogos, Detektorergebnisse, Integrationen, Compliance-Status oder Preise, sofern nicht aus dem Quellmaterial verifiziert.
• Vermeiden Sie eine Überanpassung an einen vorherigen Kunden. Verwenden Sie den Workflow, die Qualitätskontrollen und die Bewegungsmuster wieder; verwenden Sie keine kundenspezifischen Screenshots, Texte, Farben, Preise, Personas oder versionsspezifischen Korrekturen wieder.

Eingaben

Wenn der Benutzer nur eine Website-URL bereitstellt:

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

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

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

Referenz-Routing

• Lesen Sie references/capture-workflow.md vor der Browser-Recherche, dem eingeloggten Erfassen oder der Screenshot-Arbeit.
• Lesen Sie references/storytelling.md vor dem Schreiben des Skripts, des Storyboards, der Shot-Liste oder der Produkterzählung.
• Lesen Sie references/visual-system.md vor der Auswahl der Bewegungssprache, Typografie, Übergänge, des Layouts oder der Musik.
• Lesen Sie references/remotion-ffmpeg.md vor der Implementierung des Videoprojekts oder dem Rendern von Dateien.
• Lesen Sie references/qc-checklist.md vor dem Abschluss des Videos.

Produktions-Workflow

1. Umfang des Liefergegenstands festlegen

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

2. Produkt recherchieren

   • Durchsuchen Sie die Website und Produktseiten tief genug, um den Kernloop zu identifizieren, nicht nur das Homepage-Versprechen.
   • Erstellen Sie eine schnelle Feature-Map: Hauptbenutzer, Schmerzpunkt, primäre Aktion, sichtbare Produktausgabe, Nachweis, CTA.
   • Wenn das Produkt hinter einem Login liegt, verwenden Sie die aktive Browser-Sitzung des Benutzers oder bitten Sie ihn, sich einzuloggen, und fahren Sie dann von der authentifizierten UI aus fort.

3. Produktnachweise 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, Erfassungszeitpunkt, Viewport, Dateiname und Notizen.

4. Produktgeschichte schreiben

   • Beginnen Sie mit dem Problem des Benutzers oder dem gewünschten Ergebnis in einfacher Sprache.
   • Durchlaufen Sie den Produktloop in dieser Reihenfolge: Einrichtung, Aktion, Transformation, Überprüfung/Nachweis, 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 klangvolle Texte für das Publikum; vermeiden Sie allgemeine KI-Ausdrücke wie "Produktivität freischalten", es sei denn, das Produkt sagt das tatsächlich.

5. Bewegungssystem entwerfen

   • Verwenden Sie die echten Farben und die Typografie der Marke als Basis und fügen Sie eine zurückhaltende Anzeigeschriftart oder Akzentfläche hinzu, wenn sie die Hierarchie verbessert.
   • Verwenden Sie Produkt-Screenshots als Helden-Assets. Fügen Sie Browser-Frames, Cursor-Pfade, Zooms, Masken, Scan-Lines, Vergleichspanels 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 Nachweise, räumlicher Push für Navigation, geteilter Vergleich für Vorher/Nachher.
   • Halten Sie die Bewegung kontinuierlich. Szenenwechsel sollten sich anfühlen, als ob die Kamera oder das Interface sich durch eine Produktgeschichte bewegt, nicht durch separate Folien.

6. Erstellen und rendern

   • Verwenden Sie die Starter-Vorlage in assets/remotion-starter/, wenn ein Projekt-Scaffold nützlich ist.
   • Rendern Sie Überprüfungs-Standbilder oder ein Kontaktblatt vor dem Rendern des finalen Videos.
   • Rendern Sie zuerst 1080p für die Qualitätssicherung, dann 4K final, wenn angefordert.
   • 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 ist oder bei schnellen Schnitten unlesbar wird.
   • Überprüfen Sie, dass Schaltflächen, Cursor, Callouts und Masken mit der zugrunde liegenden UI übereinstimmen.
   • Überprüfen Sie, dass alle Screenshots im endgültigen Maßstab scharf genug sind.
   • Überprüfen Sie, dass die Musik instrumental, rechtefrei und unter jedem Voiceover oder SFX ausgewogen ist.
   • Liefern Sie das endgültige MP4 plus nützliche Produktionsartefakte: Storyboard, Asset-Manifest, Kontaktblatt und gegebenenfalls das Quellprojekt.

Wiederverwendbare Skripte

• scripts/create_demo_brief.py erstellt ein strukturiertes Briefing aus einer URL und optionalem Produktkontext.
• scripts/qc_video.py inspiziert finale Video-Metadaten mit ffprobe und kennzeichnet Probleme mit Auflösung, Dauer, Codec und Audio.
• scripts/make_contact_sheet.py erstellt mit FFmpeg ein visuelles Kontaktblatt 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 statischen Assets hinzu und passen Sie die Szenen an die Produkterzählung an.

Der Starter ist bewusst generisch:

• Er enthält eine Produktgeschichte-Komposition mit Eröffnungs-, Workflow-, Nachweis- und CTA-Szenen.
• Er verwendet echte Screenshot-Plätze, fällt aber auf saubere UI-Platzhalter zurück.
• Er enthält Bewegungs-Primitive für Überblendungen, Zooms, Schienenbewegung, Cursor-Hervorhebung und Vergleichspanels.
• Er vermeidet kundenspezifische Texte, Farben oder Assets.

Abschlussleiste

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

• Die Produktgeschichte stammt aus echten Produktnachweisen.
• Der endgültige Render hat mindestens 1080p oder der Benutzer hat explizit ein niedrigeres Ziel akzeptiert.
• Das Video wurde visuell durch Standbilder, Vorschau-Render oder Kontaktblatt überprüft.
• FFmpeg/ffprobe-Metadaten bestätigen Auflösung, Dauer, Video-Codec und Audiozustand.
• Alle Lizenz- oder Quellengrenzen für Musik, Schriftarten, Stock-Footage oder Seiten Dritter sind dokumentiert.
• Der Benutzer erhält eine konkrete Videodatei, nicht nur einen Plan oder ein Skript.