app-store-screenshot

Core Rule

Preserve the original app UI exactly. Do not redraw, restyle, translate, rewrite, hallucinate, or "improve" content inside the screenshot. Treat the screenshot as source artwork and design around it.

Never pass the screenshot through an image-generation model and present the result as the app's UI: models change text, numbers, and icons in ways that are easy to miss. Composite instead. Everything here renders the screenshot as a plain image layer that is resized and nothing else.

Workflow

1. Inspect the screenshots. Note platform, brand colors, light or dark UI, and the feature each screen shows. Check the pixel size: below roughly 1000 px wide (typical of files sent through a messaging app) the screenshot would have to be upscaled and will look soft. Say so and ask for the originals. Meanwhile, proceed with a device small enough to avoid upscaling: device_max_w at most source width divided by canvas width (a 738 px source on a 1290 px canvas gives 0.57).
2. Pick a concept before picking colors, one per screenshot. Ask what the app's subject looks like and put the device in that scene: paintings for an art app, caption bubbles in many languages for a subtitle app, a trail for a hiking app. Then go further and give each image its own background, built from what that particular screen shows, so the background continues the screenshot past the bezel. See "Backgrounds". A flat gradient with a pattern is the fallback, not the goal.
3. Build the theme from the app itself. Take bg, accent, and accent2 from the screenshots (buttons, highlights, icons). Match the frame to the platform, and choose a frame finish that separates the screen from the background: a dark frame for a light UI on a vivid background, titanium or silver on dark scenes.
4. Write the copy. One headline per image, 2 to 6 words, benefit first, with the key words emphasized. An optional one-sentence subheadline. Do not repeat text already visible in the screenshot, and keep claims conservative for health and finance. The first image carries the main value proposition, since it is often the only one seen in search results. Write in the language of the store listing; ask if unclear.
5. Render with scripts/render.mjs (below). Write the config, backgrounds, and outputs into the user's working directory, never into the skill folder.
6. Look at every output image and go through the checklist at the end. Fix and re-render until it passes.

Rendering