Tutorial-Video

Was macht Tutorial-Video?

Verwandelt „Erkläre den Leuten, wie man das benutzt“ in einen Ordner mit fertigen MP4-Dateien. Claude fungiert als Regisseur, Drehbuchautor, Bediener und Editor. Der Benutzer muss nur den Plan und das Drehbuch genehmigen und sich das Ergebnis ansehen.

So funktioniert es (und warum gerade so)

Werkzeug verstehen → Interview → Drehbuch (Genehmigung) → Probe ohne Aufnahme
   → Bildschirm kalibrieren → jedes Video aufnehmen → tut prepare → tut plan/stills → tut render → ausgabe/

Drei Probleme bestimmen die Architektur. Verstehen Sie sie, denn sie erklären fast alle Regeln unten:

1. Die Klicks der Erweiterung bewegen nicht die Systemmaus. Die Bildschirmaufnahme hat keinen Cursor. Deshalb zeichnet ein in die Seite injiziertes recorder.js auf, wo und wann jeder Klick, Tastendruck und jede Navigation stattfand. Der Cursor, die Klickwelle, der Zoom und die Callouts werden später in der Bearbeitung hinzugefügt. Da die Bearbeitung die Zukunft kennt, gleitet der Cursor vor dem Klick zur Schaltfläche und die Kamera zoomt vor der Aktion heran.
2. Video und Ereignisse synchronisieren. Am Anfang und Ende jedes Takes färbt __tut.flash() die Seite für eine halbe Sekunde magenta ein. Der Editor findet diesen Blitz im Video und ermittelt daraus die exakte Zeit (Seitenuhr → Videozeit) und das genaue Seitenrechteck auf dem Bildschirm – ohne Retina-Koordinaten oder mehrere Monitore berechnen zu müssen.
3. Claude ist langsam zwischen den Aktionen. Das Rohvideo enthält lange Leerlaufphasen. Der Editor schneidet diese Phasen heraus (identische Frames, daher unsichtbar) und beschleunigt Wartezeiten mit Bewegung, wobei das Endergebnis so lange eingefroren wird, wie die Untertitel zum Lesen brauchen. Also: Keine Eile während der Aufnahme. Eile führt nur zu Fehlern.

Im Folgenden verwendete Pfade:

• SKILL_DIR: der Ordner dieses Skills (wo diese Datei liegt).
• TUT="$SKILL_DIR/scripts/tut", REC="$SKILL_DIR/scripts/rec.sh", WIN="$SKILL_DIR/scripts/chrome-window.sh".
• SERIE: der Serienordner, standardmäßig ./tutoriais/<serien-slug>/ im aktuellen Verzeichnis (fragen Sie den Benutzer, ob er einen anderen Ort bevorzugt).

Jeder tut-Befehl gibt am Ende eine Zeile RESULT {json} aus. Lesen Sie diese Zeile, um den nächsten Schritt zu bestimmen.

Phase 0: Voraussetzungen (einmal pro Sitzung)

1. Führen Sie $TUT doctor aus. Beim ersten Mal installiert es die Engine (Remotion) und lädt beim ersten Rendern einen headless Chrome herunter (~140 MB).
2. Laden Sie die Werkzeuge von Claude in Chrome mit einem einzigen ToolSearch-Aufruf: select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__javascript_tool,mcp__claude-in-chrome__find,mcp__claude-in-chrome__read_page. Wenn die Erweiterung nicht verbunden ist, bitten Sie den Benutzer, /chrome auszuführen. Ohne sie gibt es keine Aufnahme.
3. Informieren Sie den Benutzer einmal darüber, was auf seinem Rechner passiert: macOS wird um Erlaubnis für Bildschirmaufnahme für das Terminal-App und Automation für Chrome bitten (um das Fenster zu positionieren). Während der Aufnahmen sollte er Nicht stören aktivieren und weder Maus noch Fenster berühren.

Phase 1: Das Werkzeug verstehen

Bevor Sie etwas fragen, studieren Sie das, was gezeigt werden soll. Gute Fragen hängen davon ab.

• Wenn es ein lokales Projekt gibt (Repository): lesen Sie die README und die Dokumentation, die Routen und Seiten, das Navigationsmenü, die Formulare und das Onboarding. Listen Sie die Funktionen aus Benutzersicht auf („Stelle erstellen“, „Kollegen einladen“), nicht aus Code-Sicht.
• Wenn es eine URL ist: navigieren Sie mit Claude in Chrome, verwenden Sie read_page mit filter: "interactive" auf den Hauptseiten und öffnen Sie die Menüs.

Ergebnis: eine kurze Aufgabenkarte mit den Aufgaben, die das Publikum erledigen kann, samt Startbildschirm jeder Aufgabe. Details in references/roteiro.md.

Phase 2: Interview und Serienplan

Verwenden Sie AskUserQuestion. Jede Frage sollte konkrete Optionen aus der Karte von Phase 1 enthalten sowie eine Empfehlung. Der Benutzer soll sich die Antwort nicht ausdenken müssen. Entscheiden Sie gemeinsam:

• Zielgruppe und Niveau (wer sieht zu, was weiß es bereits).
• Ziel der Serie (Onboarding, Support-Reduzierung, Vertriebs-Demo, internes Training).
• Was gelehrt werden soll: Multiselect mit den Aufgaben aus der Karte.
• Anzahl der Videos. Schlagen Sie selbst vor: Ein Video = ein Ergebnis („Wie veröffentliche ich eine Stelle“), 30 s bis 3 min, 3 bis 8 Schritte.
• Visuelles: Preset aurora (dunkel), grafite oder claro, Markenfarbe und Logo.
• Aufnahmeumgebung: URL, bereits im Chrome eingeloggtes Demo-Konto, fiktive Daten, was niemals gezeigt werden darf.

Zeigen Sie danach den Serienplan (Tabelle: Nr., Titel, Ergebnis, geschätzte Dauer) und warten Sie auf das OK.

Phase 3: Drehbuch (Genehmigungs-Schleuse)

Schreiben Sie SERIE/serie.json und ein SERIE/videos/<NN-slug>/roteiro.json pro Video, gemäß den Schemata und Textregeln aus references/roteiro.md. Die wichtigsten Punkte:

• Jeder Schritt hat einen imperativen und kurzen titulo (was groß auf dem Bildschirm erscheint), einen optionalen texto (wo oder warum), die acoes (für Sie auszuführen) und ein resultado_esperado.
• Schreiben Sie die Namen der Oberfläche exakt so, wie sie auf dem Bildschirm erscheinen. Der Zuschauer sucht genau diesen Text.

Führen Sie $TUT validate SERIE aus und zeigen Sie dem Benutzer eine lesbare Tabelle jedes Drehbuchs. Nehmen Sie nichts auf vor dem OK. Neuaufnahmen kosten viel mehr als Neuschreiben.

Phase 4: Probe (ohne Aufnahme)

Führen Sie für jedes Video die Schritte im Chrome ohne Aufnahme aus. So entdecken Sie funktionierende Selektoren und Referenzen, unerwartete Popups, langsame Ladezeiten und was vorher bereit sein muss (Daten, Login). Danach:

• Setzen Sie das System zurück in den Ausgangszustand (löschen Sie, was Sie in der Probe erstellt haben, sofern der Benutzer zustimmt).
• Wenn ein Login nötig ist, bitten Sie den Benutzer, sich manuell einzuloggen. Geben Sie niemals Passwörter ein und zeichnen Sie niemals Login-Bildschirme auf.
• Passen Sie das Drehbuch an, wenn etwas nicht stimmt (und informieren Sie den Benutzer über die Änderung).

Phase 5: Fenster vorbereiten und kalibrieren (pro Serie oder wenn sich das Fenster ändert)

Folgen Sie references/gravacao.md, Abschnitt „Fenster und Kalibrierung“. Kurz gefasst:

1. Injizieren Sie das recorder.js.
2. Führen Sie __tut.windowPlan(1280, 720) aus. Verwenden Sie den Marker und die zurückgegebenen Grenzen, um $WIN <marker> <bounds...> auszuführen.
3. Nehmen Sie einige Sekunden im Vollbildmodus mit einem Blitz auf: $REC start SERIE/.tut/calibracao --full → __tut.flash() → $REC stop ....
4. Führen Sie $TUT calibrate SERIE aus und sehen Sie sich das erzeugte viewport.png an.

Es muss nur die Seite zeigen, ohne Browser-Leiste, ohne andere Fenster, ohne Ränder oder Erweiterungs-Warnungen. Falls ein Rand sichtbar ist, konfigurieren Sie insets in captura.json.

Phase 6: Jedes Video aufnehmen

Vollständiges Protokoll in references/gravacao.md. Das Grundgerüst eines Takes:

$REC start SERIE/videos/<id>/take-1          # nimmt nur den Seitenbereich auf (Ausschnitt aus Kalibrierung)
javascript_tool: __tut.flash()                # Start-Blitz (Synchronisation)
für jeden Schritt:
  javascript_tool: __tut.mark('start:<schritt>')
  führen Sie die Aktionen aus (computer: left_click / hover / key; Texteingabe mit __tut.type)
  heben Sie das Wichtige hervor: __tut.callout('text oder selektor', 'kurze beschriftung')
  warten Sie, bis das Ergebnis auf dem Bildschirm erscheint
  javascript_tool: __tut.mark('end:<schritt>')
javascript_tool: __tut.flash()                # End-Blitz (korrigiert Uhren-Abweichung)
javascript_tool: __tut.dump()  →  $TUT save-events SERIE/videos/<id>/take-1   (JSON via stdin)
$REC stop SERIE/videos/<id>/take-1
$TUT prepare SERIE/videos/<id>/take-1

Regeln, die Neuaufnahmen vermeiden:

• Nach jedem vollständigen Seitenladen den Recorder neu injizieren. Die bisherigen Ereignisse bleiben in der Sitzung des Tabs gespeichert. Wechseln Sie zu einer anderen Domain, führen Sie dump und save-events aus.
• Wenn ein Schritt schief geht, verwenden Sie __tut.mark('abort:<schritt>'), kehren Sie zum vorherigen Zustand zurück und beginnen Sie neu mit start:<schritt>. Der letzte vollständige Versuch zählt. Stoppen Sie die Aufnahme nicht deshalb.
• Zum Tippen bevorzugen Sie __tut.type('text') nachdem Sie in das Feld geklickt haben (der Text erscheint Buchstabe für Buchstabe). computer type lässt den Text auf einmal erscheinen.
• Zum Scrollen bevorzugen Sie __tut.scrollTo('text oder selektor') (sanftes Scrollen). Pausen sind kostenlos, da der Editor sie herausschneidet. Keine Eile.
• Lösen Sie kein alert / confirm aus: Sie blockieren die Erweiterung. Wenn ein Schritt „Löschen“ erfordert, informieren Sie den Benutzer vorher.

Phase 7: Bearbeiten und überprüfen

$TUT prepare SERIE/videos/<id>/take-N    # schneidet, synchronisiert, misst Bewegung → take.json
$TUT stills  SERIE <id>                  # Plan + Stills-Raster in videos/<id>/qc/stills.jpg

Sehen Sie sich das Stills-Raster an (Read auf dem Bild), bevor Sie rendern. Prüfen Sie:

• der Cursor und die Klickwellen treffen das richtige Element;
• die Callouts umschließen das Element;
• der Untertitel passt zu dem, was auf dem Bildschirm zu sehen ist;
• der Zoom befindet sich nicht in einem leeren Bereich;
• es sind keine sensiblen Daten sichtbar.

Korrigieren Sie das Drehbuch (Text) oder nehmen Sie nur den problematischen Schritt in einem take-2 neu auf. Der Plan verwendet den neuesten Take, der den Schritt vollständig enthält. Dann:

$TUT render SERIE <id>                   # → SERIE/entrega/<id>.mp4 + Kapitel + Kontaktbogen

Öffnen Sie den Kontaktbogen (entrega/<id>.sheet.jpg) für eine letzte Prüfung. Visuelle Anpassungen (Thema, Zoom, Musik, Intro und Outro) sind in references/edicao.md.

Phase 8: Auslieferung

1. Führen Sie $TUT deliver SERIE aus. Es erzeugt entrega/LEIAME.md mit Titeln, Dauern und Kapiteln, die für YouTube bereit sind.
2. Zeigen Sie dem Benutzer den Ordner entrega/ und eine Zusammenfassung (Videos, Dauern, abgedeckte Inhalte).
3. Wenn Sie Dateien senden können, senden Sie die erste MP4.
4. Fragen Sie, bevor Sie $TUT clean SERIE ausführen, das die Rohaufnahmen raw.mkv löscht und Speicher freigibt.

Grundsätze

• Das Drehbuch befiehlt; die Aufnahme gehorcht. Weicht die tatsächliche Oberfläche vom Drehbuch ab, stoppen Sie und passen Sie das Drehbuch mit dem Benutzer an. Improvisieren Sie nicht während der Aufnahme.
• Ein Schritt = eine Idee auf dem Bildschirm. Wenn der Untertitel zwei Sätze benötigt, sind es wahrscheinlich zwei Schritte.
• Zeigen, nicht erzählen. Verwenden Sie den Callout, um auf das Element zu zeigen. Der Untertitel benennt nur die Aktion.
• Standardmäßig Privatsphäre. Nehmen Sie nur den Seitenbereich auf, verwenden Sie ein Demo-Konto mit fiktiven Daten und zeigen Sie keine Query-Strings in der Adressleiste an. Schließen Sie vor der Aufnahme alles, was nicht erscheinen soll.
• Überprüfen Sie das Ergebnis mit eigenen Augen. Stills und Kontaktbogen existieren, damit Sie hinschauen. Sagen Sie dem Benutzer nicht, dass das Video gut ist, ohne es selbst gesehen zu haben.

Referenzen

• references/roteiro.md: Werkzeugerkundung, Serienentwurf, Interviewfragen, Schemata von serie.json und roteiro.json, Textregeln, Beispiele.
• references/gravacao.md: Fenster, Kalibrierung, Take Schritt für Schritt, API von __tut, Fehlerbehebung und Fallstricke von Claude in Chrome und macOS.
• references/edicao.md: Wie der Editor Schnitte, Zoom und Cursor festlegt, Optionen für Thema und Audio, QC-Checkliste und Problemlösung.