I built an App Store Screenshot Generator so indie devs don't need Figma or designers

#showdev #webdev #productivity #ios

Every time I shipped an iOS app update, the same problem hit me: screenshots.

The app itself? Done. App Store description? Easy. But those 5-6 professional screenshots with backgrounds, device frames, and marketing text? That's where I'd lose half a day in Figma — or worse, spend $500 on a designer just to update a few images.

So I built a tool that generates professional App Store screenshots in under 60 seconds.

How it works

The core idea is dead simple: pick any successful app as a style reference, and the tool matches that style for your screenshots.

Search for a reference app — Type "Spotify" or "Notion" or whatever top app you admire. The tool pulls their real App Store screenshots via the iTunes API.
Upload your screenshots — Drag and drop your own app screenshots. Any resolution works.
Generate — The engine extracts colors, gradients, and layout patterns from the reference app, then composites your screenshots with professional backgrounds, device frames, and marketing headlines.

You get full App Store resolution images (1290x2796) ready to upload.

The tech stack

Built with:

Next.js (App Router) + TypeScript
HTML5 Canvas for all image composition — no server-side image processing needed for the generation itself
Supabase for auth and user data
Stripe for payments ($5/mo Pro plan)
Netlify for hosting

The screenshot generation engine uses canvas to:

Extract dominant colors from reference screenshots
Generate gradient backgrounds that match the reference style
Render realistic iPhone frames (Dynamic Island, titanium bezels, screen reflections)
Composite the user's screenshot inside the frame
Add marketing headline text with proper typography
Apply one of 16 different composition layouts

All rendering happens client-side in the browser. No waiting for server processing.

The AI angle

One feature I'm particularly excited about: an API that AI assistants can use.

There's a dedicated /for-ai page with a script you can paste into Claude, ChatGPT, or Cursor. The AI can then:

Search for reference apps
Generate screenshots using your API key
Even upload directly to App Store Connect

So instead of opening a browser, you can literally tell your AI: "Generate App Store screenshots for my fitness app using Nike Training Club's style" — and it handles everything.

What I learned building this

1. The iTunes Search API is surprisingly good. Free, no auth required, returns screenshots, icons, descriptions, and genre info. Just hit https://itunes.apple.com/search?term=X&entity=software.

2. Canvas is incredibly powerful for image composition. I was skeptical at first, but you can build production-quality image generation entirely in the browser. No need for Sharp, Puppeteer, or server-side rendering.

3. The first screenshot matters 10x more than the rest. When analyzing top apps, the first screenshot consistently had the most effort put into it — unique layout, strongest headline, most impactful visual.