App Store Screenshots Generator

Overview

Build a Next.js page that renders App Store screenshots for iPhone and iPad as advertisements (not UI showcases) and exports them via html-to-image at Apple's required resolutions. Uses pre-framed device screenshots from ascelerate screenshot frame (Apple device bezels with pixel-perfect accuracy, including Dynamic Island and rounded corners). Screenshots are the single most important conversion asset on the App Store.

Core Principle

Screenshots are advertisements, not documentation. Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a feeling, an outcome, or killing a pain point.

Step 1: Ask the User These Questions

Before writing ANY code, gather all required information. Ask questions one at a time — wait for the user's answer before asking the next question. Dumping all questions at once is overwhelming. If the user volunteers information about upcoming questions, acknowledge it and skip those when you get to them.

Required

1. Framed screenshots — "Where are your framed device screenshots? (from ascelerate screenshot frame — typically screenshots/framed/)"
2. App icon — "Where is your app icon PNG?"
3. Brand colors — "What are your brand colors? (accent color, text color, background preference)"