Kerem Erkan

asc-screenshots – App Store Screenshot Generator

asc-screenshots is an AI agent skill that generates production-ready App Store screenshots for iPhone and iPad. It designs ad-style marketing layouts, frames them in official Apple device bezels, and exports in a format ready for upload via asc-client.

It works as a skill for AI coding agents — Claude Code, Cursor, Windsurf, and others. You describe your app, and the agent scaffolds a Next.js project that renders your screenshots as advertisements, frames them in pixel-perfect device mockups, and lets you export everything as a zip.

Installation

Using npx skills (recommended)

npx skills add keremerkan/asc-screenshots

Works with Claude Code, Cursor, Windsurf, OpenCode, Codex, and 40+ other agents.

Install globally (available across all projects):

npx skills add keremerkan/asc-screenshots -g

Manual (git clone)

git clone https://github.com/keremerkan/asc-screenshots ~/.claude/skills/asc-screenshots

Install FrameMe (required, macOS only)

FrameMe is a Swift CLI that composites screenshots into Apple device bezels with pixel-perfect accuracy — including the Dynamic Island, rounded corners, and irregular screen shapes that CSS border-radius can’t handle.

git clone https://github.com/joshluongo/frameme.git /tmp/frameme
cd /tmp/frameme && swift build -c release
strip .build/release/frameme
cp .build/release/frameme /usr/local/bin/frameme

How It Works

Once installed, the skill triggers automatically when you ask your AI agent to build App Store screenshots. The agent walks you through a series of questions:

  1. Your app’s raw screenshots (from the iOS Simulator)
  2. App icon
  3. Brand colors, font, and style direction
  4. Feature descriptions and marketing copy
  5. Target devices (iPhone 17 Pro, iPhone 17 Pro Max, iPad Pro 11″, iPad Pro 13″)
  6. Languages for localization
  7. Number of slides and where to save the project

Then it:

  • Scaffolds a Next.js + TypeScript project
  • Runs FrameMe to composite your screenshots into the official Apple device bezels
  • Generates a single page.tsx with ad-style slide layouts
  • Creates a copy.json file with all marketing text (editable without touching code)
  • Adds a language switcher and device filter to the preview page

Run the dev server, preview in the browser, and export.

cd path/to/generator && bun next dev --port 3847
# Open http://localhost:3847

Design Philosophy

Every screenshot is designed as an advertisement, not a UI showcase. Each slide sells one idea with a headline you can read at thumbnail size in the App Store. Layouts may vary between slides.

All marketing text lives in copy.json, separate from layout code. This means you can update headlines, descriptions, and translations without opening the component file. The language switcher in the toolbar lets you preview every locale before exporting.

Device Bezels

The skill includes official Apple device bezels from Apple Design Resources:

  • iPhone 17 Pro — 1350×2760
  • iPhone 17 Pro Max — 1470×3000
  • iPad Pro 11″ M4 — 1880×2640
  • iPad Pro 13″ M4 — 2300×3000

FrameMe uses the bezel’s alpha channel to create a per-scanline mask, correctly handling the Dynamic Island and rounded corners that CSS border-radius can’t reproduce. The result is a complete device-framed PNG that the generator uses as a simple <img> tag — no clipping or offset calculations needed.

Export

Only the largest screenshot size per device is generated. App Store Connect automatically scales to smaller displays.

  • iPhone 6.9″ — 1320×2868
  • iPad 13″ — 2064×2752

Three export options:

  • Click a screenshot — downloads a single PNG
  • Export (locale) — downloads a zip for the current language
  • Export All Languages — downloads a single zip with every locale

asc-client compatible

The zip follows the asc-client folder structure, so you can unzip and upload directly:

en-US/APP_IPHONE_67/01_hero.png
en-US/APP_IPAD_PRO_3GEN_129/01_hero.png
de-DE/APP_IPHONE_67/01_hero.png
de-DE/APP_IPAD_PRO_3GEN_129/01_hero.png
asc-client apps media upload com.example.MyApp --folder screenshots/ --replace

Localization

The generator supports multiple languages out of the box. All text is stored in copy.json:

{
  "en": {
    "iphone-hero": { "headline": "Spam texts,<br/>silenced.", "pills": ["Smart", "Private"] },
    "iphone-privacy": { "label": "On-device AI", "headline": "Completely<br/>private.", "sub": "..." }
  },
  "de": {
    "iphone-hero": { "headline": "Spam-SMS,<br/>verstummt.", "pills": ["Intelligent", "Datenschutz"] }
  }
}

If your app’s UI changes per language, provide localized screenshots in public/framed/iphone/en/, public/framed/iphone/de/, etc. The device component falls back to English if a localized image is missing — so you only need separate screenshots for languages where the UI actually differs.

Project Structure

project/
├── public/
│   ├── app-icon.png
│   ├── framed/
│   │   ├── iphone/{locale}/
│   │   └── ipad/{locale}/
│   └── screenshots/
│       ├── iphone/{locale}/
│       └── ipad/{locale}/
├── src/app/
│   ├── copy.json
│   ├── layout.tsx
│   └── page.tsx
└── package.json

The generator is designed to live permanently inside your app’s project (e.g. screens/generator/), so you can go back to it anytime to update copy, add languages, or regenerate screenshots for a new version.

Credits

Originally based on ParthJadhav/app-store-screenshots. Rewritten with FrameMe integration, iPad support, localization, and asc-client compatible export.

Developed with Claude Code.

Source & License

asc-screenshots is open source under the MIT license.

GitHub