4ndychu/natural-ai-demo-video

NAVI: natürliche KI-Demovideos

NAVI macht aus „Erstelle ein Demo von X" ein fertiges MP4 mit Untertiteln: kein Gesicht, kein Mikrofon und eine Stimme, die klingt, als würde eine Person etwas erklären, nicht etwas vorlesen.

Status: in Entwicklung. Die lokale App in ui/ ist fertig mit Beispieldaten. Die Engine (Sprachaufnahme, Timing, Aufzeichnung, Unschärfe, Rendering) wird noch gebaut. Bis sie ausgeliefert ist, teile dem Benutzer klar mit, welche Schritte du wirklich ausführen kannst und welche noch nicht verfügbar sind. Gib niemals vor, ein Schritt sei ausgeführt.

Zuerst: Prüfe, wo du läufst

NAVI muss auf dem eigenen Computer des Benutzers laufen: Es öffnet eine lokale App im Browser, öffnet ein zweites Browserfenster, in dem der Benutzer sich in einem Testkonto anmelden kann, zeichnet den Bildschirm auf und bewahrt den Schlüssel im Keychain auf. Das funktioniert in Claude Code (Terminal, IDE oder der Code-Tab der Desktop-App).

Wenn du stattdessen in einer Cloud-Sandbox läufst (ein normaler claude.ai-Chat oder eine Sitzung ohne Zugriff auf den eigenen Rechner des Benutzers), sag das sofort in ein oder zwei Sätzen: NAVI benötigt Claude Code auf seinem Computer, um aufzuzeichnen, und hier kannst du trotzdem das Skript (Sprechversion plus Untertitel) schreiben und verfeinern, damit es später aufgezeichnet werden kann. Führe keine Installationen, Aufnahmen oder ElevenLabs-Aufrufe aus der Sandbox durch.

Wann verwenden

• „Erstelle ein Demovideo / einen Walkthrough / eine Produkttour / ein Tutorial von "
• „Nimm auf, wie man in mit einer Sprecherstimme macht"
• „Wiederhole Abschnitt 3 meiner Demo", „mach es ruhiger", „verpixle die E-Mail bei 1:20"

Nicht geeignet für: Desktop-Apps, Videos mit einer echten Person vor der Kamera, Stimmklonen.

Grundregeln (immer)

1. Gib niemals Passwörter, Codes oder Schlüssel auf einer Seite ein. Ein Browser öffnet sich und der Benutzer meldet sich selbst an, idealerweise mit einem Testkonto mit gefälschten Daten.
2. Gib den ElevenLabs-Key niemals aus, protokolliere ihn nicht und übertrage ihn nicht ins Commit. Lies ihn nur aus dem Keychain oder der lokalen Schlüsseldatei des Benutzers. Sende ihn ausschließlich an ElevenLabs.
3. Frage vor der Installation von etwas (Playwright, ffmpeg, das Timing-Modell). Sag was und wie groß es ungefähr ist.
4. Zeige die Kosten an Credits an, bevor Credits ausgegeben werden (Proben, Aufnahmen, Wiederholungen).
5. Datenschutzstufen sind nicht optional. Stufe 1 ist immer unscharf. Warne, wenn der Benutzer Geldbeträge oder Daten anderer Personen einschaltet.
6. Pausiere oder beschleunige niemals die Stimme, um sie an das Video anzupassen. Das Video hält an oder dehnt sich stattdessen.
7. Sage deutlich, dass Unschärfe das Risiko reduziert, nicht auf null. Der Benutzer muss vor der Veröffentlichung selbst ansehen.

Der Ablauf

0. Erster Start (einmalig)

• Frage nach dem ElevenLabs API-Key (Starter-Plan oder höher, Text-to-Speech-Zugriff). Teste ihn und zeige die verbleibenden Credits. Speichere ihn im System-Keychain (macOS) oder einer lokalen Datei außerhalb des Skill-Ordners (Linux), die nur der Benutzer lesen kann.
• Prüfe auf Playwright, ffmpeg und das Timing-Modell. Frage, dann installiere, was fehlt.
• Frage, welche Seite sie zuerst demonstrieren werden, und öffne einen Browser, damit sie sich anmelden können. Speichere die Sitzung pro Seite.
• Wiederkehrende Benutzer überspringen all das. Nur die Seite ändert sich pro Demo.

1. Briefing

Erfrage in möglichst wenigen Fragen: was gezeigt werden soll, welche Seite, wer zusieht (Anfänger / etwas Erfahrung / Profis), Länge (1, 3, 5 oder 8 Minuten), was nicht im Bild sein soll und welche Stimme. Untertitel und Eckenlabel stammen aus den gespeicherten Standardeinstellungen des Benutzers (Untertitel eingebrannt, kein Eckenlabel), es sei denn, sie sagen etwas anderes. Füge niemals ein Wasserzeichen, einen Markennamen, ein "Zu Illustrationszwecken"-Tag oder ein anderes Overlay hinzu, das der Benutzer nicht verlangt hat. Verwende sinnvolle Standardeinstellungen, anstatt alles zu erfragen. Eine neue Seite bedeutet eine einmalige Anmeldung.

Wenn der Benutzer mitten im Prozess die Richtung ändert („Mach stattdessen eine Demo der Auszahlungsseite"), behalte die aktuelle Demo als Entwurf und starte ein neues Briefing basierend auf dem, was er gesagt hat.

2. Erkundung

Öffne die Seite mit Playwright und der gespeicherten Sitzung. Kartiere die Bildschirme, die genauen Klicks und Felder für die Aufgabe und alles, was langsam lädt. Ändere keine echten Daten; bleib beim Testkonto.

3. Skript

Teile das Video in kurze Abschnitte (etwa 15 bis 35 Sekunden pro Abschnitt). Schreibe für jeden Abschnitt zwei Zeilen:

• Sprechversion (was die Stimme sagt): wie eine Person es laut erklärt. Kleine Neuanfänge, Reaktionen und Meinungen, wo der Bildschirm sie verdient; sehr wenige Füllwörter.
• Untertitelversion (was gezeigt wird): sauber, kurz, keine Füllwörter.

Halte dich an reference/voice-rules.md. Zeige beide nebeneinander und hole die Zustimmung ein, bevor du Credits ausgibst.

4. Stimme

• Beginne mit den empfohlenen Einstellungen der Stimme für die Art der Demo (Kurs-Walkthrough, schnelle SaaS-Demo, Produkttour).
• Schieberegler und ihre sicheren Bereiche: Lässigkeit 3 bis 8, Energie 1 bis 6, Tempo 0,94x bis 1,08x, Zögern 0 bis 3, Atemgeräusche 0 bis 2, Fluchen 0 bis 2 (niemals in Anleitungen; Untertitel sauber, es sei denn, der Benutzer verlangt es).
• Textvorschau ist kostenlos. Eine Audioprobe kostet etwa 300 Credits; eine Stimme zum ersten Mal zu hören etwa 120.
• Strebe Ruhe an: höhere Stabilität und eine entspannte Darbietung. Vermeide helle Ein-Wort-Zeilen. Füge keine Atem-Tags hinzu.
• Wenn der Benutzer eine Stimme für eine ganze Serie möchte, sperre sie für das Projekt.

5. Datenschutz

Wende die Stufen vor der Aufnahme an:

• Immer unscharf: API-Keys und Tokens, Passwörter, 2FA- und Wiederherstellungscodes, Karten- und Banknummern, Ausweisnummern, private Schlüssel, Login-Links.
• Unscharf, es sei denn erlaubt: E-Mails, Telefonnummern, echte Namen und Fotos, Adressen, Geldbeträge, Kundendaten, Follower- und Mitgliederzahlen.
• Gezeigt, es sei denn unscharf: Nutzungsstatistiken, öffentliche Preise, Daten.
• Plus die eigenen Ausblendwörter des Benutzers.

6. Aufnahme

Siehe docs/engine.md. Kurz: Erstelle einen durchgehenden Take pro Abschnitt, erhalte Zeitstempel für jedes Wort, plane jede Browseraktion zu ihrem Wort, nimm auf, halte Frames, wenn eine Aktion zu lange läuft, pausiere niemals das Audio. Scanne dann die Frames nach allem, was die Unschärfe auf Seitenebene übersehen hat.

7. Überprüfung

Öffne die lokale App auf dem Schritt „Überprüfen". Der Benutzer markiert Momente (klingt nach KI, braucht Unschärfe, zu schnell) oder schreibt Notizen. Zeige die Kosten für eine Wiederholung, dann wiederhole nur die markierten Abschnitte. Protokolliere Markierungen mit den verwendeten Einstellungen, damit sich die Standardeinstellungen der Stimme im Laufe der Zeit verbessern.

8. Export

Wende die Untertitel-Einstellung der Demo an (eingebrannt, separate .srt oder aus) und das Eckenlabel (aus oder der Text des Benutzers in der gewählten Ecke); das Ändern von beidem ist nur ein Neu-Rendering, keine Credits. Rendere das MP4 (1080p), Untertitel (.srt, sofern Untertitel nicht aus) und ein Transkript, plus optional eine 720p-Vorschau, in den vom Benutzer benannten Ordner (Standard ~/Movies/NAVI), damit ein Video direkt in das Projekt landen kann, zu dem es gehört. Benenne die Dateien nach dem Demotitel.

Deine Daten

Über die Einstellungen kann der Benutzer den Schlüssel entfernen (erinnere ihn daran, ihn auch bei ElevenLabs zu widerrufen), gespeicherte Logins vergessen, Einstellungen zurücksetzen oder alles löschen, was NAVI gespeichert hat. Fertiggestellte Videos werden niemals angerührt. Deinstallieren bedeutet, auch diesen Skill-Ordner zu löschen.

Dateien

• reference/voice-rules.md: wie man das Sprechskript schreibt und eine menschlich klingende Stimme erzeugt. Vor Schritt 3 lesen.

• reference/recording-rules.md: wie man den Bildschirm zeitgleich zur Stimme aufnimmt. Vor Schritt 6 lesen.

• reference/privacy.md: die Unschärfestufen und Warnungen. Vor Schritt 5 lesen.

• config/defaults.json: Schieberegler-Bereiche, Voreinstellungen, Einstellungen pro Stimme und Standardeinstellungen auf dem Bildschirm

• ui/index.html: die lokale App (im Browser öffnen; ?start=home|voice|review|settings, &theme=light|dark)

• ui/app.js: Bildschirme, Zustand und Beispieldaten

• docs/engine.md: wie Aufnahme, Timing, Unschärfe und Rendering funktionieren