Steuere deine Produktvideos aus deinem Editor
PageToVid Studio verbindet dein Projekt mit seiner Website und mit Claude Code. Plane Abläufe aus dem Code, starte wiederkehrende Serien und sieh dir jedes Video an, bevor es einen Credit kostet.
Offline, oder in Cursor, Windsurf oder VSCodium? Lade die .vsix herunter
Kostenlos · VS Code, Cursor, Windsurf und VSCodium · führt deinen Code nie aus
Ein Ordner, ein Produktionsplatz
- Verbinden mit einem Klick
Bestätige im Browser, und der Schlüssel kommt zurück in den Editor. Nichts zu kopieren, und er bleibt im sicheren Speicher von VS Code.
- Ein Ordner, eine Website
Ordne das Projekt einmal seiner PageToVid-Website zu. Die Einstellung gehört zum Ordner, nie zum ganzen Editor.
- Das Studio-Paket
Schreibt die .mcp.json für Claude Code ohne deinen Schlüssel – der kommt als Umgebungsvariable ins Terminal – dazu die Slash-Befehle und eine kurze Anleitung.
- Das Studio-Panel
Zahlen und Credits deiner Website, die Reststunden des Recorder-Logins, deine Serien und ihre Folgen, der Aufnahmeplan und was schon aufgenommen ist.
- Ein Login für Screencasts
Lass den Recorder sich bei deinem Produkt anmelden – mit einem Playwright-Storage-State, einem Testkonto oder deiner Browser-Sitzung. Ab dem Tarif Scale.
- Markenassets senden
Wähle Logos und Produktbilder aus dem Repo und schick sie in deine Mediathek, markiert mit brand.
Sechs Slash-Befehle für Claude Code
Jedes Rendering kostet 40 Credits, und jeder Befehl zeigt eine Vorschau, bevor er etwas ausgibt. Nichts wird gerendert, bevor du zustimmst.
/pagetovid-studioPrüft den ganzen Arbeitsplatz – Credits, Website, Login, Tarif, Serien, Feed – und sagt, was fehlt. Kostenlos./pagetovid-capture-planLiest die Codebasis und schreibt die Abläufe, die sich aufzunehmen lohnen. Die Chrome-Erweiterung nimmt sie auf; jeder Schritt wird zur Szene./pagetovid-showRichtet eine wiederkehrende Serie aus dem ein, was dein Repo veröffentlicht, und zeigt die erste Folge, bevor du sie bestätigst./pagetovid-formatSchreibt oder überarbeitet ein Videoformat und zeigt eine echte Folge, bevor eine neue Version gespeichert wird./pagetovid-howtoMacht aus deiner Dokumentation Anleitungsvideos, gefilmt im Produkt, und fragt vor jedem Rendering./pagetovid-assetsFindet Logos und Produktbilder im Repo und sagt dir, welche du senden solltest.
Die Slash-Befehle brauchen die Claude-Code-Erweiterung oder die claude-CLI.
Einmal einrichten
- 1Installiere die Erweiterung aus dem Marketplace.
- 2Führe „PageToVid: Connect“ aus der Befehlspalette aus und bestätige im Browser.
- 3Wähle die Website, zu der dieser Ordner gehört.
- 4Führe „PageToVid: Install studio pack“ aus, starte claude im integrierten Terminal und gib den pagetovid-Server einmal frei.
- 5Dein Produkt liegt hinter einem Login? Führe „PageToVid: Connect a login for screencasts“ aus (ab dem Tarif Scale).
Dein Code bleibt auf deinem Rechner
- Sie nimmt selbst nie etwas auf und führt nie Code aus deinem Workspace aus. Sie liest das Projekt nur, um Prompts zu schreiben.
- Dein Schlüssel bleibt im sicheren Speicher von VS Code. Die .mcp.json, die sie schreibt, enthält ihn nie.
- Ein Storage-State wird einmal gelesen und einmal gesendet. Ein Testpasswort wird einmal gesendet und nirgends auf deinem Rechner gespeichert.
- Der Recorder-Login ist an eine Website gebunden und läuft nach der gewählten Zeit ab – höchstens 72 Stunden.
Passt zur Chrome-Erweiterung
Schreib den Aufnahmeplan im Editor, nimm ihn in Chrome auf. Das Panel markiert jeden Ablauf als aufgenommen, sobald die Browser-Erweiterung ihn in deine Mediathek geschickt hat.
Zur Chrome-Erweiterung →Anleitungsfilme
Drei kurze Filme, mit PageToVid selbst gemacht: die Einrichtung des Studios in VS Code, das Filmen deines Produkts hinter einem Login und eine wiederkehrende Serie, die Claude Code aus deinem Repo einrichtet.
Fragen
Ist sie kostenlos?
Die Erweiterung ist kostenlos. Videos verbrauchen deine Credits – 40 pro Rendering – und jeder Befehl zeigt, was er machen wird, bevor er etwas ausgibt.
Funktioniert sie in Cursor, Windsurf oder VSCodium?
Ja. Diese Editoren lesen den VS Code Marketplace nicht, also installiere die .vsix-Datei. Das Verbinden mit einem Klick funktioniert in allen.
Brauche ich Claude Code?
Für die Slash-Befehle ja: die Claude-Code-Erweiterung oder die claude-CLI. Ohne sie schreibt das Paket trotzdem seine Dateien, und das Panel zeigt weiter deine Website.
Steht mein API-Schlüssel in der .mcp.json?
Nein. Die Datei nennt eine Umgebungsvariable, und die Erweiterung setzt sie in jedem Terminal, das VS Code öffnet.
Kann sie meine App hinter einem Login filmen?
Ja, ab dem Tarif Scale: Gib dem Recorder einen Playwright-Storage-State, ein Testkonto oder deine Browser-Sitzung über die Chrome-Erweiterung. Der Login ist an diese Website gebunden und läuft spätestens nach 72 Stunden ab.
Mach dein nächstes Video, ohne den Editor zu verlassen
Kostenlos installieren. Funktioniert mit Claude Code.