app-store-header-video

App Store Header-Video

Erstellen Sie die beiden Creative-Asset-Videos für den App Store: den Produktseiten-Header, der sich über dem App-Icon wiederholt, und den Suchergebnis-Header, der auf der App-Karte in der Suche abgespielt wird. Beide werden stummgeschaltet automatisch abgespielt und wiederholen sich endlos, daher muss jeder Frame ohne Ton funktionieren und der letzte Frame muss nahtlos in den ersten übergehen.

Dieses Skill bereitet die Datei vor. Es lädt niemals etwas hoch oder reicht etwas ein – die Veröffentlichung erfolgt durch den Nutzer in App Store Connect.

Zu erfassende Eingaben

Fragen Sie nur nach dem, was fehlt; das Gespräch liefert normalerweise bereits einige Informationen.

1. Platzierung(en) – Header (21:9), Suchergebnisse (3:2) oder beides. Jede hat andere Abmessungen, daher kann ein Header-Render nicht unverändert für die Suche wiederverwendet werden.
2. Die eine Idee – ein Satz, den das Video vermitteln muss. Apples eigene Richtlinie: "Konzentrieren Sie sich auf eine einzige, klare Idee." Zwei Ideen bedeuten, dass keine ankommt.
3. App-Identität – App-Name, einzeiliges Wertversprechen, Markenfarben, Logodatei, App-Icon-PNG.
4. Echtes Produktmaterial – Screenshots oder Filmmaterial der tatsächlichen App, wenn das Konzept die App zeigt. Creative Assets können stattdessen die Marke oder den Inhalt hervorheben, sodass dies optional ist, aber wenn die App gezeigt wird, müssen es echte Aufnahmen sein.
5. Länge – Standard 8 Sekunden. Apple akzeptiert 5–30 s.
6. Anlass – Immer aktuell, saisonaler Start, Funktionsauslieferung, Neugestaltung. Beeinflusst, ob das Asset später wiederverwendet werden kann.

Vorgehensweise

Die Skripte dieses Skills befinden sich in scripts/ neben dieser Datei. Lösen Sie diesen Pfad gegen das eigene Verzeichnis dieser SKILL.md auf, wann immer Sie sie ausführen – das Arbeitsverzeichnis des Benutzers ist nicht das Skill-Verzeichnis.

1. Platzierung festlegen und Spezifikation lesen

Lesen Sie references/specs.md, bevor Sie mit dem Bau beginnen. Es enthält Apples genaue Tabellen, die Unterscheidung zwischen App-Preview und Creative-Asset sowie die Safe-Area-Regeln.

Wenn das asc CLI im PATH ist, gibt asc asset-library specs Apples Live-Referenzdaten zurück – verwenden Sie es, um zu bestätigen, dass sich die Zahlen seit dem Schreiben dieses Skills nicht geändert haben. references/publishing.md enthält die Abfrage.

Die beiden Platzierungen sind nicht austauschbar:

Platzierung	Seitenverhältnis	Größe	Typische Verwendung
Produktseiten-Header	21:9	exakt 3840x1646	Vollbreites Banner über dem Icon
Suchergebnisse	3:2	1920x1280 bis 3840x2560	Die Karte in den Suchergebnissen

2. Eine Idee auswählen und das Posterframe benennen

Notieren Sie die einzelne Idee und das Posterframe – das Standbild, das ein Benutzer sieht, bevor die Wiedergabe beginnt, und das Frame, das Apple anzeigt, wenn die Autoplay-Funktion deaktiviert ist. Das Posterframe muss als eigenständiges Standbild funktionieren. "Beginnen Sie mit Ihrem Wertversprechen oder der überzeugendsten Funktion" (Apple). Wenn das Posterframe eine Bildunterschrift benötigt, um sinnvoll zu sein, ist die Idee noch nicht abgeschlossen.

3. Die Naht entwerfen, nicht einen Clip

Das Video wird kontinuierlich wiederholt und die Leute sehen es sich mehrmals an, daher muss der Zustand bei t=0 und t=D übereinstimmen. Planen Sie dies, bevor Sie irgendetwas animieren:

• Kontinuierliche Bewegung – eine vollständige 360°-Drehung oder ein sich endlos verschiebendes Feld wickelt sich perfekt ohne zusätzliche Arbeit.
• Rückkehr zum Ausgangszustand – Skalierung oder Position animiert zurück zum Startwert, und der letzte Schlag landet exakt auf dem Startframe.
• Überblendung – Einblenden über den Eröffnungstakt, halten, wieder ausblenden in den Basiszustand über den Schlusstakt, sodass die Wicklung eine weiche Überblendung ist.

Ein Clip zeigt über [start, start + dauer) und ein Endzustand, der genau auf seinem Ende landet, wird nie gerendert. Beenden Sie die abschließende Tween-Bewegung ein Frame früher (start + dauer - 1/fps), sodass das letzte sichtbare Frame wirklich der Basiszustand ist – sonst ist die Schleife ein Frame zu kurz zum Schließen.

Ein Clip, der auf einem anderen Frame endet als er beginnt, wird als Fehler wahrgenommen, nicht als Schleife.

4. In HyperFrames erstellen

npx hyperframes init <projekt-verz>

Die index.html deklariert die Leinwand. Setzen Sie sie auf die exakte Pixelgröße der Platzierung – HyperFrames rendert in den erstellten Abmessungen der Komposition und ignoriert jede von Ihnen angenommene Größe:

<div id="root"
     data-composition-id="main"
     data-width="3840" data-height="1646"
     data-duration="8" data-fps="30">

Regeln, die diesen Schritt machen oder brechen:

• Härten Sie 1920px/1080px auf #root nicht ein; stylen Sie es mit width:100%; height:100%.
• Es gibt kein --resolution-Preset für 21:9 oder 3:2 – --resolution landscape-4k ist 3840x2160, was die falsche Form ist und abgelehnt wird.
• Geben Sie dem Host-Div, dem Szenen-Root und dem Timeline-Key die gleiche ID. Ein Missmatch lässt jeden Render 45 s pro Szene warten und zeigt dann statische Frames.
• Verwenden Sie fromTo, nicht from, innerhalb einer Szene – der Host sucht die Szene erneut auf und from drifte bei der Rückwärtssuche, was genau das ist, was eine Schleife bricht.
• Schriftarten müssen als Dateien in assets/fonts/ mit @font-face gebündelt werden; nur gebündelte Schriftfamilien werden nach Namen aufgelöst.
• Platzieren Sie Text und Kopien in der Komposition als Variablen (data-var-text), niemals in ein Bild eingebacken.
• Halten Sie jede Szene in compositions/ als eigene Unterkomposition, sodass ein einzelner Takt neu gerendert werden kann.

references/hyperframes-build.md enthält die Code-Snippets für die Schleifentechnik, die Check- und Snapshot-Befehle, die Render-Flags und eine Pipeline von der Leinwand zu ffmpeg, auf die zurückgegriffen werden kann, wenn ein Browser-Render mit 3840x1646 zu langsam für Iterationen ist. Die Spezifikation und die Überprüfung sind in beiden Fällen gleich.

5. Unterstützendes Bildmaterial nur generieren, wenn das Konzept es benötigt

Fotos, Illustrationen und atmosphärische Hintergründe stammen aus der Bildgenerierung. Generieren Sie niemals App-UI mit einem Bildmodell – es halluziniert Schnittstellen, und eine gefälschte Benutzeroberfläche in einem Store-Eintrag ist schlimmer als keine Benutzeroberfläche. Verwenden Sie echte Screenshots für die App; verwenden Sie die Generierung für alles darum herum.

mcode-tools connector tools --keyword image
mcode-tools connector tool <tool_name>          # zuerst input_schema lesen
mcode-tools connector call <tool_name> --args '{"prompt":"...","aspect_ratio":"21:9"}'

references/asset-generation.md enthält den vollständigen Erkennungs- und Aufrufablauf sowie die Aufforderung für ein bestimmtes Seitenverhältnis.

6. Prüfen, Snapshot, Vorschau – dann rendern

npx hyperframes check --json                                  # muss sauber sein
npx hyperframes snapshot --at 0,4,8                            # die PNGs lesen
npx hyperframes preview --background                           # dem Benutzer die URL geben

Betrachten Sie die Snapshots, bevor Sie die Vorschau zeigen. Bestehen der Prüfungen allein bedeutet nicht, dass das Frame richtig aussieht.

Rendern Sie erst, nachdem der Benutzer die Vorschau gesehen und genehmigt hat, oder wenn er nach der Datei ohne Stopps gefragt hat:

npx hyperframes render --quality delivery --fps 30 --format mp4 --output out/<name>.mp4

Fügen Sie --video-frame-format png hinzu, wenn die Quelle eine Bildschirmaufnahme der App ist, damit UI-Text und flache Farben die Frame-Extraktion überleben.

Auf Snapshots iterieren, einmal rendern. Ein Einzelbild-Snapshot ist nahezu sofort, beurteilen Sie die Komposition daher mit npx hyperframes snapshot --at 0,4,7.9 und lesen Sie die PNGs. Ein vollständiger Delivery-Render in 3840x1646 von 8 Sekunden dauert auf einem M-Series Mac etwa 9 Sekunden – das Rendern ist nicht der langsame Teil, die Iteration ist es. Rendern Sie einmal, wenn die Frames richtig aussehen.

Rendern Sie den Test in Delivery-Qualität oder codieren Sie ihn vor dem Vertrauen in das Nahturteil neu. Ein Render in Draft-Qualität trägt Quantisierungsrauschen, und das Rauschen des Encoders auf dem letzten Frame unterscheidet sich von seinem Rauschen auf dem ersten Frame. Das zeigt sich als ein Wicklungsunterschied, der nicht geometrisch ist, und Sie werden am Ende einem Fehler nachjagen, der nicht existiert. Wenn ein kleiner Test von --quality draft stammt, codieren Sie ihn so um, wie es das Conform-Skript tun würde (libx264 -crf 18 -pix_fmt yuv420p) und überprüfen Sie ihn.

7. Die Datei an die Spezifikation anpassen

Führen Sie dies auch nach einem HyperFrames-Render aus. Falsche Bildrate und falsche Pixelgröße sind die beiden Ablehnungsgründe, auf die Leute zuerst stoßen.

node <skill-verz>/scripts/conform-video.mjs --in out/header.mp4 --out out/<app>-header.mp4 --placement header
node <skill-verz>/scripts/conform-video.mjs --in out/search.mp4 --out out/<app>-search.mp4 --placement search

Jede Platzierung benötigt ihre eigene Komposition und ihren eigenen Render. Die Header-Leinwand ist 21:9 und die Such-Leinwand ist 3:2 – das Zuschneiden einer in die andere wirft die Komposition weg und platziert das Motiv außerhalb des Rahmens. Conform behebt Auflösung, Bildrate und Codec; es kann keine Komposition reparieren, die für die falsche Form gebaut wurde. Setzen Sie den Root der Suchkomposition auf data-width="3840" data-height="2560".

Ein Projekt-Root pro Platzierung. Die Root-Komposition deklariert die Leinwand, daher können die beiden Platzierungen keinen Root teilen. Geben Sie jeder ihren eigenen Projektordner mit einer eigenen index.html und einer Kopie der Assets – check und snapshot sehen nur den Root, und render --composition <datei> rendert eine eigenständige Kompositionsdatei.

Das Skript skaliert und schneidet auf die exakte Leinwand zu, erzwingt eine konstante 30 oder 60 fps, codiert H.264 yuv420p (kein Alpha), entfernt Audio und setzt faststart. Es weigert sich, stillschweigend hochzuskalieren, und sagt dies, wenn die Quelle zu klein ist.

8. Vor der Übergabe verifizieren

node <skill-verz>/scripts/verify-video.mjs out/<app>-header.mp4 --placement header
node <skill-verz>/scripts/verify-video.mjs out/<app>-search.mp4 --placement search

Das Skript überprüft Abmessungen, Seitenverhältnis, Bildrate (konstant, genau 30 oder 60), Dauer, Codec, Pixelformat und Audio. Es beurteilt auch die Schleifennaht: Es vergleicht das erste Frame mit dem letzten Frame relativ zur eigenen typischen Frame-zu-Frame-Bewegung des Clips, sodass ein Übergang, der störender ist als ein gewöhnlicher Frameschritt, als sichtbarer Sprung gemeldet wird. Es schreibt einen *-seam.png-Streifen beider Frames zur visuellen Überprüfung. Es muss mit Exit-Code 0 beendet werden. Korrigieren Sie die Komposition und rendern Sie neu, wenn dies nicht der Fall ist.

Ziehen Sie dann das Posterframe heraus und betrachten Sie es isoliert – dies ist das Standbild, das der Store vor dem Start der Wiedergabe zeigt. Wenn es also eine Bildunterschrift benötigt, um sinnvoll zu sein, muss das Video überarbeitet werden. Wählen Sie das stärkste Frame, das nicht unbedingt das erste sein muss:

ffmpeg -v error -y -ss 00:00:04.000 -i out/<app>-header.mp4 -frames:v 1 out/<app>-poster.png

Melden Sie den Timecode, den Sie gewählt haben. Posterframes werden im Asset in der Asset Library gesetzt und können nach der Genehmigung des Assets nicht mehr bearbeitet werden, daher muss die Entscheidung vor dem Einreichen getroffen werden.

9. Übergeben

Geben Sie dem Benutzer:

• den/die endgültigen Dateipfad(e), einen pro Platzierung
• den Verifikationsbericht
• das Posterframe und welches Frame es ist
• die Veröffentlichungsschritte

Ein Creative Asset muss drei separate Hürden passieren – hochgeladen, genehmigt und platziert – und die Genehmigung allein veröffentlicht es nicht. references/publishing.md enthält beide Wege mit den genauen asc-Befehlen:

asc asset-library view --app APP_ID                     # die Bibliotheks-ID finden
asc asset-library videos upload --library-id ID --file ./header.mp4
asc asset-library videos set-poster-frame --id VIDEO_ID --time-code 00:00:04:00
asc localizations list --app APP_ID                     # die Lokalisierungs-ID finden
asc localizations placements create --localization-id LOC --video-id VID \
  --placement-type PRODUCT_PAGE_HEADER_ASSET           # oder APP_STORE_SEARCH_RESULTS_ASSET

Für eine App, die bereits live ist, lautet die Kurzversion in App Store Connect: Apps → Ihre App → Seitenleiste → Asset Library → + → Creative Assets hochladen → beide Dateien hochladen → ein Posterframe setzen → Zur Überprüfung hinzufügen → Zur Überprüfung einreichen → auf APPROVED warten → Live-Version → Produktseiteninformationen → "Header und Suchergebnisse" → Assets durchsuchen → das Asset auswählen → Weiter → Veröffentlichen. Dies wird ohne neue Version und ohne neue Überprüfung live geschaltet. Wenn die App noch keine Live-Version hat, hängen Sie die Assets stattdessen an die nächste Version an und reichen Sie diese ein.

Weisen Sie den Benutzer an, das Ergebnis mit der Vorschau im Tab "Header und Suchergebnisse" zu überprüfen – es zeigt das Asset auf iPhone und iPad, in verschiedenen Ausrichtungen, Sprachen und im Dark Mode, und der Zuschnitt unterscheidet sich pro Platzierung. Posterframes können nach der Genehmigung des Assets nicht mehr bearbeitet werden, wählen Sie also eines vor dem Einreichen aus.

Hören Sie dort auf. Führen Sie den Upload, die Überprüfungseinreichung oder die Veröffentlichung nicht selbst durch. Hochladen und Veröffentlichen sind die Schritte des Benutzers.

Ausgabe-Vertrag

• out/<app>-header.mp4 – 3840x1646, H.264 yuv420p, konstante 30 oder 60 fps, 5–30 s, kein Alpha, kein Audio, unter 500 MB
• out/<app>-search.mp4 – 3:2 innerhalb von 1920x1280–3840x2560, gleiche Codierungsregeln
• ein Verifikationsbericht mit BESTANDEN für jede Prüfung
• ein Posterframe und sein Timecode
• eine kurze Übergabenotiz mit den Veröffentlichungsschritten aus references/publishing.md

Beide Platzierungen erhalten ihre eigene Datei. Übergeben Sie nicht eine Datei für beide.

Fehlerbehandlung

Symptom	Was zu tun ist
ffprobe / ffmpeg nicht gefunden	brew install ffmpeg (macOS) oder choco install ffmpeg (Windows); die Skripte benötigen sie zum Prüfen und Anpassen
HyperFrames kann Chrome nicht starten	npx hyperframes browser ensure, dann npx hyperframes doctor --json und .ok überprüfen
Render fühlt sich langsam an	Normalerweise ist er das nicht. Ein 3840x1646, 8 s Delivery-Render misst auf einem M-Series Mac etwa 9 s. Wenn es wirklich langsam ist, überprüfen Sie, ob der Renderer GPU-Worker hat, und iterieren Sie stattdessen auf hyperframes snapshot-Frames. --quality looks ist schneller als --quality delivery, wenn Sie nur einen Eindruck benötigen
Der Encoder taggt die Datei mit Level 4.1	Beide Leinwände überschreiten die Makroblock-Obergrenze von Level 4.1 – 3840x1646 sind 24720 Makroblöcke und 1920x1280 sind 9600, gegenüber einem Limit von 8192. Mit -level 5.1 neu codieren
Naht-Prüfung schlägt fehl	Korrigieren Sie den letzten Takt, sodass der Zustand in den Basiszustand zurückkehrt. Eine Crossfade (--seam-crossfade) ist ein Fallback, keine Korrektur, weil sie C Sekunden Inhalt frisst
Text ist in der Miniaturansicht unlesbar	Vergrößern Sie ihn. Apple weist darauf hin, dass Assets im Store unterschiedlich erscheinen, daher ist die kleinste Darstellung der eigentliche Test
Upload in App Store Connect abgelehnt	Führen Sie verify-video.mjs auf der Datei aus, die tatsächlich hochgeladen wurde, nicht auf dem lokalen Original. asc asset-library videos upload validiert die Datei ebenfalls gegen Apples Live-Spezifikation, bevor es hochlädt, daher benennt sein Fehler die Regel, die Sie verpasst haben
Apple lehnt die Platzierung ab	Der Slot ist möglicherweise bereits belegt – das Erstellen einer Platzierung ersetzt keine vorhandene. Verwenden Sie asc localizations placements list --localization-id LOC, um zu sehen, was belegt ist, und verwenden Sie --replacement-id PLACEMENT_ID, wenn Sie eine vorhandene ersetzen müssen. Wenn der Slot für den Platzierungstyp in dieser Lokalisierung nicht verfügbar ist, wählen Sie eine andere Lokalisierung oder entfernen Sie zuerst die vorhandene Platzierung
Der Pfad des Skills wird benötigt	__dirname dieser Datei oder die Umgebungsvariable, die der Agent setzt, wenn er eine Skill.md lädt. Wenn der Agent den Pfad nicht bereitstellt, fragen Sie den Benutzer nach dem Pfad des Skill-Ordners.