Claude hat ein 18-minütiges Tutorial zu meiner App gemacht

Ich dachte, das Entwickeln und Ausrollen eines internen KI-Assistenten wäre der beeindruckende Teil. Stellt sich heraus: Das Tutorial und die Anleitung, die größtenteils von Claude erstellt wurden, haben mich umgehauen.

Claude klickte sich durch jeden Screen unserer internen Anwendung, tippte die Demo-Prompts ein, vertonte jeden Abschnitt mit einer Stimme, die nicht meine war, baute die gebrandeten Titelkarten und transkribierte das Ganze in zwei Sprachen. Während der gesamten Aufnahme saß ich meistens nur da und sah zu, wie meine eigene App sich selbst vorführte.

Wir brauchten Onboarding-Material für MemodoAI, den KI-Assistenten, den wir bei der Arbeit intern betreiben (ein selbstgehosteter LibreChat-Fork). Die Aufgabe: ein Walkthrough-Video und eine schriftliche Anleitung, damit ich nicht ständig den Tech-Support für meine Kollegen mache. Das Interessante war, wie viel davon ich abgeben konnte — und die zwei Teile, bei denen das nicht ging.

Das Tutorial selbst führt durch unser echtes internes Produkt, deshalb stelle ich nicht die vollen achtzehn Minuten auf YouTube. Was unten kommt, ist eine kurze Montage: die Intro- und Outro-Karten, die Übergangs-Bumper und Clips aus dem Walkthrough. Genug, um zu zeigen, was Claude gebaut hat.

Siehst du den Player nicht? Auf YouTube ansehen.

Was wir tatsächlich gebaut haben

Zwei Ergebnisse, eine einzige Source of Truth.

Die Source of Truth ist eine Shot List: jeder Abschnitt aufgeteilt in Action (was zu klicken oder zu tippen ist), Expected UI (was danach auf dem Bildschirm sein soll) und Capture (der Screenshot- oder Kapitelname). Wenn sich die Produkt-UI ändert, bearbeitest du diese eine Datei und nimmst nur die betroffenen Abschnitte neu auf. Das Video und die schriftliche Anleitung lesen beide aus ihr, sie können also nicht auseinanderlaufen. Diese eine Entscheidung ist der Grund, warum aus einem Video und einer Anleitung nicht zwei getrennte Wartungslasten wurden.

Alles Weitere hängt an dieser Datei: die Screenshots, das Vertonungsskript, die Kapitelliste, die Untertitel.

Eine Doku, kein Animationsfilm

Hier ist das Denkmodell, durch das sich der Rest fügte. Ein Produkt-Tutorial ist kein Motion-Graphics-Stück, sondern eine dokumentarische Bildschirmaufnahme mit einer dünnen Schicht gebrandetem Drumherum.

Diese Umdeutung ist wichtig, weil sie dir sagt, wo du Aufwand reinstecken sollst. Am Ende werden drei Spuren zusammengesetzt:

• Die Doku-Spur ist die Live-Bildschirmaufnahme. Etwa 90 % der Laufzeit.
• Die Deko-Spur ist das gebrandete Intro, die Abschnitts-Titelkarten, das Outro. Vielleicht 10 % der Laufzeit, und sie trägt etwa 90 % des wahrgenommenen Feinschliffs.
• Die Audio-Spur ist die Vertonung, eine Datei pro Abschnitt.

Jede Spur hat ihre eigene kleine Pipeline, sodass ich die Vertonung neu rendern konnte, ohne neu aufzunehmen, oder eine Titelkarte austauschen, ohne neu zu schneiden. Sie unabhängig zu halten, hat das Iterieren billig gemacht.

Claude steuerte das Live-Produkt

Wir verbanden Claude Code über die Claude-in-Chrome-Erweiterung mit dem bereits laufenden, bereits angemeldeten Browser. Ich nahm bewusst die Erweiterung statt Playwright: Die Session war schon eingeloggt, es gab also kein Auth-Setup zu betreuen. Claude konnte einfach am Live-Produkt handeln.

Während es das Live-Produkt erkundete und sich durch jeden Screen klickte, um zu sehen, welche Funktionen in unserem Deployment tatsächlich aktiv waren, machte es von jedem einen Bereichs-Screenshot mit festen 1440×900, damit alles bündig war. Wir hatten uns auf eine Struktur mit fünfzehn Abschnitten festgelegt, und die zweiunddreißig annotierten PNGs kamen passend nummeriert heraus. Aus diesen Screenshots wurde die schriftliche Anleitung gebaut.

Für das Video selbst diente diese Shot List (eine einzige Markdown-Datei, recording-script.md) zugleich als Claude Codes Aufgabenliste. Ich richtete Claude Code darauf aus, und es arbeitete sich Zeile für Zeile durch: jede Action lesen, den Klick oder Tastendruck über die Erweiterung im Live-Browser ausführen, das Ergebnis gegen die Expected UI prüfen, dann zur nächsten Zeile. Eine schlichte Markdown-Datei als Skript, ein echtes, eingeloggtes Produkt als Laufzeitumgebung.

Die Vertonung übernahm die Text-to-Speech von ElevenLabs. Achtzehn MP3s, eines pro Abschnitt, zusammen etwa zwanzig Minuten, gerendert aus einem Skript, das zum Sprechen geschrieben war, nicht zum Lesen (kurze Sätze, Satzzeichen, die das Tempo machen). Der komplette Render eines Skripts mit rund 17.000 Zeichen kostete etwa einen Dollar. Einen Satz später zu korrigieren kostet Cents.

10 % lassen es professionell aussehen

Das gebrandete Drumherum kam aus Claude Design: eine Intro-Karte mit einfliegendem Logo, ein Outro und vierzehn Abschnitts-Titelkarten. Das ist die Deko-Spur, der Teil, der aus einer soliden Bildschirmaufnahme etwas macht, das bewusst produziert wirkt. Kein Motion-Graphics-Tool, kein Designer im Spiel, direkt gegen die Marke generiert.

Was in meiner Hand blieb

Zwei Dinge, und ich nenne beide, weil „Claude hat das Video gemacht“ stillschweigend darüber hinweggeht.

Das Erste war, auf Aufnahme zu drücken. Ich habe versucht, auch das zu automatisieren, und verloren. Ein früher Versuch startete screencapture -v im Hintergrund und ließ Claude den ganzen Walkthrough durchlaufen; der Take war weg, weil dieses Tool seine Datei nicht sauber schreibt, wenn ein anderer Prozess es beendet — ein sauberer Zwölf-Minuten-Durchlauf brachte also nichts. Die Aufteilung, die funktionierte: Claude besitzt jede Bewegung auf dem Bildschirm, ein Mensch besitzt den Aufnahmeknopf in OBS. Claude geht das Skript von vorne bis hinten durch, ich starte und stoppe die Aufnahme. (Es gibt eine stärker automatisierte Zukunft, in der OBS über seine websocket-API mit benannten Kapitelmarken gesteuert wird. Lohnt sich an dem Tag, an dem das ein wiederkehrendes Ergebnis wird. Noch ist es das nicht.)

Das Zweite war der Schnitt, und den will ich nicht kleinreden. Die drei Spuren rasten nicht von allein ineinander. Ich setzte sie in Shotcut zusammen: die Bildschirmaufnahme auf der Videospur, eine Titelkarte vor jedem Kapitel, Intro und Outro an den Enden, und dann der langsame Teil — alle achtzehn Vertonungsclips so zu schieben, dass jede Zeile aus dem Off genau auf den Klick fällt, den sie beschreibt. Wenn du beruflich Videos schneidest, ist das einfach der Job, nichts Exotisches. Wenn nicht, hier die ehrliche Version: Das ist ein ganzer Tag, an dem man Clips Frame für Frame verschiebt und immer wieder schaut, ob die Synchronität stimmt. Claude lieferte jede Zutat. Das Anrichten war immer noch ich am Schnittpult.

Der eigentliche Schnitt, und der Teil, den ich von Hand gemacht habe. Die obere Videospur ist die in Abschnitte zerschnittene Bildschirmaufnahme; die grünen Streifen darunter sind die achtzehn Vertonungsdateien (section-01.mp3, section-02.mp3…); die farbigen Nadeln sind die Kapitelmarken. Das Grüne aufs Blaue auszurichten ist der Zeitfresser.

Die Transkription

Ich transkribierte den fertigen Schnitt mit whisper.cpp, keinen separaten Audio-Export, damit die Zeitstempel exakt zu dem Video passen, auf das die Kapitel zeigen. Ein Durchlauf erzeugte SRT- und VTT-Untertitel, reinen Text und token-genaues JSON, auf Englisch und Deutsch, dazu die fünfzehnteilige Kapitelliste, die die klickbaren Kapitel im In-App-Player steuert.

Wo es jetzt lebt

Das Video, das Transkript, die Kapitel und die schriftliche Anleitung tauchen alle direkt in MemodoAI auf. Die schriftliche Anleitung selbst ist eine eigenständige, zweisprachige HTML-Seite, die Claude Design aus demselben Markdown-Entwurf und denselben Screenshots gebaut hat: eine Datei, alle Assets eingebettet, Englisch und Deutsch.

Die schriftliche Anleitung: dieselben fünfzehn Abschnitte wie im Video, von Claude Design zu einer eigenständigen, zweisprachigen (EN/DE) Seite veredelt.

Alles kommt im Produkt auf einer Seite zusammen: das Video vorn, die Kapitelliste daneben, und die Untertitel, das Transkript und die schriftliche Anleitung nur einen Klick entfernt, jeweils auf Englisch oder Deutsch.

• A. Kapitelliste. Klick auf einen Eintrag, um an die Stelle im Video zu springen.
• B. Untertitel. Englisch und Deutsch.
• C. Vollständiges Transkript. Englisch und Deutsch.
• D. Schriftliche Anleitung. Englisch und Deutsch.

Die Shot List, das Vertonungsskript, die Screenshots und die kleinen Tooling-Skripte (der TTS-Renderer, der whisper-Wrapper) liegen alle im Repo, falls du die eigentliche Maschinerie sehen willst: docs/memodo-ai-tutorial auf GitHub.

Eine Person hat das alles gemacht

Tritt für einen Moment vom Video zurück, denn es sitzt auf etwas viel Größerem.

Bevor es dieses Onboarding-Material überhaupt gab, hatte ich MemodoAI selbst schon gebaut: einen dockerisierten internen KI-Assistenten mit Logging, Monitoring und Observability, mit Security und PII-Erkennung auf den ein- und ausgehenden Daten, fähig, die meisten Microsoft-Office-Dokumente zu lesen, und an unsere Microsoft-365-Umgebung angebunden. Das ist das eigentliche Produkt. Das achtzehnminütige Tutorial und die zweisprachige Anleitung waren das, was ich obendrauf gesetzt habe, als es einmal lief.

Eine Person hat beides gemacht. Vor ein paar Jahren braucht dieser Satz einen Backend-Entwickler, eine DevOps-Kraft, einen Security-Prüfer, einen Technical Writer, einen Screencaster, einen Sprecher und einen Motion Designer. Ich habe es als Ein-Mann-Armee gemacht, weil Claude die meisten dieser Rollen auf „entscheide, was du willst, dann prüf die Arbeit“ zusammengeschrumpft hat.

Ich tue nicht so, als hätte es sich von selbst erledigt. Ich habe die Architekturentscheidungen getroffen, ich habe abgefangen, was falsch zurückkam, ich habe auf Aufnahme gedrückt und das Video zusammengeschnitten. Aber der Abstand zwischen dem, was eine motivierte Person liefern kann, und dem, wofür früher ein ganzes Team nötig war, ist weitgehend geschrumpft. Dieses Video würde ich keinem Kunden geben. Fürs interne Onboarding aber ist es besser als alles, was ich allein hinbekommen hätte, und es hat nur einen Bruchteil der Zeit gebraucht.

So baust du dein eigenes

Wenn du dasselbe bauen willst, hier die ganze Pipeline, von vorne bis hinten.

1. Erkunde das Produkt live und mach dabei gleich die Screenshots. Verbinde Claude Code über die Claude-in-Chrome-Erweiterung mit deiner echten, eingeloggten App und lass es mit dir die ganze Oberfläche durchgehen. Leg eine Abschnittsstruktur fest (ich hatte fünfzehn) und mach in demselben Live-Durchgang von jedem Screen einen Bereichs-Screenshot. Aus diesen Screenshots wird später die schriftliche Anleitung gebaut.
2. Schreib die Shot List. Eine Datei, eine Zeile pro Schritt: die auszuführende Aktion, die danach erwartete UI und das festzuhaltende Asset (ein Screenshot-Name oder ein Kapiteltitel). Das ist die Single Source of Truth, die Video und Anleitung synchron hält.
3. Schreib das Vertonungsskript. Ein Block pro Abschnitt, zum Sprechen geschrieben statt zum Lesen: kurze Sätze, Satzzeichen fürs Tempo, kein „hier klicken“. Markiere die Produktionshinweise, damit sie nicht mitgesprochen werden.
4. Rendere die Vertonung. Schick das Skript an eine Text-to-Speech-API (ich habe ElevenLabs genutzt) und hol dir eine Audiodatei pro Abschnitt. Eine Zeile später zu ändern ist ein billiges Re-Render.
5. Nimm den Bildschirm auf. Lass Claude den Browser von Anfang bis Ende durch die Shot List steuern, während ein Mensch den Aufnahmeknopf in OBS bedient. Hol dir einen sauberen Take; das Zusammensetzen passiert danach.
6. Bau das gebrandete Drumherum. Generiere die Intro-Karte, das Outro und eine Titelkarte pro Abschnitt in Claude Design, an deiner Marke ausgerichtet. Das ist die dünne Schicht, die das Ganze produziert aussehen lässt.
7. Schneide das Video. In einem Editor (ich habe Shotcut genutzt) legst du die Bildschirmaufnahme auf eine Spur und die Vertonung auf eine andere, setzt vor jeden Abschnitt eine Titelkarte und schiebst das Audio so lange, bis die Stimme genau auf die Aktion fällt, die sie beschreibt.
8. Transkribiere den fertigen Schnitt. Jag das fertige Video durch whisper.cpp für Untertitel, ein reines Transkript und eine Kapitelliste. Wiederhol es für eine zweite Sprache, wenn du eine willst.
9. Schreib und veredle die Anleitung. Entwirf den Walkthrough in Markdown anhand derselben Screenshots und gib dann den Entwurf und die Bilder an Claude Design, um eine eigenständige HTML-Seite zu exportieren.
10. Stell es dahin, wo die Leute ohnehin sind. Pack Video, Transkript, Kapitel und Anleitung dorthin, wo deine Nutzer sowieso hinschauen. Bei uns ist das eine Seite im Produkt selbst.