appstore-mockup-mcp

An MCP server that wraps app screenshots in an iPhone 16 Pro frame with marketing text above, producing App Store-ready preview images (1284×2778, accepted for the 6.5" slot in App Store Connect).

Features

• Wraps any screenshot in a realistic iPhone 16 Pro frame (dark or silver)
• Adds bold headline + optional subtitle above the phone
• Vertical gradient or solid background
• Batch mode — process all screenshots in one call
• Theme suggestions derived from the app's own colors, with a custom-color override
• Warns if a source image is already a mockup (prevents phone-in-phone)

Installation

uvx appstore-mockup-mcp

Usage with Claude Code

Add to your .mcp.json:

{
  "mcpServers": {
    "appstore-mockup": {
      "command": "uvx",
      "args": ["appstore-mockup-mcp"]
    }
  }
}

Then in Claude Code, just share your screenshots and ask:

"Create App Store mockups for these screenshots"

Claude will ask you to pick a theme, propose captions, get your approval, then render everything.

Tools

create_iphone_mockup

Single screenshot → mockup.

Param	Default	Description
screenshot	required	Absolute path to source PNG/JPG
title	required	Headline above the phone
out	required	Output path
frame	silver	silver or dark
bg_color	#f5f1ea	Hex or #hex1,#hex2 for gradient
text_color	#111111	Hex
subtitle	""	Smaller line under headline
size	1284x2778	Output dimensions
bleed	false	Phone bleeds off bottom edge
add_frame	true	Set false if source already has a phone frame

create_iphone_mockups_batch

Same params, plus jobs list and output_dir. Each job can override any batch-level default.

suggest_themes

Takes a list of screenshot paths and returns theme suggestions derived from the app's own colors (JSON list of {name, bg_color, text_color, frame, why}).

Dynamic themes

Themes are derived from the app's own colors instead of fixed presets. The suggest_themes tool analyzes the screenshots' dominant background and accent colors and proposes:

Name	Built from	Look
App Match	the app's dominant background, nudged for phone contrast	native, cohesive
Brand Gradient	the app's accent color, light → dark	bold, brand-forward
Soft Tint	the accent color washed toward white	clean, minimal

Text color and frame are picked automatically for contrast. Claude presents the suggestions and always offers a custom option — supply your own bg_color (single hex or #hex1,#hex2 gradient), text_color, and frame if you don't like any of them.

License

MIT