app-store-screenshots

작성자: halt-catch-fire

앱 스토어 및 구글 플레이 스크린샷 제작, 정확한 플랫폼 사양 준수. iOS/Android 치수, 갤러리 순서, 기기 목업, 미리보기 비디오 포함. 사용처: 앱 스토어 최적화, ASO, 앱 스크린샷, 앱 미리보기, 플레이 스토어 리스팅. 트리거: 앱 스토어 스크린샷, aso, 앱 스토어 최적화, 플레이 스토어 스크린샷, 앱 미리보기, 앱 리스팅, ios 스크린샷, android 스크린샷, 앱 스토어 이미지, 앱 목업, 기기 목업, 앱 갤러리, 스토어 리스팅

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
We need to translate the given text from English to Korean. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. So names like GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve, inference.sh CLI, etc. should remain as is. Also numbers like 50+, 4.5. The text inside <text> is a description of an agent skill for AI image generation. We need to translate the rest naturally into Korean. Let's break it down: "Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI." -> "inference.sh CLI를 통해 GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve 및 50개 이상의 모델로 AI 이미지를 생성합니다." "Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4
creativemediaimage
ai-video-generation
halt-catch-fire
inference.sh CLI를 통해 Google Veo, Seedance 2.0, HappyHorse, Wan, Grok 및 40개 이상의 모델로 AI 비디오를 생성합니다. 모델: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. 기능: 텍스트-비디오, 이미지-비디오, 참조-비디오, 비디오 편집, 립싱크, 아바타 애니메이션, 비디오 업스케일링, 폴리 사운드. 사용처: 소셜 미디어 비디오, 마케팅 콘텐츠, 설명 비디오, 제품 데모, AI 아바타. 트리거: 비디오 생성, AI 비디오,...
creativevideomedia
twitter-automation
halt-catch-fire
We need to translate the given text from English to Korean. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. The name "twitter-automation" is not in the text, so we don't include it. We only translate the text inside <text>. No extra labels or commentary. The text describes an agent skill for automating Twitter/X. It mentions CLI, apps like x/post-tweet, etc., capabilities, use cases, and triggers. We need to translate naturally while keeping technical terms like "inference.sh CLI", "x/post-tweet", etc. as is. Also "Twitter/X" should be preserved as is or translated? The instruction says preserve product names, so "Twitter" and "X" are product names. But "Twitter/X" might be a combined reference. I'll keep "Twitter/X" as is. Similarly "X API" should be preserved. "inference.sh CLI" is a technical term, keep as is. The list of apps: x/post-tweet, x/post-create (with media),
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
Tavily와 Exa를 통해 inference.sh CLI로 웹 검색 및 콘텐츠 추출. 앱: Tavily Search, Tavily Extract, Exa Search, Exa Answer, Exa Extract. 기능: AI 기반 검색, 콘텐츠 추출, 직접 답변, 리서치. 용도: 리서치, RAG 파이프라인, 사실 확인, 콘텐츠 수집, 에이전트. 트리거: 웹 검색, tavily, exa, search api, 콘텐츠 추출, 리서치, 인터넷 검색, ai 검색, 검색 어시스턴트, 웹 스크래핑, rag, perplexity 대안
researchweb-scrapingapi
infsh-cli
halt-catch-fire
inference.sh CLI를 통해 250개 이상의 AI 앱 실행 - 이미지 생성, 비디오 제작, LLM, 검색, 3D, Twitter 자동화. 모델: FLUX, Veo, Gemini, Grok, Claude, Seedance, OmniHuman, Tavily, Exa, OpenRouter 등 다수. AI 앱 실행, 이미지/비디오 생성, LLM 호출, 웹 검색 또는 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 랜딩 페이지, 제품 페이지 디자인, 전환율, 랜딩 페이지...