# 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

```bash
uvx appstore-mockup-mcp
```

## Usage with Claude Code

Add to your `.mcp.json`:

```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