Web-App-Demos automatisch mit KI aufzeichnen

Sie können jetzt eine Web-App-Demo automatisch aufzeichnen, indem Sie aufschreiben, was gezeigt werden soll, und dies einem KI-Agenten übergeben. Dieser klickt während der Aufnahme in einem Cloud-Browser durch Ihr Produkt. Ob die Aufnahme brauchbar ist, hängt von Ihrer Vorbereitung ab: dem Konto, bei dem sich der Agent anmeldet, den Daten auf dem Bildschirm und der Anweisung, die Sie schreiben. Dieser Leitfaden behandelt jeden dieser Punkte, was zu tun ist, wenn der Agent feststeckt, und wann ein Playwright- oder Puppeteer-Skript das bessere Werkzeug ist.

So funktioniert die automatische Website-Aufzeichnung#

In Clevera benötigt der KI-Recorder zwei Eingaben: eine Startseite und eine schriftliche Anweisung, die beschreibt, was gezeigt werden soll. Ein KI-Agent öffnet die Startseite in einem Cloud-Browser, führt die Schritte aus und zeichnet die Sitzung auf. Sie können den Vorgang beobachten, jederzeit die Kontrolle über den Browser übernehmen und diese wieder abgeben, wenn Sie fertig sind.

Standardmäßig ist der Agent schreibgeschützt. Er kann navigieren, Menüs öffnen und Bildschirme lesen, erstellt oder bearbeitet jedoch nichts, sofern Sie dies nicht erlauben. Die fertige Aufnahme landet wie jede andere Aufnahme in Ihrer Bibliothek, und Sie können sie in ein kommentiertes Anleitungsvideo, eine Produktdemo oder einen Artikel verwandeln.

Schritt 1: Demokonto und Demodaten vorbereiten#

Alles, was der Agent sieht, landet im Video. Richten Sie das Konto ein, bevor Sie eine einzige Anweisung schreiben.

• Verwenden Sie ein dediziertes Demokonto. Verweisen Sie den Agenten niemals auf ein Administratorkonto in der Produktionsumgebung. Ein Demo-Arbeitsbereich mit eigenem Login hält echte Kundendaten vom Bildschirm fern und begrenzt die Auswirkungen möglicher Fehler.
• Verwenden Sie realistische Daten. Ein leeres Dashboard ergibt eine schlechte Demo. Fügen Sie 10 bis 20 Datensätze mit glaubwürdigen Namen, Beträgen und Daten hinzu, damit Tabellen, Diagramme und Suchergebnisse so aussehen, als würde ein Team das Produkt tatsächlich nutzen. Vermeiden Sie "Test 1", "asdf" und echte Kundennamen.
• Legen Sie den Ausgangszustand fest. Wenn die Demo "Erstellen Sie Ihr erstes Projekt" zeigt, stellen Sie sicher, dass noch kein Projekt existiert. Wenn das Bearbeiten einer Rechnung gezeigt wird, stellen Sie sicher, dass die Rechnung vorhanden ist und einen klaren Namen hat, auf den sich die Anweisung beziehen kann.
• Entfernen Sie einmalige Unterbrechungen. Schließen Sie Onboarding-Touren, "Was ist neu"-Modals und Test-Banner in diesem Konto zuerst. Alles, was einmal pro Benutzer erscheint, wird auch in Ihrer Aufnahme erscheinen.
• Prüfen Sie, ob die App aus dem Internet erreichbar ist. Der Agent läuft in einem Cloud-Browser und kann daher localhost, einen Staging-Server hinter Ihrem VPN oder IP-beschränkte Umgebungen nicht öffnen. Verwenden Sie eine öffentliche Demo- oder Sandbox-Umgebung.

Schritt 2: Eine Anweisung schreiben, der der Agent folgen kann#

Die meisten schlechten KI-Aufnahmen entstehen durch vage Anweisungen. Der Agent tut, was Sie geschrieben haben, in der Reihenfolge, in der Sie es geschrieben haben, und füllt Lücken mit Vermutungen. Gute Anweisungen lesen sich wie ein kurzes Testskript für eine Person, die Ihr Produkt noch nie gesehen hat.

Befolgen Sie 4 Regeln:

1. Benennen Sie die Bildschirme. Verwenden Sie die Bezeichnungen, die in der Benutzeroberfläche erscheinen: "Öffnen Sie die Abrechnung über die linke Seitenleiste", nicht "gehen Sie zum Geldbereich". 2. Geben Sie die Reihenfolge vor. Nummerieren Sie die Schritte. Wenn die Reihenfolge für die Geschichte wichtig ist (Einrichtung, dann Nutzung, dann Ergebnis sehen), geben Sie dies an. 3. Zeigen Sie auf exakte Elemente. Benennen Sie die Schaltfläche, den Reiter, das Feld oder den Datensatz: "Klicken Sie auf die Rechnung INV-1042", "Öffnen Sie das Dropdown-Menü Filter und wählen Sie Überfällig". 4. Sagen Sie, wo gestoppt werden soll. Enden Sie auf dem Ergebnisbildschirm, den sich der Betrachter merken soll, und weisen Sie den Agenten an, dort einen Moment zu verweilen.

Hier ist der Unterschied in der Praxis.

Schlechte Anweisung:

> Zeigen Sie, wie unsere Rechnungsstellung funktioniert.

Der Agent muss entscheiden, welche Bildschirme wichtig sind, welchen Datensatz er öffnen soll und wann er fertig ist. Sie erhalten eine Tour durch das, was er zuerst findet.

Besser, aber immer noch ungenau:

> Zeigen Sie, wie man eine Rechnung erstellt und an einen Kunden sendet.

Klares Ziel, aber kein Startpunkt, kein Kunde, keine Positionen. Mit einem schreibgeschützten Agenten kann dies ebenfalls nicht gelingen, da das Erstellen einer Rechnung eine Schreibaktion ist.

Gute Anweisung:

> Starten Sie auf dem Dashboard. 1) Klicken Sie in der linken Seitenleiste auf Rechnungen. 2) Klicken Sie oben rechts auf die Schaltfläche Neue Rechnung. 3) Wählen Sie unter Kunde "Northwind Studio". 4) Fügen Sie eine Position hinzu: "Design-Retainer", Menge 1, Preis 2.400. 5) Klicken Sie auf Entwurf speichern. 6) Öffnen Sie den Entwurf und klicken Sie auf Vorschau, halten Sie dann für 3 Sekunden auf dem Vorschaubildschirm an. Klicken Sie nicht auf Senden.

Dies benennt jeden Bildschirm und jedes Element, verwendet den exakten Kunden aus Ihren Demodaten und zieht eine klare Grenze bei der einen Aktion, die nicht ausgeführt werden soll. Es zeigt Ihnen auch vorab, dass dieser Durchlauf Erstellungsberechtigungen benötigt (siehe Schritt 4).

Ein paar weitere Gewohnheiten helfen:

• Ein Ablauf pro Aufnahme. "Rechnung erstellen, dann einen wiederkehrenden Zeitplan einrichten, dann einen Bericht exportieren" sind 3 Videos. Kürzere Durchläufe sind einfacher zu korrigieren und einfacher wiederzuverwenden.
• Buchstabieren Sie einzugebende Werte. Wenn der Agent Text erfinden muss, könnte er vor der Kamera etwas Seltsames erfinden.
• Erwähnen Sie bekannte Eigenheiten. "Die Schaltfläche Speichern ist deaktiviert, bis das Preisfeld den Fokus verliert" erspart dem Agenten ein paar verwirrte Klicks.

Schritt 3: Wählen Sie eine Anmeldeoption#

Die meisten Web-App-Demos befinden sich hinter einem Login. Sie haben 3 Optionen:

Das Demokonto aus Schritt 1 zahlt sich hier aus. Ein Demo-Passwort mit Zugriff auf reine Demodaten ist die risikoarme Wahl, wenn Sie einen Login bereitstellen. Wenn Ihr Unternehmen sich über SSO mit 2FA anmeldet, ist die manuelle Eingabe meist schneller, als zu versuchen, den Agenten dazu zu bringen.

Schritt 4: Entscheiden Sie sich für schreibgeschützt oder Erstellen/Bearbeiten#

Schreibgeschützt ist der Standard und deckt mehr Demos ab, als Sie vielleicht erwarten (die Risiken, wenn ein Agent schreiben darf, finden Sie unter Sicherheit des KI-Bildschirmaufzeichnungs-Agenten): Navigieren, Filtern, Suchen, Datensätze öffnen, Tabs wechseln und Berichte anzeigen.

Erlauben Sie das Erstellen oder Bearbeiten nur, wenn der Ablauf dies wirklich erfordert (einen Datensatz erstellen, eine Einstellung ändern, ein Formular absenden) und nur in einem Demokonto. Tun Sie dann zwei Dinge:

• Schreiben Sie den Stopppunkt in die Anweisung, wie oben bei "Klicken Sie nicht auf Senden". Aktionen, die E-Mails versenden, Kreditkarten belasten oder Integrationen ansteuern, sollten aus dem Durchlauf herausgehalten oder im Demo-Arbeitsbereich deaktiviert werden.
• Setzen Sie die Demodaten danach zurück, damit der nächste Durchlauf vom gleichen Zustand aus startet.

Schritt 5: Übernehmen Sie die Kontrolle, wenn der Agent feststeckt#

Einige Bildschirme bringen jeden automatisierten Browser ins Stolpern. Planen Sie diese ein, anstatt den gesamten Ablauf neu zu starten:

• Cookie-Banner und Zustimmungs-Pop-ups. Übernehmen Sie, akzeptieren oder schließen Sie diese und geben Sie die Kontrolle zurück.
• Benutzerdefinierte Datumsauswahlen und Drag-and-Drop. Ungewöhnliche Widgets sind der Ort, an dem Agenten die meiste Zeit verschwenden. Wählen Sie das Datum selbst aus und geben Sie die Kontrolle zurück.
• Captchas. Diese existieren, um Automatisierung zu stoppen. Lösen Sie diese selbst.
• 2FA-Codes. Geben Sie den Code von Ihrem Telefon ein und geben Sie die Kontrolle dann zurück.

Wenn Sie die Kontrolle zurückgeben, macht der Agent dort weiter, wo Sie ihn verlassen haben. Wenn die Übergabe in der Aufnahme sichtbar ist, kürzen Sie diese im Editor.

Schritt 6: Halten Sie Durchläufe kurz, um Credits zu sparen#

Der KI-Recorder verbraucht in jedem Plan Credits basierend darauf, wie lange die KI arbeitet. Das macht die Anweisung zu einem Kostenhebel. Eine präzise Anweisung auf einem vorbereiteten Konto ist schnell fertig. Eine vage Anweisung auf einem Konto voller Pop-ups verschwendet Zeit mit Erkunden, erneuten Versuchen und Warten. Informationen zu den Credit-Mengen der Pläne finden Sie auf der Preisseite.

Was aus der Aufnahme wird#

Die Rohaufnahme ist die Eingabe, nicht das Endergebnis. Aus derselben KI-Aufnahme können Sie Folgendes generieren:

• Ein How-to-Video. Clevera deckt alle erforderlichen Aktionen der Reihe nach ab, schreibt das Skript und fügt ein KI-Voiceover hinzu, sodass niemand live sprechen muss. Es ist das ideale Format für Hilfecenter und Onboarding. Sehen Sie sich die Funktionsweise im AI tutorial maker an.
• Eine Produktdemo. Die KI arbeitet hier selektiv: Sie kann weniger wichtige Aufnahmen überspringen, Clips neu anordnen und Ergebnisse kommentieren, anstatt jeden Klick zu beschreiben. Es ist das Format für Verkaufs- und Launch-Seiten. Unser product demo generator deckt die Demo-Formate ab.
• Ein Artikel. Ein schriftliches How-to mit automatisch ausgewählten, beschrifteten Screenshots für Dokumentationen und SEO.

Jedes ist ein separates Inhaltselement, und Videos sowie Artikel werden in 74 Sprachen übersetzt. Wenn sich die Benutzeroberfläche ändert, werden Anpassungen an der Vertonung und dem Text auf gehosteten Links und Einbettungen aktualisiert, das Filmmaterial selbst bleibt jedoch unverändert. Führen Sie dieselbe Anweisung erneut aus, um frisches Material zu erhalten; how to update tutorial videos after a UI change behandelt, wann eine Neuaufnahme erforderlich ist und wann eine Bearbeitung ausreicht.

Wenn Sie sich nicht sicher sind, welches Format Ihre Zielgruppe benötigt, helfen Ihnen unser Vergleich von interactive demos vs product videos und der Leitfaden how to create a tutorial video bei der Abwägung der Vor- und Nachteile.

Unser erster Durchlauf: 1 Anweisung, 78 Sekunden, 9 Credits#

Im Oktober 2026 haben wir den KI-Rekorder auf TodoMVC, einer öffentlichen Demo-App, mit dieser Anweisung ausgeführt:

> Fügen Sie drei Todos hinzu: 'Write launch post', 'Record demo', 'Send newsletter'. Markieren Sie 'Record demo' als erledigt. Klicken Sie dann auf den Filter 'Active', um nur offene Todos anzuzeigen.

Die Anmeldung war auf „None“ eingestellt. Wir haben „Allow changes“ aktiviert, da das Hinzufügen und Erledigen von Todos Schreibvorgänge sind. Wir haben dies nur getan, weil es sich um eine öffentliche Demo-App ohne echte Daten handelt. Befolgen Sie für Ihr eigenes Produkt stattdessen Schritt 4.

Der Agent hat genau das getan, was wir geschrieben haben, in der richtigen Reihenfolge, ohne dass wir Wiederholungen oder falsche Klicks bemerkt hätten, und wir mussten nicht eingreifen. Der Durchlauf dauerte etwa 78 Sekunden Echtzeit und hinterließ 58 Sekunden Filmmaterial für eine Aufgabe, für die eine Person etwa 20 Sekunden benötigt, da der Agent zwischen den Schritten pausiert. Clevera schnitt dies in etwa 50 Sekunden auf ein 0:40-minütiges How-to-Video mit 2 Kapiteln, 6 Schritten und automatischen Zooms bei 1,5-facher und 1,8-facher Vergrößerung zusammen. Credits: 5 für die Analyse der Aufnahme und 4 für das How-to, insgesamt 9.

Das 0:40-minütige How-to-Video, das Clevera aus dieser KI-Aufnahme erstellt hat, unbearbeitet.

Worauf Sie achten sollten: Das Filmmaterial wirkte etwas blass und kontrastarm, prüfen Sie es also vor der Veröffentlichung. Zudem war unsere Anweisung nicht nummeriert. Bei einem Ablauf mit 3 Schritten hat es funktioniert, weil jeder einzugebende Wert und der genaue Filter zum Anklicken explizit genannt wurden. Nummerieren Sie bei längeren Abläufen die Schritte.

Die skriptbasierte Alternative: Playwright und Puppeteer#

Entwicklungsteams zeichnen Browser seit Jahren mit Automatisierungsskripten auf, und für manche Aufgaben ist ein Skript das bessere Werkzeug.

Playwright zeichnet Videos nativ auf. In Playwright Test setzen Sie die video-Option auf 'on', 'retain-on-failure' oder 'on-first-retry'; mit der Bibliothek übergeben Sie recordVideo an browser.newContext() mit einem dir und einem optionalen size. Zwei Details übersehen viele Anwender: Videos werden nur gespeichert, wenn der Browser-Kontext geschlossen wird, daher müssen Sie await context.close(). Zudem skaliert das Video standardmäßig das Viewport auf 800x800 herunter. Stellen Sie daher das Viewport und size selbst ein, wenn Sie eine scharfe 1080p-Aufnahme wünschen. Sie müssen Selektoren auch nicht von Hand schreiben: npx playwright codegen generiert das Skript, während Sie durch die App klicken.

Puppeteer verfügt über page.screencast(), das standardmäßig WebM mit 30 FPS aufzeichnet und ffmpeg auf dem Rechner erfordert. Seit Puppeteer 25.13 kennzeichnet die Dokumentation dies als veraltet zugunsten von page.record(), das MP4 ausgibt.

Ein Skript ist die bessere Wahl, wenn:

• Sie möchten, dass bei jedem Release derselbe Ablauf aufgezeichnet wird, ausgelöst durch CI, ohne dass jemand zuschaut.
• Die Aufnahme gleichzeitig als Test dient und Sie sich genauso für Fehler wie für das Filmmaterial interessieren.
• Ihre App an einem Ort läuft, den ein Cloud-Browser nicht erreichen kann, wie etwa ein privates Staging-Netzwerk, das Ihr CI-Runner sehen kann.
• Sie Ingenieure haben, die bereits End-to-End-Tests pflegen und die Selektoren stabil sind.

Der Agent ist die bessere Wahl, wenn:

• Die Person, die das Video benötigt, im Produktmarketing, Vertrieb oder Support arbeitet und nicht programmiert.
• Der Ablauf einmalig ist oder sich häufig ändert: eine Interessenten-spezifische Demo, ein neues Feature, ein Hilfeartikel.
• Sie ein fertiges, vertontes Video benötigen und nicht nur Rohmaterial. Ein Skript liefert Ihnen nur eine stumme Bildschirmaufnahme; Vertonung, Zooms und Bearbeitung liegen weiterhin bei Ihnen.

Die 2 Ansätze lassen sich gut kombinieren. Clevera akzeptiert hochgeladene Videos, einschließlich stummer Aufnahmen, sodass ein Team einen Ablauf mit Playwright in CI aufzeichnen und die Datei hochladen kann, um das vertonte How-to oder die Demo zu generieren.

Grenzen, die Sie vor dem Start kennen sollten#

• Nur Web. Der KI-Rekorder zeichnet Websites und Web-Apps in einem Cloud-Browser auf. Er zeichnet keine Desktop-Software oder native mobile Apps auf. Verwenden Sie für Desktop-Abläufe die Clevera-Desktop-App (macOS oder Windows); für Web-Abläufe, die Sie lieber selbst anklicken möchten, die Chrome-Erweiterung.
• Nur erreichbare Apps. Kein localhost, VPN-only Staging oder IP-beschränkte Tools.

Beginnen Sie mit einem Ablauf, den Ihr Support-Team jede Woche erklärt, auf einem Demo-Konto, mit einer nummerierten Anweisung, die jede Schaltfläche benennt. Beobachten Sie den ersten Durchlauf, notieren Sie, wo Sie eingreifen mussten, und lassen Sie diese Notizen in die Anweisung für den nächsten Durchlauf einfließen.