altacrest/motion-how-to-video

Vertontes How-to-Video mit Claude Motion

So erstellt das Novacrest-Marketingteam How-to- und Dokumentationsvideos: die echten Screenshots der App, ein gleitender Cursor, eine kurze Bildunterschrift pro Schritt, eine englische Stimme, die jede Bildunterschrift vorliest, eine fertige MP4. Es begann mit den OmniOrders-Quick-Start-Filmen (Okt. 2026).

Alles, was der Film benötigt, wird mit diesem Skill mitgeliefert (Pfade sind relativ zu dieser Datei):

• engine/shared.js und engine/base.css: die Screenshot-Engine (SS) und ihr Aussehen. Baue sie niemals aus dem Gedächtnis neu auf.
• examples/how-to-film/: jedes Szenenmodul des Referenzfilms "Erstelle ein How-to-Video mit Claude Motion" (27. Okt. 2026) mit seinen lines.json, scenes.json und shots.json. Lies sie, bevor du Szenen schreibst: Sie zeigen jede SS.def-Option in Verwendung.
• scripts/voice.py: die Erzählung. ElevenLabs-API, ein MP3 pro Bildunterschrift, mit Whisper überprüft, wenn es installiert ist. Es läuft im eigenen Terminal des Benutzers.
• scripts/mix.py: platziert jeden Clip unter seiner Bildunterschrift und schreibt die fertige MP4 (benötigt ffmpeg).

Harte Regeln

• Nur echte Screenshots, die aus der App aufgenommen wurden. Zeichne niemals die UI der App neu: gezeichnete Screenshots wurden in den ersten Quick-Start-Filmen erwischt. Eine einfache Karte, die einen Befehl zeigt, ist in Ordnung; eine gezeichnete Kopie einer App oder eines Terminalfensters nicht.
• Verwende das Testkonto. Keine echten Kundendaten, Schlüssel, Tokens oder Passwörter auf dem Bildschirm: verdecke sie mit einem Patch oder verwende die Platzhalterwerte des Testkontos. Melde den Benutzer niemals an; bitte ihn, sich anzumelden.
• Die Erzählung ist Englisch (US), und die Bildunterschriften sind das Skript: eine pro Schritt, klare Worte, die jeder versteht, unter etwa 12 Wörtern, keine Gedankenstriche. Die Stimme liest jede Bildunterschrift wortwörtlich. Wenn die Stimme ein Wort falsch ausspricht, füge eine gesprochene Umschrift in say.json ein; die Bildunterschrift bleibt wie geschrieben.
• Dehne das Video niemals, um es an die Stimme anzupassen. Bildunterschriften sind auf ihre Clips abgestimmt (Schritt 4). Ein Clip, der immer noch zu lang läuft, wird etwas beschleunigt (mix.py erlaubt höchstens 1,15x), oder seine Zeile wird kürzer und erneut vertont.
• Pilot zuerst: vertone die Zeilen der ersten Szene und überprüfe sie vor dem Rest, und erneut nach jeder Sprach- oder Skriptänderung.
• Kein LLM beurteilt die Stimme. voice.py bewertet jeden Clip mit Whisper (Wortfehlerrate), wenn faster-whisper installiert ist; andernfalls hört der Benutzer zu.
• Frage niemals nach einem API-Key, drucke ihn nicht aus und füge ihn nicht in den Chat ein. Der ElevenLabs-Key lebt nur in einer Datei auf dem Computer des Benutzers.
• Frage, bevor du Dateien herunterlädst, sie benennst und woher sie kommen.

Warum die Stimme im Terminal des Benutzers läuft: Claudes Arbeitsbereich und Claudes Shell auf dem Computer des Benutzers können ElevenLabs nicht erreichen (die Novacrest-Netzwerk-Allowlist blockiert api.elevenlabs.io und elevenlabsusercontent.com; überprüft am 12. Nov. 2026), und Keys gehen niemals durch den Chat. Claude bereitet alles vor und der Benutzer fügt einen Befehl ein. Der ElevenLabs-Connector (benutzerdefinierter Connector, https://api.elevenlabs.io/v1/mcp) erzeugt Sprache ohne Key, aber sein Audio kommt als elevenlabsusercontent.com-Links zurück, die der Arbeitsbereich nicht herunterladen kann, daher wird er hier nicht verwendet. Wenn ein Administrator diese beiden Domains erlaubt, überprüfe dies erneut.

Schritt 1: Umfang und Bildunterschriften

Hole diese Informationen ein, frage nur, was in einer Runde fehlt: den Ablauf (z. B. "eine Überweisung in OmniOrders erstellen"), die App und ihr Testkonto, wohin das Video geht (eine Docs-Seite, der Quick Start, YouTube) und die Produktfarben. Schreibe die Schritte und eine Bildunterschrift pro Schritt, plus eine Titelzeile und eine Schlusszeile, als lines.json ({"id": "Bildunterschrift"}, in Filmreihenfolge; ids wie open, ask-a, ask-b, end). Füge say.json ({"id": "gesprochener Text"}) nur für Zeilen hinzu, die ein Wort enthalten, das die Stimme falsch aussprechen könnte (OmniOrders als "Omni Orders", ein Repo-Name mit Bindestrichen). Zeige dem Benutzer die Bildunterschriften im Chat und fahre fort, es sei denn, er ändert sie.

Schritt 2: Starte die Erzählung

Starte sie, sobald die Bildunterschriften festgelegt sind; nimm auf und baue, während sie läuft.

1. Erstelle einen Filmordner auf dem Computer des Benutzers, ~/Downloads/<film-slug>/, mit lines.json, say.json (falls vorhanden) und einer Kopie von scripts/voice.py. Bei einem verknüpften Ordner schreibe sie dort mit device_bash. Ohne einen solchen sende die Dateien mit SendUserFile und bitte den Benutzer, sie in einen Ordner zu legen.
2. Beim ersten Mal benötigt der Benutzer einen ElevenLabs-API-Key mit Text-to-Speech-Zugriff (README, "ElevenLabs"). Überprüfe, ob ~/.config/elevenlabs/env existiert (teste die Datei; lese sie niemals aus). Wenn nicht, starte den folgenden Block mit der Setup-Zeile.
3. Gib dem Benutzer einen bereiten Block für das Terminal:

   cd ~/Downloads/<film-slug>
   python3 voice.py setup        # nur beim ersten Mal: Key einfügen, wenn aufgefordert (Eingabe ist versteckt)
   python3 voice.py check        # der Key funktioniert, Guthaben vorhanden
   python3 voice.py --only open,<erste szenen-ids>
   

   Wenn der Pilot gut klingt (voice.json zeigt keine Flags, oder der Benutzer hat zugehört), ist der Rest python3 voice.py.
4. Die Hausstimme: Matilda (XrExE9yKIg1WjnnlVkGX), eleven_multilingual_v2, Stabilität 0,5, Ähnlichkeit 0,75, Geschwindigkeit 1,0, MP3 44,1 kHz 128 kbps; jede Zeile wird mit den Bildunterschriften davor und danach als Kontext gelesen, sodass der Lesefluss erhalten bleibt. Ändere die Stimme oder Geschwindigkeit nur, wenn der Benutzer darum bittet. voice.py gibt die zu verwendenden Zeichen aus (etwa ein Credit pro Zeile); wenn check weniger Credits anzeigt, stoppe und frage nach.
5. Clips landen in voice/<id>.mp3; voice/voice.json listet die Länge jedes Clips und, mit Whisper, das Gehörte und die Wortfehlerrate auf. Eine Zeile über 0,05 wird angehört, eine Umschrift in say.json oder eine neue Formulierung, dann python3 voice.py --only <id> --redo.

Schritt 3: Screenshots aufnehmen

1. Lade den claude-in-chrome Skill. Öffne die App in einem neuen Tab im angemeldeten Chrome des Benutzers. Passe die Fenstergröße an, bis der Viewport 1512 x 745 beträgt (überprüfe innerWidth und innerHeight): Das ist die Weltgröße der Engine, und Screenshots kommen dann mit 2x zurück, 3024 x 1490.
2. Gehe den Ablauf im Testkonto durch. Nimm jeden Zustand auf, den der Film benötigt, mit einem computer-Screenshot und save_to_disk: true: vor und nach jedem Klick; für die Eingabe das leere Feld und das ausgefüllte Feld (der Film zeigt getippte Zeilen als Ausschnitte, die aus dem ausgefüllten Shot herausgeschnitten wurden).
3. Konvertiere im Arbeitsbereich in webp (Qualität etwa 90), benannt als <flow>_<step>.webp, plus 2x Ausschnitte jeder getippten Zeile. Notiere den URL-Pfad jedes Shots in shots.json und das Rechteck jedes Patches in View-Pixeln (dem 1512 x 745 Raum).
4. Sende nichts ab, was Daten außerhalb des Testkontos ändert. Stoppe und frage nach, wenn ein Schritt dies tun würde.

Schritt 4: Den Film erstellen

1. Erstelle den Film aus dem Motion-Artefakttyp (finde ihn in der Typenliste des Artefakt-Tools), title = der Name des Videos, und lies die Anweisungen des Typs, die zurückkommen: Sie regeln den Film. Kläre seine Fragen in der Anfrage, damit kein Formular benötigt wird. Stil: geführter Cursor über echten Screenshots, das Aussehen des Referenzfilms. Farben: die Palette des Produkts (OmniOrders: #16213E, #11ACE4, #F4F7FB, #2FD193). Länge: durch die Stimme festgelegt (siehe unten), plus eine 5-Sekunden-Titelkarte und eine 7-Sekunden-Endkarte.
2. Schreibe engine/shared.js unverändert in den Film als modules/shared.js und engine/base.css als modules/base.css, ändere nur die vier Farben in der ersten Zeile. Lade die eigenen Screenshots und Ausschnitte dieses Films als Assets hoch; kopiere niemals _blob-Referenzen eines anderen Films.
3. Schreibe lines.json (die Datei aus Schritt 1), shots.json (URL-Pfad jedes Shots; "host" ist die Domain, die die Browserleiste vor einem Pfad anzeigt, der mit / beginnt), ein Szenenmodul pro Schritt, erstellt mit SS.def (die Titelcard verwendet SS.open; SS.end benötigt mark, next und url), und scenes.json mit dur und desc jeder Szene. Deklariere Bildunterschriften als caps: [['<id>', tin, tout], ...], damit mix.py sie finden kann; eine Zeile, die ohne Bildunterschrift vertont wird (die der Titelcard), wird auf die gleiche Weise in ihrem Modul deklariert, z. B. const voiceOnly = [['open', 0.4, 4.6]];. Folge den Beispielen: Der Cursor gleitet zum Steuerelement, ein Ring und ein Klick-Ripple markieren es, die Kamera zoomt ein, die Bildunterschrift sitzt auf der dunklen Platte.
4. Timing der Bildunterschriften zu den Clips in voice/voice.json: In jeder Szene kommt die erste Bildunterschrift bei 0,3 s herein, jede Bildunterschrift bleibt für die Länge ihres Clips plus 0,45 s sichtbar, und die nächste kommt 0,35 s danach herein. Die dur einer Szene ist die Out-Zeit ihrer letzten Bildunterschrift plus etwa 0,4 s, oder länger, wenn die Aktion auf dem Bildschirm es erfordert. Passe Cursor, Ringe und Kamera in diese Fenster ein. Wenn die Stimme noch nicht zurück ist, gib jeder Bildunterschrift etwa 5 s und passe das Timing an, wenn sie da ist.
5. Halte die Hintergrundmusik dezent und modern: Die Musik der ersten Quick-Start-Filme wurde als "80er Jahre Kirchenorgel" bezeichnet.
6. Der Benutzer spielt den Film ab und bittet um Änderungen; wende sie an (eine geänderte Bildunterschrift wird erneut vertont). Wenn er zufrieden ist, wird die MP4 mit dem Download-Pfeil unter dem Player auf der Filmseite exportiert: Der Benutzer klickt darauf, oder Claude in Chrome, sobald er zustimmt. Sie landet in seinem Downloads-Ordner.

Schritt 5: Mischen

1. Lege die exportierte MP4, den Ordner voice/, scenes.json und die Szenenmodule an einem Ort ab: dem Filmordner auf dem Computer des Benutzers (führe mix.py dort mit device_bash aus, wenn ffmpeg installiert ist) oder dem Cloud-Arbeitsbereich (stage sie). Store-Dokumente, die aus dem Film mit ArtifactData (out_dir) gespeichert wurden, funktionieren so, wie sie sind.
2. python3 mix.py cues --scenes scenes.json --modules <ordner mit scene-*.js> --lines lines.json schreibt cues.json: Start und Ende jeder Bildunterschrift im Film (der Start der Szene, die Summe der dur früherer Szenen, plus die Zeiten der Bildunterschrift).
3. python3 mix.py mix --film <exportierte>.mp4 --voice voice --cues cues.json --out <produkt>-<ablauf>.mp4 --web startet jeden Clip bei seiner Bildunterschrift, behält die Hintergrundmusik des Films bei 25 % unter der Stimme, wenn der Export Ton hat, pegelt die Stimme auf -16 LUFS und kopiert das Bild. Es stoppt bei einem Clip, der mehr als 1,15x Beschleunigung benötigt; kürze diese Zeile, vertone sie erneut und mische erneut.
4. python3 mix.py frames --film <produkt>-<ablauf>.mp4 --cues cues.json --out frames speichert ein Bild zur Mitte jeder Bildunterschrift. Überprüfe jedes: Bildunterschrift sichtbar, der richtige Bildschirm, nichts Privates. Spiele dann die ersten Sekunden ab: Die Stimme beginnt mit ihrer Bildunterschrift. Befolge die ffmpeg-Regeln des Videoerstellungs-Skills für alles andere.

Schritt 6: Ausliefern

• Sende die fertige MP4 mit SendUserFile und speichere sie im verbundenen Ordner des Benutzers als <produkt>-<ablauf>.mp4.
• Für eine Website: Die -web.mp4-Kopie geht in einen PR zum Site-Repo. Gib dem Benutzer den Link; er merged ihn.
• Beende mit einer kurzen Liste, was der Benutzer noch tun muss: den Terminal-Befehl, den Export, das Mergen des PRs.

Einrichtung, einmal pro Person (die README des Plugins enthält die Details)

1. Installation von GitHub: Claude > Customize > Plugins > Add > Add marketplace, gebe altacrest/novacrest-skills ein und wähle Use, lasse Sync automatisch an, Sync, installiere dann How-to video.
2. ElevenLabs: Ein API-Key mit Text-to-Speech-Zugriff, gespeichert mit python3 voice.py setup in einem beliebigen Filmordner.
3. Claude in Chrome, angemeldet beim Testkonto der App.