ASO App Store Screenshots
A Claude Code skill that generates high-converting App Store screenshots for your iOS app. It analyzes your codebase, identifies core benefits, and creates professional screenshot images using AI.
What It Does
- Benefit Discovery — Analyzes your app's codebase to identify the 3-5 core benefits that drive downloads
- Screenshot Pairing — Reviews your simulator screenshots, rates them, and pairs each with the best benefit
- Generation — Creates polished App Store screenshots using a two-stage process: deterministic scaffolding (compose.py) + AI enhancement (Nano Banana Pro via Gemini MCP)
- Showcase — Generates a preview image with all screenshots side-by-side
Installation
1. Add the skill to Claude Code
claude install-skill github.com/adamlyttleapps/claude-skill-aso-appstore-screenshots
2. Install Python dependencies
pip install Pillow
3. Font requirement
The skill uses **SF Pro Display Black** for headline text. On macOS, install it from [Apple's developer fonts](https://developer.apple.com/fonts/). The expected path is:
/Library/Fonts/SF-Pro-Display-Black.otf
4. Set up Gemini MCP (for AI enhancement)
The generation phase requires [@houtini/gemini-mcp](https://www.npmjs.com/package/@houtini/gemini-mcp) to be configured as an MCP server in Claude Code:
npm install -g @houtini/gemini-mcp
Then add it to your Claude Code MCP config (`~/.claude/settings.json` or project `.mcp.json`).
Usage
From within your app's project directory, run:
/aso-appstore-screenshots
The skill will guide you through each phase interactively. Progress is saved to Claude Code's memory system, so you can resume across conversations.
How It Works
Scaffold → Enhance Pipeline
Rather than generating screenshots from scratch (which produces inconsistent results), the skill uses a two-stage approach:
- compose.py creates a deterministic scaffold with exact text positioning, device frame, and your simulator screenshot composited inside
- Nano Banana Pro (via Gemini MCP) enhances the scaffold — adding a photorealistic device frame, breakout elements, and visual polish
This ensures consistent layout across all screenshots while letting AI handle the creative enhancement.
Output
Screenshots are saved to a `screenshots/` directory in your project:
screenshots/
01-benefit-slug/ ← working versions
scaffold.png ← deterministic compose.py output
v1.png, v2.png, v3.png ← AI-enhanced versions
v1-resized.png, ... ← cropped to App Store dimensions
final/ ← approved screenshots, ready to upload
01-benefit-slug.png
02-benefit-slug.png
showcase.png ← preview image with all screenshots
The `final/` folder contains App Store-ready screenshots at exact Apple dimensions (default: 1290×2796px for iPhone 6.7").
Files
| File | Purpose |
|---|
SKILL.md | The skill prompt — defines the multi-phase workflow |
compose.py | Deterministic scaffold generator (Pillow-based) |
generate_frame.py | Generates the device frame template |
showcase.py | Generates the side-by-side showcase image |
assets/device_frame.png | Pre-rendered iPhone device frame template |