| name | app-store-screenshot-imagegen |
| description | Create visually striking iOS App Store marketing screenshots for any application by generating cinematic branded backgrounds first, then compositing real app screens into a precise iPhone frame and exporting only accepted Apple pixel dimensions. Use for App Store screenshot sets, promotional screenshot redesigns, feature-slide campaigns, device mockups, and reusable image-generation pipelines that must preserve authentic UI and exact iOS upload sizes. |
App Store Screenshot Imagegen
Create App Store screenshots as advertisements, not UI documentation. Sell one clear benefit per slide while keeping the actual app interface authentic.
Establish the inputs
Inspect the application and existing marketing assets before asking the user for information. Locate:
- Real app screen captures
- App icon and logo
- Brand colors, materials, and visual motifs
- App font or preferred marketing font
- Features in priority order
- Existing App Store copy or positioning
- A transparent iPhone frame with measured screen bounds
Ask only for high-impact inputs that cannot be discovered. Never expose secrets, credentials, signing material, or environment files.
Do not invent app UI. Use real screenshots captured from the application unless the user explicitly requests a conceptual mockup.
Confirm the desired feel
Study the application’s UI before choosing a marketing style. Identify its:
- Visual hierarchy and density
- Color, typography, shape, and material language
- Motion or interaction personality
- Most distinctive interface elements
- Intended audience and emotional tone
Briefly summarize what the UI communicates, then ask the creator what feeling the App Store screenshots should evoke. Use a direct question such as:
The UI currently feels [observed traits]. What feeling should the App Store campaign create—for example cinematic and premium, playful and energetic, calm and trustworthy, bold and competitive, or something else?
Let the creator describe the direction in their own words. Ask about references or styles they want to avoid when that would materially clarify the result. Do not generate backgrounds until the creator answers. If they already supplied a direction, reflect your interpretation back and confirm it before proceeding.
Translate the approved feeling into concrete art direction: palette, lighting, materials, depth, texture, typography, negative space, device treatment, and visual rhythm. Preserve recognizable UI traits without merely enlarging the interface or copying it into the background.
Plan the campaign
Build a narrative of up to ten slides:
- Lead with the app’s strongest outcome.
- Show the primary differentiator.
- Continue with one benefit per slide in priority order.
- Use a trust, identity, or victory slide near the end when appropriate.
- End on a strong closing benefit or concise feature roundup.
Write copy before composing images. Keep headlines instantly readable:
- Express one idea per slide.
- Prefer three to five words per line.
- Use concrete outcomes or moments.
- Avoid compound claims, jargon, and generic hype.
- Keep subtitles to one short sentence.
Vary the phone position, scale, angle, lighting, and background composition across slides while preserving a coherent campaign.
Use a background-first workflow
Build each slide in this layer order:
- Generate the background.
- Add deterministic readability treatments and decorative accents.
- Composite the real app screenshot into the iPhone screen bounds.
- Composite the transparent iPhone frame.
- Render typography and brand marks programmatically.
- Crop or scale to the exact export canvas.
Generate the background
Use image generation only for the cinematic environment. Prompt for:
- The app’s brand palette and physical materials
- Premium editorial lighting, depth, atmosphere, and texture
- A clear focal area for the device
- Intentional negative space for the headline
- The requested portrait or landscape aspect ratio
- Enough edge detail to survive a small cover crop
Explicitly request no phone, device, screen, interface, words, letters, logos, watermarks, or illegible pseudo-text in the generated background.
Match the environment to the benefit. Examples include a tactile game table for social play, a calm desk for productivity, or soft studio light for a wellness app. Avoid generic gradients when a richer branded scene would communicate the app’s feeling.
Generate and approve backgrounds before adding device artwork. Regenerate backgrounds with poor hierarchy, unusable negative space, accidental text, or conflicting focal points.
Composite the real screen
Use a deterministic image script, preferably Python with Pillow, for all compositing and exports.
- Keep a transparent, high-resolution iPhone frame as a reusable skill asset.
- Record the frame’s exact width, height, screen rectangle, and corner radius.
- Fit the real screenshot into the measured screen rectangle.
- Apply a rounded mask matching the frame.
- Place the screen below the frame so bezels, sensors, and highlights stay realistic.
- Never stretch the UI to repair an aspect-ratio mismatch; use a controlled fit or crop.
- Remove simulator-only chrome only when it can be done without altering app content.
- Add a soft grounded shadow that follows the device rather than a rectangular glow.
Keep the main screen content readable. Do not let copy, decorations, or edge crops obscure the feature being sold.
Render crisp copy
Render all headlines, subtitles, labels, and logos after image generation. Do not rely on generated text.
Use fonts from the app when available. Size typography relative to the canvas width and verify it at App Store thumbnail scale. Add subtle readability overlays behind copy when the background is detailed, while preserving depth and color.
Enforce accepted iOS dimensions
Export upload PNGs only at these exact dimensions:
ACCEPTED_IOS_SIZES = {
(1242, 2688),
(2688, 1242),
(1284, 2778),
(2778, 1284),
}
For portrait campaigns, export:
For landscape campaigns, export:
Do not stretch a portrait design into landscape or vice versa. Create a separate composition for each requested orientation. Work from a high-resolution master, then use a cover crop or orientation-specific layout to reach each exact canvas.
Name files with a zero-padded slide number, short slug, and dimensions:
01-primary-benefit-1242x2688.png
01-primary-benefit-1284x2778.png
Do not leave superseded or invalid-size PNGs in the upload directory.
Recommended reusable structure
app-store-campaign/
├── assets/
│ ├── backgrounds/
│ ├── screens/
│ ├── app-icon.png
│ ├── iphone-frame.png
│ └── fonts/
├── output/
├── compose.py
└── app-store-screenshots.zip
Keep source backgrounds separate from real app screens. Make slide copy, asset paths, device placement, and output sizes data-driven so the same compositor can serve any application.
Create a contact sheet for review, but exclude it from the upload archive. Build a flat ZIP containing only final upload PNGs and no hidden operating-system metadata.
Validate before delivery
Check every campaign visually and mechanically:
- Each slide communicates one benefit in one second.
- Backgrounds feel premium, brand-specific, and compositionally varied.
- No generated phone, UI, text, logo, or watermark remains in a background.
- Every overlaid screen is a real app capture and aligns precisely with the frame.
- Text is sharp, readable, correctly spelled, and inside safe margins.
- No important content is cropped at either accepted size.
- Every upload PNG is RGB or RGBA and matches one accepted dimension exactly.
- The output directory contains no stale invalid-size PNGs.
- The ZIP passes an integrity check and contains only the final PNGs.
Inspect the final contact sheet and at least one full-resolution export before reporting completion. State the number of slides, orientations, exported files, dimensions, and archive path.
