ASC Studio
Browser tool that designs and exports App Store Connect marketing assets for iPhone, iPad, Mac, Apple Watch, plus product page headers, search results creatives, dual-iPhone layouts (all iPhone ASC sizes), and an MIT foldable iPhone Duo frame.
Upload PNG/JPEG/WebP screenshots → guided flow (upload → devices → style → AI review → export) → export individual PNGs or a ZIP. Composition runs client-side. Optional AI (Vercel AI Gateway + AI SDK, with direct xAI fallback) calls only from Next.js route handlers.
Guided workflow
- Upload — drop one or more screenshots; drag thumbs to reorder. Dual layouts pair each shot with the next.
- Devices — pick single / side-by-side / overlap / tilted / foldable open|closed, and ASC export targets.
- Style — captions, fonts, templates, backgrounds, presets (
localStorage).
- AI review — multilingual copy (incl. Spanish), background/color suggestions, auto layout pick, scorecard with one-click fixes.
- Export — batch opaque PNGs at exact ASC pixel sizes (ZIP).
Frame compose rule (do not regress)
With device frames on:
- Cover-fill the screenshot into the device screen / mask rect (never letterbox inside the screen).
- Then scale the whole framed composition (background + screen + PNG bezel) to the exact ASC canvas using contain or cover.
Covered by unit tests in src/lib/geometry.test.ts.
Dual iPhone layouts
First-class across all iPhone ASC sizes (6.9″ / 6.5″ / 6.3″ / 6.1″, portrait + landscape), plus the Dual platform target. Variants: side-by-side, overlapping, tilted. Each device uses its own screenshot from the ordered set.
Foldable iPhone Duo frame
Added from bunlongheng/frames (MIT): closed, open-portrait, and open-landscape PNG bezels under public/frames/iphone-duo/.
Why this source: Hoverify and Screeny Duo PNGs disallow redistribution as an asset pack; jal-co/iphone-duo ships Apple’s GLB (not openly licensed for bezel redistribution). bunlongheng/frames is MIT and already used for MacBook.
Apple specifications (sources)
Screenshots
Source: Screenshot specifications
Creative assets — product page header & search results
Source: Creative assets specifications
| Placement | Aspect | Resolution used here |
|---|
| Product page header | 21:9 | 3840×1646 |
| Universal creative | 16:9 | 5244×2950 |
| Search results | 3:2 | 3840×2560 (Apple max) |
Images must be JPEG/JPG/PNG without alpha; this tool always encodes opaque RGB PNGs.
Device frames
Real PNG bezels from open community sources (see NOTICE):
- iPhone 17 Pro Max Deep Blue (
jonnyjackson26/device-frames-media)
- iPhone Duo foldable closed/open (MIT
bunlongheng/frames)
- iPad Pro 13" / 11" Space Black
- MacBook (MIT
bunlongheng/frames)
- Apple Watch: procedural bezel fallback
Run locally
npm install
cp .env.example .env.local # optional AI keys
npm run dev
Open http://localhost:43123.
npm run test
npm run lint
npm run build
npm start
Pipeline (GitHub → Vercel)
- GitHub: github.com/dyckdavid/app-store-screenshots —
main is what Vercel builds.
- Vercel: team
computerjunges — production app-store-screenshots-computerjunges.vercel.app. Pushes to main deploy production; PRs get preview deployments.
Environment variables
| Variable | Required | Default | Purpose |
|---|
AI_GATEWAY_API_KEY | No* | (unset) | Vercel AI Gateway key (preferred for local + preview). |
VERCEL_OIDC_TOKEN | No* | (auto on Vercel) | OIDC auth for Gateway on Vercel deployments. |
XAI_API_KEY | No* | (unset) | Direct xAI fallback when Gateway creds are absent. |
XAI_RATE_LIMIT_PER_IP_PER_MINUTE | No | 5 | Max AI route calls per client IP per minute |
XAI_RATE_LIMIT_PER_IP_PER_DAY | No | 30 | Max AI route calls per client IP per UTC day |
XAI_RATE_LIMIT_GLOBAL_PER_DAY | No | 200 | Max AI route calls across all IPs per UTC day |
XAI_MAX_PROMPT_LENGTH | No | 500 | Max characters for image-generation prompts |
XAI_VISION_MAX_EDGE | No | 768 | Longest edge (px) for vision payloads |
XAI_VISION_MAX_BASE64_CHARS | No | 900000 | Server reject threshold for vision payloads |
*AI UI enables when any of Gateway key, OIDC, or XAI_API_KEY is present. If none are set, the rest of the app works and AI panels show exactly what to configure.
AI models (via Vercel AI Gateway)
| Feature | Gateway model id | Notes |
|---|
| Background / graphic generation | spacexai/grok-imagine-image | ~$0.02 / image (xAI Imagine) |
| Vision / review / layout / copy | spacexai/grok-build-0.1 | Cheapest vision-capable Grok text model |
Integration: Vercel AI SDK (ai + plain provider/model strings). Server routes:
GET /api/ai/status — enabled flag, provider path, models, caps (never returns keys)POST /api/ai/generate-image — background / graphicPOST /api/ai/analyze — style suggestions from a screenshotPOST /api/ai/copy — multilingual headline/caption packsPOST /api/ai/layout — auto-pick best device layoutPOST /api/ai/review — scorecard + one-click fixes
Rate limits are in-memory per server instance. For multi-instance production, replace with Redis/KV.
Coming soon
Listed in the UI. Includes freeform canvas dragging, per-shot caption overrides, app-preview video, In-App Event creatives, cloud preset sync, and additional official marketing frame packs.
