Ich sitze vorm Rechner, das Mikrofon ist perfekt ausgerichtet, und ich drücke zum fünften Mal auf „Record“. Wieder versprochen. Wieder im falschen Menü geklickt. Wieder viel zu weit ausgeholt, statt einfach nur den verdammten neuen Button zu erklären. Wenn man Software baut, muss man sie auch erklären. Aber ganz ehrlich? Ich hasse es, How-To-Videos aufzunehmen.

Wer Software verkauft, braucht Dokumentationen. Früher nannte man das staubig „Handbuch“, heute heißt es „Doku“. Das Problem ist nur: Der Ersteller ist genervt, und der Nutzer liest es am Ende sowieso nicht.

Den reinen Text-Teil habe ich für mein Lizard-Doku schon lange geknackt. Meine KI versteht den Code, formatiert alles sauber in Markdown und pusht die Updates vollautomatisiert direkt ins Git. Das ist nett für Entwickler. Aber die Realität draußen auf der Baustelle oder in der Werkstatt sieht anders aus: Ein Prüfer oder Handwerker wälzt kein 20-seitiges Wiki. Er will ein kurzes, knackiges Video sehen, das ihm in 60 Sekunden zeigt, wie er sein Problem löst.

Also saß ich da, habe den Screen aufgenommen und losgequatscht. Das Ergebnis? Absolut nicht standardisiert, völlig abhängig von meiner Tagesform und oft viel zu langatmig. Ein klassischer Scheißprozess, der durch mich als Flaschenhals blockiert wurde. Ein klassischer Fall vom Herr-Müller-Prinzip: Wenn nur ich gute Videos machen kann (an guten Tagen), skaliert mein System nicht.

KI Videoerstellung: Der Weg vom Mikrofon zum Code

Ich dachte mir: Das muss doch eleganter gehen. Wenn der Mensch vor dem Mikrofon das Problem ist, muss ich ihn aus der Gleichung nehmen. Also habe ich das Tüftler-Gen angeworfen und verschiedene Werkzeuge zusammengeflanscht, um einen automatisierten „HowTo-Lizard“ zu bauen.

Mein Plan war simpel: Ich spreche nicht mehr in eine Kamera, und ich bewege auch keine Maus mehr. Stattdessen schreibe ich das Drehbuch als Code. In einer simplen YAML-Datei beschreibe ich den gesamten Flow. Ganz nüchtern: Klick hier, warte auf das Event, öffne dieses Dropdown und erzähl parallel dazu diesen Satz.

Playwright und ElevenLabs: Wenn der Browser zum Geisterfahrer wird

Die wirkliche Magie passiert dann in meiner Pipeline. Mein Tool schnappt sich das geschriebene YAML-Szenario und wirft Playwright an. Für alle Nicht-Entwickler: Playwright ist ein Werkzeug, das einen Webbrowser fernsteuert. Wie von Geisterhand klickt es sich exakt nach Plan durch meine App. Kein Zittern mit der Maus, kein nervöses Suchen nach dem richtigen Tab, immer die exakt gleiche, flüssige Geschwindigkeit.

Während Playwright unermüdlich klickt, schicke ich die Texte für die Tonspur per API an ElevenLabs. Da kommt ein sauberes, professionelles KI-Voiceover zurück, das auf die Millisekunde genau zu den Aktionen auf dem Bildschirm passt. Keine Versprecher, kein Räuspern.

Am Ende jage ich das Ganze durch ffmpeg – quasi das Schweizer Taschenmesser für Videobearbeitung im Terminal. Ich lege einen geschmeidig animierten Mauszeiger über das Video, bastle schicke Titelkarten im „Frosted Glass“-Look dazu und packe ein kleines HUD mit Status-Infos in die Ecke. Zack – aus einer langweiligen Textdatei ist ein perfekt produziertes MP4-Video geworden.

Software Dokumentation automatisieren: Der Moment, in dem es Klick macht

Das sah schon mega cool aus. Ich hatte standardisierte Videos auf Knopfdruck. Aber nach dem fünften Video dachte ich mir: Ganz ehrlich, YAML-Szenarien per Hand zu tippen ist immer noch lästig. Es ist zwar weniger peinlich als mich selbst aufzunehmen, aber es ist am Ende immer noch mühsame Handarbeit.

Ich brauchte also noch die Kirsche auf der Sahne. Warum soll ich der KI sagen, was sie klicken soll, wenn sie doch ohnehin weiß, wie die Software funktioniert?

Also habe ich der KI einen eigenen Claude Code Skill verpasst. Dieser Skill kennt meinen Source Code in- und auswendig und hat direkten Zugriff auf die interne Doku. Wenn ich jetzt ein neues Feature release, liest die KI den Code, versteht den Ablauf und baut die YAML-Szenarien direkt selbst. Der Recorder übernimmt den Rest. Das System ist in sich geschlossen: KI liest Code → KI schreibt Drehbuch → Playwright filmt → ElevenLabs spricht → ffmpeg rendert.

Hier sind die wichtigsten Punkte, die ich beim Software Dokumentation automatisieren gelernt habe:

• Standardisierung schlägt Tagesform: Automatisierte Videos haben immer die exakt gleiche Qualität, das gleiche Pacing und die gleiche Tonalität.
• Wartbarkeit ohne Frust: Ändert sich ein Button in der Oberfläche, muss ich kein Video mühsam neu aufnehmen und schneiden. Ich stoße einfach das Skript neu an, und drei Minuten später liegt das fertige, aktualisierte Video auf dem Server.
• KI ist der Dirigent, nicht nur der Texter: Die Kombination aus LLMs, UI-Testing-Tools wie Playwright und Voice-Generatoren baut echte Brücken von der reinen Textwelt in visuelle Endprodukte.

Für mich ist das echte Digitalisierung. Ich habe nicht versucht, mein Mikrofon zu verbessern oder mir einen Teleprompter hinzustellen. Ich habe den Prozess komplett auf Null gesetzt und so umgebaut, dass der Mensch sich nicht mehr damit rumärgern muss. Das ist exakt das gleiche Mindset, mit dem ich auch die digitale Betriebsmittelverwaltung angehe: Mach, dass es geht – und zwar automatisch.

Wie dokumentiert ihr eure Prozesse und Features? Sitzt ihr noch mit dem Headset vorm Bildschirm und schneidet euch in Premiere die Nächte um die Ohren? Schreibt mir mal, ich zeige euch gerne, wie mein HowTo-Lizard in Action aussieht.

hier mal meine Readme dazu:

Lizard Recorder

Automatische Demo-Videos und How-To-Tutorials für die Lizard App
Deklarative YAML-Szenarien • Playwright • ElevenLabs Voiceover • ffmpeg

Was ist das?

Der Lizard Recorder nimmt automatisierte Screen-Recordings der Lizard Filament-App auf. Du beschreibst den Flow als YAML, der Recorder spielt ihn mit animiertem Cursor ab und produziert ein Video.

Zwei Modi:

Schnellstart

# Setup
npm install && npm run install-browsers
cp .env.example .env   # Credentials eintragen

# Ein Video aufnehmen
npm run record -- howto-create-partner

# Alle Tutorials auf einmal
npm run record -- all-howtos

# Debug: sichtbarer Browser
HEADED=1 npm run record -- howto-create-partner

Konfiguration

.env

LIZARD_BASE_URL=https://app.go-lizard.com
LIZARD_EMAIL=...
LIZARD_PASSWORD=...

# Nur für How-To Videos:
ELEVENLABS_API_KEY=...
ELEVENLABS_VOICE_ID=...

lizard.config.yaml

Pfade zum Filament-Projekt und zur Feature-Doku (für die Claude-Skills):

app:
  repo: /pfad/zum/lizardpro
  filament_path: app/Filament/Owner
docu:
  path: /pfad/zur/doku

Szenario-Typen

Demo-Flow

Einfaches Screen-Recording ohne Audio.

name: dashboard-flow
description: Login, Filter setzen, Items öffnen

steps:
  - login
  - wait: 1000
  - select.open: Partner
  - select.pick: Betriebswert GmbH
  - wait: 4000
  - stat.click: Betriebsmittel
  - wait.url: /items
  - wait: 2000

Ausgabe: videos/dashboard-flow.webm

How-To Tutorial

Video mit Titelkarte, Voiceover und Musik. Aktiviert durch das title-Feld.

name: howto-create-partner
title: "Wie erstelle ich einen Partner?"
music: Tech-Noir.mp3
fadeOut: 1.5

steps:
  - login
  - wait.dashboard

  - narrate: |
      In Lizard ist ein Partner jede externe Partei,
      mit der du Geschäftsbeziehungen pflegst.

  - click.text: Partner
    narrate: Wir öffnen die Partnerliste.
  - wait.url: /partners

  - fill:
      Firma: Demo Partner GmbH
    narrate: |
      Der Firmenname erscheint später auf den Prüfberichten.

  - click.button: Erstellen
    narrate: Mit einem Klick ist der Partner angelegt.
  - wait.livewire

Ausgabe: videos/howto-create-partner.mp4

Master-Szenario (Batch)

Führt mehrere Szenarien sequentiell aus, jedes mit eigener Browser-Session.

name: all-howtos
scenarios:
  - howto-create-partner
  - howto-zusammenarbeit
  - howto-dashboard

npm run record -- all-howtos

═══ [1/3] howto-create-partner ═══
Done in 108.5s → videos/howto-create-partner.mp4

═══ Summary ═══
  ✓ howto-create-partner (108.5s)
  ✓ howto-zusammenarbeit (95.2s)
  ✓ howto-dashboard (42.1s)
3 succeeded, 0 failed, total 245.8s

Titelkarte

┌──────────────────────────────┐
│ 🦎                           │
│                              │
│   ┌──────────────────────┐   │
│   │ Wie erstelle ich     │   │
│   │ einen Partner?       │   │
│   └──────────────────────┘   │
│                              │
│     ░░░ login blur ░░░       │
└──────────────────────────────┘

Action-Katalog

Navigation

Filament-Komponenten

Interaktion

Video-Overlays

Jeder Step kann optional narrate: tragen -- die Narration feuert vor der Aktion und der Runner wartet auf das Clip-Ende.

Howto-Felder

Architektur

                    ┌─────────────┐
                    │  YAML File  │
                    └──────┬──────┘
                           │
              ┌────────────┼────────────┐
              │            │            │
         Demo-Flow    How-To       Master
         (no title)   (title)    (scenarios)
              │            │            │
              │     ┌──────┴──────┐     │
              │     │  ElevenLabs │     │
              │     │  TTS v3    │     │
              │     └──────┬──────┘    loops
              │            │            │
        ┌─────┴────────────┴─────┐      │
        │   Playwright Browser   │◄─────┘
        │  + Cursor Animation    │
        │  + Title Card Overlay  │
        │  + HUD Overlay         │
        └──────────┬─────────────┘
                   │
              raw.webm
                   │
         ┌─────────┴─────────┐
         │  ffmpeg pipeline   │
         │  - tpad (freeze)   │
         │  - adelay + amix   │
         │  - fade to black   │
         │  - H.264 + AAC     │
         └─────────┬──────────┘
                   │
            ┌──────┴──────┐
            │  .webm/.mp4 │
            └─────────────┘

Projektstruktur

lizard-recorder/
├── assets/                   Musik, Fonts, Logo
│   ├── Tech-Noir.mp3
│   ├── Oxanium-*.ttf
│   └── lizard.svg
├── scenarios/                YAML-Szenarien
│   ├── all-howtos.yaml       Master (Batch)
│   ├── howto-*.yaml          How-To Tutorials
│   └── *-flow.yaml           Demo-Flows
├── src/
│   ├── cli.ts                Entry-Point
│   ├── recorder.ts           Recording + Howto-Pipeline
│   ├── yaml-scenario.ts      YAML-Parser + Step-Runner
│   ├── actions.ts            Action-Registry
│   ├── audio/
│   │   ├── elevenlabs.ts     TTS-Synthese
│   │   └── mix.ts            ffmpeg Audio/Video-Mux
│   ├── overlays/
│   │   ├── titleCard.ts      Frosted-Glass-Titelkarte
│   │   ├── cursor.ts         Animierter Mauszeiger
│   │   └── hud.ts            HUD-Overlay
│   └── lizard/               Filament-spezifische Helfer
├── videos/                   Output
├── .claude/skills/           Claude Code Skills
│   └── lizard-recorder/
└── lizard.config.yaml        Pfade zu App-Repo + Doku

Debugging

TypeScript-Fallback

Für komplexe Flows: scenarios/<name>.ts mit export default async (page: Page) => void.

Built with ❤️ by Wolf+Strauss Solutions