| name | screenshot-planner |
| description | 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. |
| allowed-tools | ["Read","Write","Edit","Glob","Grep","AskUserQuestion"] |
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
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
