mcpField
A
app-store-screenshots

app-store-screenshots

github.com/bankai-skills营销与增长025.8k 次安装12 周前更新
代码仓库

关于 app-store-screenshots

面向准备应用商店页面的移动应用团队,提供截图和预览视频制作指南。内容涵盖平台规格、画面布局、文案、本地化及 Google Play 实验,并附有 belt CLI 生成示例。

主要功能

  1. 01iOS 与 Google Play 素材规格
  2. 02截图顺序与布局指南
  3. 03截图文案撰写建议
  4. 04图片和视频生成示例
  5. 05本地化与 A/B 测试指南

适用场景

  1. 01准备应用商店上架截图
  2. 02规划截图文案与展示顺序
  3. 03制作预览视频场景
  4. 04为目标市场本地化商店素材

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/bankai-skills/superpowers --skill app-store-screenshots

安装后在 Claude Code 中输入/app-store-screenshots确认已加载。

详细介绍

安装 belt CLI 技能: npx skills add belt-sh/cli

App Store 截图

通过 inference.sh CLI 创建 App Store 截图和预览视频。

快速开始

需要 inference.sh CLI(belt)。安装说明

belt login

# Generate a device mockup scene
belt app run falai/flux-dev-lora --input '{
  "prompt": "iPhone 15 Pro showing a clean modern app interface with analytics dashboard, floating at slight angle, soft gradient background, professional product photography, subtle shadow, marketing mockup style",
  "width": 1024,
  "height": 1536
}'

平台规格

Apple App Store(iOS)
设备尺寸(px)必需
iPhone 6.7"(15 Pro Max)1290 x 2796必需
iPhone 6.5"(11 Pro Max)1284 x 2778必需
iPhone 5.5"(8 Plus)1242 x 2208可选
iPad Pro 12.9"(第 6 代)2048 x 2732如果是 iPad 应用
iPad Pro 11"1668 x 2388如果是 iPad 应用
  • 每种本地化最多 10 张截图
  • 无需滚动即可看到前 3 张截图(至关重要)
  • 格式:PNG 或 JPEG(JPEG 不支持 alpha/透明度)
Google Play 商店(Android)
规格值
最小尺寸320 px(任意边)
最大尺寸3840 px(任意边)
宽高比16:9 或 9:16
每种设备类型最多截图数8
格式PNG 或 JPEG(24 位,不含 alpha)
  • 特色图片:1024 x 500 px(设为精选内容时必需)
  • 宣传视频:YouTube URL(可选,但建议提供)

前 3 张规则

80% 的 App Store 曝光只会展示前 3 张截图(用户滚动之前)。这三张必须:

  1. 传达核心价值主张
  2. 展示最佳功能/效果
  3. 与竞品形成差异
截图库顺序
位置内容目的
1主视觉 — 核心价值、最佳功能吸引用户停下滚动,说明应用的用途
2关键差异点展示你相较竞品的独特之处
3最受欢迎的功能展示用户最喜欢的内容
4社会认同或效果评分、结果、用户评价
5-8其他功能辅助功能、设置、集成
9-10边缘场景面向小众用户的专用功能

截图风格

1. 带说明文字的设备边框

标准样式:展示应用的设备模型,上方或下方配有说明文字。

┌──────────────────────────┐
│   "Track Your Habits     │  ← Caption (benefit-focused)
│    Effortlessly"         │
│                          │
│   ┌──────────────────┐   │
│   │                  │   │
│   │   App Screen     │   │  ← Actual app UI in device frame
│   │   Content        │   │
│   │                  │   │
│   │                  │   │
│   └──────────────────┘   │
│                          │
└──────────────────────────┘
2. 全屏 UI(无设备边框)

应用 UI 填满整个截图。适用于沉浸式应用。

3. 生活场景

在真实环境中展示设备(例如有人手持手机、手机放在桌面上等)。

4. 带标注的功能重点展示

在 UI 截图中使用箭头/圆圈指向特定功能。

编写说明文字

规则
  • 文案最多 2 行
  • 以用户收益为重点,而非功能本身
  • 字号需相当于 30pt 以上(在商店中必须清晰可读)
示例
❌ Feature-focused:
"Push Notification System"
"Calendar View with Filters"
"Data Export Functionality"

✅ Benefit-focused:
"Never Miss a Deadline Again"
"See Your Week at a Glance"
"Share Reports in One Tap"

生成截图

主视觉截图(位置 1)
# Clean device mockup with hero feature
belt app run falai/flux-dev-lora --input '{
  "prompt": "modern iPhone showing a beautiful fitness tracking app with activity rings and workout summary, device floating at slight angle against soft purple gradient background, professional product shot, clean minimal composition, subtle reflection",
  "width": 1024,
  "height": 1536
}'
功能重点展示
# Feature callout style
belt app run bytedance/seedream-4-5 --input '{
  "prompt": "app store screenshot style, iPhone showing a messaging app with AI writing suggestions highlighted, clean white background, subtle UI callout arrows, professional marketing asset, modern design",
  "size": "2K"
}'
生活场景
# Device in real-world setting
belt app run falai/flux-dev-lora --input '{
  "prompt": "person holding iPhone showing a cooking recipe app, kitchen background with ingredients, warm natural lighting, over-the-shoulder perspective, lifestyle photography, authentic feeling",
  "width": 1024,
  "height": 1536
}'
前后对比
# Split comparison
belt app run infsh/stitch-images --input '{
  "images": ["before-screenshot.png", "after-screenshot.png"],
  "direction": "horizontal"
}'

预览视频

Apple App Store
规格值
时长15-30 秒
方向纵向或横向(与应用一致)
音频可选(在商店中会静音循环播放)
格式H.264,.mov 或 .mp4
Google Play
规格值
来源YouTube URL
时长建议 30 秒至 2 分钟
方向优先横向
预览视频结构
环节时长内容
吸引点0-3 秒展示核心效果/惊艳时刻
功能 13-10 秒演示顶级功能的实际效果
功能 210-18 秒展示第二个关键功能
功能 318-25 秒展示第三个功能或社会认同
行动号召25-30 秒以应用图标结束
# Generate preview video scenes
belt app run google/veo-3-1-fast --input '{
  "prompt": "smooth screen recording style, finger tapping on a modern mobile app interface, swiping between screens showing charts and data visualizations, clean UI transitions, professional app demo"
}'

本地化

每种语言都有自己的一套截图。优先级:

市场本地化级别
主要市场完整:新截图 + 已翻译的说明文字
次要市场已翻译的说明文字,使用相同截图
其他默认使用英语

重点本地化市场:英语、日语、韩语、简体中文、德语、法语、西班牙语、葡萄牙语(巴西)

A/B 测试(Google Play)

Google Play Console 支持商店商品详情页实验:

  • 测试不同的截图顺序
  • 测试是否添加设备边框
  • 测试不同的说明文字
  • 测试不同的配色方案
  • 运行 7 天以上,并确保流量占比达到 50% 以上,以获得显著结果

常见错误

错误问题修正方法
将设置界面作为截图没人关心设置展示核心价值,而非基础设施
使用引导流程截图展示的是阻力,而非价值展示应用的实际使用状态
文字过多在商店中难以阅读最多 2 行,字体至少为 30pt
尺寸错误被商店拒绝使用平台规定的精确规格
所有截图看起来都一样没有继续浏览的理由让构图和内容有所变化
说明文字聚焦于功能未能传达益处“再也不错过截止日期” > “推送通知”
UI 过时看起来像是已停止维护每次重大版本发布时更新截图
没有主打截图第一印象不够有力位置 1 = 你最好的截图

检查清单

  • 符合目标平台的尺寸要求
  • 前 3 张截图传达核心价值
  • 说明文字聚焦于益处,最多 2 行
  • 不包含引导流程或设置界面
  • 预览视频时长为 15-30s,且前 3s 内有吸引点
  • 已针对主要市场完成本地化
  • Google Play 的功能图片尺寸为 1024x500
  • 截图已更新为当前应用版本
  • 已准备 A/B 测试变体

相关技能

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@ai-video-generation
npx skills add inference-sh/skills@image-upscaling
npx skills add inference-sh/skills@prompt-engineering

浏览所有应用:belt app list

评论

支持 Markdown