Make OG images and app store screenshots with an AI image editor for the art and code for exact sizes and text
A side-project developer splits launch graphics into two jobs: an AI image editor makes backgrounds and mascots with no text, and a small script composites real screenshots, renders headlines and checks every platform's size rules.
Evidence: The source shows its work: steps, screenshots, code or data you can inspect.
The business problem
Launch assets (social share images, App Store and Google Play screenshots) have strict, changing size and format rules. Letting an AI model generate the whole image produces typos baked into headlines, redrawn or invented UI, wrong crops and rejected files.
What was tried
1. Re-check the current Open Graph, X card, App Store and Google Play specs in the platforms' own documentation before each release. 2. Keep a brand folder: colour palette, two to four mascot reference images, a one-paragraph style description reused in every prompt, and fonts. 3. Capture the real app UI at native resolution in a simulator with demo data and a clean status bar (the author uses xcrun simctl). The AI never redraws UI. 4. In the AI image editor (Nano Banana Pro), upload the mascot references, paste the style text, make one change per pass, request 16:9 or 9:16 at 2K or 4K, always say 'no text', and leave empty space for the device frame and headline. Upscale small assets instead of stretching them. 5. Composite in code (sharp in Node, or Pillow): crop the background to size, place the real screenshot, render the headline as text, and flatten to remove the alpha channel the stores reject. 6. Run a check script for alpha, aspect ratio and file size, then regenerate all languages and sizes from one copy file (the example is 10 languages by 5 sizes). 7. After deploying, test links in each platform's card inspector, since previews are cached aggressively.
What was reported (not reported)
Not reported. The author says setup takes about an afternoon and that localised variants can be regenerated from one copy file, but gives no costs, time saved, download or click-through changes.
Limitations
A how-to with a sample script, not a measured result. The article links repeatedly to one AI image editor site (nano-banana-pro.io) and its upscaler and background remover, and the author's profile says they build AI tools; whether the author is connected to that site is not stated, so treat the tool choice as possibly promotional. The sample script is described as deliberately simple, and its file-size check may not trigger as written. Platform specs are quoted as of October 2026 and will change.
What you need
An app or site with real UI to capture, an iOS simulator or Android emulator for screenshots, Node.js (sharp) or Python (Pillow), and access to an AI image editor that accepts reference images.
Sources
- DEV Community (Yosta) ↗ Tutorial, published October 20, 2026
Source published: October 20, 2026. Last reviewed here: October 22, 2026. Spot a mistake? Tell us.
Tools in this workflow
- Nano Banana Pro: AI image edits for backgrounds and mascotsTry Nano Banana Pro
- sharp: Compositing, resizing and validation in Node.jsTry sharp
- Pillow: Python alternative for compositingTry Pillow
Get new workflows like this by email
A short selection of the most useful new workflows, including the ones that did not work. Free, and you can unsubscribe at any time.
Related workflows
Test a Claude-written sales page headline against your own (copywriter reports a win, and a loss on subject lines)
A freelance-copywriting newsletter author gave Claude Opus 4.6 basic context about his offer, put its headline up against his own on his sales page, and reports about 50% more conversions. He says AI lost to him on email subject lines.
Turn a messy website brief into a Claude-assisted proposal while setting prices and timelines yourself
An agency worker shares a five-stage proposal process: clarify the brief, define phased scope, supply a rate card, draft in the agency's voice and review as a skeptical client.
Score trial users six hours after signup with an LLM and send a reviewed follow-up email (about $0.20 a day)
A SaaS founder scores each new trial user 0 to 10 with an LLM, alerts Slack for high scorers, drafts a follow-up email he sends by hand, and seeds first alerts with AI keyword suggestions.
Draft a five-email newsletter welcome sequence with Claude and Beehiiv MCP while researching the source material yourself
An HR newsletter operator uses Claude through Beehiiv MCP to write, time and push five welcome drafts in one session. The author researches the jobs and discloses a brand-affiliate relationship.