Communitygithub.com

AnayDhawan/openvidstudio

Erstelle Demo-Videos, Launch-Videos, Screencasts oder Produkt-Walkthroughs für Softwareprojekte mit dem openvidstudio MCP-Server. Erfasst die tatsächlich laufende App und rendert ein filmisches Demo-Video – keine KI-Generierung.

Was ist openvidstudio?

openvidstudio ist ein Skill für KI-Agenten (wie Claude Code), der über den openvidstudio MCP-Server ein vollständiges Demo-Video aus einem echten, laufenden Softwareprojekt erstellt. Statt generierter Szenen oder Stock-Material werden alle Bildschirme direkt von der laufenden Anwendung aufgenommen – jede Screenshot stammt vom echten Produkt. Der Agent führt den gesamten Workflow aus: Er liest das Repository (README, package.json, Routen), startet die App selbstständig, extrahiert das visuelle Branding (Tailwind-Farben, Schriftarten, Logo), plant die Szenen basierend auf Laufzeit und Features und generiert eine gesprochene Narration. Nach Freigabe durch den Benutzer werden Screenshots aufgenommen, Szenen mit filmischen Effekten (Kamerafahrten, Blenden) angeordnet und das Video gerendert. Ein mehrstufiger Qualitätscheck (Kontaktbogen, Standbildanalyse) verhindert Fehler. openvidstudio unterstützt Soundeffekte (Synthesizer, Freesound) und Hintergrundmusik (CC0-Kataloge). Es plattformerkennt und funktioniert mit jedem Projekt, das lokal gestartet werden kann – Node.js, Playwright und ffmpeg werden vorausgesetzt. Der Skill ist ideal für Entwicklerteams, die ohne manuelle Videobearbeitung schnell professionelle Produktdemos erstellen möchten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AnayDhawan/openvidstudio/tree/main/.agents/skills/openvidstudio

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht openvidstudio?

Erstelle ein Demo-Video aus der echten, laufenden Anwendung eines Projekts. Jeder Bildschirm stammt vom tatsächlichen Produkt; nichts wird generiert.

Vor allem

Führe preflight aus. Es prüft node, ffmpeg, Playwrights Chromium, ob die App tatsächlich antwortet und ob eine Sprachausgabe-Engine existiert. Jeder Fehler nennt die Lösung. Das Überspringen bedeutet, dass eine fehlende Abhängigkeit erst nach einem langen Rendervorgang auffällt.

Wenn die Tools nicht registriert sind, ist der Server nicht installiert. Verweise den Benutzer auf diesen Eintrag in seiner MCP-Konfiguration, gefolgt von einem Client-Neustart:

{ "mcpServers": { "openvidstudio": { "command": "npx", "args": ["-y", "@openvidstudio/mcp-server"] } } }

Die Reihenfolge

preflight -> extract_brand -> plan_beats -> [write VO] -> validate_beats -> FREIGABE-SCHLEUSE
  -> write_beats_file -> capture_screenshot -> scaffold_scene -> validate_scenes
  -> [plan_sound_effects] -> generate_narration -> stitch_composition -> contact_sheet
  -> render_video -> qc_extract_frames

1. Aufnahme

Klär es ab, bevor du fragst. Die übliche Anfrage ist „Erstelle ein Demo-Video von diesem Projekt“ und sonst nichts. Das ist die gesamte Aufgabenstellung, und das reicht.

Beginne damit, das Repository zu lesen, anstatt den Benutzer zu interviewen:

  • README.md sagt, was das Produkt ist und oft, was daran wichtig ist
  • package.json-Skripte sagen, wie man es startet, und das Dev-Skript nennt meist den Port
  • die Routen oder Seiten sagen, was es zu filmen gibt

Starte dann die App selbst und bestätige, dass sie antwortet. Frage den Benutzer nicht nach einer URL, die er erst heraussuchen muss; finde den Dev-Befehl, führe ihn aus und überprüfe ihn. Frage nur, wenn das Starten etwas erfordert, das du nicht wissen kannst, wie eine fehlende .env oder eine nicht verfügbare Datenbank.

Was wirklich zu fragen ist, weil das Repository es nicht verraten kann:

  • wie lang das Video sein soll
  • welche zwei oder drei Dinge es zeigen soll, falls das Repository viele hat
  • für wen es bestimmt ist – einen Besucher der Landing Page oder jemanden, der bereits installiert

Eine Frage nach der anderen, und nur Fragen, die das Repository nicht beantworten kann. Eine Wand mit sechs Fragen am Anfang ist der schnellste Weg, dies wie Arbeit wirken zu lassen. docs/PLANNING.md enthält den vollständigen Entscheidungsbaum, falls ein Fall unklar ist.

Beende die Aufgabe, indem du das Ergebnis zeigst: den mp4-Pfad, seine Länge und ein contact_sheet oder einige qc_extract_frames-Standbilder. Ein Render, den niemand ansieht, ist kein ausgeliefertes Video.

1b. Trage die Marke des Repositorys

extract_brand mit sourceRepo, das auf das zu filmende Repository gesetzt ist. Es liest Tailwind v4 @theme-Blöcke und :root-Custom-Properties, wählt Schriftarten aus next/font-Importen aus, kopiert das beste Logo, das es findet, und schreibt src/brand.ts.

Führe es vor scaffold_scene aus. Ein nachträglich thematisiertes Video bedeutet ein erneutes Erstellen des Grundgerüsts.

Überprüfe die zurückgegebene unresolved-Liste und fülle alles Wichtige von Hand aus. Es meldet nur, was es tatsächlich finden kann, anstatt eine plausible Farbe zu erfinden – ein unaufgelöster Token ist also eine echte Lücke, kein Fehler.

Eine Regel, die dies für handgeschriebene Szenen mit sich bringt: Lese Tokens innerhalb der Komponente, nicht auf Modulebene. applyBrand mutiert die gemeinsam genutzten Token-Objekte, daher erfasst const MONO = \"${font.mono}"`am Anfang einer Datei die Voreinstellung und sieht die Marke nie. Verwende stattdessenmonoStack()unduiStack()`.

2. Die Szenen planen

plan_beats mit der Ziellaufzeit und den Funktionen. Es gibt ein zusammenhängendes Grundgerüst mit einer Erfassungsmethode und einem Wortbudget pro Szene zurück.

Schreibe die Erzählung auf dieses Budget. validate_beats erzwingt 2,3 bis 2,9 Wörter pro Sekunde als harte Unter- und Obergrenze pro Szene, sodass eine Zeile abgelehnt werden kann, weil sie zu spärlich ist. Die Einhaltung der angegebenen Zahl vermeidet den Roundtrip.

Jede screenshot-Szene benötigt auch visual.url und visual.interactions (ein Array, möglicherweise leer). Kein anderes Dokument gibt dies vorab an.

3. Die Freigabeschleuse

Zeige dem Benutzer die vollständige Szenendatei, keine Zusammenfassung, und warte auf ein explizites Ja. Nichts wird vorher auf die Festplatte geschrieben. Dies ist eine Protokollregel, kein Vorschlag, und es ist der Punkt, an dem ein falsches Video einen Satz statt eine Stunde kostet.

Dann write_beats_file.

4. Erfassung

capture_screenshot pro Screenshot-Szene. Es kompensiert eine pro-Ursprung-Chrome-Zoom-Desynchronisation, die sonst kleine, weiche oder falsch gerahmte Aufnahmen erzeugt.

Füge eine wait-Interaktion hinzu, wenn die Seite Eingangsanimationen hat, sonst erwischt die Aufnahme sie in der Mitte und sieht kaputt statt offensichtlich falsch aus.

5. Szenen

scaffold_scene pro Szene. Es erzeugt eine Szene, die wie besehen rendert, und verwendet die eigene Kopie und Dauer dieser Szene. Bearbeite den Inhalt; baue die Struktur nicht neu auf.

Dann validate_scenes. Es erkennt den Fehler, der erfolgreich rendert und einfach falsch ist: über die gesamte Bühnenbreite angeordneter Inhalt wird beschnitten, sobald die Kamera einfährt, weil der sichtbare Bereich die Bühne geteilt durch die Kamera-Skalierung ist. Es markiert auch statische Kameras, fehlende Assets und Szenen ohne Erzählung.

Lies docs/API.md für Props. Lese nicht den Quellcode der Bibliothek.

6. Erzählung

generate_narration. Es schreibt einen Clip pro Szene, den stitch_composition verwendet, und begrenzt das Zeitdehnen auf einen Bereich, der natürlich bleibt, anstatt Clips um jeden Preis an Szenen anzupassen. Wenn es sagt, dass eine Szene nicht passt, korrigiere das Skript oder die Szenendauer; dehne nicht weiter.

6b. Ton, nur wenn die integrierten Optionen nicht ausreichen

Das synthetisierte Paket enthält bereits Klicks, Tastatureingaben, eine Klingel, einen Piepton, einen Erfolgston, einen Woosh und einen Musikteppich, und es unterliegt keinen Rechten Dritter, da ffmpeg es erzeugt. Bevorzuge es.

Wenn das Video wirklich etwas anderes benötigt, frage den Benutzer, welche Geräusche er möchte, dann plan_sound_effects mit einem Eintrag pro Geräusch. Es teilt dir mit, welche Anfragen die integrierten Optionen bereits abdecken, und gibt einen Pixabay-Suchlink sowie einen genauen Speicherpfad für den Rest zurück.

Es lädt nicht von Pixabay herunter, und du solltest es auch nicht tun. Pixabays Nutzungsbedingungen verbieten automatisierte Sammlungen und besagen, dass die API für echte menschliche Anfragen ist, und sie veröffentlichen keinen Soundeffekt-Endpunkt. Der Benutzer lädt herunter; du überprüfst. Rufe das Tool danach erneut mit verify: true auf, um zu bestätigen, dass jede Datei echtes Audio ist und die Formate zu normalisieren.

provider: "freesound" holt stattdessen automatisch, aber nur mit dem eigenen API-Token des Benutzers, und jeder Clip, den es nimmt, wird in ATTRIBUTION.md aufgezeichnet. Alles in dieser Datei muss in die Videobeschreibung gelangen, sonst wird die Lizenz verletzt.

Musik ist die Ausnahme von alledem. find_music_bed durchsucht zwei CC0-Public-Domain-Kataloge (~9.400 Titel) und import_music_bed schneidet, blendet und gleicht die Lautstärke des vom Benutzer ausgewählten Titels in public/audio/music-bed.mp3 an. Nichts dort erfordert eine Quellenangabe. Der Skill bgmusic enthält die Details; greife darauf zurück, wenn die synthetisierten Teppiche für ein Launch- oder Promo-Stück zu schlicht sind.

7. Zusammenbau und Prüfung

stitch_composition, dann contact_sheet vor dem Rendern. Das Kontaktbogen sind zwei Bilder pro Szene in einem Bild und benötigt nur einen Bruchteil eines vollständigen Renderings, was wichtig ist, da ein fünfminütiges Video 9000 Bilder hat.

render_video zuerst mit draft: true. In voller Qualität erst, wenn der Entwurf richtig aussieht.

Dann qc_extract_frames und arbeite die Checkliste von docs/PIPELINE.md ab.

Regeln, die die Qualitätskontrolle nicht bestehen

Aus docs/STYLE.md, hier wiederholt, weil sie am häufigsten verletzt werden:

  • Kein lineares Easing. Verwende die E.*-Voreinstellungen.
  • Jede Szene innerhalb von CinematicScene.
  • Bewegung stoppt nie. Ein statisches Bild ist ein Fehler.
  • Keine Gedankenstriche, weder auf dem Bildschirm noch in der Erzählung.
  • Untertitel kommen in overlay, nicht in children, sonst treiben sie vom Bildschirm ab, wenn sich die Kamera bewegt.
  • Screenshots nur innerhalb von BrowserFrame. Aufnahmen und KI-Clips dürfen das nicht, sonst erhält das erzeugte Filmmaterial die visuelle Signatur einer echten Aufnahme.

Was nicht zu behaupten ist

Echte Produkt-Benutzeroberfläche, ob DOM-gerendert, gescreenshotet oder aufgenommen, ist die Grundwahrheit. KI-generierte Clips sind nur Atmosphäre und enthalten niemals Produkttext. Wenn die Erzählung etwas behauptet, muss das Bild es zeigen; wenn es das nicht kann, schreibe die Zeile um.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Verwandte Skills