roedyrustam/app-promo-media-expert

App-Werbemedien-Experte (Ausgabe 2026)

English | Bahasa Indonesia

---

Englisch

Orchestrierung & Integration

• ai-media-generation-expert: Generiert KI-Bilder (Flux 1.1 Pro), Video-B-Roll (Sora, Runway Gen-3) und synthetische Voiceover-Erzählungen (ElevenLabs v3).
• svg-animation-motion-expert: Hochperformante SVG-Animationen, Framer-Motion-Übergänge und kinetische Typografie.
• file-upload-media-expert: CDN-Asset-Verteilung, verlustbehaftete/verlustfreie Bildkompression (Sharp) und Videotranskodierung.
• seo: Dynamische Open-Graph (og:image), Twitter-Card-Metadaten und Social-Crawler-Vorschauen.
• ui-ux-pro-max: Design-Tokens, Typografie-Hierarchien und Layoutgestaltung von Werbekarten.
• visual-ui-auditor: Multimodale visuelle Prüfung von Marketing-Screenshots, Kontrast und Geräterahmen.
• anti-slop: Anti-Slop-Werbematerial, das generische Stock-Mockups und gefälschte UI-Artefakte vermeidet.
• senior-frontend / tailwind-expert: Hochauflösende CSS-Geräterahmen, Canvas-Compositing und responsives Layout-Styling.
• zero-to-prod-orchestrator: Koordiniert Phase 5 (visuelle Assets & UI-Branding) und Phase 8 (Launch, Deployment, Übergabe von Marketing-Assets).
• Cross-Domain-Synergie & Subagent-Swarm-Integration: mobile-expo-expert, design-system-architect

Beschreibung

Produktionsreifer Entwicklungsleitfaden zur Erstellung hochkonvertierender Applikations-Werbemedien, die sowohl statische Grafiken (App-Store-Screenshots, Social-Media-Karten, dynamische OG-Banner) als auch dynamische Bewegtmedien (Remotion-Programmatic-Video-Teaser, kinetische App-Durchläufe und KI-erzählte Launch-Demos) umfasst.

Auslösebedingungen

• Generierung von Werbescreenshots für den Apple App Store & Google Play Store mit Geräte-Mockups.
• Erstellung von Launch-Grafiken für Product Hunt, Twitter/X-Banner, LinkedIn-Showcases und Instagram/TikTok-Karussell-Anzeigen.
• Implementierung dynamischer Open-Graph-(OG)-Social-Card-Bildgenerierung via Satori / @vercel/og.
• Programmatische Erstellung von App-Werbevideos, Teaser-Trailern oder Produkt-Tour-Videos mit Remotion (React-basiertes Video).
• Erstellung und Synthetisierung von 30-sekündigen hochkonvertierenden App-Teaser-Storyboards mit KI-Voiceovers.
• Automatisierung von Multi-Resolution-Screenshot-Erfassungspipelines mittels Headless-Browser-Automatisierung (Playwright/Puppeteer).

---

Kernarchitektur & Medienproduktionssäulen

                     ┌──────────────────────────────────────────────┐
                     │          APP WERBEMEDIEN ENGINE              │
                     └──────────────────────┬───────────────────────┘
                                            │
               ┌────────────────────────────┴───────────────────────────┐
               ▼                                                        ▼
   STATISCHE BILDER & GRAFIKEN                            MOTION & VIDEOERSTELLUNG
 ├── App Store & Google Play Screenshots                   ├── Remotion Programmatische Videos (React)
 ├── Social Cards (X, LinkedIn, Product Hunt)              ├── 30s Hochkonvertierende Teaser-Formel
 ├── Dynamische OpenGraph-Banner (@vercel/og)              ├── Kinetische Typografie & Cursor-Trails
 └── Reine CSS/SVG Geräte-Mockups (iPhone/Pixel)          └── KI-Voiceover & B-Roll-Synchronisation

---

1. App Store & Google Play Screenshot-Matrix

A. Auflösungs- & Spezifikationsstandard (2026)

Zielplattform	Displaygröße	Native Auflösung	Seitenverhältnis	Formatanforderungen
Apple iOS (iPhone 16 Pro Max)	6,9" Super Retina	1320 × 2868 px	19,5:9	24-Bit-PNG, RGB, kein Alpha, max. 10 MB
Apple iOS (iPhone 16 / 15 Pro)	6,7" Super Retina	1290 × 2796 px	19,5:9	24-Bit-PNG, RGB, kein Alpha, max. 10 MB
Apple iPadOS (iPad Pro 13")	13,0" Liquid Retina	2064 × 2752 px	4:3	24-Bit-PNG, RGB, kein Alpha
Google Play Phone	Standard-Flaggschiff	1080 × 2400 px (oder 1080 × 1920)	20:9 / 16:9	PNG/JPEG, mind. 1080px auf der kürzesten Seite
Google Play Feature Graphic	Hero-Banner	1024 × 500 px	~2:1	24-Bit-PNG/JPEG, kein Alpha, max. 1 MB
App Store Promo Video	Vorschau-Video	1080 × 1920 px (Hochformat) / 1920 × 1080	9:16 / 16:9	MP4/ProRes, max. 30 s, keine gefälschten OS-Overlays

B. Hochkonvertierende Screenshot-Kompositionsformel

Jeder Screenshot in der Sequenz muss einer 4-teiligen visuellen Hierarchie folgen:

1. Überschrift (Knackiger Nutzen): Max. 4-6 Wörter. Fokus auf die Transformation, nicht auf die technische Funktion (z. B. „Rechnungen in 3 Sekunden automatisieren“ vs. „Rechnungserstellungsformular“).
2. Unterüberschrift (Kontextueller Anker): 1 kurzer Satz, der den Arbeitsablauf verdeutlicht.
3. Schwebendes UI / Gerahmtes Mockup: Hochkontrastreiches, pixelgenaues Geräte-Mockup, um 5°-12° geneigt oder von vorne, zentriert in den unteren 65 % des Rahmens.
4. Ambient Canvas / Verlauf: Subtiler OKLCH-Hintergrundverlauf passend zum Markenthema mit weichen radialen Leuchteffekten.

---

2. Social-Launch-Grafikspezifikationen

• Product Hunt Launch Kit:
  • Galerie-Bilder: 1270 × 760 px (5:3-Verhältnis). Präsentieren Sie die Top-3-Funktionen mit klarer Typografie und echten UI-Screens.
  • Animierter Galerie-Teaser: 240 × 240 px GIF oder MP4 (unter 3 MB) für die Produktkarten-Miniaturansicht.
• Twitter / X Cards:
  • Werbekarte im Feed: 1200 × 675 px (16:9) oder 1200 × 630 px (1,91:1).
  • Profil-Banner: 1500 × 500 px (3:1-Verhältnis).
• Instagram & TikTok Beiträge:
  • Karussell-Feed-Folien: 1080 × 1350 px (4:5 Hochformat).
  • Story & vertikaler Teaser: 1080 × 1920 px (9:16-Verhältnis).

---

3. Dynamischer Open Graph (OG) Bildgenerator

Die dynamische OG-Generierung stellt sicher, dass jeder geteilte Link auf Twitter/X, Discord, Slack und WhatsApp eine individuelle hochauflösende gebrandete Karte rendert.

// app/api/og/route.tsx (Next.js 15 + @vercel/og / Satori)
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || 'Next-Gen AI Workspace';
  const subtitle = searchParams.get('subtitle') || 'Built with VibesPlug Swarm Architecture';
  const tag = searchParams.get('tag') || 'v3.0 Production Ready';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          padding: '64px',
          backgroundColor: '#090a0f',
          backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 60%)',
          fontFamily: 'Inter, sans-serif',
          color: '#ffffff',
        }}
      >
        {/* Top Badges */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div
            style={{
              padding: '6px 16px',
              borderRadius: '9999px',
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              fontSize: '20px',
              fontWeight: 600,
              color: '#818cf8',
            }}
          >
            {tag}
          </div>
        </div>

        {/* Main Title & Subtitle */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '850px' }}>
          <h1
            style={{
              fontSize: '60px',
              fontWeight: 800,
              lineHeight: 1.1,
              letterSpacing: '-0.02em',
              background: 'linear-gradient(135deg, #ffffff 40%, #94a3b8 100%)',
              backgroundClip: 'text',
              color: 'transparent',
              margin: 0,
            }}
          >
            {title}
          </h1>
          <p
            style={{
              fontSize: '26px',
              color: '#94a3b8',
              lineHeight: 1.4,
              margin: 0,
            }}
          >
            {subtitle}
          </p>
        </div>

        {/* Footer Brand Branding */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            borderTop: '1px solid rgba(255, 255, 255, 0.1)',
            paddingTop: '24px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div
              style={{
                width: '32px',
                height: '32px',
                borderRadius: '8px',
                background: 'linear-gradient(135deg, #6366f1, #a855f7)',
              }}
            />
            <span style={{ fontSize: '22px', fontWeight: 700 }}>MyApp.io</span>
          </div>
          <span style={{ fontSize: '18px', color: '#64748b' }}>Try free today • No credit card</span>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

---

4. Programmatische Videoerstellung mit Remotion (React)

Remotion ermöglicht es Entwicklern, MP4-Werbevideos vollständig aus Code zu rendern, einschließlich animierter UI-Komponenten, kinetischer Typografie, Federphysik und Geräterotationen.

// src/remotion/AppPromoComposition.tsx
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import React from 'react';

export function AppPromoComposition({
  headline,
  subheadline,
  screenshotUrl
}: {
  headline: string;
  subheadline: string;
  screenshotUrl: string;
}) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Entrance spring animation for the device mockup
  const deviceEntrance = spring({
    frame,
    fps,
    config: { damping: 14, stiffness: 90 },
  });

  const translateY = interpolate(deviceEntrance, [0, 1], [400, 0]);
  const scale = interpolate(deviceEntrance, [0, 1], [0.85, 1]);

  // Floating continuous hover effect after entry
  const hoverY = Math.sin(frame / 20) * 12;

  // Text reveal animation
  const textOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
  const textTranslateY = interpolate(frame, [0, 20], [30, 0], { extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0a0d14',
        backgroundImage: 'radial-gradient(ellipse at 50% 10%, rgba(99, 102, 241, 0.35) 0%, transparent 70%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'Inter, sans-serif',
        overflow: 'hidden',
        padding: '60px',
      }}
    >
      {/* Kinetic Headline */}
      <div
        style={{
          opacity: textOpacity,
          transform: `translateY(${textTranslateY}px)`,
          textAlign: 'center',
          marginBottom: '40px',
          zIndex: 10,
        }}
      >
        <h1
          style={{
            fontSize: '56px',
            fontWeight: 800,
            color: '#ffffff',
            margin: '0 0 16px 0',
            letterSpacing: '-0.02em',
          }}
        >
          {headline}
        </h1>
        <p style={{ fontSize: '26px', color: '#94a3b8', margin: 0 }}>
          {subheadline}
        </p>
      </div>

      {/* Floating Device Container */}
      <div
        style={{
          transform: `translateY(${translateY + hoverY}px) scale(${scale})`,
          width: '720px',
          height: '1100px',
          borderRadius: '48px',
          padding: '16px',
          backgroundColor: '#1f2937',
          boxShadow: '0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.25)',
          border: '4px solid #374151',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        {/* Dynamic Notch / Island */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
          <div style={{ width: '120px', height: '24px', backgroundColor: '#000', borderRadius: '12px' }} />
        </div>
        
        {/* Screen Content */}
        <img
          src={screenshotUrl}
          alt="App-Bildschirm"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            borderRadius: '32px',
          }}
        />
      </div>
    </AbsoluteFill>
  );
};

Remotion CLI Rendering Command

# 9:16 vertikalen Werbe-Teaser rendern (Reels / TikTok / Shorts)
npx remotion render src/remotion/index.ts AppPromoTeaser out/promo-teaser.mp4 --props='{"headline":"Apps in Minuten ausliefern","subheadline":"Autonome Schwarmintelligenz","screenshotUrl":"/assets/screen.png"}'

---

5. Die 30-sekündige hochkonvertierende Teaser-Video-Formel

Zeitstempel	Phase	Visuelles Element	Audio-/Erzählungsleitfaden
00:00 - 00:04	Der Haken	Schneller Zoom auf das Problem (z. B. unübersichtliche manuelle Tabellen oder fehlgeschlagene Builds). Rote/Orange Warnabzeichen.	„Verschwenden Sie noch Stunden mit der manuellen Bereitstellung von Releases?“ (Knackiges, energiegeladenes Voiceover).
00:04 - 00:12	Die Enthüllung	Nahtloser 3D-Geräteneigungs-Übergang. Das App-Dashboard erscheint mit leuchtenden interaktiven Akzenten.	„Lernen Sie [App-Name] kennen – Ihren autonomen Zero-to-Prod-Engine.“
00:12 - 00:20	Wichtige Superkräfte	3 schnelle Schnitte, die Kernfunktionen zeigen: 1. Ein-Klick-Einrichtung; 2. Live-Analysen; 3. Sofortige Synchronisation.	„Ein Klick transformiert Ihren Workflow, synchronisiert Echtzeitdaten und eliminiert menschliche Fehler.“
00:20 - 00:26	Sozialer Beweis	5-Sterne-Abzeichen, G2/Product Hunt-Abzeichen, schwebende Testimonial-Avatar-Pillen.	„Vertrauen von über 10.000 Entwicklern weltweit.“
00:26 - 00:30	Call-to-Action	Großer glänzender CTA-Button, App Store & Google Play-Abzeichen, prominente URL.	„Laden Sie es jetzt im App Store herunter oder besuchen Sie myapp.io, um noch heute kostenlos zu starten.“

---

6. Automatisierte Multi-Device-Screenshot-Erfassungspipeline

[fortgesetzt…]

---

Übersetzt mit ❤️ für deutschsprachige Entwickler.