App Store Screenshot Generator

Generate professional App Store marketing screenshots from raw app screenshots.

Workflow

When the user invokes this skill (e.g., "generate app store screenshots", "create marketing screenshots"), follow these steps:

1. Scan — Discover Input Files

Look for a screenshots/ directory in the project root (or a path the user specifies). The expected structure is:

screenshots/
├── en-US/
│   ├── screen1.png
│   ├── screen2.png
│   └── screen3.png
├── ja/
│   ├── screen1.png
│   ├── screen2.png
│   └── screen3.png
└── zh-Hans/
    └── ...

• Each subdirectory is a locale code
• Filenames should match across locales (same base name = same screen)
• If no locale subdirectories exist, treat all files as the primary locale

Report what was found: number of locales, number of screens per locale, any mismatches.

2. Analyze — AI Vision Analysis

For each unique screenshot (from the primary locale, typically en-US):

• Use Claude's vision to examine the screenshot
• Extract: dominant colors, UI density (busy/clean), content focus area (top/bottom/center), app category, value proposition
• Generate recommendations:
  • Complementary gradient colors that don't compete with the app UI
  • Text position (top if content is bottom-heavy, bottom if top-heavy)
  • Position preset suggestion (centered, bleed-bottom, float-center, etc.)

3. Design — Generate Config

Create an appscreen-config.json with:

• Per-screen background gradients that are visually cohesive across the set
• ASO-optimized headlines per locale (action verbs, benefit-focused, under 30 characters)
• Subheadlines with supporting details per locale
• Screenshot positioning based on content analysis
• Shadow and corner radius settings

ASO Design Principles to follow:

• Headlines: action verbs, benefit-focused, under 30 characters
• First 2-3 screenshots are the most critical (most users don't scroll)
• Gradient backgrounds should complement, not compete with, the app UI
• Text position (top/bottom) based on screenshot content density
• Visual consistency across the set (similar gradient angles, text sizing)
• CJK locales (ja, ko, zh-Hans, zh-Hant) often need 15-20% smaller headline sizes
• Use contrasting text colors against the gradient (white on dark, dark on light)

Available position presets:

• centered — scale 70%, centered (default, versatile)
• bleed-bottom — scale 85%, bleeds off bottom edge (great for showing full UI)
• bleed-top — scale 85%, bleeds off top (shows bottom portion of app)
• float-center — scale 60%, floating centered (elegant, shows more background)
• tilt-left / tilt-right — scale 65%, rotated ±8° (dynamic feel)
• perspective — scale 65%, perspective skew (3D-like depth)
• float-bottom — scale 55%, lower third (plenty of room for text on top)

4. Review — User Approval

Show the generated config to the user. Highlight:

• The headline/subheadline text per locale
• The background style choices
• The positioning strategy

Wait for user approval or modifications before rendering.

5. Render — Generate PNGs

Run the renderer:

node ~/.claude/skills/appscreen-generator/render.js appscreen-config.json

This produces output in {outputDir}/{device}/{locale}/screenshot-N.png.

Default output devices: iphone-6.9 (1320x2868) and iphone-6.7 (1290x2796).

6. Output — Report Results

Report:

• Total files generated
• Output directory path
• Remind user the output is compatible with the asc-screenshot-uploader skill for direct upload to App Store Connect

Config Schema

See examples/appscreen-config.example.json for a fully documented example.

Key fields:

• outputDevices — array of device keys (e.g., ["iphone-6.9", "iphone-6.7"])
• locales — array of locale codes
• inputDir — path to screenshots directory
• outputDir — where to write rendered PNGs
• fonts — array of { family, file, weight } for local font files
• global — default text styling (font, weight, color, opacity)
• screens[] — per-screen config with background, screenshot position, and text

Available Devices

Key	Resolution	Description
iphone-6.9	1320x2868	iPhone 16 Pro Max (required)
iphone-6.7	1290x2796	iPhone 15 Pro Max
iphone-6.5	1284x2778	iPhone 14 Pro Max
iphone-5.5	1242x2208	iPhone 8 Plus
ipad-12.9	2048x2732	iPad Pro 12.9"
ipad-11	1668x2388	iPad Pro 11"

Templates

Pre-built background style templates in templates/:

• dark-modern.json — Dark gradients, white text
• light-clean.json — Light backgrounds, dark text
• vibrant-gradient.json — Bold colorful gradients, white text

Reference in screen config: "template": "~/.claude/skills/appscreen-generator/templates/dark-modern.json"

Known Limitations

• No 3D rendering — 2D only. Use the browser-based appscreen tool for 3D device mockups.
• No background image blur — ctx.filter is unsupported in node-canvas.
• Font files required locally — download .ttf files; no runtime Google Fonts API.
• Minor text metric differences — font rendering may differ slightly from browser tool.

Dependencies

Requires canvas npm package (installed automatically in skill directory). If node-canvas fails to install, ensure system dependencies are present:

• macOS: brew install pkg-config cairo pango libpng jpeg giflib librsvg
• Ubuntu: sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev