logo
Published on

I built AppFramer to stop dreading App Store screenshots

Authors
  • avatar
    Name
    Alberto Montalesi
    Twitter
This article was written with the assistance of AI.

My latest side project is AppFramer, a fully client-side generator for App Store screenshots.

I built it out of pure self-interest. Every time I finished a mobile app, I hit the same wall: the App Store wants polished, captioned screenshots at exact resolutions, in a device frame, ideally translated. Doing that in a design tool by hand, per screen, per device size, per language, was miserable, and it was the thing standing between "app is done" and "app is submitted."

AppFramer was built with heavy AI assistance. I'll get into what that actually looked like further down.

The screenshots below were all produced with AppFramer, for my own apps:

App Store screenshot generated for YoreApp Store screenshot generated for ValutaSecond App Store screenshot generated for Yore

Why I built it

I make a lot of small apps, and the screenshot step was consistently the least fun part of shipping. I did not want to pay a subscription for a screenshot studio, and I did not want to leave the browser. I wanted to drop in my raw screenshots, write a caption, pick a background, and get a folder of App Store-ready images out the other side.

So that is exactly what AppFramer does.

What it does

  • Device mockups as pure CSS frames for iPhone 6.7", iPhone 6.5", iPad 12.9", and iPad 11", at the correct App Store resolutions
  • Custom captions with a title and subtitle, each with independent font, size, color, and alignment
  • 12 Google Fonts and 5 layout styles, so screenshots do not all look identical
  • Background editor with solid color or gradient, angle control, and 8 presets
  • Auto-translate captions into up to 18 languages via a free API, so localized screenshots stop being a separate project
  • Multi-screen management with bulk image upload, plus save/load of the whole project as JSON
  • ZIP export of every screen across every language, grouped into per-language folders

And critically, it is fully client-side: no backend, no uploads, no accounts. Your screenshots never leave your browser.

The tech behind it

AppFramer is a React 18 + Vite 5 app styled with Tailwind, using JSZip for the export bundle and lucide-react for icons.

The part I am happiest with is the export. Instead of reaching for a DOM-capture library, AppFramer draws each frame onto a Canvas at the exact target App Store resolution. That means the exported PNGs are pixel-precise to what Apple expects, rather than a screenshot of a screenshot. Everything (rendering, translation, zipping) happens in the browser.

Building it with AI

AI was especially useful here for the fiddly parts: the exact device dimensions and safe areas, the Canvas drawing math to composite frames, captions, and backgrounds at the right resolution, and wiring up the translation and ZIP export. That is the kind of precise, tedious work where AI genuinely accelerates a solo project. The decision of what the tool should be (client-side, no accounts, export-first, translation built in) came from my own frustration shipping apps.

The nice proof is that I now use AppFramer for every app I release. It solved my own problem, which is the only reason I trusted it enough to put it online.

Try it

You can try it right now, no account needed:

If you ship small apps and dread the screenshot step as much as I did, this is the tool I wish I'd had years ago.