App 预览视频

Was macht App 预览视频?

Erstelle für eine mobile App ein App-Store-Preview-Video. Es entstehen zwei Dinge:

1. Ein Remotion-Projekt (das Video selbst ist React-Code, kann beliebig oft geändert und exportiert werden).
2. Eine chinesischsprachige Web-Konsole, mit der auch nicht-technische Nutzer selbst anpassen können: Texte, Medien, Seiten hinzufügen/löschen/sortieren, Übergänge, Animationen, Lautstärke und Export.

Die Nutzer dieses Skills haben in der Regel keine Code-Kenntnisse. Ziel ist also nicht „Du erstellst das Video“, sondern „Du baust die Struktur und gibst die Konsole an den Nutzer weiter“. Sprich mit dem Nutzer in einfacher Sprache – lass ihn weder Code sehen noch Befehle eingeben.

Struktur des Videos

Intro (App-Symbol) → beliebig viele Seiten → Outro (Logo + Slogan)

Es gibt zwei Seitentypen:

• Funktionsseite: Zwei große Textzeilen + ein Smartphone, das einen App-Screenshot oder ein Screenrecording zeigt. Auf dem Screenshot können mehrere „Erklärbereiche“ markiert werden – im Video tippt ein Finger darauf, der Bereich wird vergrößert und eine Erklärung wird eingeblendet.
• Karten-Seite: Zwei große Textzeilen + eine Gruppe von Karten, geeignet um mehrere Verkaufsargumente auf einmal zu zeigen.

Alle anpassbaren Inhalte liegen in der Datei src/settings.json des Projekts; die Konsole liest und schreibt sie. Feldbeschreibungen findest du in references/settings.md. Lies diese Datei, bevor du das JSON änderst.

Ablauf

1. Erst alles klären, dann loslegen

Frage, was fehlt, auf einmal:

• Um welche App geht es, Website oder Store-Link? (Wenn ein Link existiert, lies die Funktionen und Verkaufsargumente selbst – lass den Nutzer nicht nacherzählen.)
• Welche Funktionen sollen gezeigt werden, für welchen Markt, in welcher Sprache?
• Medien: App-Symbol, Logo mit Text, Screenshots oder Screenrecordings jeder Funktion.
• Gibt es Referenzvideos? Falls ja, sieh dir Rhythmus und Übergänge an.

Auch wenn Medien noch nicht da sind, kannst du die Struktur aufbauen; Funktionsseiten bleiben leer (Platzhalter).

2. Storyboard planen

Gib dem Nutzer zuerst eine Storyboard-Tabelle (jede Seite: Dauer, was auf dem Smartphone zu sehen ist, zwei große Textzeilen, welcher Übergang). Fange erst mit dem Projekt an, wenn der Nutzer zustimmt. Ein paar Erfahrungswerte:

• Store-Videos werden stumm und automatisch abgespielt – Informationen kommen nur über große Schriftzeichen. In den ersten 3 Sekunden muss das Produktbild erscheinen.
• Pro Seite ein Verkaufsargument, zwei Textzeilen mit maximal 4 englischen Wörtern pro Zeile; sonst wird es zu breit.
• Verwende konkrete Zahlen statt nicht belegbarer Superlative wie „#1“ oder „bestes“. Apple lehnt letztere ab.
• Gesamtlänge 15–30 Sekunden. Eine Funktionsseite mit Erklärung dauert ca. 4–5,5 Sekunden, eine normale Funktionsseite 3–4 Sekunden.

3. Projekt erstellen

Mac / Linux:

<Skill-Verzeichnis>/scripts/create_project.sh <Zielordner>

Windows:

powershell -ExecutionPolicy Bypass -File <Skill-Verzeichnis>\scripts\create_project.ps1 -Target <Zielordner>

Das Skript kopiert die Vorlage und installiert Abhängigkeiten (erster Aufruf benötigt Internet, ein bis zwei Minuten). Wähle einen Zielordner, den der Nutzer finden kann; wenn die Sitzung keinen Projektordner hat, erstelle das Projekt im aktuellen Arbeitsverzeichnis. Arbeite nicht direkt in der Vorlage im Skill-Verzeichnis.

Wenn auf dem Computer kein Node.js vorhanden ist (benötigt 18 oder höher), installiert das Skript nichts selbst, sondern gibt NEED_NODE aus, beendet mit Exit-Code 3 und erklärt, was heruntergeladen werden muss. Dann:

1. Erkläre dem Nutzer in einfacher Sprache: Es wird eine Laufzeitumgebung namens Node.js benötigt. Eine portable Version kann automatisch von der offiziellen Website heruntergeladen werden (Mac ca. 45 MB, Windows ca. 30 MB). Sie wird nur für dieses Tool in einem eigenen Ordner abgelegt, verändert das System nicht und benötigt kein Admin-Passwort.
2. Wenn der Nutzer zustimmt, führe das Skript erneut mit --install-node (Windows -InstallNode) aus.
3. Wenn der Nutzer nicht zustimmt oder der Download durch die Unternehmens-Firewall blockiert wird, bitte den Nutzer (oder die IT), Node.js von https://nodejs.org zu installieren und dann erneut zu starten.

Erst fragen, dann installieren ist beabsichtigt: Das Herunterladen und Ausführen von Programmen aus dem Internet sollte nicht still geschehen. Das Skript enthält fest codierte offizielle Prüfsummen. Wenn die heruntergeladene Datei nicht übereinstimmt, wird sie gelöscht und eine Fehlermeldung ausgegeben. Umgehe die Prüfung nicht – bitte den Nutzer, es erneut zu versuchen oder Node.js manuell zu installieren.

Alle folgenden Befehle werden über den Launcher des Projekts ausgeführt: Mac / Linux mit ./run.sh <Befehl>, Windows mit run.cmd <Befehl>. Er bindet automatisch die heruntergeladene Node.js ein; wenn die systemweite Node.js verwendet wird, ändert er nichts. So ist es am einfachsten. Im Folgenden wird dieser Präfix weggelassen.

4. Inhalt befüllen

• Kopiere Medien in das public/-Verzeichnis des Projekts und trage die Dateinamen in src/settings.json ein.
• Ändere das seiten-Array gemäß Storyboard: Text, Dauer, Übergang, Farben jeder Seite.
• Die Markenfarben werden aus dem Logo ermittelt und in marke.primär / marke.dunkel eingetragen. Bei geschätzten Farben sage dem Nutzer: „Das habe ich nach dem Logo geschätzt.“
• Kopiere nach dem Befüllen denselben Inhalt nach src/settings.default.json, damit „Auf Standard zurücksetzen“ in der Konsole auf deine Version zurückgeht, nicht auf eine leere Vorlage.

5. Bilder prüfen

Exportiere vor dem finalen Rendering ein paar Frames zur Kontrolle – verlasse dich nicht nur auf Typprüfung:

npx remotion still src/index.ts AppPreview /tmp/f.jpg --frame=<Frame-Nummer> --scale=0.3 --image-format=jpeg

Prüfe mindestens einen Frame pro Seite (30 Frames = 1 Sekunde). Achte besonders auf: Textbreite (nicht über den Rand), Erklärbereiche (nicht am Rand anstoßend), Übergänge (kein weißer Blitz).

6. Konsole starten und an Nutzer übergeben

Führe im Projektordner ./run.sh npm run panel (Windows: run.cmd npm run panel) aus. Es startet einen Vite-Server, standardmäßig unter http://127.0.0.1:5173. In der Claude Desktop-App kannst du es in .claude/launch.json des Sitzungsverzeichnisses eintragen und über das Vorschaufenster öffnen, sodass der Nutzer es rechts direkt bedienen kann:

{"name": "control-panel", "runtimeExecutable": "<Projektordner>/run.sh", "runtimeArgs": ["npm", "run", "panel"], "port": 5173}

Unter Windows ersetze runtimeExecutable durch <Projektordner>\run.cmd. Falls die Umgebung kein Vorschaufenster hat, teile dem Nutzer die URL mit, damit er sie im Browser öffnen kann.

Erkläre dem Nutzer dann in wenigen Sätzen, wie die Konsole funktioniert:

• Der obere Reiter: Klicke auf eine Seite, das linke Video springt dorthin; rechts werden die Einstellungen dieser Seite angezeigt.
• „+ Seite hinzufügen“ kann Funktions- oder Karten-Seiten hinzufügen; pro Seite kann man umbenennen, verschieben, kopieren, löschen.
• Screenshots oder Screenrecordings können direkt in die gestrichelten Rahmen gezogen werden. Ziehe auf einem Screenshot ein Rechteck auf – das wird ein Erklärbereich.
• Änderungen werden automatisch gespeichert. Ein Klick auf eine Animationseinstellung startet die Seite neu.
• „Video exportieren“ dauert etwa eine Minute; das fertige Video liegt auf dem Desktop.

Die Konsole funktioniert nur, solange dieser Dienst läuft. Wenn der Nutzer später zurückkommt und sie nicht funktioniert, starte den Dienst neu.

7. Exportieren

Der Nutzer kann in der Konsole auf „Video exportieren“ klicken. Für den Selbst-Export verwende:

npx remotion render src/index.ts AppPreview out/preview.mp4 --props=src/settings.json

Gib nach dem Export klar an: Spezifikation (886×1920, 30fps, Länge), welche Seiten noch Platzhalter sind, welche du tatsächlich geprüft hast. Ton kannst du nicht hören – bitte den Nutzer, ihn anzuhören.

Wichtige Regeln

Dies sind Erfahrungen aus der Praxis; die Gründe stehen dahinter.

• Echte UI. Apple verlangt, dass Preview-Videos hauptsächlich echte App-Bildschirme zeigen. Funktionsseiten ohne Screenshot zeigen nur einen Platzhalter – zeichne keine „app-ähnliche“ Oberfläche, die du als fertiges Produkt auslieferst. In der Vorlage gibt es einen Einstiegspunkt für animierte Platzhalter (MOCKS), der nur verwendet werden darf, wenn der Nutzer explizit einen temporären Platzhalter wünscht, und mit dem Hinweis: „Das ist nicht die echte App-Oberfläche und kann nicht eingereicht werden.“
• Nur mitgelieferte Soundeffekte verwenden. Die 8 Soundeffekte in public/sfx/ wurden mit tools/make_sfx.py aus Sinuswellen und Rauschen synthetisiert – keine Drittanbieter-Materialien, keine Lizenzprobleme bei kommerzieller Nutzung. Um andere Klänge zu verwenden, ändere dieses Skript und generiere sie neu. Für externe Soundeffekte oder Musik kläre vorher mit dem Nutzer Quelle und Lizenz.
• Bereits vom Nutzer angepasste Einstellungen nicht verändern. Der Nutzer wird src/settings.json über die Konsole ändern. Wenn du Code oder Felder ergänzt, fülle nur fehlende Felder auf – überschreibe nie die gesamte Datei. Führe bei Tests keine Aktionen wie Löschen oder Zurücksetzen auf den echten Einstellungen des Nutzers aus; erstelle vorher ein Backup oder verwende eine temporäre --props-Datei.
• Maße und Länge. Die Vorlage ist 886×1920 (6,9-Zoll iPhone), 30fps. App Store erfordert 15–30 Sekunden; die Konsole wird oben rot, wenn die Länge überschritten wird. Andere Geräte oder Google Play haben andere Maße – lass den Nutzer vor dem Einreichen die offiziellen Spezifikationen prüfen.
• Prüfung ehrlich angeben. Sage, welche Frames du geprüft hast; welche Optionen du nicht einzeln getestet hast, sage ebenfalls.

Funktionen, die nicht in der Konsole sind

Die Konsole deckt die üblichen Anpassungen ab. Wenn der Nutzer einen Effekt wünscht, den sie nicht bietet (neue Übergänge, neue Seitenlayouts, andere Animationen), ändere src/AppPreview.tsx. Diese Datei ist in Abschnitte gegliedert, jeder mit chinesischen Kommentaren. Das Hinzufügen einer optionalen Effekts folgt einem Dreischritt:

1. Füge einen Optionsnamen in das entsprechende z.enum([...]) am Dateianfang ein.
2. Implementiere ihn in der zugehörigen Komponente (Übergang in useEnterStyle, Titel-Animation in Title, Smartphone-Ein- und Ausgabe in Phone, Erklär-Effekt in SpotPop / SpotRing / Phone mit Kamerazoom).
3. Die Optionsbuttons in der Konsole werden automatisch aus dem OPTIONS-Objekt generiert – normalerweise musst du control/main.tsx nicht ändern. Nur wenn du neue Felder hinzufügst, musst du dort ein Steuerelement einfügen und gleichzeitig die Standardwerte in settings.json und settings.default.json ergänzen.

Nach Änderungen führe npx tsc --noEmit -p . aus und prüfe ein paar Frames.

Häufige Probleme

• Video wird schwarz, Warnsymbol erscheint in der Konsole: Meistens sind zu viele Audioelemente gleichzeitig geladen. Jeder Sequence eines Soundeffekts muss durationInFrames haben; numberOfSharedAudioTags auf dem Player muss groß genug sein (Vorlage: 16).
• Hochgeladene Bilder werden nicht angezeigt: Die hochgeladenen Dateien werden von der /uploads-Middleware in control/vite.config.mts direkt von der Festplatte gelesen. Entferne diese Middleware nicht (Vite erkennt nur öffentliche Dateien, die beim Start existieren).
• Erklärbereich nicht ausgerichtet: Das Seitenverhältnis des inneren Smartphone-Displays ist auf iPhone-Screenshots (ca. 1:2,17) festgelegt. Bei anderen Seitenverhältnissen wird der Screenshot beschnitten, und der Erklärbereich verschiebt sich. Bitte den Nutzer, iPhone-Hochkant-Screenshots zu verwenden.
• „Auto nach vorne fahren lassen“ (ein Fahrzeugsymbol aus dem Screenshot ausschneiden und entlang einer Route bewegen) funktioniert nur auf geraden Straßen; der Rahmen muss nah am Fahrzeug sein. Dies ist für Navigations-App-Screenshots gedacht; andere Apps ignorieren es.
• Video nach Export nicht gefunden: Die Konsole zeigt nach Abschluss den vollständigen Pfad. Wenn ein Desktop existiert, wird das Video dort abgelegt (auch unter Windows, wenn OneDrive den Desktop übernimmt); andernfalls bleibt es im out-Ordner des Projekts.
• Windows: Das Installationsskript und der Launcher sind nach Windows-Regeln geschrieben, aber dieser Skill wurde auf Mac entwickelt und unter Windows noch nicht getestet. Beim ersten Einsatz unter Windows überprüfe jede Ausgabe; wenn ein Fehler auftritt, repariere zuerst das Skript, bevor du fortfährst, und informiere den Nutzer. Die Standardschriftarten unterscheiden sich (Mac: SF, Windows: Segoe UI); bei gleichen Einstellungen können die Schriftzeichen im exportierten Video leicht abweichen.
• Port 5173 belegt: Vite wechselt automatisch zum nächsten freien Port; die tatsächliche Adresse steht in der Startprotokollmeldung.