应用推广媒体专家（2026 版）

English | Bahasa Indonesia

English

编排与集成

ai-media-generation-expert：生成 AI 图像 (Flux 1.1 Pro)、视频 B 卷 (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：设计令牌、字体层级和推广卡片布局样式。
visual-ui-auditor：对营销截图、对比度和设备框架进行多模态视觉审核。
anti-slop：反“垃圾”营销图形，消除通用库存模型和虚假 UI 伪影。
senior-frontend / tailwind-expert：高保真 CSS 设备框架、画布合成和响应式布局样式。
zero-to-prod-orchestrator：协调阶段 5（视觉资产与 UI 品牌化）和阶段 8（启动、部署、营销资产交接）。
跨域协同与子代理集群集成：mobile-expo-expert, design-system-architect

描述

本指南为创建高转化率的应用推广媒体提供生产级工程指导，涵盖静态视觉图像（应用商店截图、社交媒体卡片、动态 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 卷同步

1. App Store 与 Google Play 截图矩阵

A. 分辨率与规格标准 (2026)

目标平台	显示屏尺寸	原生分辨率	宽高比	格式要求
Apple iOS (iPhone 16 Pro Max)	6.9 英寸 Super Retina	1320 × 2868 px	19.5:9	24 位 PNG, RGB, 无 Alpha 通道, 最大 10MB
Apple iOS (iPhone 16 / 15 Pro)	6.7 英寸 Super Retina	1290 × 2796 px	19.5:9	24 位 PNG, RGB, 无 Alpha 通道, 最大 10MB
Apple iPadOS (iPad Pro 13")	13.0 英寸 Liquid Retina	2064 × 2752 px	4:3	24 位 PNG, RGB, 无 Alpha 通道
Google Play 手机	标准旗舰	1080 × 2400 px (或 1080 × 1920)	20:9 / 16:9	PNG/JPEG, 最短边至少 1080px
Google Play 特色图形	英雄横幅	1024 × 500 px	~2:1	24 位 PNG/JPEG, 无 Alpha 通道, 最大 1MB
App Store 推广视频	预览视频	1080 × 1920 px (竖屏) / 1920 × 1080	9:16 / 16:9	MP4/ProRes, 最长 30 秒, 无虚假 OS 叠加层

B. 高转化截图构图公式

系列中的每张截图都必须遵循 4 部分视觉层级：

标题（有力的好处）：最多 4-6 个词。关注转变，而不是技术功能（例如，“3 秒自动开票” vs “发票生成表单”）。
副标题（上下文锚点）：1 个简短句子，说明工作流程。
浮动 UI / 带框模型：高对比度、像素完美的设备模型，倾斜 5°-12° 或正面朝前，位于画面底部 65% 的中心。
环境画布 / 渐变：与品牌主题匹配的柔和 OKLCH 背景渐变，带有柔和径向辉光。

2. 社交发布图形规格

Product Hunt 发布套件：
- 图库图像：1270 × 760 px (5:3)。以清晰的排版和真实的 UI 屏幕展示前 3 个功能。
- 动画图库预告：240 × 240 px 的 GIF 或 MP4（3MB 以下），用于产品卡片缩略图。
Twitter / X Card：
- 信息流内推广卡片：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') || '下一代 AI 工作空间';
  const subtitle = searchParams.get('subtitle') || '基于 VibesPlug 集群架构构建';
  const tag = searchParams.get('tag') || 'v3.0 生产就绪';

  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 屏幕"
          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":"分钟级发布应用","subheadline":"自主集群智能","screenshotUrl":"/assets/screen.png"}'

5. 30 秒高转化预告视频公式

时间戳	阶段	视觉提示	音频/解说指南
00:00 - 00:04	钩子	快速缩放到问题（例如，混乱的手动电子表格或失败的构建）。红色/琥珀色警告徽章。	“还在手动部署版本浪费数小时？”（有力、充满活力的配音）。
00:04 - 00:12	揭晓	无缝 3D 设备倾斜过渡。应用仪表盘出现，带有发光的交互式强调效果。	“认识一下 [应用名称]——您的自主化零到生产引擎。”
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. 自动化多设备截图管

…

[已截断，用于翻译]

应用推广媒体专家

应用推广媒体专家是什么？

在你喜欢的 AI 中提问

文档

应用推广媒体专家（2026 版）

English

编排与集成

描述

触发条件

核心架构与媒体制作支柱

1. App Store 与 Google Play 截图矩阵

A. 分辨率与规格标准 (2026)

B. 高转化截图构图公式

2. 社交发布图形规格

3. 动态 Open Graph (OG) 图像生成器

4. 使用 Remotion (React) 进行程序化视频创作

Remotion CLI 渲染命令

5. 30 秒高转化预告视频公式

6. 自动化多设备截图管

相关技能

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code