The latest articles on DEV Community by Selcukatli (@selcukatli). https://dev.to/selcukatli https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4032701%2F00f87748-96c7-4274-91b8-f08614da6d90.jpg https://dev.to/selcukatli en Selcukatli Thu, 16 Jul 2026 22:23:49 +0000 https://dev.to/selcukatli/image-models-kept-getting-my-app-store-screenshots-rejected-so-i-made-my-coding-agent-render-them-3afp https://dev.to/selcukatli/image-models-kept-getting-my-app-store-screenshots-rejected-so-i-made-my-coding-agent-render-them-3afp <p>Like a lot of people shipping iOS apps this year, I tried generating App Store screenshots with image models. GPT Image, nano banana — the results looked genuinely great. Then App Store Connect rejected them: wrong canvas sizes, subtly warped text, device frames that don't match any real device.</p> <p>After the third rejection I realized the problem wasn't prompt engineering. <strong>Frames and canvases are geometry, and geometry is arithmetic</strong> — something a coding agent expresses perfectly in CSS, and something an image model can only approximate statistically. Asking a diffusion model to hit 1290×2796 exactly, with a pixel-true bezel and crisp 17px mono type, is asking statistics to do arithmetic.</p> <p>So I split the work, and open-sourced the result as a skill for Claude Code and Codex: <strong><a href="https://github.com/hypersocialinc/hypershots" rel="noopener noreferrer">HyperShots</a></strong>.</p> <h2> The split: deterministic where Apple has rules, generative where it sells </h2> <p><strong>Deterministic half (no AI involved at all):</strong></p> <ul> <li>Your agent designs marketing panels as plain HTML/CSS against a small geometric contract — a device frame with a fixed screen aspect (0.460, matched to real captures), profile-driven canvas variables, sticker primitives</li> <li>Headless Chrome renders them at exact store dimensions: 430×932 CSS at 3× = 1290×2796, to the pixel</li> <li>A <strong>fail-closed validator</strong> checks everything Apple actually rejects for: dimensions, alpha channels (yes, an RGBA PNG gets bounced), non-sRGB ICC profiles, panel count (max 10), and the 8 MB size cap. Green means the store cannot reject the set for asset specs</li> <li>Localization is one command per language: <code>data-i18n</code> markers, atomic string injection (missing <em>or</em> unused keys are fatal — no silently shipping English), and auto-fit headlines that shrink until they clear the device instead of overflowing when German runs 30% long</li> </ul> <p><strong>Generative half (optional, bring your own fal.ai key):</strong></p> <ul> <li>Cut-out sticker art: image generation → background removal → transparent PNG, positioned by the agent with plain CSS transforms</li> <li>An optional whole-set "makeover" pass — image-to-image over the rendered panel, where a mask plus a re-composite step restores your text and frames from the clean render afterward. The model never ships your typography</li> <li>Set consistency via a style anchor: grade the first panel freely, then pass it as a reference image for the rest. Measured drift across an anchored set: ~4% in palette</li> </ul> <p>Then <code>fastlane deliver</code> pushes the set to App Store Connect — the skill ships the runbook, including the first-version metadata crash workaround that cost me an afternoon.</p> <h2> Things I learned the hard way </h2> <p><strong>Chrome's <code>1fr</code> respects min-content.</strong> Same-aspect images in a CSS grid rendered at different heights because nowrap captions silently widened their columns. <code>repeat(N, minmax(0, 1fr))</code> or your geometry lies to you.</p> <p><strong>Headless Chrome's minimum window width is 500px.</strong> If your "mobile" screenshots look clipped, you may be cropping a 500px layout to 390 — the page was fine.</p> <p><strong>Image-model edit endpoints can't output store dimensions at all.</strong> gpt-image edits snap to multiples of 16; 1290, 1284, and 1320 aren't. Any AI style pass <em>must</em> end with a resample + re-composite, or the output is nonconforming by construction.</p> <p><strong>Masks are guidance, not guarantees.</strong> Inpainting-style "protected" regions come back approximately preserved — re-rendered through the model. If text must be pixel-true, composite it back from the source. Always.</p> <p><strong>Fonts must be vendored.</strong> Google Fonts <code>@import</code> at render time means your "deterministic" renderer silently falls back to system fonts under a timeout, and upstream font updates drift your metrics. <code>@font-face</code> with local woff2 or nothing.</p> <h2> Does it actually work? </h2> <p>Two production apps have shipped sets through it so far — one went from a one-paragraph brief to a store-ready, validated set in a single agent session, then through ~8 founder-driven revision rounds without a single spec failure. The gallery at <a href="https://hypershots.dev" rel="noopener noreferrer">hypershots.dev</a> shows both sets; every image on that page, including the site's own icons, was generated by the pipeline it describes.</p> <p>It's MIT, works with whatever agent you already use, and the deterministic half needs no API keys:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx skills add hypersocialinc/hypershots </code></pre> </div> <p>Honest limitations, because those belong in the README and in posts: iPad needs a separate authoring pass (0.75 aspect doesn't re-render from iPhone panels), RTL/CJK is roadmap (latin + latin-ext fonts are vendored today), and the style pass has documented caveats on layouts where text and device cover the whole canvas.</p> <p>If you've been through screenshot-rejection hell, I'd genuinely love to hear what broke for you — and if you ship a set with it, submissions to the gallery are open (featured apps get a backlink).</p> ios ai opensource mobile