Screenshot Planner

rshankras/claude-code-apple-skills/skills/app-store/screenshot-planner

作者 rshankras9ffb83138209無授權條款784 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫2 個月前更新

Plan compelling App Store screenshot sequences that showcase your app's value. Use when preparing App Store assets, improving screenshot conversion, or drafting screenshot captions for a launch or major update.

AI 產生的概覽

為 App 上架與更新規劃 App Store 截圖序列、文案與預覽影片分鏡。

功能
此技能會指導規劃 App Store 截圖組,提供五張截圖框架與擴充至十張的版面,並附上依位置說明用途的表格。它會產出文案公式與各類別範例、關於裝置外框、背景與字型的視覺建議、分鏡範本、iPhone、iPad 與 macOS 的尺寸要求,以及 App Preview 影片規格與分鏡。內容也涵蓋在地化優先順序、競品分析步驟,以及產品頁頁首和自訂搜尋結果視覺素材等較新的 App Store 版位。
適用情境
適用於準備 App Store 素材、想提升截圖轉換率、撰寫截圖文案,或為新 App 上架與重大更新規劃視覺內容時。也適合處理 App Preview 影片以及頁首或搜尋結果創意素材的工作。
執行需求
僅為說明性內容,不附帶指令碼。假定代理程式能讀寫檔案並向使用者提問;文中提及外部設計、錄影與截圖產生工具以及 App Store Connect,但技能本身不需要憑證或網路存取。

Screenshot Planner

Plan compelling App Store screenshot sequences that showcase your app's value.

When This Skill Activates

  • User is preparing App Store assets
  • User wants to improve screenshot conversion
  • User asks about screenshot strategy or captions
  • User is launching a new app or major update

Information Gathering

Before planning, ask about:

  1. App Type

    • What category? (Productivity, Games, Lifestyle, etc.)
    • Primary use case?
    • Visual style of the app?
  2. Key Selling Points

    • What makes users choose this app?
    • Most impressive features visually?
    • Any unique UI elements?
  3. Target Audience

    • Who downloads this app?
    • What problem are they trying to solve?
    • What matters most to them?
  4. Competitors

    • What do competitor screenshots show?
    • How can you differentiate?

Screenshot Strategy

The 5-Screenshot Framework

Most users only see the first 2-3 screenshots. Order matters!

PositionPurposeContent
1Hero ShotValue proposition + best visual
2Core FeaturePrimary use case in action
3Key DifferentiatorWhat makes you unique
4Secondary FeatureAnother compelling feature
5Social Proof/CTAReviews, awards, or final push

Extended (10 Screenshots)

PositionPurpose
6Additional feature
7Customization/settings
8Integration/ecosystem
9Before/after or workflow
10Final CTA with app icon

Caption Writing

Caption Formula

[Action Verb] + [Benefit] + [Optional Detail]

Examples by Category

Productivity:

  • "Capture ideas instantly"
  • "Never miss a deadline"
  • "Your tasks, beautifully organized"

Health & Fitness:

  • "Track every workout"
  • "See your progress over time"
  • "Personalized plans that work"

Photo & Video:

  • "Edit like a pro in seconds"
  • "Filters that actually look good"
  • "Share anywhere with one tap"

Finance:

  • "Know where your money goes"
  • "Budget without the stress"
  • "Insights that save you money"

Caption Rules

✅ Do:

  • Keep under 8 words
  • Start with action verbs
  • Focus on user benefits
  • Match the visual exactly
  • Use sentence case

❌ Don't:

  • Use technical jargon
  • Include version numbers
  • Mention prices
  • Use "Our app does..."
  • Write full sentences

Visual Best Practices

Device Frames

ApproachWhen to Use
With framesWhen device context matters, lifestyle apps
Without framesMaximizing screen real estate, content apps
3D anglesStanding out, premium feel
Flat/straightClean, professional, enterprise

Backgrounds

  • Solid colors: Clean, professional, fast loading
  • Gradients: Modern, dynamic, attention-grabbing
  • Lifestyle photos: Context, emotion, aspiration
  • Abstract patterns: Creative, unique, memorable

Typography

  • Use 2 fonts max (headline + body)
  • Minimum 60pt for headlines (iPhone)
  • Ensure readability on small thumbnails
  • Match your app's brand fonts if possible

Screenshot Storyboard Template

SCREENSHOT 1: HERO━━━━━━━━━━━━━━━━━━Caption: [Value proposition - max 6 words]Visual: [Key screen showing main feature]Background: [Color/gradient that pops]Notes: [This is first impression - make it count]
SCREENSHOT 2: CORE FEATURE━━━━━━━━━━━━━━━━━━━━━━━━━━Caption: [What can user do?]Visual: [App in action, primary workflow]Background: [Consistent with #1]Notes: [Show the "aha" moment]
SCREENSHOT 3: DIFFERENTIATOR━━━━━━━━━━━━━━━━━━━━━━━━━━━Caption: [What makes you unique?]Visual: [Feature competitors don't have]Background: [Can vary slightly]Notes: [Answer "why this app?"]
SCREENSHOT 4: SECONDARY FEATURE━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Caption: [Another key benefit]Visual: [Compelling secondary feature]Background: [Consistent theme]Notes: [Add depth to value proposition]
SCREENSHOT 5: TRUST/CTA━━━━━━━━━━━━━━━━━━━━━━Caption: [Social proof or call to action]Visual: [Reviews, stats, or final screen]Background: [Strong finish]Notes: [Close the deal]

Size Requirements

iPhone (Required)

SizeDeviceDimensions
6.7"iPhone 15 Pro Max1290 × 2796
6.5"iPhone 11 Pro Max1284 × 2778
5.5"iPhone 8 Plus1242 × 2208

iPad (If Universal)

SizeDeviceDimensions
12.9"iPad Pro2048 × 2732

macOS

DisplayDimensions
Standard1280 × 800 (min)
Retina2880 × 1800

App Preview Video

When to Include

  • Complex apps that need demonstration
  • Games (almost always)
  • Apps with unique interactions
  • When screenshots can't show the experience

Video Specs

  • 15-30 seconds optimal
  • First 3 seconds = hook
  • No audio required (most watch muted)
  • Show actual app (no external footage first 3s)
  • 1080p or higher

Video Storyboard

0:00-0:03  Hook - Most impressive moment0:03-0:10  Core workflow demonstration0:10-0:20  Key features montage0:20-0:30  Final CTA with value prop

Creative Assets, Product Page Header & Search Results Visuals

Introduced at WWDC26; submittable via App Store Connect's Asset Library, rendering on iOS 27 / iPadOS 27. (Per the session "Enhance your presence on the App Store".)

Two new surfaces beyond screenshots, both fed from the Asset Library (ASC's central hub for screenshots, previews, event media, and the new marketing images/videos called creative assets):

  • Product Page Header — an image or video above your screenshots; the first visual element people see. Header, icon, and screenshots should "work together" — one visual identity, video when you want to control the narrative.
  • Custom Search Results visuals — replace the default screenshot strip in search with an impactful image/video; you can show a tailored asset per search keyword, pairing it with the matching Custom Product Page and deep link.

Working rules from Apple's session:

  • ✅ Pre-approve assets in the Asset Library — approved assets can then update the header and search visuals in real time, without another review or an app update. Two flows: attach to a version submission, or submit assets standalone.
  • ✅ Use the same asset on header and search results for a seamless discovery→install experience.
  • ✅ A/B every new visual through PPO ("test different visuals and see exactly which ones your audience respond best to"); use the ASC Preview tool across iPhone/iPad, orientations, and languages before submitting.
  • ✅ Automate uploads/submissions via the App Store Connect API.
  • ❌ Don't treat these as decoration — assets must "clearly communicate your app's core value" (aspirational imagery for outdoor apps, destinations for travel, gameplay/characters for games).

Keep a motion-capable asset library (source-quality captures, layered project files) so every PPO/CPP learning can graduate into header and search assets.

Localization

Considerations

  • Captions must be localized
  • Screenshots may need localization if they show text
  • Consider using minimal in-app text in screenshots
  • Some markets prefer different visual styles

Priority Markets

  1. English (US)
  2. Chinese (Simplified)
  3. Japanese
  4. German
  5. French
  6. Spanish

Tools

Design Tools

  • Figma - Free, collaborative
  • Sketch - Mac-native, templates available
  • Photoshop - Full control

Screenshot Generators

  • Screenshots.pro - Templates with device frames
  • Previewed - 3D mockups
  • AppLaunchpad - Quick and easy
  • Studio - Mac app with templates

Capture Tools

  • Xcode Simulator - File → Screenshot
  • QuickTime - Screen recording for video
  • ScreenFloat - Organize captures

Competitive Analysis

Before finalizing, check competitors:

  1. Search your main keyword
  2. Screenshot top 5 apps
  3. Note patterns:
    • Frame style used
    • Caption placement
    • Color schemes
    • Number of screenshots
  4. Differentiate while meeting expectations

來源與署名

來源:rshankras/claude-code-apple-skills位於skills/app-store/screenshot-planner提交9ffb831

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架