Zum Hauptinhalt springen
Produkt

Dein Code-Editor wird zum Filmstudio

· 3 Min. Lesezeit

Wer ein Produkt am besten kennt, baut es meist selbst und verbringt den Tag im Editor, oft mit Claude Code daneben. Am 15. September haben wir unsere VS-Code-Erweiterung nicht länger als kleines Aufnahme-Werkzeug behandelt. Sie wurde zu PageToVid Studio: dem Ort, an dem die Filme eines Produkts eingerichtet, hinter dem Login gedreht und aktuell gehalten werden.

Dort hin, wo Teams schon arbeiten

Entwickler wollen selten noch ein Dashboard. Unsere Assistenten-Anbindung ließ eine KI bereits Filme erstellen und bearbeiten; es fehlte eine Einrichtung, die eine Minute dauert und sich in einem Code-Projekt natürlich anfühlt.

Also wurde Claude Code zum Einrichtungswerkzeug. Die Erweiterung bereitet den Arbeitsbereich vor, Claude Code steuert PageToVid über seine Werkzeuge, und ein Mensch bestätigt jedes Rendering, bevor etwas ausgegeben wird. Du beschreibst den gewünschten Film in einfachen Worten, der Assistent übernimmt die Klicks.

Der Gedanke dahinter ist schlicht: Wer an einem Produkt baut, weiß am genauesten, welche Abläufe ein Film zeigen sollte. Die Arbeit, das in Szenen, Aufnahmen und Sprechtexte zu übersetzen, kann ein Assistent übernehmen, Schritt für Schritt und jederzeit nachvollziehbar.

Ein Befehl richtet das Studio ein

Ein einziger Befehl, „Install studio pack“, schreibt, was ein Projekt braucht:

  • eine Konfigurationsdatei, die Claude Code mit den PageToVid-Werkzeugen verbindet;
  • fertige Slash-Befehle, um das Studio einzurichten, eine Aufnahme zu planen, eine wiederkehrende Sendung anzulegen, mit einem Format zu arbeiten, eine Anleitung zu schreiben und Markenbilder abzulegen;
  • eine kurze Anleitung im Repository, die jeden Befehl erklärt.

Das Panel zeigt das Studio, die Sendungen der Website (starten, bestätigen, pausieren) und ihren Aufnahmeplan. Es liest dieselben Endpunkte wie die Website und die Browser-Erweiterung, nie ein eigenes Format, also sind sich alle drei immer einig.

Dein Schlüssel bleibt aus deinen Dateien

Eine Konfigurationsdatei im Repository ist schnell versehentlich committet, also haben wir dafür gesorgt, dass nichts Wertvolles darin steht. Die erzeugte Datei nennt deinen Schlüssel nur beim Namen; der Schlüssel selbst landet nie auf der Festplatte. Die Erweiterung bewahrt ihn im geheimen Speicher des Editors auf und gibt ihn den Terminals des Editors als Umgebungsvariable mit, aufgefrischt bei jeder Aktualisierung des Panels.

Eine automatische Prüfung bestätigt, dass die erzeugte Datei keinen Schlüssel enthält. Und wenn du einen Slash-Befehl anpasst, behält eine Neuinstallation deine Fassung, statt sie zu überschreiben.

Das Produkt hinter dem Login filmen

Das meiste einer Software liegt hinter einer Anmeldung, und genau das soll eine Demo zeigen. Dieses Release bringt Aufnahmesitzungen: die eigenen Cookies einer Website, einmal für ihre Adresse und ihren www-Zwilling hinterlegt, ein bis drei Tage aufbewahrt und dann vergessen.

Die Film-Pipeline ordnete Sitzungen bereits nach Website zu. Sobald eine Sitzung existiert, filmt also jedes Rendering dieser Website angemeldet, ob es aus der Web-App, der API oder einem Assistenten kommt. Du kannst eine Sitzung aus einem gespeicherten Browserzustand, einem Testkonto oder der Browser-Erweiterung anlegen. Der Server behält nur die Cookies dieser Website, gibt sie nie heraus und löscht sie auf Wunsch. Mit einem gespeicherten Browserzustand sieht PageToVid nie ein Passwort.

Anleitungsfilme, gemacht mit PageToVid

Ein Studio braucht eine Anleitung, und wir haben unsere so gemacht, wie du deine machen würdest: drei kurze Animationen, gerendert auf PageToVid selbst. Eine zeigt die Einrichtung in VS Code, eine das Filmen eines Produkts hinter dem Login und eine eine wiederkehrende Sendung, die Claude Code aus einem Repository einrichtet.

Jede ist ein gewöhnliches öffentliches Video mit eigener Seite, Untertiteln und Teilen-Leiste, verlinkt von der Seite der Erweiterung in vier Sprachen. Für den Login-Film haben wir eine schlichte Liste von Schritten einem Seite-an-Seite-Vergleich vorgezogen: Ein einfacher Ablauf zeigt sich am besten einfach.

Was sich ändert

Ein Entwickler kommt jetzt von einem leeren Projekt zu einem gefilmten Rundgang durch die eigene App, hinter dem Login, ohne den Editor zu verlassen, und hält diesen Film aktuell, während sich das Produkt verändert. Der Assistent übernimmt die Einrichtung; der Mensch behält bei jedem Rendering das letzte Wort.

Als Nächstes soll das Anmelden noch direkter werden: in einem echten Browser, der aus dem Editor geöffnet wird, ohne dass etwas auf dem Rechner bleibt. Die Erweiterung installierst du über die Seite der VS-Code-Erweiterung, und wie Assistenten sich verbinden, steht auf der Assistenten-Seite.

Sieh es auf deiner eigenen Website

Füge eine Seite ein und bekomme das vertonte Video, um das es in diesem Blog geht. Das erste ist kostenlos.

Erstes Video gratis · keine Kreditkarte · in Minuten fertig

← Alle Artikel