app-store-screenshots

作者: halt-catch-fire

依據精確的平台規格製作App Store與Google Play截圖,涵蓋iOS/Android尺寸、圖庫排序、裝置模擬機及預覽影片。適用於:App Store優化、ASO、應用程式截圖、應用程式預覽、Play Store上架。觸發詞:App Store截圖、ASO、App Store優化、Play Store截圖、應用程式預覽、應用程式上架、iOS截圖、Android截圖、App Store圖片、應用程式模擬機、裝置模擬機、應用程式圖庫、商店上架

npx skills add https://github.com/halt-catch-fire/skills --skill app-store-screenshots

Install the belt CLI skill: npx skills add belt-sh/cli

App Store Screenshots

Create app store screenshots and preview videos via inference.sh CLI.

Quick Start

Requires inference.sh CLI (belt). Install instructions

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
}'

Platform Specifications

Apple App Store (iOS)

DeviceDimensions (px)Required
iPhone 6.7" (15 Pro Max)1290 x 2796Required
iPhone 6.5" (11 Pro Max)1284 x 2778Required
iPhone 5.5" (8 Plus)1242 x 2208Optional
iPad Pro 12.9" (6th gen)2048 x 2732If iPad app
iPad Pro 11"1668 x 2388If iPad app
  • Up to 10 screenshots per localization
  • First 3 screenshots are visible without scrolling (critical)
  • Formats: PNG or JPEG (no alpha/transparency for JPEG)

Google Play Store (Android)

SpecValue
Min dimensions320 px (any side)
Max dimensions3840 px (any side)
Aspect ratio16:9 or 9:16
Max screenshots8 per device type
FormatsPNG or JPEG (24-bit, no alpha)
  • Feature graphic: 1024 x 500 px (required for featuring)
  • Promo video: YouTube URL (optional but recommended)

The First 3 Rule

80% of App Store impressions show only the first 3 screenshots (before the user scrolls). These three must:

  1. Communicate the core value proposition
  2. Show the best feature/outcome
  3. Differentiate from competitors

Screenshot Gallery Order

PositionContentPurpose
1Hero — core value, best featureStop the scroll, communicate what the app does
2Key differentiatorWhat makes you unique vs competitors
3Most popular featureThe thing users love most
4Social proof or outcomeRatings, results, testimonials
5-8Additional featuresSupporting features, settings, integrations
9-10Edge casesSpecialized features for niche users

Screenshot Styles

1. Device Frame with Caption

The standard: device mockup showing the app, caption text above/below.

┌──────────────────────────┐
│   "Track Your Habits     │  ← Caption (benefit-focused)
│    Effortlessly"         │
│                          │
│   ┌──────────────────┐   │
│   │                  │   │
│   │   App Screen     │   │  ← Actual app UI in device frame
│   │   Content        │   │
│   │                  │   │
│   │                  │   │
│   └──────────────────┘   │
│                          │
└──────────────────────────┘

2. Full-Bleed UI (No Device Frame)

The app UI fills the entire screenshot. Works for immersive apps.

3. Lifestyle Context

The device shown in a real-world context (person holding phone, on desk, etc.).

4. Feature Highlight with Callouts

UI screenshot with arrows/circles pointing to specific features.

Caption Writing

Rules

  • Max 2 lines of text
  • Benefit-focused, not feature-focused
  • 30pt+ equivalent font size (must be readable in store)

Examples

❌ 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"

Generating Screenshots

Hero Screenshot (Position 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 Highlight

# 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"
}'

Lifestyle Context

# 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
}'

Before/After

# Split comparison
belt app run infsh/stitch-images --input '{
  "images": ["before-screenshot.png", "after-screenshot.png"],
  "direction": "horizontal"
}'

Preview Videos

Apple App Store

SpecValue
Duration15-30 seconds
OrientationPortrait or landscape (match app)
AudioOptional (loops silently in store)
FormatH.264, .mov or .mp4

Google Play

SpecValue
SourceYouTube URL
Duration30s-2min recommended
OrientationLandscape preferred

Preview Video Structure

SegmentDurationContent
Hook0-3sShow the core outcome/wow moment
Feature 13-10sDemonstrate top feature in action
Feature 210-18sSecond key feature
Feature 318-25sThird feature or social proof
CTA25-30sEnd screen with app icon
# 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"
}'

Localization

Each language gets its own set of screenshots. Priorities:

MarketLocalization Level
Primary marketsFull: new screenshots + translated captions
Secondary marketsTranslated captions, same screenshots
OtherEnglish defaults

Key localization markets: English, Japanese, Korean, Chinese (Simplified), German, French, Spanish, Portuguese (Brazilian)

A/B Testing (Google Play)

Google Play Console supports store listing experiments:

  • Test different screenshot orders
  • Test with/without device frames
  • Test different captions
  • Test different color schemes
  • Run for 7+ days with 50%+ traffic for significant results

Common Mistakes

MistakeProblemFix
Settings screen as screenshotNobody cares about settingsShow core value, not infrastructure
Onboarding flow screenshotsShows friction, not valueShow the app in-use state
Too much textUnreadable in storeMax 2 lines, 30pt+ font
Wrong dimensionsRejected by storeUse exact platform specs
All screenshots look the sameNo reason to scrollVary composition and content
Feature-focused captionsDoesn't communicate benefit"Never Miss a Deadline" > "Push Notifications"
Outdated UILooks abandonedUpdate screenshots with each major release
No hero screenshotWeak first impressionPosition 1 = your best shot

Checklist

  • Correct dimensions for target platform
  • First 3 screenshots communicate core value
  • Captions are benefit-focused, max 2 lines
  • No onboarding or settings screens
  • Preview video is 15-30s with hook in first 3s
  • Localized for top markets
  • Feature graphic (1024x500) for Google Play
  • Screenshots updated for current app version
  • A/B test variant prepared

Related Skills

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

Browse all apps: belt app list

來自 halt-catch-fire 的更多技能

ai-image-generation
halt-catch-fire
透過 inference.sh CLI 使用 GPT-Image-2、FLUX、Gemini、Grok、Seedream、Reve 及 50 多種模型生成 AI 圖像。模型包括:GPT-Image-2、FLUX Dev LoRA、FLUX.2 Klein LoRA、Gemini 3 Pro Image、Grok Imagine、Seedream 4.5、Reve、ImagineArt。功能:文字轉圖像、圖像轉圖像、修補、LoRA、圖像編輯、放大、文字渲染。適用於:AI 藝術、產品模型、概念藝術、社交媒體圖形、行銷視覺、插圖。觸發詞:flux、圖像生成、AI 圖像、文字轉...
creativemediaimage
ai-video-generation
halt-catch-fire
We need to translate the given text from English to Traditional Chinese. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. So names like Google Veo, Seedance 2.0, HappyHorse, Wan, Grok, inference.sh CLI, Veo 3.1, etc. should remain as is. Also preserve terms like text-to-video, image-to-video, etc. but translate the surrounding Chinese text. The text inside <text> is a description of an agent skill. We need to output only the translated text, no extra labels. Let's translate paragraph by paragraph: "Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI." -> "通過 inference.sh CLI 使用 Google Veo、Seedance 2.0、HappyHorse、Wan、Grok 及 40 多個模型生成 AI 影片。" "Models: Veo 3.1, Veo 3,
creativevideomedia
twitter-automation
halt-catch-fire
We need to translate the given text from English to Traditional Chinese. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. The name "twitter-automation" is to be preserved but not included unless it appears in the source text. The source text does not include that name, so we don't add it. We translate only the text inside <text>. No extra labels or commentary. The text: "Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x..." We need to translate terms like "Automate",
marketingapicommunication
ai-avatar-video
halt-catch-fire
透過 inference.sh CLI 建立 AI 虛擬角色與說話頭像影片。推薦:P-Video-Avatar(最快、最便宜、內建 TTS)。另可選:OmniHuman、Fabric、PixVerse。音訊:Inworld TTS-2(支援 100 多種語言、角色情感引導)、ElevenLabs、Kokoro。功能:音訊驅動虛擬角色、文字轉虛擬角色、唇形同步影片、說話頭像生成、虛擬主持人、UGC 內容。適用於:AI 主持人、解說影片、虛擬網紅、配音、行銷影片、UGC 廣告、遊戲虛擬角色等。
videocreativemedia
agent-browser
halt-catch-fire
透過 inference.sh 為 AI 代理提供瀏覽器自動化功能。可導覽網頁、使用 @e 參考與元素互動、擷取螢幕截圖、錄製影片。功能包括:網頁抓取、表單填寫、點擊、打字、拖放、檔案上傳、執行 JavaScript。適用於:網頁自動化、資料擷取、測試、代理瀏覽、研究。觸發詞:瀏覽器、網頁自動化、抓取、導覽、點擊、填寫表單、螢幕截圖、瀏覽網頁、playwright、無頭瀏覽器、網頁代理、上網、錄製影片
browser-automationweb-scrapingtesting
web-search
halt-catch-fire
透過 inference.sh CLI 使用 Tavily 和 Exa 進行網路搜尋與內容擷取。應用:Tavily 搜尋、Tavily 擷取、Exa 搜尋、Exa 回答、Exa 擷取。功能:AI 驅動搜尋、內容擷取、直接回答、研究。用途:研究、RAG 管線、事實查核、內容彙整、代理程式。觸發詞:網路搜尋、tavily、exa、搜尋 API、內容擷取、研究、網際網路搜尋、AI 搜尋、搜尋助理、網頁抓取、rag、perplexity 替代方案
researchweb-scrapingapi
infsh-cli
halt-catch-fire
透過 inference.sh CLI 執行 250 多個 AI 應用程式,包括圖片生成、影片創作、大型語言模型、搜尋、3D、Twitter 自動化。模型包含:FLUX、Veo、Gemini、Grok、Claude、Seedance、OmniHuman、Tavily、Exa、OpenRouter 等眾多選擇。適用於執行 AI 應用程式、生成圖片/影片、呼叫大型語言模型、網路搜尋或自動化 Twitter 時使用。觸發詞:inference.sh、infsh、ai model、run ai、serverless ai、ai api、flux、veo、claude api、image generation、video generation、openrouter、tavily、exa search、twitter api、grok
developmentapicreative
landing-page-design
halt-catch-fire
著陸頁轉換優化,包含佈局規則、英雄區塊設計與CTA心理學。涵蓋首屏公式、社會證明放置、行動設計與F型閱讀模式。適用於:新創著陸頁、產品頁面、SaaS行銷、轉換優化。觸發詞:著陸頁、英雄區塊、首屏、轉換優化、著陸頁設計、CTA按鈕、英雄圖片、著陸頁佈局、SaaS著陸頁、產品頁面設計、轉換率、著陸頁...