Appstore Screenshot Designer

App Store Screenshot Designer

Fast App Store screenshot strategy for the main agent. Use it to turn an app's value proposition into a clear screenshot narrative, short benefit-led overlays, AI-generation-ready prompts, and a designer-ready shot list.

Announce at start: "Using appstore-screenshot-designer skill for this App Store screenshot plan."

Use this skill when

• planning a new App Store screenshot set,
• refreshing screenshots for a release,
• rewriting screenshot overlay copy,
• deciding what each screenshot slot should communicate,
• preparing a creative brief for designer,
• reviewing whether a screenshot set tells the right story.

Escalate when

• to designer for pixel-perfect production, typography/layout exploration, or final asset creation,
• to marketer for competitive ASO strategy, keyword positioning, or campaign-level messaging,
• to cs if the task depends on new review mining before messaging is chosen.

The First 3 Screenshots Rule

The first 3 screenshots do almost all of the conversion work. Plan them before anything else.

If slot 1 shows settings, onboarding, or infrastructure, the set is weak.

Story Arc Patterns

Pick one story arc before drafting captions.

Utility / productivity

1. Solve the main problem
2. Save time or effort
3. Show the best workflow
4. Show organization or control
5. Show follow-through or reminders

Travel / discovery

1. Discover nearby or relevant places
2. Compare or filter quickly
3. Trust the recommendations or map context
4. Show category breadth
5. Show trip-planning or seasonal relevance

Social / creator

1. Create or connect instantly
2. Show expression or customization
3. Show social proof or engagement
4. Show standout feature
5. Show retention loop

Overlay Copy Rules

• Lead with the user benefit, not the feature name.
• Keep each overlay to 2 lines max.
• Prefer 3-7 words for the headline.
• Use plain language a user can scan in under 2 seconds.
• One message per screenshot.

Examples:

• Bad: Advanced Filter Options
• Good: Find the right place faster
• Bad: Push Notification System
• Good: Never miss a travel update

Layout and Readability Rules

• Make the UI the proof, not the headline dump.
• Keep strong contrast between overlay text and background.
• Do not let status-bar clutter or stale timestamps make the app look outdated.
• Use one visual system across the full set: same headline style, spacing rhythm, and brand accents.
• Highlight one primary idea per screenshot; supporting callouts are optional.
• If the UI is dense, simplify the displayed data before capture.

Production Specs and Safe Zones

Use these when preparing screenshot assets or generation prompts.

Common iOS portrait sizes

Safe-zone rules

• Avoid placing key copy flush to the top edge; leave a generous top buffer for device chrome and visual breathing room.
• Keep headline and callout text away from the outer 8-10% of the canvas on every side.
• Do not rely on tiny UI labels to communicate the value proposition.
• If showing a device frame, keep all overlay text outside the bezel area unless intentionally built into the mockup.
• Use portrait layouts unless the app is clearly landscape-first.

Composition Patterns

Choose one pattern per slot instead of improvising each frame.

Consistency Rules Across the Set

• Reuse the same background family, headline style, and accent treatment.
• Keep the device angle/frame treatment consistent unless you intentionally reserve one standout hero frame.
• Use the same overlay placement system across all screenshots.
• Keep the visual density similar across slots so one frame does not feel like a different campaign.

AI Prompt Template

When an agent must actually generate or draw screenshots, create one structured prompt per slot:

### Screenshot [N]
- Goal: [what this slot must communicate]
- Audience: [who this is for]
- Core promise: [benefit]
- Device size: [e.g. iPhone 6.7" 1290x2796]
- Composition pattern: [device frame / full-bleed / callout / lifestyle / before-after]
- UI focus: [screen and state to show]
- Overlay: "[headline]"
- Visual style: [clean/minimal/premium/playful/etc.]
- Background treatment: [solid/gradient/context scene]
- Consistency notes: [how it should match the rest of the set]
- Avoid: [onboarding, settings, stale status bar, loading states, dense copy]

If the app UI is not available, specify the intended UI structure and ideal demo data before generating.

Localization Guidance

• Translate the meaning, not just the words.
• Re-check line length per locale; short English overlays often expand in German, French, or Spanish.
• If a market has a different purchase trigger, adapt the message order, not only the language.
• Keep numerals, place names, and social proof culturally appropriate.
• Do not assume English line breaks will survive localization; reflow each overlay per locale.

Generated-Asset QA

• Readable at thumbnail size
• One clear focal point per screenshot
• Overlay remains under 2 lines
• Modern-looking device/UI treatment
• No stale timestamps, loading spinners, permission prompts, or dead-end empty states unless intentional
• The first 3 screenshots clearly communicate value, differentiation, and proof
• The full set looks like one campaign, not 5 unrelated images

Common Mistakes

Output Format

When asked to design a screenshot set, return:

## App Store Screenshot Plan

### Positioning
- Audience: [who]
- Core promise: [one sentence]
- Story arc: [selected pattern]

### Shot List
1. **Slot 1 — [goal]**
   - Overlay: "[headline]"
   - UI focus: [screen/state]
   - Visual direction: [background/framing/callout]
   - Generation notes: [size/pattern/avoid list]

2. **Slot 2 — [goal]**
   - Overlay: "[headline]"
   - UI focus: [screen/state]
   - Visual direction: [background/framing/callout]
   - Generation notes: [size/pattern/avoid list]

3. **Slot 3 — [goal]**
   - Overlay: "[headline]"
   - UI focus: [screen/state]
   - Visual direction: [background/framing/callout]
   - Generation notes: [size/pattern/avoid list]

### Production Settings
- Target device class: [6.7" / 6.5" / iPad / etc.]
- Composition system: [chosen pattern family]
- Visual consistency rules: [shared background, typography, framing]

### Localization Notes
- [locale-specific note]

### Review Checklist
- First 3 screenshots communicate value, differentiation, and proof
- Each overlay is benefit-led and short
- The full set has visual variety without losing consistency
- No screenshot leads with onboarding, settings, or low-value infrastructure
- Every screenshot has generation-ready instructions
- Output matches device size and safe-zone constraints

### Escalate?
- [yes/no and why]

Quick Decision Rule

If you are unsure what to show, ask:

1. What is the app's fastest visible value?
2. What makes it different?
3. What screen proves that claim best?

Those answers usually define screenshots 1 to 3.