store-screenshot-mockups

name

store-screenshot-mockups

description

Create store-safe marketplace screenshot mockups from real app captures for iOS App Store, Google Play, Mac App Store, Microsoft Store, iPad, tablet, desktop, and other platform listings. Use when preparing store screenshots, marketing images, upload candidates, simulator/device screenshots, demo-data screenshots, or image-generation-assisted store visuals where the submitted product UI must stay faithful to the actual app and platform requirements are selected based on the user's target.

Store Screenshot Mockups

Core Rule

Preserve the real app UI. Store screenshots must represent the app users can open. Do not invent screens, redraw the product, change the app theme, or generate a fake replacement UI. If a generated concept redraws the product surface, treat it as visual direction only, not an upload asset.

Acceptable changes:

• Seed or inflate demo data inside the app, then recapture.
• Composite the exact screenshot as a whole phone layer into a designed canvas.
• Add truthful marketing text, badges, route lines, and backgrounds around the phone.
• Scale, crop, rotate, or frame the screenshot as a whole, without changing its UI.

Unacceptable changes for upload candidates:

• Dark-mode UI when the app does not ship dark mode.
• Generated UI that only resembles the app.
• Invented features, screens, claims, or navigation.
• Gibberish UI text or altered app labels.
• Error states, placeholders, test-only failures, or private customer data.

Workflow

1. Confirm platform requirements.

   • Ask or infer the target platform first: iPhone, iPad, Android phone/tablet, Mac, Windows, web marketplace, or another listing surface.
   • Check the relevant store dimensions and device classes before generating final files. For iOS, release docs or App Store Connect may require a 6.7-inch 1290x2796 set; other platforms have different requirements.
   • Treat additional platforms as optional requirements, not default scope.

2. Run the real app.

   • Prefer platform-native simulator tools for mobile apps.
   • Use built-in preview/demo launch arguments only if they render real app views.
   • If better numbers or richer rows are needed, update demo fixtures or a test backend and rerun the app. Do not paint fake data into the screenshot layer.

3. Capture raw screenshots.

   • Save raw captures separately by platform, for example:
     • store/ios/screenshots/raw/
     • store/ipad/screenshots/raw/
     • store/android/screenshots/raw/
     • store/macos/screenshots/raw/
     • store/windows/screenshots/raw/
   • Verify dimensions immediately.
   • Make a contact sheet for quick visual triage.

4. Triage screen candidates.

   • Prefer screens that show the app's core value without explanation: dashboard, list/detail, create flow, analytics, QR/export, settings/integrations if relevant.
   • Reject duplicate captures, wrong screens, route fallbacks, preview-only errors, unavailable loaders, empty states, and anything inconsistent with the release.

5. Choose output mode.

   • raw: exact simulator screenshots, no framing.
   • store-safe-exact: designed screenshots where the phone content is the exact raw screenshot layer.
   • image-gen-direction: generated concepts for art direction only. Do not upload these unless the product UI is still the exact screenshot layer.

6. Build store-safe mockups.

   • Use the real screenshot as a single image layer inside a phone frame.
   • Keep surrounding treatment consistent with the app brand and actual theme.
   • Add only truthful copy that describes visible functionality.
   • Keep all text legible after upload-size resizing.

7. Validate before presenting.

   • Every upload candidate has the required pixel size.
   • The app UI inside the phone is actual captured UI.
   • The theme matches the shipped app.
   • No generated UI artifacts, gibberish, or unsupported feature claims remain.
   • No status-bar times, demo names, or sample data conflict with the story.

Image Generation Guardrails

Use image generation only with strict boundaries:

• Ask for light or dark theme explicitly based on the shipped app.
• Say the phone screen must be a real captured app screenshot if upload-safe output is required.
• If the generator cannot preserve the exact screenshot layer, generate only surrounding inspiration and label it as direction.
• Inspect outputs visually. If the UI was redrawn, discard or move it to a non-upload image-gen-direction folder.

Prompt pattern:

Create a store marketing composition for <app> targeting <platform>.
Use a real <theme> <app> screenshot as the unchanged device screen.
The app UI must not be redesigned or redrawn.
Only add surrounding store framing: headline, background, badges, route lines.
No dark mode unless the shipped app supports it.
No invented features, no unrelated content, no gibberish UI text.

Visual Direction

When creating designed mockups or interpreting examples supplied by the user, read references/visual-direction.md. Use the examples for composition, typography, layering, device placement, background treatment, and annotation style only.

The real app screenshot remains authoritative. Do not use visual examples to change the app UI, theme, content, features, navigation, or store claims.

Recommended Folders

store/
  ios/
    screenshots/
      raw/
      mockups/
        store-safe-exact/
        image-gen-direction/
  macos/
    screenshots/
      raw/
      mockups/
        store-safe-exact/
        image-gen-direction/

Keep rejected explorations out of the main upload candidate folder so they are not mistaken for deliverables.

For detailed checks and common failure modes, see references/store-safe-rules.md.