Back to Details

app-store-screenshots

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

App Store Screenshots

App Store 截图

Research competitor screenshots, plan your strategy, and preview your App Store screenshots using a lightweight local tool.
使用轻量级本地工具研究竞品截图、规划你的策略并预览你的App Store截图。

Overview

概述

Screenshots are critical for App Store conversion—90% of users don't scroll past the third screenshot. This skill helps you research what works, plan your strategy, and preview your screenshots before uploading.
截图对App Store的转化率至关重要——90%的用户不会滑过第三张截图。该技能可帮助你研究有效的做法、规划策略，并在上传前预览你的截图。

Workflow 0 — Onboarding Interview

工作流0 — 入门访谈

Before starting, gather information about the user's app and goals.
开始前，收集关于用户应用和目标的信息。

Questions to Ask

需询问的问题

1. Is this a new app or an existing app?
   □ New app (focus on competitor research)
   □ Existing app (can also analyze current performance)

2. What is your app's category?
   [Select from App Store categories - see category-codes in references]

3. Describe your app in one sentence:
   [Used to extract keywords for competitor search]

4. What is your app name?
   [Used for folder organization]

5. What are your main competitors? (optional)
   [If known, provide app names or IDs]

6. Do you have Sensor Tower API access?
   □ Yes (enhanced competitor finding)
   □ No (use iTunes API + RSS feeds only)
1. 这是新应用还是已有应用？
   □ 新应用（重点在竞品研究）
   □ 已有应用（也可分析当前表现）

2. 你的应用属于哪个品类？
   [从App Store品类中选择 - 参考品类代码]

3. 用一句话描述你的应用：
   [用于提取关键词以搜索竞品]

4. 你的应用名称是什么？
   [用于文件夹组织]

5. 你的主要竞品有哪些？（可选）
   [若已知，提供应用名称或ID]

6. 你是否拥有Sensor Tower API权限？
   □ 是（增强竞品查找能力）
   □ 否（仅使用iTunes API + RSS源）

Output

输出

Create project folder structure:
{app_name}_screenshots/
├── competitors/
├── analysis/
├── your_app/
│   ├── iphone/
│   ├── ipad/
│   └── assets/
├── preview/
└── README.md
创建项目文件夹结构：
{app_name}_screenshots/
├── competitors/
├── analysis/
├── your_app/
│   ├── iphone/
│   ├── ipad/
│   └── assets/
├── preview/
└── README.md

Workflow 1 — Find Competitors

工作流1 — 查找竞品

Identify the top competitors in your category to analyze.
确定同品类中的顶级竞品以进行分析。

Step 1: Search by Keywords

步骤1：按关键词搜索

Extract keywords from app description and search iTunes:
GET https://itunes.apple.com/search?term={keywords}&entity=software&country=us&limit=25
从应用描述中提取关键词并搜索iTunes：
GET https://itunes.apple.com/search?term={keywords}&entity=software&country=us&limit=25

Step 2: Fetch Top Charts

步骤2：获取排行榜

Get top apps in the category via RSS feed:
GET https://rss.applemarketingtools.com/api/v2/us/apps/top-free/50/apps.json?genre={genreId}
通过RSS源获取品类中的热门应用：
GET https://rss.applemarketingtools.com/api/v2/us/apps/top-free/50/apps.json?genre={genreId}

Step 3: Filter & Rank (Optional with Sensor Tower)

步骤3：筛选与排名（可选，需Sensor Tower）

If Sensor Tower API available:
GET https://app.sensortower.com/api/ios/apps?app_ids={ids}
Use download/revenue estimates to find "winning" apps.
若有Sensor Tower API权限：
GET https://app.sensortower.com/api/ios/apps?app_ids={ids}
使用下载量/收入估算来找到“成功”的应用。

Step 4: Select Top 3 Competitors

步骤4：选择Top 3竞品

Present candidates to user:
markdown
undefined
向用户展示候选列表：
markdown
undefined

Competitor Candidates

竞品候选列表

#App NameRatingReviewsCategory Rank
1Calm4.8★1.2M#1 Health
2Headspace4.9★850K#2 Health
3Insight Timer4.9★450K#5 Health
Select 3 competitors to analyze (enter numbers): [1, 2, 3]

---
#应用名称评分评论数品类排名
1Calm4.8★1.2M#1 健康
2Headspace4.9★850K#2 健康
3Insight Timer4.9★450K#5 健康
选择3个竞品进行分析（输入编号）：[1, 2, 3]

---

Workflow 2 — Download & Analyze Screenshots

工作流2 — 下载与分析截图

Download competitor screenshots and generate analysis.
下载竞品截图并生成分析报告。

Step 1: Fetch Screenshot URLs

步骤1：获取截图URL

For each competitor:
GET https://itunes.apple.com/lookup?id={appId}&country=us
Extract from response:
  • screenshotUrls
    — iPhone screenshots
  • ipadScreenshotUrls
    — iPad screenshots
针对每个竞品：
GET https://itunes.apple.com/lookup?id={appId}&country=us
从响应中提取：
  • screenshotUrls
    — iPhone截图
  • ipadScreenshotUrls
    — iPad截图

Step 2: Download Screenshots

步骤2：下载截图

Save to organized folder structure:
python
import requests
import os

def download_screenshots(app_id, app_name, output_dir):
    # Fetch app data
    response = requests.get(f"https://itunes.apple.com/lookup?id={app_id}")
    data = response.json()["results"][0]

    # Create directories
    iphone_dir = f"{output_dir}/competitors/{app_name}/iphone"
    ipad_dir = f"{output_dir}/competitors/{app_name}/ipad"
    os.makedirs(iphone_dir, exist_ok=True)
    os.makedirs(ipad_dir, exist_ok=True)

    # Download iPhone screenshots
    for i, url in enumerate(data.get("screenshotUrls", []), 1):
        img = requests.get(url)
        with open(f"{iphone_dir}/{i:02d}.png", "wb") as f:
            f.write(img.content)

    # Download iPad screenshots
    for i, url in enumerate(data.get("ipadScreenshotUrls", []), 1):
        img = requests.get(url)
        with open(f"{ipad_dir}/{i:02d}.png", "wb") as f:
            f.write(img.content)

    # Save metadata
    with open(f"{output_dir}/competitors/{app_name}/metadata.json", "w") as f:
        json.dump(data, f, indent=2)
保存到结构化的文件夹中：
python
import requests
import os

def download_screenshots(app_id, app_name, output_dir):
    # Fetch app data
    response = requests.get(f"https://itunes.apple.com/lookup?id={app_id}")
    data = response.json()["results"][0]

    # Create directories
    iphone_dir = f"{output_dir}/competitors/{app_name}/iphone"
    ipad_dir = f"{output_dir}/competitors/{app_name}/ipad"
    os.makedirs(iphone_dir, exist_ok=True)
    os.makedirs(ipad_dir, exist_ok=True)

    # Download iPhone screenshots
    for i, url in enumerate(data.get("screenshotUrls", []), 1):
        img = requests.get(url)
        with open(f"{iphone_dir}/{i:02d}.png", "wb") as f:
            f.write(img.content)

    # Download iPad screenshots
    for i, url in enumerate(data.get("ipadScreenshotUrls", []), 1):
        img = requests.get(url)
        with open(f"{ipad_dir}/{i:02d}.png", "wb") as f:
            f.write(img.content)

    # Save metadata
    with open(f"{output_dir}/competitors/{app_name}/metadata.json", "w") as f:
        json.dump(data, f, indent=2)

Step 3: Analyze Each Competitor

步骤3：分析每个竞品

For each competitor, analyze and document:
markdown
undefined
针对每个竞品，分析并记录：
markdown
undefined

Screenshot Analysis: {App Name}

截图分析：{应用名称}

Overview

概述

  • iPhone Screenshots: {count}
  • iPad Screenshots: {count}
  • Visual Style: [Device mockup / Lifestyle / UI-only / Hybrid]
  • Color Palette: [Primary colors observed]
  • iPhone截图数量： {count}
  • iPad截图数量： {count}
  • 视觉风格： [设备样机 / 生活场景 / 仅UI / 混合风格]
  • 配色方案： [观察到的主色调]

Screenshot Breakdown

截图细分

#TypeCaption/TextFeature ShownNotes
1{type}"{caption}"{feature}{notes}
2{type}"{caption}"{feature}{notes}
...
#类型文案/文字展示功能备注
1{type}"{caption}"{feature}{notes}
2{type}"{caption}"{feature}{notes}
...

Strategy Analysis

策略分析

  • Hook (Screenshot 1): {description}
  • Flow: {how screenshots progress}
  • Text Style: {short/long, benefit/feature focused}
  • Device Frames: {yes/no, style}
  • 钩子（第1张截图）： {description}
  • 流程： {截图的递进逻辑}
  • 文案风格： {简短/冗长，侧重利益点/功能}
  • 设备边框： {是/否，风格}

Strengths

优势

  • {strength 1}
  • {strength 2}
  • {优势1}
  • {优势2}

Weaknesses

劣势

  • {weakness 1}
  • {weakness 2}

Save as `competitors/{app_name}/README.md`

---
  • {劣势1}
  • {劣势2}

保存为 `competitors/{app_name}/README.md`

---

Workflow 3 — Compare & Identify Patterns

工作流3 — 对比与识别模式

Generate a cross-competitor analysis.
生成跨竞品的分析报告。

Comparison Table

对比表格

markdown
undefined
markdown
undefined

Competitor Comparison

竞品对比

Visual Style

视觉风格

AspectCompetitor 1Competitor 2Competitor 3
Screenshot Count8610
StyleDevice mockupLifestyleHybrid
Text AmountMinimalHeavyMedium
Color ThemeBlue/PurpleGreen/WhiteOrange/Black
Device FramesYesNoYes
Shows HandsNoYesNo
维度竞品1竞品2竞品3
截图数量8610
风格设备样机生活场景混合风格
文案量极少较多中等
主题色蓝/紫绿/白橙/黑
设备边框是否是
展示人手否是否

Caption Patterns

文案模式

ScreenshotCompetitor 1Competitor 2Competitor 3
1 (Hook)"Find Peace""Sleep Better""Meditate Daily"
2"Sleep Stories""Guided Sessions""Track Progress"
3"Daily Calm""Reduce Stress""Join Community"
截图位置竞品1竞品2竞品3
1（钩子）"Find Peace""Sleep Better""Meditate Daily"
2"Sleep Stories""Guided Sessions""Track Progress"
3"Daily Calm""Reduce Stress""Join Community"

Common Patterns

常见模式

  1. {pattern 1}
  2. {pattern 2}
  3. {pattern 3}
  1. {模式1}
  2. {模式2}
  3. {模式3}

Differentiation Opportunities

差异化机会

  1. {opportunity 1}
  2. {opportunity 2}

Save as `analysis/competitor_comparison.md`

---
  1. {机会1}
  2. {机会2}

保存为 `analysis/competitor_comparison.md`

---

Workflow 4 — Plan Your Screenshots

工作流4 — 规划你的截图

Based on analysis, create a screenshot plan.
基于分析结果，创建截图规划。

Screenshot Strategy Framework

截图策略框架

The "Value-Usage-Trust" Formula:
1. VALUE — What the user gets (hook)
2. USAGE — How it works (key features)
3. TRUST — Social proof (ratings, awards)
“价值-使用-信任”公式：
1. VALUE — 用户能获得什么（钩子）
2. USAGE — 如何使用（核心功能）
3. TRUST — 社交证明（评分、奖项）

Generate Screenshot Plan

生成截图规划

markdown
undefined
markdown
undefined

Screenshot Plan: {Your App Name}

截图规划：{你的应用名称}

Strategy

策略

  • Style: {chosen style based on analysis}
  • Count: {recommended: 6-8}
  • Text Approach: {based on competitor analysis}
  • Differentiator: {what makes yours unique}
  • 风格： {基于分析选择的风格}
  • 数量： {推荐：6-8张}
  • 文案方式： {基于竞品分析的结论}
  • 差异化点： {你的应用独特之处}

Screenshot Sequence

截图顺序

Screenshot 1: Hook / Value Proposition

截图1：钩子 / 价值主张

  • Caption: "{suggested caption}"
  • Visual: {description of what to show}
  • Goal: Grab attention, communicate core value
  • 文案： "{建议文案}"
  • 视觉： {展示内容描述}
  • 目标： 吸引注意力，传达核心价值

Screenshot 2: Key Feature #1

截图2：核心功能1

  • Caption: "{suggested caption}"
  • Visual: {description}
  • Goal: Show most important feature
  • 文案： "{建议文案}"
  • 视觉： {描述}
  • 目标： 展示最重要的功能

Screenshot 3: Key Feature #2

截图3：核心功能2

  • Caption: "{suggested caption}"
  • Visual: {description}
  • Goal: Demonstrate second key benefit
  • 文案： "{建议文案}"
  • 视觉： {描述}
  • 目标： 展示第二个核心利益点

Screenshot 4: Key Feature #3

截图4：核心功能3

  • Caption: "{suggested caption}"
  • Visual: {description}
  • Goal: Continue feature story
  • 文案： "{建议文案}"
  • 视觉： {描述}
  • 目标： 延续功能展示逻辑

Screenshot 5: Use Case / Lifestyle

截图5：使用场景 / 生活场景

  • Caption: "{suggested caption}"
  • Visual: {description}
  • Goal: Show app in context
  • 文案： "{建议文案}"
  • 视觉： {描述}
  • 目标： 展示应用的使用场景

Screenshot 6: Social Proof / Trust

截图6：社交证明 / 信任背书

  • Caption: "{suggested caption}"
  • Visual: Show ratings, awards, press
  • Goal: Build credibility
  • 文案： "{建议文案}"
  • 视觉： 展示评分、奖项、媒体报道
  • 目标： 建立可信度

Design Guidelines

设计指南

  • Colors: {recommended palette}
  • Font: {recommendation}
  • Device Frame: {yes/no, which style}
  • Safe Zones: Keep text 120px from edges
  • 配色： {推荐配色方案}
  • 字体： {建议字体}
  • 设备边框： {是/否，风格}
  • 安全区域： 文字需距离边缘至少120px

Export Checklist

导出检查清单

  • iPhone 6.9" (1290 x 2796 or 1320 x 2868)
  • iPad 13" (2064 x 2752)
  • PNG format, no transparency
  • Under 8 MB each
  • sRGB color space

Save as `your_app/plan.md`

---
  • iPhone 6.9" (1290 x 2796 或 1320 x 2868)
  • iPad 13" (2064 x 2752)
  • PNG格式，无透明通道
  • 单张图片小于8MB
  • sRGB色彩空间

保存为 `your_app/plan.md`

---

Workflow 5 — Generate Preview Website

工作流5 — 生成预览网站

Create a lightweight local HTML tool for viewing and planning screenshots.
创建轻量级本地HTML工具以查看和规划截图。

Features

功能

  1. Competitor Gallery — View all competitor screenshots side-by-side
  2. Your Screenshots — Preview your screenshots in device frames
  3. Comparison View — Compare yours vs competitors
  4. Export Helper — Guides for correct dimensions
  1. 竞品图库 — 并排查看所有竞品截图
  2. 你的截图 — 在设备边框中预览你的截图
  3. 对比视图 — 对比你的截图与竞品截图
  4. 导出助手 — 正确尺寸指南

Generate the Website

生成网站

Create 
preview/index.html
with:
html
<!-- See templates/preview-website.html for full implementation -->
The website includes:
  • Responsive grid layout
  • Device frame overlays
  • Zoom/lightbox functionality
  • Tab navigation
  • Export dimension reference
  • Works offline (no dependencies)
创建 
preview/index.html
包含：
html
<!-- See templates/preview-website.html for full implementation -->
该网站包含：
  • 响应式网格布局
  • 设备边框覆盖层
  • 缩放/灯箱功能
  • 标签导航
  • 导出尺寸参考
  • 离线可用（无依赖）

How to Use

使用方法

bash
undefined
bash
undefined

Navigate to preview folder

导航到preview文件夹

cd {app_name}_screenshots/preview
cd {app_name}_screenshots/preview

Open in browser

在浏览器中打开

open index.html
open index.html

or

或

python -m http.server 8000
python -m http.server 8000

then visit http://localhost:8000

然后访问 http://localhost:8000


---

---

Workflow 6 — Export Screenshots

工作流6 — 导出截图

Guide for exporting final screenshots.
导出最终截图的指南。

Required Dimensions

所需尺寸

DeviceDimensionsAspect Ratio
iPhone 6.9" (Required)1290 x 2796 or 1320 x 28689:19.5
iPad 13" (Required)2064 x 27523:4
设备尺寸宽高比
iPhone 6.9"（必填）1290 x 2796 或 1320 x 28689:19.5
iPad 13"（必填）2064 x 27523:4

Export Checklist

导出检查清单

markdown
undefined
markdown
undefined

Export Checklist

导出检查清单

Technical Requirements

技术要求

  • Format: PNG (no transparency) or JPEG
  • Size: Under 8 MB per image
  • Color: sRGB color space
  • Resolution: 72 dpi
  • 格式：PNG（无透明通道）或JPEG
  • 大小：单张图片小于8MB
  • 色彩：sRGB色彩空间
  • 分辨率：72 dpi

iPhone Screenshots

iPhone截图

  • 01_hook.png (1290 x 2796)
  • 02_feature1.png (1290 x 2796)
  • 03_feature2.png (1290 x 2796)
  • 04_feature3.png (1290 x 2796)
  • 05_usecase.png (1290 x 2796)
  • 06_trust.png (1290 x 2796)
  • 01_hook.png (1290 x 2796)
  • 02_feature1.png (1290 x 2796)
  • 03_feature2.png (1290 x 2796)
  • 04_feature3.png (1290 x 2796)
  • 05_usecase.png (1290 x 2796)
  • 06_trust.png (1290 x 2796)

iPad Screenshots

iPad截图

  • 01_hook.png (2064 x 2752)
  • 02_feature1.png (2064 x 2752)
  • 03_feature2.png (2064 x 2752)
  • 04_feature3.png (2064 x 2752)
  • 05_usecase.png (2064 x 2752)
  • 06_trust.png (2064 x 2752)
  • 01_hook.png (2064 x 2752)
  • 02_feature1.png (2064 x 2752)
  • 03_feature2.png (2064 x 2752)
  • 04_feature3.png (2064 x 2752)
  • 05_usecase.png (2064 x 2752)
  • 06_trust.png (2064 x 2752)

Final Review

最终审核

  • Text readable at thumbnail size (min 28pt)
  • Critical content not in top 160px (Dynamic Island)
  • No competitor names or logos
  • Consistent style across all screenshots
  • Screenshots tell a coherent story

---
  • 缩略图尺寸下文字可读（最小28pt）
  • 关键内容不在顶部160px内（适配灵动岛）
  • 无竞品名称或Logo
  • 所有截图风格一致
  • 截图讲述连贯的故事

---

Quick Reference — APIs

快速参考 — APIs

TaskEndpoint
Search apps
itunes.apple.com/search?term={q}&entity=software
Lookup app
itunes.apple.com/lookup?id={id}
Top Free
rss.applemarketingtools.com/api/v2/{cc}/apps/top-free/{limit}/apps.json
Top Paid
rss.applemarketingtools.com/api/v2/{cc}/apps/top-paid/{limit}/apps.json
By CategoryAdd 
?genre={genreId}
to RSS feeds
任务端点
搜索应用
itunes.apple.com/search?term={q}&entity=software
查找应用
itunes.apple.com/lookup?id={id}
免费应用榜
rss.applemarketingtools.com/api/v2/{cc}/apps/top-free/{limit}/apps.json
付费应用榜
rss.applemarketingtools.com/api/v2/{cc}/apps/top-paid/{limit}/apps.json
按品类筛选在RSS源后添加 
?genre={genreId}

Folder Structure

文件夹结构

{app_name}_screenshots/
├── competitors/
│   ├── {competitor_1}/
│   │   ├── iphone/
│   │   │   ├── 01.png
│   │   │   └── ...
│   │   ├── ipad/
│   │   │   └── ...
│   │   ├── metadata.json
│   │   └── README.md
│   ├── {competitor_2}/
│   └── {competitor_3}/
├── analysis/
│   ├── competitor_comparison.md
│   └── patterns.md
├── your_app/
│   ├── plan.md
│   ├── iphone/
│   │   ├── 01_hook.png
│   │   └── ...
│   ├── ipad/
│   │   └── ...
│   └── assets/
│       ├── ui_screenshots/
│       └── photos/
├── preview/
│   ├── index.html
│   └── exports/
└── README.md
{app_name}_screenshots/
├── competitors/
│   ├── {competitor_1}/
│   │   ├── iphone/
│   │   │   ├── 01.png
│   │   │   └── ...
│   │   ├── ipad/
│   │   │   └── ...
│   │   ├── metadata.json
│   │   └── README.md
│   ├── {competitor_2}/
│   └── {competitor_3}/
├── analysis/
│   ├── competitor_comparison.md
│   └── patterns.md
├── your_app/
│   ├── plan.md
│   ├── iphone/
│   │   ├── 01_hook.png
│   │   └── ...
│   ├── ipad/
│   │   └── ...
│   └── assets/
│       ├── ui_screenshots/
│       └── photos/
├── preview/
│   ├── index.html
│   └── exports/
└── README.md

Reference Files

参考文件

FilePurpose
screenshot-specs.mdAll device sizes and technical requirements
analysis-templates.mdTemplates for competitor analysis
itunes-api.mdAPI endpoints for fetching screenshots
preview-website.htmlLightweight preview tool template
文件用途
screenshot-specs.md所有设备尺寸与技术要求
analysis-templates.md竞品分析模板
itunes-api.md获取截图的API端点
preview-website.html轻量级预览工具模板