app-store-screenshots

App Store 截图

研究竞争对手的截图，规划策略，制作可用于正式发布的截图，并将其上传到 App Store Connect。

概述

截图对 App Store 转化至关重要——90% 的用户不会翻过前三张截图。本技能涵盖从竞争对手研究到最终上传的完整流程。

重要：正确的截图尺寸

iPhone 6.9" (Required): 1260 x 2736   ← iPhone 16 Pro Max
iPhone 6.7":             1290 x 2796   ← iPhone 16 Plus, 15 Pro Max
iPad 13" (Required):     2064 x 2752   ← iPad Pro M4

WARNING: Many online sources (including older versions of this skill) incorrectly
list 1290x2796 or 1320x2868 as the 6.9" dimension. The correct 6.9" dimension
is 1260 x 2736. Verify at: https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications/

---

工作流 0 — 入门访谈

开始前，先了解用户的应用和目标。

要询问的问题

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)

7. What locales do you need screenshots for?
   [e.g., en-US, tr, de-DE, ja]

输出

创建项目文件夹结构：

{app_name}_screenshots/
├── competitors/
├── analysis/
├── your_app/
│   ├── iphone/
│   ├── ipad/
│   └── assets/
├── preview/
├── export/
│   └── locales/
│       ├── en-US/
│       └── {other locales}/
└── README.md

---

工作流 1 — 查找竞争对手

找出所在类别中的主要竞争对手并进行分析。

步骤 1：按关键词搜索

从应用描述中提取关键词，并在 iTunes 中搜索：

GET https://itunes.apple.com/search?term={keywords}&entity=software&country=us&limit=25

步骤 2：获取排行榜

通过 RSS 源获取类别中的热门应用：

GET https://rss.applemarketingtools.com/api/v2/us/apps/top-free/50/apps.json?genre={genreId}

步骤 3：筛选和排名（可选，使用 Sensor Tower）

如果有 Sensor Tower API：

GET https://app.sensortower.com/api/ios/apps?app_ids={ids}

使用下载量／收入估算值，找出表现出色的应用。

步骤 4：选出排名前 3 的竞争对手

向用户展示候选应用：

## Competitor Candidates

| # | App Name | Rating | Reviews | Category Rank |
|---|----------|--------|---------|---------------|
| 1 | Calm | 4.8★ | 1.2M | #1 Health |
| 2 | Headspace | 4.9★ | 850K | #2 Health |
| 3 | Insight Timer | 4.9★ | 450K | #5 Health |

Select 3 competitors to analyze (enter numbers): [1, 2, 3]

---

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

下载竞争对手的截图并生成分析结果。

步骤 1：获取截图 URL

针对每个竞争对手：

GET https://itunes.apple.com/lookup?id={appId}&country=us

从响应中提取：

• screenshotUrls — iPhone 截图
• ipadScreenshotUrls — iPad 截图

重要：截图数组为空时的备用方案

许多应用通过 iTunes API 返回空的 screenshotUrls: []。这种情况很常见，并非速率限制问题——API 只是没有为某些应用提供截图。

备用方案（按顺序尝试）：

1. 尝试其他国家／地区代码： us、gb、de、cy、tr、au

   GET https://itunes.apple.com/lookup?id={appId}&country=gb
   

2. 抓取 App Store 网页的 HTML： App Store 页面通过 JavaScript 在客户端渲染，但原始 HTML 源码中通常包含作为数据属性嵌入的 mzstatic.com 截图 URL。

   Fetch: https://apps.apple.com/us/app/id{appId}
   Search HTML source for: mzstatic.com URLs containing screenshot patterns
   Filter for URLs with dimensions in the path (e.g., /1242x2208bb.png)
   

3. 手动截取： 作为最后的办法，请用户在设备上截取 App Store 商品页面，或通过浏览器访问该网页。

步骤 2：下载截图

import requests
import os
import json
import subprocess
from pathlib import Path

def download_screenshots(app_id, app_name, output_dir, country="us"):
    # Fetch app data — try multiple countries if needed
    countries = [country, "us", "gb", "de", "au", "cy"]
    data = None

    for cc in countries:
        response = requests.get(f"https://itunes.apple.com/lookup?id={app_id}&country={cc}")
        result = response.json()
        if result["resultCount"] > 0:
            app = result["results"][0]
            if app.get("screenshotUrls"):
                data = app
                break

    if not data:
        print(f"WARNING: No screenshots found for {app_name} via iTunes API")
        print("Try scraping the App Store web page HTML for mzstatic.com URLs")
        return None

    # Create directories
    base_path = Path(output_dir) / "competitors" / app_name
    iphone_path = base_path / "iphone"
    ipad_path = base_path / "ipad"
    iphone_path.mkdir(parents=True, exist_ok=True)
    ipad_path.mkdir(parents=True, exist_ok=True)

    # Download and verify dimensions
    screenshots_meta = []
    for i, url in enumerate(data.get("screenshotUrls", []), 1):
        filepath = iphone_path / f"{i:02d}.png"
        img = requests.get(url)
        with open(filepath, "wb") as f:
            f.write(img.content)

        # Verify actual dimensions (CDN may return smaller than requested)
        dims = get_image_dimensions(filepath)
        screenshots_meta.append({
            "index": i,
            "url": url,
            "actualWidth": dims[0],
            "actualHeight": dims[1]
        })

    # Save enriched metadata
    metadata = {
        **data,
        "downloadDate": str(date.today()),
        "screenshotCount": len(data.get("screenshotUrls", [])),
        "ipadScreenshotCount": len(data.get("ipadScreenshotUrls", [])),
        "screenshotDetails": screenshots_meta
    }
    with open(base_path / "metadata.json", "w") as f:
        json.dump(metadata, f, indent=2)

def get_image_dimensions(filepath):
    """Get actual pixel dimensions. CDN URLs don't upscale."""
    # macOS: sips -g pixelWidth -g pixelHeight {file}
    # Linux: identify {file} (ImageMagick) or python Pillow
    from PIL import Image
    img = Image.open(filepath)
    return img.size

CDN 尺寸警告

CDN 不会放大图片。 如果开发者上传的是 5.5 英寸截图（1242x2208），请求以 1320x2868bb.png 结尾的 URL 也会悄悄返回原始的 1242x2208 图片。下载后务必核实实际尺寸。

步骤 3：分析每个竞争对手

针对每个竞争对手进行分析并记录：

## Screenshot Analysis: {App Name}

### Overview
- **iPhone Screenshots:** {count}
- **iPad Screenshots:** {count}
- **Actual Dimensions:** {width}x{height} (may differ from URL)
- **Visual Style:** [Device mockup / Lifestyle / UI-only / Hybrid]
- **Color Palette:** [Primary colors observed]

### Screenshot Breakdown

| # | Type | Caption/Text | Feature Shown | 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}
- **ASO Keywords in Captions:** {observed keywords}

### Strengths
- {strength 1}
- {strength 2}

### Weaknesses
- {weakness 1}
- {weakness 2}

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

---

工作流 3 — 对比并识别规律

生成跨竞争对手分析。

对比表

## Competitor Comparison

### Visual Style

| Aspect | Competitor 1 | Competitor 2 | Competitor 3 |
|--------|--------------|--------------|--------------|
| Screenshot Count | 8 | 6 | 10 |
| Style | Device mockup | Lifestyle | Hybrid |
| Text Amount | Minimal | Heavy | Medium |
| Color Theme | Blue/Purple | Green/White | Orange/Black |
| Device Frames | Yes | No | Yes |
| Frame Type | Dynamic Island | N/A | Dynamic Island |

### Caption Patterns

| Screenshot | Competitor 1 | Competitor 2 | Competitor 3 |
|------------|--------------|--------------|--------------|
| 1 (Hook) | "Find Peace" | "Sleep Better" | "Meditate Daily" |
| 2 | "Sleep Stories" | "Guided Sessions" | "Track Progress" |
| 3 | "Daily Calm" | "Reduce Stress" | "Join Community" |

### ASO Keywords in Screenshots
| Keyword | Comp 1 | Comp 2 | Comp 3 | Search Volume |
|---------|--------|--------|--------|---------------|
| "calorie" | ✓ | ✓ | ✗ | High |
| "tracker" | ✓ | ✗ | ✓ | High |
| "AI" | ✗ | ✓ | ✓ | Medium |

### Common Patterns
1. {pattern 1}
2. {pattern 2}
3. {pattern 3}

### Differentiation Opportunities
1. {opportunity 1}
2. {opportunity 2}

保存为 analysis/competitor_comparison.md

---

工作流 4 — 为文案开展 ASO 关键词研究

请在撰写文案前完成此步骤。 截图文案现已纳入 Apple 搜索算法索引（自 2025 年 6 月起），因此关键词布局至关重要。

步骤 1：研究类别关键词

GET https://itunes.apple.com/search?term={category}&entity=software&country=us&limit=25

从竞争对手的应用名称和副标题中提取关键词规律：

"Cal AI - Calorie Tracker" → keywords: cal, ai, calorie, tracker
"Lifesum: AI Calorie Counter" → keywords: ai, calorie, counter
"YAZIO – Calorie Counter & Diet" → keywords: calorie, counter, diet

步骤 2：识别高价值关键词

根据竞争对手分析，按以下因素对关键词排序：

• 在竞争对手名称中的出现频率（越高 = 越经过验证）
• 搜索量（根据 App Store 建议估算）
• 与你的应用的相关性

步骤 3：将关键词分配到截图

每张截图的文案都应至少包含一个目标关键词：

## Keyword-Optimized Screenshot Captions

Target keywords: calorie, tracker, AI, scan, food, diet

| # | Before (generic) | After (ASO-optimized) | Keywords |
|---|-------------------|-----------------------|----------|
| 1 | "Snap It. Track It." | "Scan Food, Count Calories" | scan, food, calories |
| 2 | "See Your Progress" | "AI Calorie Tracker" | AI, calorie, tracker |
| 3 | "Eat Smarter" | "Smart Diet Insights" | diet, insights |

步骤 4：按市场本地化关键词

不同市场的搜索习惯各不相同：

| Locale | Top Keywords |
|--------|--------------|
| en-US | calorie tracker, food scanner, diet app |
| tr | kalori sayacı, yemek takip, diyet uygulaması |
| de-DE | kalorienzähler, ernährung, diät tracker |
| ja | カロリー計算, 食事管理, ダイエット |

---

工作流 5 — 规划截图

根据分析和关键词研究，制定截图计划。

截图策略框架

The "Value-Usage-Trust" Formula:
1. VALUE — What the user gets (hook) + primary keyword
2. USAGE — How it works (key features) + feature keywords
3. TRUST — Social proof (ratings, awards)

生成截图计划

## 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}
- **Target Keywords:** {from Workflow 4}

### Screenshot Sequence

#### Screenshot 1: Hook / Value Proposition
- **Caption:** "{ASO-optimized caption}"
- **Subtitle:** "{supporting text}"
- **Visual:** {description of what to show}
- **Keywords:** {keywords included}
- **Goal:** Grab attention, communicate core value

#### Screenshot 2: Key Feature #1
...

### Design Guidelines
- **Colors:** {recommended palette}
- **Font:** {recommendation}
- **Device Frame:** Use Dynamic Island style (not notch)
- **Safe Zones:** Keep text 120px from edges, 160px from top
- **Caption Font Size:** 140-160px title, 48-56px subtitle
- **Letter Spacing:** -4px to -5px for bold impact

### Export Dimensions
- [ ] iPhone 6.9": 1260 x 2736 (iPhone 16 Pro Max)
- [ ] iPad 13": 2064 x 2752
- [ ] PNG format, no transparency
- [ ] Under 8 MB each

保存为 your_app/plan.md

---

工作流 6 — 制作截图（HTML/CSS 导出工具）

使用 HTML/CSS 构建工具制作可用于正式发布的截图。

步骤 1：生成 export-tool.html

创建一个独立的 HTML 文件，按精确像素尺寸渲染每张截图。完整模板请参阅 templates/export-tool.html。

关键组件：

• 尺寸精确的截图画布 div（1260x2736）
• 使用 CSS transform: scale() 在浏览器中预览
• 使用 html2canvas.js 导出 PNG
• 为每张截图单独自定义（背景、文字、素材）

步骤 2：手机边框组件

使用现代 Dynamic Island 边框（不要使用过时的刘海）：

.phone-frame {
    position: relative;
    width: 380px;
    height: 780px;
    border-radius: 55px;
    border: 8px solid #8a8a8f; /* Titanium color */
    background: #000;
    box-shadow:
        inset 0 0 0 3px #1a1a1a,
        6px 0 0 -2px #6b6b6f,    /* Power button */
        -6px 40px 0 -2px #6b6b6f, /* Volume up */
        -6px 90px 0 -2px #6b6b6f; /* Volume down */
    overflow: hidden;
}

.dynamic-island {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 40px;
    background: #000;
    border-radius: 22px;
    z-index: 10;
}

步骤 3：排版系统

标准化的说明文字布局，确保一致性：

.screenshot-title {
    font-size: 140px;
    font-weight: 900;
    letter-spacing: -4px;
    line-height: 1.05;
    text-align: center;
}

.screenshot-subtitle {
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1px;
    opacity: 0.85;
    text-align: center;
}

步骤 4：整合素材

整合应用素材的指南：

• 应用图标（PNG，透明背景）
• 吉祥物／角色图片
• 来自实际设备的 UI 截图
• 使用绝对定位，并结合溢出效果，营造戏剧性效果

关键：提供导出工具服务

⚠️ NEVER open export-tool.html as a file:// URL.
   Canvas export will fail with: "Tainted canvases may not be exported"

✅ ALWAYS serve via HTTP:
   python3 -m http.server 8080
   Then visit: http://localhost:8080/export-tool.html

✅ Add crossorigin="anonymous" to ALL <img> tags
✅ In html2canvas config, use: { useCORS: true }

---

工作流 7 — 导出截图

有两种方法可按正确尺寸导出。

方法 A：浏览器导出（html2canvas）

在导出工具中通过 CDN 引入 html2canvas：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
async function exportScreenshot(elementId, filename) {
    const element = document.getElementById(elementId);
    const canvas = await html2canvas(element, {
        width: 1260,
        height: 2736,
        scale: 1,
        useCORS: true,
        logging: false
    });

    const link = document.createElement('a');
    link.download = filename;
    link.href = canvas.toDataURL('image/png');
    link.click();
}
</script>

方法 B：Puppeteer 无头捕获（自动化场景推荐）

Puppeteer 对字体和图片的处理更可靠。

const puppeteer = require('puppeteer');

async function captureScreenshot(url, elementId, outputPath) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Set viewport to exact screenshot dimensions
    await page.setViewport({ width: 1260, height: 2736 });
    await page.goto(url, { waitUntil: 'networkidle0' });

    // Clone element into a fixed full-size wrapper
    // (direct capture fails because of CSS transform: scale)
    await page.evaluate((id) => {
        // Hide all existing page content
        for (const child of document.body.children) {
            child.style.display = 'none';
        }

        // Create fixed wrapper at exact viewport size
        const wrapper = document.createElement('div');
        wrapper.style.cssText = `
            position: fixed; top: 0; left: 0;
            width: 1260px; height: 2736px;
            overflow: hidden; z-index: 99999;
        `;

        // Clone the target element at full size (no transform)
        const original = document.getElementById(id);
        const clone = original.cloneNode(true);
        clone.style.cssText = `
            transform: none;
            width: 1260px; height: 2736px;
            position: absolute; top: 0; left: 0;
        `;

        wrapper.appendChild(clone);
        document.body.prepend(wrapper);
    }, elementId);

    await page.screenshot({
        path: outputPath,
        clip: { x: 0, y: 0, width: 1260, height: 2736 }
    });

    await browser.close();
}

验证导出尺寸

导出后务必验证：

# macOS
sips -g pixelWidth -g pixelHeight screenshot.png

# Linux (ImageMagick)
identify screenshot.png

# Expected: 1260 x 2736 (iPhone 6.9")

导出命名约定

{nn}_{name}_{locale}.png

Examples:
01_hook_en-US.png
02_scan_food_en-US.png
03_ai_tracker_en-US.png
01_hook_tr.png
02_yemek_tara_tr.png

---

工作流 8 — 本地化截图

为多个 App Store 地区创建本地化版本。

步骤 1：模板系统

设计包含可替换文字图层的截图：

• 所有地区使用相同的视觉布局
• 每个地区仅更改文字／说明
• 视觉素材（设备边框、UI、吉祥物）保持一致

步骤 2：翻译说明文字（不止翻译，还要本地化）

使用各地区经过 ASO 优化的关键词（参见工作流 4）：

| Screenshot | en-US | tr | de-DE |
|------------|-------|-----|-------|
| 1 | "Scan Food, Count Calories" | "Yemeği Tara, Kalori Say" | "Essen Scannen, Kalorien Zählen" |
| 2 | "AI Calorie Tracker" | "AI Kalori Takibi" | "KI Kalorienzähler" |
| 3 | "Smart Diet Insights" | "Akıllı Diyet Analizi" | "Smarte Diät-Einblicke" |

步骤 3：按地区导出

export/
└── locales/
    ├── en-US/
    │   ├── 01_hook.png
    │   ├── 02_feature1.png
    │   └── ...
    ├── tr/
    │   ├── 01_hook.png
    │   └── ...
    └── de-DE/
        ├── 01_hook.png
        └── ...

步骤 4：并排检查

上传前并排预览所有地区的版本，确认一致性。

---

工作流 9 — 上传到 App Store Connect

通过 App Store Connect API 以编程方式上传截图。

前提条件

• App Store Connect API 密钥（.p8 文件）
• Key ID 和 Issuer ID
• 已在 App Store Connect 中创建应用
• 可编辑的版本（处于 PREPARE_FOR_SUBMISSION 状态）

JWT 身份验证

const jwt = require('jsonwebtoken');
const fs = require('fs');

const privateKey = fs.readFileSync('AuthKey_{keyId}.p8');
const token = jwt.sign(
    {
        iss: ISSUER_ID,
        iat: Math.floor(Date.now() / 1000),
        exp: Math.floor(Date.now() / 1000) + 1200,
        aud: 'appstoreconnect-v1'
    },
    privateKey,
    { algorithm: 'ES256', header: { alg: 'ES256', kid: KEY_ID, typ: 'JWT' } }
);

API 流程

1. 查找应用：

   GET /v1/apps?filter[bundleId]={bundleId}
   

2. 查找可编辑版本：

   GET /v1/apps/{id}/appStoreVersions?filter[appStoreState]=PREPARE_FOR_SUBMISSION
   

   有效的筛选状态：PREPARE_FOR_SUBMISSION、DEVELOPER_REJECTED、 REJECTED、METADATA_REJECTED、WAITING_FOR_REVIEW、IN_REVIEW、 PENDING_DEVELOPER_RELEASE、READY_FOR_SALE

   警告：READY_FOR_DISTRIBUTION 不是有效的状态值。

3. 获取／创建本地化版本：

   GET /v1/appStoreVersions/{id}/appStoreVersionLocalizations
   

4. 创建截图集：

   POST /v1/appScreenshotSets
   

   请求正文：

   {
     "data": {
       "type": "appScreenshotSets",
       "attributes": {
         "screenshotDisplayType": "APP_IPHONE_67"
       },
       "relationships": {
         "appStoreVersionLocalization": {
           "data": { "type": "appStoreVersionLocalizations", "id": "{locId}" }
         }
       }
     }
   }
   

5. 删除现有截图（如需替换）：

   DELETE /v1/appScreenshots/{screenshotId}
   

6. 针对每张截图：

   a. Reserve: POST /v1/appScreenshots
      { fileName, fileSize, sourceFileChecksum (MD5) }
   
   b. Upload binary to the URL(s) provided in response
   
   c. Commit: PATCH /v1/appScreenshots/{id}
      { uploaded: true, sourceFileChecksum: MD5 }
   

显示类型映射

IMPORTANT: APP_IPHONE_69 does NOT exist in the API.
iPhone 6.9" screenshots map to the 6.7" display type.

| Device          | API Display Type          | Accepted Dimensions |
|-----------------|--------------------------|---------------------|
| iPhone 6.9"     | APP_IPHONE_67            | 1260 x 2736         |
| iPhone 6.7"     | APP_IPHONE_67            | 1290 x 2796         |
| iPhone 6.5"     | APP_IPHONE_65            | 1284 x 2778         |
| iPhone 6.1"     | APP_IPHONE_61            | 1179 x 2556         |
| iPad 13"        | APP_IPAD_PRO_3GEN_129    | 2064 x 2752         |
| iPad 12.9"      | APP_IPAD_PRO_3GEN_129    | 2048 x 2732         |

完整详情请参阅 asc-upload-api.md。

---

快速参考 — API

任务	端点
搜索应用	itunes.apple.com/search?term={q}&entity=software
查询应用	itunes.apple.com/lookup?id={id}&country={cc}
免费榜单	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 Feed 后添加 ?genre={genreId}
ASC：截图集	POST /v1/appScreenshotSets
ASC：上传截图	POST /v1/appScreenshots

---

文件夹结构

{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
├── export/
│   ├── export-tool.html
│   ├── capture.js
│   └── locales/
│       ├── en-US/
│       └── {other locales}/
└── README.md

---

参考文件

文件	用途
screenshot-specs.md	所有设备尺寸和技术要求
analysis-templates.md	竞品分析模板
itunes-api.md	API 端点和备用策略
asc-upload-api.md	App Store Connect 上传 API
export-pipeline.md	html2canvas + Puppeteer 导出指南
preview-website.html	预览工具模板
export-tool.html	截图构建工具模板