HyperShots renders App Store screenshots with CSS, not AI pixels
HyperShots generates App Store screenshots via CSS and headless Chrome at exact pixel specs, eliminating rejections caused by AI image models.
Image models like GPT Image and nano banana can produce visually striking App Store screenshots, but App Store Connect keeps rejecting them for wrong canvas sizes, warped text, and device frames that don't match reality. The root cause: device frames and pixel dimensions are geometry, and geometry is arithmetic — something diffusion models can only approximate statistically, not hit exactly.
The fix was to split the work and open-source it as a skill for Claude Code and Codex called HyperShots. The deterministic half has the agent design marketing panels as plain HTML/CSS against a fixed device aspect ratio; headless Chrome renders them at exact store dimensions (e.g. 1290×2796); a validator then checks everything Apple actually rejects for — dimensions, alpha channel, ICC profile, panel count, file size — before submission.
An optional generative layer adds cut-out sticker art and a whole-set style 'makeover' via fal.ai, using a mask-plus-recomposite step so text and frames are restored from the clean render afterward — the model never ships your typography. Localization is built in too, with fail-fast missing-key checks and auto-fit headlines for longer languages.
Two shipping apps have already used it in production. The project is MIT-licensed, installs via npx, and the deterministic half needs no API keys at all; iPad support and RTL/CJK fonts remain on the roadmap.