storeshots-mcp

Store-ready App Store and Google Play screenshots, generated by your AI agent.

An MCP (Model Context Protocol) server that turns raw app screenshots into polished, pixel-perfect store listing visuals: device frames, bold benefit-driven headlines, brand colors, and exact store dimensions for iOS and Android. Your agent writes the copy, storeshots renders the pixels.

_{Generated from real screens of two shipped apps: bombo (panels 1–3) and Studio Zero (panel 4).
Panel 3 is the Android preset with Turkish headlines, uppercased with locale-correct İ and Ğ.}

Why

Making store screenshots is the least fun part of shipping an app. Design tools are manual, screenshot SaaS products are paid and template-locked, and fastlane frameit only frames iOS devices without any marketing layer.

storeshots-mcp takes a different approach. It splits the job the way it should be split:

No API keys. No accounts. No image-generation costs. Everything renders locally and deterministically, so the same input always produces the same output.

Quickstart

Claude Code

claude mcp add storeshots -- npx -y storeshots-mcp

Claude Desktop / Cursor / Windsurf / Antigravity / VS Code

Add to your MCP config (claude_desktop_config.json, .cursor/mcp.json, or equivalent):

{
  "mcpServers": {
    "storeshots": {
      "command": "npx",
      "args": ["-y", "storeshots-mcp"]
    }
  }
}

Codex CLI

Add to ~/.codex/config.toml:

[mcp_servers.storeshots]
command = "npx"
args = ["-y", "storeshots-mcp"]

storeshots-mcp is a plain stdio MCP server with zero client-specific behavior, so it runs in any MCP-capable agent: Claude Code, Claude Desktop, Cursor, Windsurf, Antigravity, Codex, Gemini CLI, VS Code, Zed, and whatever ships next week.

Prefer no server at all? The same engine is available as a CLI:

npx storeshots compose --preset ios-phone --bg "#E31837" \
  --verb "TRACK" --desc "YOUR DAILY MOOD" \
  --screenshot ./raw/home.png --output ./out/en_01.png

Then just ask:

"Take the screenshots in ./raw-shots and generate a full App Store and Play Store set. Brand color #E31837, 6 screenshots per platform, English and Turkish."

What you get

• 5 presets with exact store-required dimensions:

  Preset	Store	Dimensions
  ios-phone	App Store, iPhone 6.9"	1320 × 2868
  android-phone	Google Play, phone	1080 × 1920
  ipad-13	App Store, iPad Pro 13"	2064 × 2752
  android-tablet	Google Play, 10" tablet	1600 × 2560
  play-feature-graphic	Google Play, feature graphic (landscape header)	1024 × 500

• Device frames for iPhone (dynamic island), Pixel-style Android (punch hole), iPad, and Android tablet, drawn programmatically at exact scale

• Benefit-first headline layout: a bold action verb plus a short descriptor, sized and positioned for store shelf impact

• Smart contrast: text color flips between light and dark based on background luminance

• Full Unicode typography: bundled OFL-licensed font renders İ, Ğ, Ş, Ü, ß, and accented characters correctly in all caps

• Showcase composer: one wide preview image of the whole set, ready for your repo, tweet, or client deck

Tools

Every tool returns file paths plus a structured summary, so the agent can review output and iterate.

Multi-language sets

Translation happens in the agent, not the server. Generate your English set, then ask for any locale:

"Now generate the same set in Turkish and German."

The agent translates the headlines idiomatically, and storeshots renders them with correct locale-specific casing and special characters. Output follows a clean convention:

output/
  en/ios-phone/en_01.png … en_06.png
  tr/ios-phone/tr_01.png … tr_06.png
  de/android-phone/de_01.png … de_06.png

Claude Code skill (optional)

The MCP tools work on their own, but the bundled skill adds a guided workflow: benefit discovery from your codebase, headline approval before rendering, per-language sets, and upload guidance. Install it with:

mkdir -p ~/.claude/skills/storeshots
curl -o ~/.claude/skills/storeshots/SKILL.md \
  https://raw.githubusercontent.com/mtbun/storeshots-mcp/main/skill/SKILL.md

Then ask Claude Code for "store screenshots for this app" and it walks the full flow.

Design principles

1. Deterministic: no AI image generation in the render path. Same input, same pixels, every time.
2. Zero config: no API keys, no sign-ups, works fully offline.
3. Store-correct by construction: output dimensions are enforced, not suggested.
4. Agent-native: tools expose structured data, and the copywriting intelligence stays in the model where it belongs.

Roadmap

• Claude Code skill layer: guided benefit-discovery workflow on top of the MCP tools
• Play Store feature graphic preset (1024 × 500)
• Layout variants: device-bottom, device-tilted, text-bottom
• Custom device frame support
• Panoramic sets (one background flowing across multiple screenshots)

Contributing

Issues and PRs are welcome. See AGENTS.md for architecture and conventions; it is written for both human contributors and coding agents.

License

MIT