nolan

Was macht nolan?

Ein Regisseur drückt nicht auf Aufnahme und hofft das Beste. Er storyboardet die Einstellungen, kadriert jede einzelne und dreht vollständige Takes. nolan macht das für Software-Demos: Es verwandelt ein Feature in ein Storyboard, steuert Ihre echte Anwendung auf dem Bildschirm, erzählt jeden Schritt wie ein Produktmanager, der das Produkt einem Benutzer zeigt, und nimmt ein sauberes Video pro Szene auf.

Das Ergebnis ist eine Demo, kein Rauchtest – die Art von Clip, die man auf eine Landing Page setzt oder an einen Kunden schickt, bei der ein Erstzuschauer sowohl was passiert als auch warum es wichtig ist versteht.

Wann dieses Skill verwendet werden sollte

Verwenden Sie es immer dann, wenn die eigentliche Aufgabe darin besteht, „ein ansehbares Video dieses Produkts zu produzieren, das etwas tut, für eine Person, die es noch nie gesehen hat“. Dazu gehören Launch-Clips, Feature-Showcases, Hero-Videos für Landing Pages, Onboarding-Walkthroughs und Release-Notes-GIFs.

Greifen Sie nicht darauf zurück, um einen Ablauf zu testen – das ist ein End-to-End-Test, der knapp und kopflos sein sollte. nolan optimiert auf das Gegenteil: Lesbarkeit, Tempo und Erzählung für ein menschliches Publikum.

Der Workflow – drei Phasen

Phase	Sie fragen…	nolan produziert	Referenz
🎬 Storyboard	„Plane eine Demo von Feature X“	Ein szenenweises Storyboard (JSON): Titelcards, Bildunterschriften, die genauen Klicks/Eingaben und worauf gewartet werden soll	reference/storyboard.md
🎥 Aufnahme	„Nimm es auf“	Ein .webm pro Szene, live gegen die laufende App mit eingeblendeten Titelcards + Untertiteln gesteuert	reference/recording.md
✨ Nachbearbeitung	„Mach das ansehbar“	Ein überprüfter, neu aufgenommener Take mit festgelegtem Tempo, vollständigen Aktionen, lesbaren Bildunterschriften und korrigiertem Bildausschnitt	reference/polish.md

Die Phasen sind verkettet: Storyboard → Aufnahme → Zurücksehen → Nachbearbeitung → Neuaufnahme. Das Storyboard ist die Quelle der Wahrheit; die Aufnahme ist deterministisch daraus.

Die vier Grundsätze (nicht verhandelbar, jedes Video)

Diese unterscheiden eine Demo von einem Screenshot. Sie sind nicht optional.

1. Produktmanager-Stimme, kein Rauchtest. Erzählen Sie den Nutzen für den Benutzer – was er damit tun kann und warum das gut ist – niemals die Mechanik des Testens. Jede Bildunterschrift liest sich, als würde ein PM einen Kunden durch das Produkt führen. Siehe reference/pm-voice.md.

2. Alltägliche, nachvollziehbare Inhalte auf dem Bildschirm. Nur Eingaben, die ein allgemeines Publikum bereits versteht, werden in die Benutzeroberfläche eingegeben – normale Fragen, Beispiele aus der realen Welt („Hafermilch kaufen“, „eine Dankesnachricht an einen Kollegen“). Niemals Nischenjargon, interne Codenamen oder „fremde“ Konzepte, die der Zuschauer entschlüsseln muss. Zugänglichkeit hat Priorität.

3. Zeigen, dann sagen. Jede Szene beginnt mit einer ganzseitigen Titelkarte (Produkt + Szenenname) und enthält eingebrannte Untertitel (ein oberes Banner), die jeden Schritt erzählen, während er passiert, damit kein Zuschauer je verloren ist. Siehe reference/captions.md.

4. Vollständige Takes in der echten App. Steuern Sie das tatsächliche Produkt live – sichtbare, menschlich getaktete Eingaben und echte Klicks – und warten Sie, bis jede Aktion vollständig abgeschlossen ist, bevor Sie fortfahren, halten Sie dann inne, damit es lesbar ist. Unterbrechen Sie niemals eine Antwort oder einen Übergang mitten im Ablauf. Die Länge dient der Vollständigkeit.

Standardvorgehen

1. Umfang der Demo festlegen. Welches Produkt, welche(s) Feature(s), unter welcher URL ist es erreichbar und wer ist die Zielgruppe? Bestätigen Sie, dass die App läuft und erreichbar ist (nolan filmt eine live App; es simuliert keine).
2. Storyboard. Entwerfen Sie storyboard.json – eine Szene pro Idee, jede mit einer Titelcard, geordneten Schritten (type / click / select / wait) und Bildunterschriften in PM-Stimme. Verwenden Sie assets/storyboard-template.json als Vorlage. Halten Sie die Eingabeaufforderungen generisch (§2).
3. Probelauf der Selektoren. Bestätigen Sie, dass die Platzhalter / Rollen / Texte, die das Storyboard anvisiert, tatsächlich im DOM vorhanden sind, bevor Sie mit dem vollständigen Dreh beginnen (ein falscher Selektor verdirbt einen ganzen Take). reference/recording.md behandelt robuste Selektion.
4. Aufnahme. Führen Sie scripts/record.py storyboard.json [scene ...] aus. Es blendet die Bildunterschriften-/Titelkarten-Überlagerung ein, steuert jede Szene, wartet auf deren Abschluss und speichert ein .webm pro Szene im out_dir des Storyboards.
5. Zurücksehen und nachbearbeiten. Überprüfen Sie jeden Grundsatz anhand von reference/polish.md – ist etwas abgeschnitten, enthält eine Bildunterschrift Jargon, wirkt die Eingabe menschlich, ist jede Aktion vollständig? Korrigieren Sie das Storyboard und nehmen Sie nur die betroffenen Szenen neu auf.
6. Ausliefern. Berichten Sie, wo die Dateien gelandet sind, ihre Größen/Dauern und eine einzeilige Beschreibung pro Szene. Bieten Sie ein Poster-Frame oder GIF an, falls nützlich.

Von nolan erwartete Einrichtung

• Python + Playwright (pip install playwright && playwright install chromium). scripts/record.py verwendet die sync API und record_video_dir, um .webm aufzunehmen.
• Eine laufende App unter einer URL, die die Maschine erreichen kann (lokaler Dev-Server oder eine bereitgestellte Umgebung, die Sie filmen dürfen).
• Realistische, nicht-sensible Demodaten, die in der App geladen sind – siehe Grundsatz §2 und den Datenhinweis in SECURITY.md. Filmen Sie niemals echte Kundendaten oder Geheimnisse.
• Optional – gesprochene Erzählung. Standardmäßig ist die Demo stumm (Bildunterschriften tragen sie). Um einen menschlich klingenden Voiceover hinzuzufügen, fügen Sie einen voice-Block zum Storyboard und vo-Zeilen zu den Schritten hinzu; dies erfordert ffmpeg (brew install ffmpeg) plus einen TTS-Provider – ElevenLabs / OpenAI / Deepgram (API-Key, am menschlichsten), Piper (offline, Open Source), macOS say (kostenlos, roboterhaft) oder jedes Tool über eine command-Vorlage. Siehe reference/narration.md.

Siehe reference/recording.md für die Details des Harness, die Überlagerungstechnik und die Storyboard-Schritt-Referenz.

Erzählung hinzufügen (optional)

Die Erzählung ist deaktiviert, es sei denn, das Storyboard enthält einen voice-Block. Wenn jemand nach Audio / einem Voiceover / danach fragt, dass es „menschlich klingt“:

1. Fragen Sie nach dem Anbieter. Für wirklich menschliches Audio verwenden Sie einen Cloud-Anbieter und bestätigen Sie, dass der Benutzer den API-Key hat (oder hinzufügt): ELEVENLABS_API_KEY, OPENAI_API_KEY oder DEEPGRAM_API_KEY. Sie können auch command auf ihr eigenes TTS-Tool verweisen.
2. Wenn sie keinen Key haben, bieten Sie die kostenlosen/Offline-Fallbacks an (Piper für ordentliche Qualität, macOS say für null Einrichtung, aber roboterhaft) – oder "provider": "auto", um das Beste verfügbare zu verwenden.
3. Wenn sie keines wollen, lassen Sie voice weg (oder "provider": "none") – das Video nimmt stumm auf, genau wie zuvor.

Schreiben Sie dann vo-Zeilen in derselben PM-Stimme wie die Bildunterschriften und nehmen Sie wie gewohnt auf; record.py synthetisiert und mischt das Audio pro Szene. Details: reference/narration.md.

Ausgabeprinzipien

• Ein Video pro Szene, benannt als NN-slug.webm, sodass Szenen unabhängig neu aufgenommen werden können.
• Leiten Sie Ihre Übergabe mit dem ansehbaren Ergebnis ein (was jeder Clip zeigt), dann die Mechanik (Pfade, Größen, wie man neu aufnimmt).
• Bevorzugen Sie mehrere kurze, vollständige Szenen gegenüber einem langen Clip – leichter neu aufzunehmen und wiederzuverwenden.
• Wenn ein Take abgebrochen werden musste oder eine Bildunterschrift ein Platzhalter ist, sagen Sie es – ein ehrliches „Szene 3 muss noch einmal neu aufgenommen werden“ ist besser, als eine abgeschnittene Demo auszuliefern.