bayvibe/promo-video-skill

Promo Video Skill (Remotion)

Erstellen Sie ein Werbevideo aus einer Website-URL oder benutzerdefinierten Markeninformationen.

Zwei Pfade

Pfad A: Benutzer hat eine Website-URL angegeben

Wenn der Benutzer eine URL angibt:

1. Führen Sie python generate_promo.py --source <url> aus, um src/data/brand.json und src/data/script.json zu generieren.
2. Zeigen Sie dem Benutzer sofort das generierte Skript — präsentieren Sie eine saubere Zusammenfassung:

   Markenname: xxx
   Tagline: xxx
   Primärfarbe: #xxx
   Szenenplanung:
     1. Intro (3s) — Markenlogo + Name + Tagline
     2. Funktionen (5s) — Funktion1 / Funktion2 / Funktion3
     3. Dashboard (4s) — Produktoberfläche
     4. CTA (3s) — "xxx" + Button
   

3. Fragen Sie: "Bestätigen Sie dieses Skript oder möchten Sie Anpassungen?"
4. Nach der Bestätigung führen Sie npm run dev aus und teilen Sie dem Benutzer mit, dass die Vorschau unter http://localhost:3000 verfügbar ist.

Pfad B: Benutzer hat nichts angegeben

Wenn der Benutzer einfach "Video erstellen" / "Werbevideo machen" sagt, ohne Details zu nennen, beginnen Sie nicht mit dem Programmieren. Fragen Sie stattdessen die folgenden Fragen (in einer Nachricht, alle auf einmal):

1. Wie lautet der Markenname? (oder der Produkt-/Projektname, den Sie bewerben möchten)
2. Beschreiben Sie Ihr Produkt in einem Satz (als Tagline)
3. Haben Sie eine Markenfarbe? (Wenn nicht, wähle ich eine für Sie aus)
4. Welche Verkaufsargumente möchten Sie hervorheben? (maximal 3)
5. Haben Sie eine Website-URL? (Wenn ja, kann ich automatisch Informationen abrufen)

Sobald der Benutzer antwortet, schreiben Sie direkt src/data/brand.json und src/data/script.json basierend auf seinen Antworten. Zeigen Sie dann die Skript-Zusammenfassung und fragen Sie nach Bestätigung (wie in Pfad A, Schritt 2-3).

Nach der Bestätigung

1. Führen Sie npm run dev aus, um das Remotion Studio zu starten.
2. Teilen Sie dem Benutzer mit, dass die Vorschau unter http://localhost:3000 verfügbar ist.
3. Zum Exportieren: npx remotion render PromoVideo out/promo.mp4

Designrichtlinien

Visuelle Prinzipien

• Füllen Sie den Bildschirm aus, reduzieren Sie Leerraum — Mittelszenen (Funktionen / Dashboard) verwenden flex: 1 oder Vollbreiten-Layouts, um die 1920 × 1080 Leinwand zu füllen und große leere Bereiche zu vermeiden.
• Vermeiden Sie sich wiederholende, schablonenhafte Layouts — Verwenden Sie nicht immer wieder das gleiche Grundgerüst "Linker Titel + rechte Karte/Mockup + untere Untertitel" in einem Video. Jedes Video verwendet mindestens 3 deutlich unterschiedliche Kompositionen: z. B. Vollbild-Titel, diagonaler Ticker, zentrale Achsenkomposition, Collage-Karten, Magazin-Spalten, Vollbild-Produktoberfläche, Code-Overlay, Zeitlinien-/Pfadkomposition.
• Abgerundete Ecken von Karten innerhalb eines Videos müssen einheitlich sein — Definieren Sie einen CARD_RADIUS-Token pro Video. Alle Karten, Panels, Mockup-Container und Funktionsblöcke verwenden denselben Wert. Verwenden Sie nicht in einem Video mal rechte Winkel, mal 12px, mal 34px. Untertitel, Logos, kleine Buttons und Fortschrittsbalken können funktionale eigene abgerundete Ecken haben, aber Inhaltskarten müssen einheitlich sein.
• Karten sind nicht die Standardlösung — Funktionsszenen können durch versetzte Collagen, vertikale Stapel, Ticker, Knotendiagramme, Editor-Panels, Produktbildschirmausschnitte etc. dargestellt werden; standardmäßig keine drei gleich breiten Karten nebeneinander.
• Die Schlussseite muss eine andere Abschlussmethode verwenden — Der CTA/Endbildschirm sollte nicht standardmäßig das Layout "Linker Titel + rechte Karte" oder "Linker Titel + linker Button" aus vorherigen Szenen wiederholen. Verwenden Sie bevorzugt zentrierte Lockups, plakatartige Layouts, umlaufende Informationsblöcke, Vollbild-Typografie-Abschlüsse oder das Markenlogo/die URL als visuellen Mittelpunkt, um einen klaren letzten Eindruck zu schaffen. Bei zentrierter Komposition müssen CTA-Button und URL vertikal angeordnet sein, um eine stabile Mittelachse zu gewährleisten.
• Primärfarbe stammt vom CTA-Button der Website — Die Markenfarbe muss aus dem Inline-Style des button/a-Elements extrahiert werden, nicht aus einer zufälligen CSS-Farbe.
• Globale Untertitel — Jede Szene hat zentriert am unteren Rand einen Untertitelbalken (pillenförmiger, halbtransparenter Hintergrund), Schriftgröße 32px, Padding 18px 48px, Federeffekt-Animation beim Einblenden. Untertitel werden über das subtitle-Feld jeder Szene in script.json gesteuert; wenn nicht gesetzt, werden sie nicht angezeigt.
• Nur URL-Eingabe — Der SVG-Modus wurde entfernt; es werden nur Website-URLs als Datenquelle akzeptiert.

Extraktionsregeln

• Markenname priorisiert og:site_name, danach das title-Tag (erster Teil vor - oder |).
• Tagline priorisiert og:description, abgeschnitten auf maximal 80 Zeichen.
• Markenfarbe priorisiert die Extraktion von Gradient-Farben aus dem Inline-Style von Button/CTA-Elementen.
• Funktionstitel filtern auf Länge < 45 Zeichen; zu lange Sätze überspringen.
• Erkennung des hellen/dunklen Themes der Website, automatische Anpassung von Hintergrund- und Textfarbe.

Datenvalidierungs-Checkliste

Überprüfen Sie nach der Datengenerierung die folgenden Punkte, bevor Sie dem Benutzer die Bestätigung geben:

• Ist der Markenname kurz und sauber (nicht der vollständige HTML-Titel)?
• Ist die Tagline < 80 Zeichen lang?
• Stammt die Primärfarbe vom CTA-Button (nicht zufällig)?
• Sind es genau 3 Funktionen mit kurzen, aussagekräftigen Titeln?
• Ist der Text jeder Szene auf der 1920 × 1080 Leinwand lesbar?

Visuelle Selbstprüfungs-Checkliste (muss durchgeführt werden)

Nach der Implementierung oder Änderung eines Videos müssen Sie eine visuelle Überprüfung durchführen, nicht nur Lint ausführen:

1. Führen Sie npm run lint aus.
2. Überprüfen Sie mit npx remotion compositions src/index.ts, ob die Komposition existiert und die Dauer korrekt ist.
3. Exportieren Sie für jede Hauptszene mindestens 1 Still, um das Layout zu überprüfen. Z. B.:

   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene1.png --frame=30
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene2.png --frame=120
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene3.png --frame=210
   

4. Öffnen Sie die Keyframe-Bilder und überprüfen Sie die folgenden Probleme. Wenn eines gefunden wird, muss es zuerst behoben werden, bevor ausgeliefert wird:
   • Kein wichtiger Text, Button oder Untertitel wird abgeschnitten oder ragt über die Leinwand.
   • Absichtlich blutende dekorative/bewegte Layouts (wie Ticker, Hintergrundgrafiken, übergroße beschnittene Titel) müssen wie eine Design-Entscheidung aussehen, nicht wie ein Fehler; sie dürfen die Leinwand überragen.
   • Steuerelemente innerhalb von Karten (z. B. Fortschrittsbalken, Diagrammbalken, Eingabefelder, Buttons, Statusleisten) dürfen die Kartengrenzen nicht überschreiten. Solche unbeabsichtigten Überläufe müssen behoben werden.
   • Keine Elemente verdecken sich gegenseitig so, dass sie nicht lesbar sind.
   • Untertitel sind zentriert und überdecken nicht den Haupt-CTA oder das Kernbild.
   • Alle Inhaltskarten/Panels/Mockup-Container innerhalb eines Videos verwenden denselben CARD_RADIUS.
   • Mindestens 3 verschiedene Layouts; das gesamte Video wiederholt nicht immer dasselbe Links-Rechts-Spalten-Layout.
   • Die Bildränder haben eine Sicherheitszone: wichtiger Text hat mindestens 64px Abstand zum Rand.
   • Lange Wörter, lange Überschriften und Button-Texte laufen nicht aus ihren Containern über.
5. Wenn der Benutzer nur eine Vorschau im Studio wünscht, exportieren Sie nicht erneut eine MP4; stellen Sie sicher, dass http://localhost:3000 geöffnet werden kann.

Dateistruktur

src/
├── Root.tsx              # Remotion-Kompositionsregistrierung
├── PromoVideo.tsx        # Hauptvideoorchestrator
├── scenes/
│   ├── Scene01_Intro.tsx     # Logo + Markenname + Tagline
│   ├── Scene02_Feature.tsx   # Drei gleich breite Karten nebeneinander, eingeblendet
│   ├── Scene03_Dashboard.tsx # Vollbreite Produktoberflächensimulation
│   └── Scene04_CTA.tsx       # Call-to-Action + Button
└── data/
    ├── script.json       # Videoskript (Text, Timing)
    └── brand.json        # Markendaten (Farben, Schriftart, Logo)

Datenformat

brand.json

{
  "name": "Brand Name",
  "tagline": "One line description",
  "colors": {
    "primary": "#3E4E33",
    "secondary": "#687058",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#0F172A",
    "textSecondary": "#64748B",
    "accent": "#3E4E33"
  },
  "font": "Inter, sans-serif",
  "logoUrl": "",
  "features": [
    { "title": "Feature 1", "description": "Short desc" },
    { "title": "Feature 2", "description": "Short desc" },
    { "title": "Feature 3", "description": "Short desc" }
  ],
  "cta": {
    "headline": "Ready to get started?",
    "buttonText": "Get Started Free",
    "url": "https://example.com"
  }
}

script.json

{
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "scenes": [
    { "id": "intro", "duration": 90, "headline": "", "subtext": "", "subtitle": "" },
    { "id": "feature", "duration": 150, "headline": "", "subtitle": "", "items": [] },
    { "id": "dashboard", "duration": 120, "headline": "", "subtitle": "" },
    { "id": "cta", "duration": 90, "headline": "", "buttonText": "", "subtitle": "" }
  ]
}

Anpassung

• Bearbeiten Sie src/data/brand.json, um Farben, Schriftarten, Logo und Markennamen zu ändern.
• Bearbeiten Sie src/data/script.json, um Szenentexte und Timing zu ändern.
• Bearbeiten Sie die Szenenkomponenten in src/scenes/, um Layouts/Animationen zu ändern.