AI Edits the Art, Code Owns the Pixels: Shipping OG Images and Store Screenshots for Side Projects
Every side project hits the same wall right before launch. The code works, the landing page is up, and then you remember you still need: an Open Graph image so your link doesn't show up as a grey box on X, LinkedIn, Slack and Discord, App Store screenshots in the sizes Apple wants this year, Google Play screenshots plus a feature graphic, and ideally all of it looking like it came from the same…
Side projects often encounter a roadblock just before launch. The code functions, and the landing page is live, but there remains a crucial element - an Open Graph image for social media platforms, App Store screenshots in the required sizes, Google Play screenshots and feature graphic. AI image editors have simplified the process of creating appealing assets.
However, some assets still suffer from issues like text cropping, PNGs with alpha channels, and inconsistent character appearances across screenshots. This post outlines a workflow to overcome these challenges.
The author uses Nano Banana Pro, an AI image editor built on Google's Nano Banana models. The key principle is that AI edits the art, while code manages the pixels. The model deals with backgrounds, lighting, mascots, and mood, while a separate script handles dimensions, text, file format, and validation. These responsibilities are segregated to minimize errors.
Before starting, verify the current specifications - they are subject to change. For instance, Open Graph/social cards should be 1200x630, with the text and logo positioned centrally and away from the top and bottom regions. App Store screenshots need to be JPEG or PNG, without transparency, and include a screenshot with Dynamic Island for iPhone. Google Play has its own set of requirements for screenshots and feature graphic sizes.
To maintain brand consistency, create a brand folder containing color palettes, references of the mascot, and the chosen font. Use the same references for each AI generation to ensure consistency. Once satisfied with the AI-generated asset, add it to the brand folder for future use and include any negative instructions (no text, no logos, etc.) in a style.md file.
To create store-ready assets, capture real UI screenshots on simulators or emulators, ensuring they show the actual app with realistic but fake data and status bars. Use Nano Banana Pro to generate surrounding scenes, backgrounds, and other elements. Start by describing the edit in plain language, then make a single change at a time to understand its impact.
Ensure the assets are captured in high resolution and cropped appropriately by the script. Avoid using AI-generated or enhanced screenshots; use real screenshots instead.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
