{
  "id": 15726851,
  "title": "AI Edits the Art, Code Owns the Pixels: Shipping OG Images and Store Screenshots for Side Projects",
  "url": "https://urgent.news/2026/10/20/ai-edits-the-art-code-owns-the-pixels-shipping-og-images-and-store",
  "topic": "ai",
  "section": "AI",
  "published": "2026-10-20T09:48:07.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/yuhao_li_f49d2fd408963ad8/ai-edits-the-art-code-owns-the-pixels-shipping-og-images-and-store-screenshots-for-side-projects-4p9j"
  },
  "original_language": "en",
  "account": "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.\n\nThe 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.\n\nBefore 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.\n\nTo 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.\n\nTo 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.",
  "summary": "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…",
  "key_points": [
    "AI image editor Nano Banana Pro simplifies asset creation.",
    "Code handles pixels, AI handles art in workflow.",
    "Brand folder maintains consistency with color palettes and fonts."
  ],
  "editors_take": "Separating creative AI generation from programmatic pixel management solves the technical inconsistencies that often prevent developers from producing professional, platform-ready visual assets for their side projects.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}