Communitygithub.com

huypham85/app-3d-video

Erstellt 3D-Promo-, Teaser- oder Feature-Videos für iOS-Apps mit einem echten 3D-iPhone und einem Maskottchen, das durch die App-Schnittstelle hüpft und mit ihr interagiert.

Was ist app-3d-video?

Diese Skill generiert ein 20-sekündiges vertikales Video, das komplett auf dem Mac gerendert wird. Es enthält ein echtes SceneKit-iPhone in einer hellen, elfenbeinfarbenen Welt, ein Maskottchen, das auf die echte Benutzeroberfläche springt und tippt, wertorientierte Überschriften und einen originellen Swing-Score, der jeden Sprung auf einer Marimba-Note landen lässt. Das Template in `template/` ist ein vollständiges Beispielprojekt (eine Medikamentenerinnerungs-App namens 'MyApp') und kann sofort ausgeführt werden. Der Benutzer kann die Geschichte, die UI, die Daten, die Marke und die Musik ändern, während das visuelle Erscheinungsbild erhalten bleibt, sofern der Benutzer nichts anderes wünscht. Die Skill erfordert die Sub-Skill `motion-video` für Engine, Beat-Grid-Planung und Standbildprüfung und enthält detaillierte Referenzen in `reference.md`. Die Skill unterstützt die Planung auf einem Beat-Grid (96 BPM Swing, 8 Takte = 20 s), die Erstellung von Standbildern in mindestens zwei Durchgängen und die Auslieferung des finalen MP4-Videos. Sie ist ideal für Entwickler und Kreative, die professionelle App-Werbevideos mit minimalem Aufwand und hoher Anpassbarkeit erstellen möchten.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/huypham85/app-3d-video-skill/tree/HEAD/app-3d-video

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

App 3D-Video

Übersicht

Ein 20 s vertikales Video, vollständig auf diesem Mac gerendert: ein echtes SceneKit-iPhone in einer hellen elfenbeinfarbenen Welt, das Maskottchen der App als Figur, die hüpft und die echte Benutzeroberfläche bedient, wertorientierte Überschriften und ein origineller Swing-Score, der jeden Sprung auf einer Marimba-Note landen lässt. template/ ist ein vollständiges Beispielprojekt (eine Medikamentenerinnerungs-App namens "MyApp") und läuft sofort. Ändern Sie die Geschichte, UI, Daten, Marke und Musik; behalten Sie das Aussehen bei, es sei denn, der Benutzer wünscht etwas anderes.

ERFORDERLICHE SUB-SKILL: motion-video (Engine, Beat-Grid-Planung, Standbildprüfung). Jeder Wert (Palette, Größen, Licht, Musik, Fallstricke, Zweitgeräte, real vs. illustrativ) befindet sich in reference.md neben dieser Datei.

Wo sich die beiden Skills unterscheiden, gewinnt diese: kopieren Sie template/, führen Sie bash mv3d.sh aus (nicht mv.sh), und die Sprünge, Glitzer und Konfetti des Maskottchens gehören zum Look, auch wenn das Gesundheits-Preset von motion-video sie vermeidet. Die UI, die Daten trägt, taucht nur kurz auf und zeigt einen Pop; das Maskottchen macht die Sprünge.

Vom Template starten

cp -R ~/.claude/skills/app-3d-video/template ~/Movies/MotionVideo/<slug>
cd ~/Movies/MotionVideo/<slug>
bash mv3d.sh audio                   # score.swift -> music.wav, gibt Pegel aus; vor Stills ausführen
bash mv3d.sh stills 0.5,4.6,10.1     # BEATS -> stills/ + sheet.png
bash mv3d.sh video                   # out.mp4, ca. 5 min für 20 s mit einem Telefon: im Hintergrund ausführen
bash mv3d.sh frames out.mp4 2.5,6.3  # SEKUNDEN -> check/ + check_sheet.png

Die Markenwerte befinden sich im BRAND-Block am Anfang von scenes.swift: APP_NAME (Endkarten-Wortmarke), APP_VERSION (die 3D-Zahl; deren Größe und Position auf Stills überprüfen, wenn sich die Länge ändert), LABEL (kleines Label über der ersten Überschrift), END_PILL (Verlaufs-Pill auf der Endkarte) und die Maskottchenfarben. Ersetzen Sie dann jeden headline(...)-Aufruf in render(), die Header-Kommentare und plan.md. "COMING IN …" und "COMING SOON" sind Teaser-Formulierungen; für eine Einführung fragen Sie den Benutzer nach der Label- und Endkarten-Text.

Die Beispielszenen (Live Activity Card, Lock Screen Widget, eine Pillendosen-Wochen-Tapete) gehören zur Beispiel-App. Ersetzen Sie sie durch die eigene UI des Benutzers, behalten Sie die Techniken bei: pro-Frame 2D-Canvas auf den Telefonbildschirm gemappt, das Maskottchen, das auf Elementen steht und drückt, Zeitraffer, die von einer einzigen Uhr gesteuert werden.

Arbeitsablauf

  1. Fakten. Lesen Sie das Repository des Benutzers für jede Funktion: echte Strings, Layout, Farbpalette, Zustände, Paywall-Gating, die Farben des App-Symbols (sie werden zu denen des Maskottchens). Fragen Sie, was der Code nicht beantworten kann (welche Funktionen, genaue Namen, kostenlos oder kostenpflichtig, Teaser oder Launch, Länge; Standard 20 s vertikal). Eine Funktion ohne UI im Repository: Fragen Sie nach einem Design oder Screenshot. Ohne eines zeichnen Sie es aus dem Designsystem der App, listen Sie es als illustrativ und zeigen Sie es auf dem ersten Stills-Blatt.
  2. Maskottchen. Standard ist die zweifarbige Kapsel in den Markenfarben der App. Wenn die App ein eigenes Maskottchen oder eine einfache Symbolform hat, bauen Sie es aus SceneKit-Primitiven in buildCapsule() (behalten Sie CAP_HALF, die Einheitsgröße und die Materialliste, damit Schatten und die beiden Durchgänge weiterhin funktionieren).
  3. Plan plan.md auf dem Beat-Grid (96 BPM Swing, 8 Takte = 20 s). Eine Funktion = eine Maskottchen-Interaktion mit ihrer echten UI. Ein Morgen, ein Datensatz, eine Uhr. Das Telefon ist die Bühne; ein zweites Gerät (Watch, iPad) kommt nur für eine Funktion hinzu, die dort lebt (reference.md, "Zweites Gerät"). Listen Sie real vs. illustrativ auf.
  4. Kopieren. Überschrift = was der Benutzer bekommt, niemals ein Funktionsname. Ein PRO-Chip in der Unterzeile für kostenpflichtige Dinge. Wenn eine Humanizer-Skill installiert ist, führen Sie sie auf jeder Zeile aus, dann überprüfen Sie die Fakten erneut.
  5. Score. Behalten Sie den Sound (Ukulele, Marimba, Pfeifen, Snaps, E-Dur, der Synthesizer-Ton auf dem ersten Schlag der Endkarte), aber schreiben Sie neue Akkorde, Melodie und Hits für die neue Choreografie: jede Landung ist eine Marimba-Note auf ihrem visuellen Beat. Wenn die App einen eigenen Benachrichtigungston hat, kann er den Synthesizer-Ton ersetzen (siehe Ende von score.swift); passen Sie die Tonart des Scores an ihn an (motion-video references/score-guide.md). Wenn der Benutzer andere Musik wünscht, ändern Sie auch die Instrumente. Ziel −13…−15 dBFS, 0 % Clipping.
  6. Stills, mindestens zwei Durchgänge, einschließlich der Beats während der Sprünge. Überprüfen: Das Maskottchen verdeckt niemals Informationen, es verweilt auf dem, was es drückt, Schatten sind sichtbar, die Telefonoberseite befindet sich unterhalb der Überschrift, nichts scheint durch die Kopie, und keine echte UI-Farbe kollidiert mit der orangefarbenen Überschrift.
  7. Render im Hintergrund, dann frames auf der MP4 und ansehen.
  8. Ausliefern nach ~/Downloads/<App>_<Thema>_3D_<N>s[_vN].mp4 und die Datei an den Benutzer senden oder zeigen. Berichten Sie Beat für Beat in Sekunden, real vs. illustrativ, und dass das Audio messtechnisch beurteilt wurde. Behalten Sie frühere Versionen in v1/. Behalten Sie das Video in einer Sprache, bis der Benutzer es genehmigt; jedes zusätzliche Gebietsschema ist ein vollständiges Neu-Rendering, fragen Sie also, welche Gebietsschemata sie möchten.

Look-Vereinbarung

  • Elfenbein/Hafer-Welt mit einer weichen Sonne. Kein dunkler Studiohintergrund, kein gesättigtes Pink.
  • Neutrales Titan-Telefon, beige Fotowandtapete, dunkle Tintenuhr, helle Paletten für Bildschirmkarten.
  • SF Pro Rounded fette Überschriften; Zeile 2 ist der orangefarbene Verlauf.
  • Das Maskottchen interagiert (landet, stampft, Kopf-anstöße, hüpft über Elemente). Es umkreist oder posiert niemals nur.
  • Echte weiche Schatten. Kein DOF, kein Bloom.

Häufige Fehler

FehlerBehebung
Beats an frames oder Sekunden an stills übergebenframes = Sekunden, stills = Beats (20 s = 32 Beats)
Maskottchen verlässt einen Button sofort nach der LandungVerweilen Sie etwa 0,2 Beats, damit der Druck lesbar ist
Maskottchen steht auf der Zeit oder dem LabelPlatzieren Sie es neben der Information, die es verdecken würde
Ein Mesh mit opacity ausblendenVerschieben, skalieren oder verstecken Sie es
Markenfarbe kollidiert mit dem orangefarbenen ÜberschriftenverlaufBehalten Sie die Marke auf dem Maskottchen und der Versionsnummer; ändern Sie den Überschriftenverlauf nur, wenn der Benutzer es verlangt

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills