JZnebel/AutoDemo

/demo — Automatisierte Demo-Video-Pipeline

Sie erstellen ein vertontes Demo-Video einer Webanwendung. Der gesamte Ablauf — Erkundung, Aufnahme, Vertonung und Rendering — erfolgt in diesem einzigen Befehl.

Argumente

Parsen aus $ARGUMENTS:

• Erstes Positionsargument: URL der zu demonstrierenden Webseite (erforderlich)
• --login <anmeldedaten>: Anmeldedaten im Format email:passwort. Falls angegeben, vor der Aufnahme anmelden.
• --brief <"was gezeigt werden soll">: Beschreibung in natürlicher Sprache, was die Demo abdecken soll. Kann sehr kurz sein — „zeige das Dashboard und erstelle ein Projekt” reicht aus. Wenn nicht angegeben, frei erkunden.
• --name <name>: Ausgabename (Standard: abgeleitet vom Hostnamen der URL)
• --duration <sekunden>: Zielvideodauer (Standard: 60)
• --voice <stimme>: TTS-Stimme (Standard: en-US-GuyNeural)
• --preset <draft|production>: Qualitätsvoreinstellung (Standard: draft)

Argumente können auch als natürliche Sprache nach der URL übergeben werden. Alle folgenden sind äquivalent:

/demo https://app.com --login [email protected]:pass123 --brief "show the billing page and add a payment method"
/demo https://app.com — log in as [email protected] / pass123, show billing and add a payment method
/demo https://app.com login: [email protected] pass123. Show the billing page.

Parsen Sie, was Sie können. Wenn der Benutzer Anmeldedaten und Anweisungen in einfachem Englisch gibt, verwenden Sie diese.

Pipeline

Phase 1: App erkunden

Verstehen Sie, womit Sie arbeiten, bevor Sie aufnehmen:

1. Öffnen Sie die URL mit new_page oder navigate_page
2. Wenn Anmeldedaten angegeben (--login) , finden Sie das Anmeldeformular und melden Sie sich zuerst an. Suchen Sie nach häufigen Mustern: /login, /sign-in, einem „Sign In”-Link usw. Verwenden Sie fill für E-Mail-/Passwort-Felder, dann klicken Sie auf „Absenden”. Warten Sie, bis die Dashboard-/Startseite geladen ist, bevor Sie fortfahren.
3. Machen Sie einen Screenshot und Snapshot, um die App zu verstehen
4. Erfassen Sie die Marke: Identifizieren Sie das Logo und die Akzent-/Markenfarbe der App.
   • Versuchen Sie, das Logo-Bild in das Ausgabeverzeichnis herunterzuladen (in Phase 2 aufgelöst) als logo.png (oder .svg/.webp). Speichern Sie es während der Erkundung an einem temporären Ort und verschieben Sie es dann in das endgültige Ausgabeverzeichnis, sobald der eindeutige Name aufgelöst ist. Verwenden Sie evaluate_script, um die Logo <img> src-URL zu finden, und dann Bash curl oder wget, um es zu speichern. Die Pipeline erkennt es automatisch und verwendet es in der Introkarte.
   • Wählen Sie die Akzentfarbe aus der primären Button-/Markenfarbe der App und verwenden Sie sie als accentColor in narration.json (rgba-Format).
5. Wenn ein Brief angegeben wurde (--brief), verwenden Sie ihn, um Ihre Erkundung zu leiten. Der Brief sagt Ihnen, worum sich der Benutzer kümmert – priorisieren Sie diese Funktionen. Wenn kein Brief angegeben, frei erkunden.
6. Identifizieren Sie die wichtigsten Funktionen, Navigation und interessante Abläufe
7. Planen Sie 3-6 Demo-Segmente, die die App in etwa duration Sekunden Vertonung präsentieren

Denken Sie darüber nach, was eine überzeugende Demo ausmacht:

• Wenn es einen Brief gibt, folgen Sie ihm – der Benutzer weiß, was er zeigen möchte
• Beginnen Sie mit der optisch beeindruckendsten oder einzigartigsten Funktion
• Zeigen Sie Breite (navigieren Sie durch verschiedene Abschnitte) nicht Tiefe (bleiben Sie nicht an einem Formular hängen)
• Beenden Sie mit etwas, das alles zusammenführt (Dashboard, Einstellungen, Ergebnisse)
• Überspringen Sie Anmeldebildschirme, Lade-Spinner und Fehlerzustände in der Aufnahme – behandeln Sie diese im Setup vor screencast_start

Phase 2: Aufnehmen

Richten Sie das Ausgabeverzeichnis ein und starten Sie die Aufnahme:

Ausgabeverzeichnis: screencast-output/<name>/
Aufnahme: screencast-output/<name>/recording.mp4

1. Wählen Sie ein eindeutiges Ausgabeverzeichnis. Überprüfen Sie vor dem Erstellen des Verzeichnisses, ob screencast-output/<name>/ bereits existiert. Wenn ja, hängen Sie ein inkrementierendes Suffix an: <name>-v2, <name>-v3, usw. Verwenden Sie den ersten verfügbaren Namen. Beispiel:

   # Überprüfen und nächsten verfügbaren Namen finden
   NAME="trafficstores"
   DIR="screencast-output/$NAME"
   if [ -d "$DIR" ]; then
     V=2; while [ -d "screencast-output/${NAME}-v${V}" ]; do V=$((V+1)); done
     NAME="${NAME}-v${V}"
     DIR="screencast-output/$NAME"
   fi
   mkdir -p "$DIR"
   

   Verwenden Sie den aufgelösten <name> (mit Suffix, falls nötig) für ALLE nachfolgenden Pfade in diesem Durchlauf – Aufnahme, narration.json, Komposition, Renderausgabe usw.
2. Erstellen Sie das Ausgabeverzeichnis
3. Rufen Sie screencast_start mit dem Pfad screencast-output/<name>/recording.mp4 auf
4. Interagieren Sie natürlich mit der App — klicken Sie sich durch die geplanten Funktionen
   • Halten Sie kurz inne (1-2 Sekunden) auf jedem wichtigen Bildschirm, damit die Zuschauer ihn lesen können
   • Klicken Sie auf Schaltflächen, füllen Sie Formulare mit realistischen Daten, navigieren Sie zwischen Abschnitten
   • Der MCP-Fork kümmert sich automatisch um Cursor-Animation und Auto-Segmentierung
5. Rufen Sie screencast_stop auf, wenn Sie fertig sind

Aufnahmetipps:

• Hetzen Sie nicht — die Pipeline beschleunigt langweilige Teile automatisch
• Halten Sie auf visuell interessanten Bildschirmen inne (die Pipeline verlangsamt diese, um sie der Vertonung anzupassen)
• Vermeiden Sie Scrollen in Cross-Origin-Iframes — navigieren Sie stattdessen direkt
• Wenn etwas lange lädt, schneidet der Auto-Segmentierer die Wartezeit heraus

Phase 3: Vertonung schreiben

Schreiben Sie screencast-output/<name>/narration.json basierend auf dem, was Sie gerade aufgenommen haben. Sie wissen genau, was passiert ist, weil Sie es getan haben.

{
  "introTagline": "Kurze, knackige Überschrift",
  "introSubtitle": "Produkt- oder Firmenname",
  "outroHeading": "Call-to-Action-Frage",
  "outroUrl": "website.com",
  "outroCtaText": "Loslegen",
  "accentColor": "rgba(59, 130, 246, 1)",
  "captionStyle": "pop",
  "voice": "en-US-AndrewNeural",
  "introLogoSrc": "screencast-output/<name>/logo.png",
  "segments": [
    {
      "text": "Vertonung für dieses Segment. Schreiben Sie gesprächig, wie ein menschlicher Präsentator.",
      "sceneIndex": 0,
      "sceneLabel": "Funktionsname"
    }
  ],
  "fullText": "Alle Segmenttexte mit Leerzeichen verbunden."
}

Richtlinien zur Vertonung:

• Schreiben Sie, als würden Sie jemandem über die Schulter präsentieren, nicht als würden Sie eine Dokumentation vorlesen
• Verwenden Sie Präsens: „Hier sehen wir…” nicht „Hier sahen wir…”
• Heben Sie bestimmte UI-Elemente hervor, die der Zuschauer beachten sollte
• Halten Sie die gesamte Vertonung in etwa beim --duration-Ziel
• Jedes Segment sollte 5-20 Sekunden Sprache (~15-50 Wörter) umfassen
• Die accentColor sollte der Markenfarbe der App entsprechen (wählen Sie aus dem, was Sie gesehen haben)
• Der sceneLabel jedes Segments wird zu einer animierten unteren Drittel-Einblendung im Video – halten Sie sie kurz (max. 2-3 Wörter): „Anmeldung”, „KI-Builder”, „Live-Website”
• Setzen Sie introLogoSrc auf die Logodatei, die Sie in Phase 1 heruntergeladen haben – sie erscheint mit einer Federanimation in der Introkarte
• Wählen Sie captionStyle passend zum Gefühl der App: "pop" (hüpfend, verspielt), "clean" (Mattglas, elegant), "bold" (groß, kraftvoll), "minimal" (dezent), "karaoke" (kein Hintergrund) oder "outline" (Leuchtschatten)
• Wählen Sie eine voice, die zum Ton der App passt:
  • en-US-AndrewNeural — Warm, selbstbewusst (gute Standardwahl)
  • en-US-BrianNeural — Zugänglich, lässig (Startups, freundliche Apps)
  • en-US-ChristopherNeural — Zuverlässig, autoritär (Unternehmen, Fintech)
  • en-US-AriaNeural — Positiv, selbstbewusst (Marketing, Verbraucher-Apps)
  • en-US-EmmaNeural — Fröhlich, klar (E-Commerce, sozial)
  • en-US-AvaNeural — Ausdrucksstark, fürsorglich (Gesundheit, Wellness, Gemeinschaft)
  • en-US-JennyNeural — Freundlich, rücksichtsvoll (Bildung, Support)
  • en-US-EricNeural — Rational (Analytik, Daten-Tools)
  • en-US-GuyNeural — Leidenschaftlich (Kreativ-Tools, Medien)
  • en-GB-RyanNeural / en-GB-SoniaNeural — Britisch (international, Luxus)

Phase 3.5: Benutzerdefinierte Videokomposition entwerfen

Schreiben Sie eine benutzerdefinierte Remotion-Komposition für dieses spezifische Video. Speichern Sie sie als screencast-output/<name>/composition.tsx. Die Pipeline verwendet sie anstelle der Standard-MarketingDemo-Vorlage.

Laden Sie zuerst die Remotion-Skills: Lesen Sie die Regeln aus demo-render/.agents/skills/remotion-best-practices/rules/ — insbesondere animations.md, timing.md, text-animations.md, transitions.md und sequencing.md.

Ihre Komposition muss:

1. VideoComposition (die React-Komponente) und calculateMarketingDemoDuration (Dauerfunktion) exportieren
2. Den MarketingDemoProps-Typ exportieren (re-exportieren von ./MarketingDemo)
3. Dieselben Props wie MarketingDemo akzeptieren — die Pipeline übergibt dasselbe JSON

Verfügbare Bausteine (importieren von ./components/):

• DeviceMockup — Bildschirmaufnahme in einem Browser-Fenster (videoSrc, accentColor, displayUrl, zoomRegions, layout)
• IntroCard / OutroCard — Standard-Intro/Outro-Vorlagen (tagline, subtitle, accentColor, logoSrc)
• WordHighlightCaptions — Wort-für-Wort-Untertitel (wordTimings, style, accentColor)
• LowerThird — Szenenlabel-Einblendung (label, accentColor, leftOffset)
• ProgressBar — Fortschrittsanzeige (accentColor)
• AudioWaveform — Audio-reaktiver Visualisierer (variant, accentColor, samples)
• FeatureCallout — Anmerkungs-Hinweis (label, side, y, accentColor)
• ChapterCard — Szenentrennkarte (chapterNumber, title, accentColor)
• Presenter — 2D-Figur mit Lippen-Synchronisation (mouthCues, side)
• AvatarPip — Bild-in-Bild-Avatar
• SceneBreak — Kurzer visueller Blitz an Szenengrenzen

Sie können auch benutzerdefinierte Komponenten inline in der Kompositionsdatei schreiben.

Designentscheidungen pro Video zu treffen:

• Intro-Stil: Schreiben Sie ein benutzerdefiniertes Intro oder verwenden Sie IntroCard. Passen Sie die Persönlichkeit der App an – erdig/organisch, technisch/sauber, warm/einladend, mutig/kraftvoll.
• Outro-Stil: Schreiben Sie ein benutzerdefiniertes Outro oder verwenden Sie OutroCard. Gleiche Persönlichkeitsanpassung.
• Welche Overlays einzuschließen: Nicht jedes Video benötigt jedes Overlay. Überspringen Sie AudioWaveform für saubere SaaS-Demos. Überspringen Sie ProgressBar für kurze Videos. Überspringen Sie LowerThird, wenn Segmente offensichtlich sind.
• Overlay-Positionen: LowerThird muss nicht oben links sein. Untertitel müssen nicht unten in der Mitte sein. Wählen Sie Positionen, die sich nicht mit wichtigen UI-Elementen in der Aufnahme überschneiden.
• Animationsvielfalt: Verwenden Sie nicht immer denselben Federeffekt. Mischen Sie Fade, Slide, Wipe, Typewriter, Stagger. Die Remotion-Skills zeigen die Muster.
• Übergang zwischen Intro → Inhalt → Outro: Fade, Slide, Wipe oder Light Leak. Wählen Sie, was passt.

Template-literal-Beispiel für composition.tsx:

import React from "react";
import { AbsoluteFill, Audio, Sequence, interpolate, staticFile } from "remotion";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
// Bausteine importieren
import { DeviceMockup } from "./components/DeviceMockup";
import { WordHighlightCaptions } from "./components/WordHighlightCaptions";
import { ProgressBar } from "./components/ProgressBar";
// Ihr benutzerdefiniertes Intro/Outro importieren (inline oder als separate Komponenten schreiben)
// Typen importieren
import type { MarketingDemoProps } from "./MarketingDemo";
export type { MarketingDemoProps };

export function calculateMarketingDemoDuration(props: MarketingDemoProps) {
  return props.introDurationFrames + props.videoDurationFrames + props.outroDurationFrames - 20;
}

// Ihre benutzerdefinierte Intro-Komponente (inline)
const MyIntro: React.FC<{...}> = (...) => { ... };

export const VideoComposition: React.FC<MarketingDemoProps> = (props) => {
  // Ihr einzigartiges Kompositionslayout hier
};

Remotion-Regeln zu beachten:

• Alle Animationen werden durch useCurrentFrame() gesteuert – KEIN C