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:
App Type
- What category? (Productivity, Games, Lifestyle, etc.)
- Primary use case?
- Visual style of the app?
Key Selling Points
- What makes users choose this app?
- Most impressive features visually?
- Any unique UI elements?
Target Audience
- Who downloads this app?
- What problem are they trying to solve?
- What matters most to them?
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!
| Position |
Purpose |
Content |
| 1 |
Hero Shot |
Value proposition + best visual |
| 2 |
Core Feature |
Primary use case in action |
| 3 |
Key Differentiator |
What makes you unique |
| 4 |
Secondary Feature |
Another compelling feature |
| 5 |
Social Proof/CTA |
Reviews, awards, or final push |
Extended (10 Screenshots)
| Position |
Purpose |
| 6 |
Additional feature |
| 7 |
Customization/settings |
| 8 |
Integration/ecosystem |
| 9 |
Before/after or workflow |
| 10 |
Final 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
| Approach |
When to Use |
| With frames |
When device context matters, lifestyle apps |
| Without frames |
Maximizing screen real estate, content apps |
| 3D angles |
Standing out, premium feel |
| Flat/straight |
Clean, 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)
| Size |
Device |
Dimensions |
| 6.7" |
iPhone 15 Pro Max |
1290 × 2796 |
| 6.5" |
iPhone 11 Pro Max |
1284 × 2778 |
| 5.5" |
iPhone 8 Plus |
1242 × 2208 |
iPad (If Universal)
| Size |
Device |
Dimensions |
| 12.9" |
iPad Pro |
2048 × 2732 |
macOS
| Display |
Dimensions |
| Standard |
1280 × 800 (min) |
| Retina |
2880 × 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
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
- English (US)
- Chinese (Simplified)
- Japanese
- German
- French
- 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:
- Search your main keyword
- Screenshot top 5 apps
- Note patterns:
- Frame style used
- Caption placement
- Color schemes
- Number of screenshots
- Differentiate while meeting expectations
1---
2name: screenshot-planner
3description: 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.
4allowed-tools: [Read, Write, Edit, Glob, Grep, AskUserQuestion]
5last_verified: 2026-07-16
6review_by: 2027-06-22
7os_version: iOS 27 / macOS 27
8---
9
10# Screenshot Planner
11
12Plan compelling App Store screenshot sequences that showcase your app's value.
13
14## When This Skill Activates
15
16- User is preparing App Store assets
17- User wants to improve screenshot conversion
18- User asks about screenshot strategy or captions
19- User is launching a new app or major update
20
21## Information Gathering
22
23Before planning, ask about:
24
251. **App Type**
26 - What category? (Productivity, Games, Lifestyle, etc.)
27 - Primary use case?
28 - Visual style of the app?
29
302. **Key Selling Points**
31 - What makes users choose this app?
32 - Most impressive features visually?
33 - Any unique UI elements?
34
353. **Target Audience**
36 - Who downloads this app?
37 - What problem are they trying to solve?
38 - What matters most to them?
39
404. **Competitors**
41 - What do competitor screenshots show?
42 - How can you differentiate?
43
44## Screenshot Strategy
45
46### The 5-Screenshot Framework
47
48Most users only see the first 2-3 screenshots. Order matters!
49
50| Position | Purpose | Content |
51|----------|---------|---------|
52| **1** | Hero Shot | Value proposition + best visual |
53| **2** | Core Feature | Primary use case in action |
54| **3** | Key Differentiator | What makes you unique |
55| **4** | Secondary Feature | Another compelling feature |
56| **5** | Social Proof/CTA | Reviews, awards, or final push |
57
58### Extended (10 Screenshots)
59
60| Position | Purpose |
61|----------|---------|
62| 6 | Additional feature |
63| 7 | Customization/settings |
64| 8 | Integration/ecosystem |
65| 9 | Before/after or workflow |
66| 10 | Final CTA with app icon |
67
68## Caption Writing
69
70### Caption Formula
71
72```
73[Action Verb] + [Benefit] + [Optional Detail]
74```
75
76### Examples by Category
77
78**Productivity:**
79- "Capture ideas instantly"
80- "Never miss a deadline"
81- "Your tasks, beautifully organized"
82
83**Health & Fitness:**
84- "Track every workout"
85- "See your progress over time"
86- "Personalized plans that work"
87
88**Photo & Video:**
89- "Edit like a pro in seconds"
90- "Filters that actually look good"
91- "Share anywhere with one tap"
92
93**Finance:**
94- "Know where your money goes"
95- "Budget without the stress"
96- "Insights that save you money"
97
98### Caption Rules
99
100✅ **Do:**
101- Keep under 8 words
102- Start with action verbs
103- Focus on user benefits
104- Match the visual exactly
105- Use sentence case
106
107❌ **Don't:**
108- Use technical jargon
109- Include version numbers
110- Mention prices
111- Use "Our app does..."
112- Write full sentences
113
114## Visual Best Practices
115
116### Device Frames
117
118| Approach | When to Use |
119|----------|-------------|
120| **With frames** | When device context matters, lifestyle apps |
121| **Without frames** | Maximizing screen real estate, content apps |
122| **3D angles** | Standing out, premium feel |
123| **Flat/straight** | Clean, professional, enterprise |
124
125### Backgrounds
126
127- **Solid colors:** Clean, professional, fast loading
128- **Gradients:** Modern, dynamic, attention-grabbing
129- **Lifestyle photos:** Context, emotion, aspiration
130- **Abstract patterns:** Creative, unique, memorable
131
132### Typography
133
134- Use 2 fonts max (headline + body)
135- Minimum 60pt for headlines (iPhone)
136- Ensure readability on small thumbnails
137- Match your app's brand fonts if possible
138
139## Screenshot Storyboard Template
140
141```
142SCREENSHOT 1: HERO
143━━━━━━━━━━━━━━━━━━
144Caption: [Value proposition - max 6 words]
145Visual: [Key screen showing main feature]
146Background: [Color/gradient that pops]
147Notes: [This is first impression - make it count]
148
149SCREENSHOT 2: CORE FEATURE
150━━━━━━━━━━━━━━━━━━━━━━━━━━
151Caption: [What can user do?]
152Visual: [App in action, primary workflow]
153Background: [Consistent with #1]
154Notes: [Show the "aha" moment]
155
156SCREENSHOT 3: DIFFERENTIATOR
157━━━━━━━━━━━━━━━━━━━━━━━━━━━
158Caption: [What makes you unique?]
159Visual: [Feature competitors don't have]
160Background: [Can vary slightly]
161Notes: [Answer "why this app?"]
162
163SCREENSHOT 4: SECONDARY FEATURE
164━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
165Caption: [Another key benefit]
166Visual: [Compelling secondary feature]
167Background: [Consistent theme]
168Notes: [Add depth to value proposition]
169
170SCREENSHOT 5: TRUST/CTA
171━━━━━━━━━━━━━━━━━━━━━━
172Caption: [Social proof or call to action]
173Visual: [Reviews, stats, or final screen]
174Background: [Strong finish]
175Notes: [Close the deal]
176```
177
178## Size Requirements
179
180### iPhone (Required)
181| Size | Device | Dimensions |
182|------|--------|------------|
183| 6.7" | iPhone 15 Pro Max | 1290 × 2796 |
184| 6.5" | iPhone 11 Pro Max | 1284 × 2778 |
185| 5.5" | iPhone 8 Plus | 1242 × 2208 |
186
187### iPad (If Universal)
188| Size | Device | Dimensions |
189|------|--------|------------|
190| 12.9" | iPad Pro | 2048 × 2732 |
191
192### macOS
193| Display | Dimensions |
194|---------|------------|
195| Standard | 1280 × 800 (min) |
196| Retina | 2880 × 1800 |
197
198## App Preview Video
199
200### When to Include
201- Complex apps that need demonstration
202- Games (almost always)
203- Apps with unique interactions
204- When screenshots can't show the experience
205
206### Video Specs
207- 15-30 seconds optimal
208- First 3 seconds = hook
209- No audio required (most watch muted)
210- Show actual app (no external footage first 3s)
211- 1080p or higher
212
213### Video Storyboard
214```
2150:00-0:03 Hook - Most impressive moment
2160:03-0:10 Core workflow demonstration
2170:10-0:20 Key features montage
2180:20-0:30 Final CTA with value prop
219```
220
221### Creative Assets, Product Page Header & Search Results Visuals
222
223> 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".)
224
225Two 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):
226
227- **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.
228- **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.
229
230Working rules from Apple's session:
231
232- ✅ **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.
233- ✅ Use the **same asset** on header and search results for a seamless discovery→install experience.
234- ✅ 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.
235- ✅ Automate uploads/submissions via the App Store Connect API.
236- ❌ 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).
237
238Keep a motion-capable asset library (source-quality captures, layered project files) so every PPO/CPP learning can graduate into header and search assets.
239
240## Localization
241
242### Considerations
243- Captions must be localized
244- Screenshots may need localization if they show text
245- Consider using minimal in-app text in screenshots
246- Some markets prefer different visual styles
247
248### Priority Markets
2491. English (US)
2502. Chinese (Simplified)
2513. Japanese
2524. German
2535. French
2546. Spanish
255
256## Tools
257
258### Design Tools
259- **Figma** - Free, collaborative
260- **Sketch** - Mac-native, templates available
261- **Photoshop** - Full control
262
263### Screenshot Generators
264- **Screenshots.pro** - Templates with device frames
265- **Previewed** - 3D mockups
266- **AppLaunchpad** - Quick and easy
267- **Studio** - Mac app with templates
268
269### Capture Tools
270- **Xcode Simulator** - File → Screenshot
271- **QuickTime** - Screen recording for video
272- **ScreenFloat** - Organize captures
273
274## Competitive Analysis
275
276Before finalizing, check competitors:
277
2781. Search your main keyword
2792. Screenshot top 5 apps
2803. Note patterns:
281 - Frame style used
282 - Caption placement
283 - Color schemes
284 - Number of screenshots
2854. Differentiate while meeting expectations