How to Design App Store Screenshots from Claude Code (AppShots MCP Server)

Steps

1. Install AppShots 1.3 or later. It is what actually renders, so the device frames and fonts come from the app you already have.
2. Add the server to Claude Code:

   claude mcp add appshots -- npx -y appshots-mcp

   For Codex CLI, put this in ~/.codex/config.toml:

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

3. Ask for what you want, in your own words — for example: “Make a 6.9-inch App Store set from the screenshots in ./shots, five pages, dark gradient background, headline above each frame, in English, Japanese and German.”
4. The model composes the layout, renders it, and looks at the result — then adjusts what it got wrong and renders again.
5. It exports store-sized PNGs, or saves a .appshots project you open in the editor to finish by hand.

Why it works this way

Most attempts at automated screenshots fail the same way: the tool emits a layout it cannot see, so the caption overlaps the device, the frame runs off the page, and nobody notices until the images are in App Store Connect.

The AppShots MCP server closes that loop with a render_preview tool that hands the rendered page back to the model as an image. The working cycle is add → render → look → fix → render, which is just what a designer does, and it is the reason the output is usable rather than merely plausible.

Rendering runs the editor’s own renderer, not a lookalike. What the model sees is what the Export button in AppShots would produce, so there is no gap between the preview and the file that ships.

Layout coordinates are fractions of a page rather than pixels — width: 0.72 is three-quarters of a page wide. The same numbers compose correctly on a 410 px Apple Watch and a 2880 px Mac, so the model cannot push a layout off-canvas by guessing wrong about the device.

Tips & edge cases

• Give it your screenshots folder. It reads the fastlane screenshots/[locale]/…_01.png layout, plain en-US_01.png names, or just files in order.
• Translate in the model. Captions are one string per locale, so the agent writes every language directly — no translation service in the loop.
• CJK fonts need a connection the first time. Everything else renders offline, and if a font fails to load the tools report it instead of silently substituting a wrong typeface.
• Ask to see it. “Show me page 3” is a valid instruction — the preview comes back as an image in your terminal.
• Hand off at any point. A saved .appshots project opens in the editor with every layer intact.

FAQ

Do I need an API key or an AI subscription for this? Not for the server itself — it does no AI work. The intelligence is whatever coding agent you already use, so you need Claude Code, Codex or another MCP client, and nothing else.

Do I need AppShots installed? For rendering and exporting, yes — AppShots 1.3 or later on macOS. The app is the renderer, which is why the package is only ~35 kB. Without it the model can still create, edit and save projects; it just can’t see or export them.

Does it work with Codex or other MCP clients? Yes. It is a plain stdio MCP server. Claude Code and Codex CLI both have one-line setups, and any other MCP client can run it the same way.

Can I keep editing what the model made? Yes. It saves a normal .appshots project you open in the editor. The usual split is the model does the layout pass and you do the taste pass.

Do the exports work with fastlane? Yes. Exports land in the fastlane deliver layout — screenshots/[locale]/[device]_01.png — at the exact pixel size the store expects.