Animiertes Videohandbuch

Was macht Animiertes Videohandbuch?

Verwandle Produkt-Screenshots in ein kurzes, untertiteltes Walkthrough-Video: Ein animierter Cursor klickt sich durch die Screens, hebt Elemente hervor und zoomt heran, um die Aufmerksamkeit zu lenken, und animierter Text erklärt jeden Schritt.

Die Arbeit besteht aus vier Schritten. Der Benutzer entscheidet; du führst die Produktion durch.

Schritt	Der Benutzer	Du
1. Produktprojekt	gibt an, für wen das Produkt ist, legt Markenfarbe, Hintergrundvorlage, Logo, Markenrichtlinien fest	leite die Sprachregeln ab und stimme die Bewegung ab
2. Szenen	hängt Screenshots oder einen Figma-Link an	importiere Figma-Frames
3. Storyboard-Entwurf	legt die wichtigsten Screens, ihre Reihenfolge und den Text fest	erstelle einen Entwurf, den sie bearbeiten können
4. Video	schaut zu, bearbeitet Text und Reihenfolge, kommentiert Frames	füge die Aktionen hinzu, überprüfe jeden Frame, überarbeite basierend auf Kommentaren, rendere

Wortlaut und Reihenfolge sind das, was Benutzern am wichtigsten ist. Daher werden sie in Schritt 3 festgelegt, bevor Produktionsarbeit beginnt, und bleiben in Schritt 4 bearbeitbar, bis die MP4 gerendert ist.

Sprich mit dem Benutzer in seiner Sprache. Schreibe Untertitel in der Sprache der Produkt-UI, sofern nicht anders angegeben.

Zwei Arbeitsweisen

Mit dem Studio (Standard). Eine lokale Web-App zeigt die vier Schritte. Der Benutzer arbeitet dort; Schaltflächen mit ✦ stellen Anfragen in eine Warteschlange, die du aufnimmst, bearbeitest und beantwortest. Lies references/studio.md, bevor du es startest – es ist das Protokoll für diese Schleife.

Nur im Gespräch. Wenn der Benutzer keinen Browser öffnen möchte oder du keinen lokalen Server ausführen kannst, führe die gleichen vier Schritte durch, indem du im Gespräch fragst und zeigst. Siehe „Ohne das Studio“ unten.

In beiden Fällen sind die Dateien identisch, sodass ein Projekt zwischen beiden wechseln kann.

Projektstruktur

Alles befindet sich unter video-manual/ im Benutzerprojekt, sodass ein Profil für jedes für das Produkt erstellte Handbuch dient:

video-manual/
├── product-profile.json     # eines pro Produkt: Zielgruppe, Stimme, Bewegung, Hintergrund
├── brand/                   # guide.md (eingefügte Markenrichtlinien), Logo
├── requests.json            # Anfragen, die vom Studio in die Warteschlange gestellt wurden
└── <manual-slug>/           # ein Ordner pro Video, z.B. create-task/
    ├── screens/             # 01-board.png, 02-new-task.png, ...
    ├── storyboard.json      # zuerst Entwurf, dann das vollständige Storyboard
    ├── comments.json        # Frame-Kommentare aus dem Studio
    └── out/                 # manual.html, manual.mp4, stills/, frames/

Setup

Die Skripte befinden sich im scripts/-Ordner dieser Fähigkeit. Das Rendern benötigt seine Abhängigkeiten einmal:

cd <skill-dir>/scripts && npm install

Starte dann das Studio im Hintergrund und gib dem Benutzer seine Adresse:

node <skill-dir>/scripts/studio.mjs video-manual --open

Sage ihnen in einem Satz, was als Nächstes passiert: Sie füllen Schritt 1 aus, und du wirst alles aufnehmen, was sie mit einer ✦-Schaltfläche senden. Warte dann auf Anfragen, wie in references/studio.md beschrieben.

Schritt 1 – Produktprojekt

Wenn video-manual/product-profile.json bereits einen voice-Block enthält, ist das Produkt eingerichtet: Verwende es so, wie es ist. Konsistenz über die Videos eines Produkts hinweg ist wichtiger als die Feinabstimmung jedes einzelnen.

Andernfalls füllt der Benutzer das Formular aus (Name, Domäne, B2C/B2B, Zielalter, Gerät, Akzentfarbe, Hintergrundvorlage, optionales Logo und Markenrichtlinien) und sendet eine profile-Anfrage. Dann:

1. Lies den product-Block und brand/guide.md.
2. Schreibe den voice-Block – den Sprachregister, Satzenden, längste Bildunterschrift, zu vermeidende Wörter, Produktbegriffe. Lies references/voice-guide.md. Die Markenrichtlinien des Benutzers überschreiben deren allgemeine Ratschläge.
3. Stimme die Bewegung für dieselbe Zielgruppe ab. Lies references/motion-profiles.md. Der Benutzer hat die Voreinstellung und den Hintergrund ausgewählt; du passt Tempo, Größen und Easing an, wo es die Zielgruppe erfordert.
4. Füge eine rationale von ein oder zwei Sätzen hinzu.

Diese drei Fakten – Zielalter, Domäne, B2C oder B2B – bestimmen jede Bildunterschrift. Wenn das Formular eines leer lässt oder die Screenshots dem widersprechen, frage nach, bevor du die Sprachregeln schreibst.

Schritt 2 – Szenen

Ein Bild pro eindeutigem Bildschirmstatus, in screens/, nummeriert in der Reihenfolge des Erscheinens. Ein Status, der sich sichtbar ändert (ein Modal öffnet sich, ein Dropdown erweitert sich, ein Formular wird ausgefüllt), benötigt ein eigenes Bild: Das Video zeigt das Ergebnis eines Klicks, indem es zum nächsten Screenshot wechselt.

Der Benutzer lädt diese normalerweise im Studio hoch. Bei einer scenes-Anfrage mit einem Figma-Link exportiere jeden Frame als PNG und notiere seine logische Breite für coordWidth; lies auch die Layer-Metadaten aus – exakte Elementgrenzen sind weitaus zuverlässiger als Schätzungen aus Pixeln.

Wenn ein Status, den das Walkthrough benötigt, fehlt, sage, welcher es ist, und bitte darum, anstatt den Schritt zu überspringen. Ein Sprung, dem der Betrachter nicht folgen kann, macht den Zweck eines Handbuchs zunichte.

Schritt 3 – Storyboard-Entwurf

Bei einer draft-Anfrage lies jeden Screen und das Profil, schreibe dann den Entwurf in storyboard.json: die Szenen in Reihenfolge, jede mit ihrer caption und einer note, die beschreibt, was darin passiert. Noch keine Aktionen. Lies references/manual-script.md, um zu erfahren, wie das Video eingegrenzt und der Text geschrieben wird, und schreibe jede Zeile in der Stimme des Profils.

Der Benutzer bearbeitet den Entwurf im Studio und drückt „Video anfragen“, wenn der Wortlaut und die Reihenfolge richtig sind. Diese produce-Anfrage ist die Genehmigung. Füge keine Aktionen hinzu, bevor sie eintrifft.

Schritt 4 – Video

Produzieren

Lies references/storyboard-schema.md und wandle den genehmigten Entwurf in das vollständige Storyboard um: Befolge die note jeder Szene, füge die Aktionen hinzu, setze coordWidth. Bildunterschriften bleiben genau wie genehmigt.

Koordinaten sind der Teil, der am wahrscheinlichsten falsch ist. Verwende exakte Grenzen, wenn du sie hast (Figma-Metadaten, DOM-Rechtecke). Wenn du nur das Bild hast, schaue genau hin und schätze; die unten stehende Prüfung dient dazu, das zu erkennen, was du falsch machst.

Überprüfung, bevor der Benutzer es sieht

Baue, rendere dann Standbilder – einen Frame bei jedem Klick, jeder Text- und Bildunterschriftenänderung und am Ende jeder Szene:

node <skill-dir>/scripts/build.mjs video-manual/<slug>/storyboard.json
node <skill-dir>/scripts/render.mjs video-manual/<slug>/out/manual.html --stills video-manual/<slug>/out/stills

build.mjs validiert das Storyboard, überprüft jede Bildunterschrift gegen die Sprachregeln des Profils und gibt den Zeitpunkt jeder Szene aus. Behebe die Fehler. Bei Sprachwarnungen zu Text, den der Benutzer geschrieben hat, behalte seinen Wortlaut bei und erwähne die Warnung in deiner Antwort.

Lies die Standbilder und überprüfe jedes:

• Befindet sich die Cursorspitze auf dem Element, das die Bildunterschrift nennt?
• Umschließt der Hervorhebungsring das gesamte Element und nichts anderes?
• Ist nach einem Zoom das Ziel vollständig sichtbar und lesbar?
• Sitzt der eingegebene Text in seinem Feld und bedeckt den Platzhalter?
• Ist jede Bildunterschrift vollständig sichtbar, auf höchstens zwei Zeilen?
• Zeigt jeder Callout auf das richtige Element, ohne es oder den Cursor zu bedecken?

Korrigiere das Storyboard, baue neu und rendere neu, bis jeder Frame bestanden ist, antworte dann auf die Anfrage. Ein Cursor, der neben die Schaltfläche klickt, lässt das gesamte Handbuch falsch aussehen, daher sollte der Benutzer niemals derjenige sein, der es findet.

Überarbeitungsschleife

In Schritt 4 des Studios kann der Benutzer:

• jede Bildunterschrift, jeden Titel oder Bildschirmtext bearbeiten und Szenen neu anordnen – direkt in storyboard.json gespeichert, keine Anfrage erforderlich;
• auf einem Frame pausieren, eine Position anheften und einen Kommentar schreiben, dann die Kommentare als revise-Anfrage senden.

Behandle revise wie in references/studio.md beschrieben: Rendere den kommentierten Frame, um zu sehen, was sie gesehen haben; ändere nur das, worum es im Kommentar geht, und sonst nichts; bestätige an einem neuen Frame, dass es behoben ist; und antworte auf jeden Kommentar. Nachdem sie Szenen neu angeordnet haben, überprüfe, ob jeder Klick noch zu dem Bildschirm führt, der ihm folgt; eine unterbrochene Kette ist etwas, das du ihnen mitteilen, nicht stillschweigend reparieren solltest.

Diese Schleife wiederholt sich, bis sie zufrieden sind.

Rendern

Der Benutzer exportiert die MP4 aus dem Studio mit einem Klick. Um sie selbst zu rendern:

node <skill-dir>/scripts/render.mjs video-manual/<slug>/out/manual.html --out video-manual/<slug>/out/manual.mp4

Das Rendern dauert ungefähr so lange wie das Video selbst, manchmal zwei- oder dreimal so lange auf einem langsameren Rechner; führe es im Hintergrund aus für Handbücher, die länger als eine Minute sind. Berichte den Ausgabepfad, die Länge und die Dateigröße.

Ohne das Studio

Führe die gleichen vier Schritte im Gespräch durch:

1. Projekt – Leite Zielalter, Domäne und B2C/B2B aus den Screenshots und dem UI-Text ab, gib deine Lesart an und bitte den Benutzer, sie in einer Frage zu bestätigen. Schreibe dann das gesamte Profil selbst, einschließlich Voreinstellung, Akzent und Hintergrund.
2. Szenen – Kopiere die Bilder, die der Benutzer dir gibt, in screens/ oder nimm sie selbst auf, wenn du einen Browser oder ein Figma-Tool hast.
3. Entwurf – Schreibe das Entwurfs-Storyboard, zeige es als Tabelle (Schritt, Bildschirm, was passiert, Bildunterschrift, Bildschirmtext) mit der geschätzten Länge an und warte auf Genehmigung. Wenn er von vornherein gesagt hat, dass es direkt durchgehen soll, fahre fort und sage, wo der Entwurf ist.
4. Video – Produziere und überprüfe wie oben, teile ihnen dann mit, wo out/manual.html ist. Diese eigenständige Seite spielt das Video ab und hat ein eigenes Panel zum Bearbeiten von Text und Reihenfolge; „Bearbeitungen herunterladen“ gibt eine storyboard.edited.json zurück, die sie zurückgeben können. Wenn sie das tun, liste auf, was geändert wurde, damit sie bestätigen können, dass du es so gelesen hast, wie sie es meinten; speichere es als storyboard.json, baue neu und überprüfe die Standbilder erneut. Rendere dann.

Spätere Änderungen

• Wortlaut oder Reihenfolge: Der Benutzer bearbeitet im Studio oder sagt es dir.
• Stimme („zu steif“, „unsere Benutzer sind älter als das“): Ändere den voice-Block des Profils und schreibe dann die Bildunterschriften entsprechend um.
• Gefühl („zu langsam“, „zu schwungvoll“): Ändere Bewegungstoken im Profil, nicht einzelne Szenen – siehe die Abstimmungstabelle in references/motion-profiles.md.
• Ein Schritt sieht falsch aus: Korrigiere die Aktionen dieser Szene und überprüfe ihre Standbilder erneut.

Baue neu und überprüfe die Standbilder nach jeder Änderung neu, bevor du erneut renderst.

Grenzen

Sage es deutlich, wenn eine Anfrage auf eine dieser Grenzen stößt:

• Screenshots sind statische Bilder. Scrollen, Hover-Zustände und In-App-Animationen werden nicht reproduziert; zeige sie als separate Screenshots.
• Kein Voice-Over oder Musik. Bildunterschriften und Bildschirmtext tragen die Erklärung.
• Das Studio bearbeitet Text und Szenenreihenfolge. Worauf ein Schritt klickt oder was er hervorhebt, ändert sich durch einen Kommentar an dich.
• Die Ausgabe ist standardmäßig 16:9. Setze meta.width und meta.height im Storyboard für andere Formate.

Fehlerbehebung

• playwright-core is not installed: Führe npm install im Skripte-Ordner aus.
• no browser found: Installiere Google Chrome oder führe npx playwright install chromium im Skripte-Ordner aus.
• ffmpeg not found: Installiere ffmpeg oder setze FFMPEG_PATH. npm install stellt normalerweise eines über ffmpeg-static bereit.
• Eine Anfrage bleibt im Studio „wartend“: Niemand führt studio.mjs wait aus. Führe es aus, oder studio.mjs pending.
• Schritt 4 zeigt Fehler anstelle des Videos: Eine Szene verweist auf ein fehlendes Bild oder hat eine Koordinate außerhalb ihres Bildschirms. build.mjs nennt die Szene.
• Eine Schriftart sieht falsch aus: Das Video verwendet auf dem Rechner installierte Schriftarten. Setze font.family im Profil auf eine installierte.