應用程式推廣媒體專家

應用程式推廣媒體專家 (2026 版)

English | 繁體中文

---

繁體中文

編排與整合

• ai-media-generation-expert: 生成 AI 影像 (Flux 1.1 Pro)、影片 B-Roll (Sora, Runway Gen-3) 以及合成語音旁白 (ElevenLabs v3)。
• svg-animation-motion-expert: 高效能 SVG 動畫、Framer Motion 轉場效果以及動態文字排版。
• file-upload-media-expert: CDN 資產分發、有損/無損圖片壓縮 (Sharp) 以及影片轉碼。
• seo: 動態 Open Graph (og:image)、Twitter Card 中繼資料以及社交爬蟲預覽。
• ui-ux-pro-max: 設計標記 (Design Tokens)、字體階層以及促銷卡片佈局樣式。
• visual-ui-auditor: 對行銷截圖、對比度與裝置框架進行多模態視覺稽核。
• anti-slop: 反「泛濫」行銷圖形，消除通用庫存模型與偽造 UI 元素。
• senior-frontend / tailwind-expert: 高傳真 CSS 裝置框架、Canvas 合成以及響應式佈局樣式。
• zero-to-prod-orchestrator: 協調 Phase 5（視覺資產與 UI 品牌化）和 Phase 8（啟動、部署、行銷資產交接）。
• 跨領域協同與子代理群整合: mobile-expo-expert, design-system-architect

描述

這是一份生產等級的工程指南，用於建立高轉換率的應用程式推廣媒體，涵蓋靜態視覺圖形（App Store 截圖、社交媒體卡片、動態 OG 橫幅）和動態影片媒體（使用 Remotion 製作的程式化影片預告、動態應用程式導覽以及 AI 旁白啟動示範）。

觸發條件

• 為 Apple App Store 和 Google Play Store 生成帶有裝置模型圖的推廣截圖。
• 為 Product Hunt、Twitter/X 橫幅、LinkedIn 展示頁以及 Instagram/TikTok 輪播廣告創建啟動圖形。
• 透過 Satori / @vercel/og 實現動態 Open Graph (OG) 社交卡片圖片的生成。
• 使用 Remotion（基於 React 的影片）程式化地創建應用程式推廣影片、預告片或產品導覽影片。
• 使用 AI 語音旁白編寫並合成 30 秒高轉換率的應用程式預告分鏡腳本。
• 使用無頭瀏覽器自動化（Playwright/Puppeteer）自動化多解析度截圖捕獲流程。

---

核心架構與媒體製作支柱

                     ┌──────────────────────────────────────────────┐
                     │          應用程式推廣媒體引擎                │
                     └──────────────────────┬───────────────────────┘
                                            │
               ┌────────────────────────────┴───────────────────────────┐
               ▼                                                        ▼
   靜態影像與圖形                                        動態與影片創作
 ├── App Store 與 Google Play 截圖                    ├── Remotion 程式化影片 (React)
 ├── 社交卡片 (X, LinkedIn, Product Hunt)             ├── 30秒高轉換率預告公式
 ├── 動態 OpenGraph 橫幅 (@vercel/og)                ├── 動態文字與游標軌跡
 └── 純 CSS/SVG 裝置模型 (iPhone/Pixel)               └── AI 語音旁白與 B-Roll 同步

---

1. App Store 與 Google Play 截圖矩陣

A. 解析度與規格標準 (2026)

目標平台	顯示器尺寸	原生解析度	長寬比	格式要求
Apple iOS (iPhone 16 Pro Max)	6.9" Super Retina	1320 × 2868 px	19.5:9	24-bit PNG, RGB, 無透明色版, 最大 10MB
Apple iOS (iPhone 16 / 15 Pro)	6.7" Super Retina	1290 × 2796 px	19.5:9	24-bit PNG, RGB, 無透明色版, 最大 10MB
Apple iPadOS (iPad Pro 13")	13.0" Liquid Retina	2064 × 2752 px	4:3	24-bit PNG, RGB, 無透明色版
Google Play 手機	標準旗艦機	1080 × 2400 px (或 1080 × 1920)	20:9 / 16:9	PNG/JPEG, 最短邊至少 1080px
Google Play 特色圖形	英雄橫幅	1024 × 500 px	~2:1	24-bit PNG/JPEG, 無透明色版, 最大 1MB
App Store 推廣影片	預覽影片	1080 × 1920 px (直向) / 1920 × 1080	9:16 / 16:9	MP4/ProRes, 最長 30 秒, 無偽造 OS 覆蓋層

B. 高轉換率截圖構圖公式

序列中的每張截圖都必須遵循 4 部分視覺層次：

1. 標題 (強而有力的利益點): 最多 4-6 個字。專注於轉變，而非技術功能（例如，"在 3 秒內自動完成帳單" 而非 "發票生成表單"）。
2. 副標題 (情境錨點): 1 個簡短的句子，說明工作流程。
3. 浮動 UI / 框架模型: 高對比度、像素完美的裝置模型，傾斜 5°-12° 或正面朝向，置於畫面下方 65% 的中央。
4. 環境畫布 / 漸層: 與品牌主題相符的柔和 OKLCH 背景漸層，並帶有柔和的徑向光暈。

---

2. 社交啟動圖形規格

• Product Hunt 啟動套件:
  • 畫廊圖片: 1270 × 760 px (5:3 比例)。以清晰的字體和真實的 UI 畫面展示前 3 大功能。
  • 動畫畫廊預告: 240 × 240 px 的 GIF 或 MP4 (小於 3MB)，用於產品卡片縮圖。
• Twitter / X 卡片:
  • 動態消息推廣卡片: 1200 × 675 px (16:9) 或 1200 × 630 px (1.91:1)。
  • 個人資料橫幅: 1500 × 500 px (3:1 比例)。
• Instagram 與 TikTok 貼文:
  • 輪播動態幻燈片: 1080 × 1350 px (4:5 直向比例)。
  • 限時動態與直式預告: 1080 × 1920 px (9:16 比例)。

---

3. 動態 Open Graph (OG) 圖片產生器

動態 OG 生成確保在 Twitter/X、Discord、Slack 和 WhatsApp 上分享的每個連結都能呈現自訂的高解析度品牌卡片。

// 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',
        }}
      >
        {/* 頂部徽章 */}
        <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>

        {/* 主要標題與副標題 */}
        <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>

        {/* 頁尾品牌標誌 */}
        <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' }}>今日免費試用 • 無需信用卡</span>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

---

4. 使用 Remotion (React) 進行程式化影片創作

Remotion 允許開發者完全透過程式碼渲染 MP4 推廣影片，實現動畫 UI 元件、動態文字排版、彈簧物理效果和裝置旋轉。

// 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();

  // 裝置模型的入場彈簧動畫
  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]);

  // 入場後的浮動持續懸停效果
  const hoverY = Math.sin(frame / 20) * 12;

  // 文字揭示動畫
  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',
      }}
    >
      {/* 動態標題 */}
      <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>

      {/* 浮動裝置容器 */}
      <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',
        }}
      >
        {/* 動態瀏海 / 動態島 */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
          <div style={{ width: '120px', height: '24px', backgroundColor: '#000', borderRadius: '12px' }} />
        </div>
        
        {/* 螢幕內容 */}
        <img
          src={screenshotUrl}
          alt="App Screen"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            borderRadius: '32px',
          }}
        />
      </div>
    </AbsoluteFill>
  );
};

Remotion CLI 渲染指令

# 渲染 9:16 直式推廣預告 (Reels / TikTok / Shorts)
npx remotion render src/remotion/index.ts AppPromoTeaser out/promo-teaser.mp4 --props='{"headline":"Ship Apps in Minutes","subheadline":"Autonomous Swarm Intelligence","screenshotUrl":"/assets/screen.png"}'

---

5. 30 秒高轉換率預告影片公式

時間戳記	階段	視覺提示	音訊 / 旁白指引
00:00 - 00:04	鉤子	快速縮放至問題點（例如，雜亂的手動試算表或失敗的建置）。紅色/琥珀色警告徽章。	"還在浪費時間手動部署版本？" （簡潔有力、充滿活力的旁白）。
00:04 - 00:12	揭示	流暢的 3D 裝置傾斜轉場。應用程式儀表板出現，帶有發光的互動式強調效果。	"認識一下 [App Name] — 您的自動化從零到生產引擎。"
00:12 - 00:20	關鍵超能力	3 個快速切換，展示核心功能：1. 一鍵設定；2. 即時分析；3. 即時同步。	"一鍵轉換您的工作流程，同步即時數據，並消除人為錯誤。"
00:20 - 00:26	社交證明	5 星徽章、G2/Product Hunt 徽章、浮動的用戶評價頭像膠囊。	"受到全球超過 10,000 名開發者信賴。"
00:26 - 00:30	行動呼籲	大型閃亮的 CTA 按鈕、App Store 與 Google Play 徽章、醒目的 URL。	"立即在 App Store 下載或造訪 myapp.io 免費開始使用。"

---

6. 自動化多裝置截圖 C

…

[內容已截斷以進行翻譯]