App screenshots, made in ChatGPT

Try the sample

Use the bundled habit tracker sample to make three 1080×1920 screenshots titled Build Better Habits, Track Every Day, and See Your Progress. Use blue, purple, and mint backgrounds. Show the preview and give me the PNG ZIP.

Use your app captures

Use my attached app captures to create three App Store screenshots at 1320×2868. Write a short, truthful benefit headline for each, keep the source images, show a preview, and give me the PNG ZIP.

Make a feature graphic

Use the bundled habit tracker sample to make one Google Play feature graphic at 1024×500 with the headline Build Better Habits. Show the preview and give me the PNG ZIP.

Option 1: Claude Desktop (macOS & Windows)

Open your Claude Desktop configuration file in your preferred text editor:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the following server configuration under mcpServers (using the lightweight mcp-remote bridge for Streamable-HTTP):

{
  "mcpServers": {
    "app-listing-screenshots": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://listingframe.benbaler.workers.dev/mcp"]
    }
  }
}

Save the file and restart Claude Desktop. The hammer icon will show app-listing-screenshots tools active.

Option 2: Claude Code (CLI)

Run the following command in your terminal to register the MCP server with Claude Code:

claude mcp add app-listing-screenshots -- npx -y mcp-remote https://listingframe.benbaler.workers.dev/mcp

Option 3: Claude Projects (Custom Instructions)

In Claude Projects on claude.ai, copy the system prompt instructions from skills/create-screenshots/SKILL.mdinto your Project Instructions.