Skip to content
screenshot-planner logo

Screenshot Planner

screenshot-planner

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.

SKILL.md

Full skill instructions

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 moment
0:03-0:10  Core workflow demonstration
0:10-0:20  Key features montage
0:20-0:30  Final CTA with value prop

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

More Design skills

brandkit logo
Design

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K
View

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K
View

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K
View

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K
View

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K
View

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K
View

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K
View
Animate logo
Design

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K
View

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K
View

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K
View

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K
View

Design AI tools

Maze Guru logo
Images

Maze Guru

Chat-to-edit AI studio for product photos, portraits, branding, and video.

Freemium
View
R
Design

RoomGPT

Generate your dream room in seconds.

Paid
View

Redesign your interior in seconds using AI

Paid
View
Reroom logo
Design

Reroom

Transform rooms with AI-generated designs.

Freemium
View
Jife logo
Design

Jife

Transform Your Space with AI-Powered Japanese Interior Designs by Jife

Paid
View
Visily logo
Design

Visily

AI-powered wireframes for non-designers.

Free
View

Revolutionize Property Viewing with AI-Generated Floor Plans and Virtual Tours

Paid
View
Archsynth logo
Design

Archsynth

Transform sketches into stunning architectural renders with AI.

Paid
View