appdesigns App Store screenshots

App Store のスクリーンショット MCP（appdesigns）

コーディングエージェントがアプリの App Store および Google Play 用スクリーンショットを作成できる、無料の MCP サーバーです。Claude Code、Codex、Cursor、VS Code、Gemini CLI、またはシェルを使える任意の MCP クライアントがアプリを読み取り、画面案を提示します。デモデータを追加する前に一度だけ確認を求め、各画面をストアサイズでキャプチャして、フレームとキャプションを付けたセットを appdesigns エディターで開きます。そこで編集して、ストア掲載用の PNG をエクスポートできます。

• 無料です。 接続に API キー、クレジット、サインインは不要です。appdesigns は AI モデルを実行せず、考えるのはエージェントです。
• 実際のアプリを使います。 エージェントはシミュレーター、エミュレーター、またはブラウザーで実際の UI をキャプチャします。生成画像は使いません。
• 編集可能です。 結果は平坦な画像ではなく、appdesigns エディター上のプロジェクトです。テキスト、色、デバイス、レイアウトを変更してからエクスポートできます。
• 両方のストアに対応します。 App Store は 1320 × 2868（6.9 インチ）と 13 インチ iPad、Google Play は 1080 × 1920 に対応します。
• あらゆるスタックに対応します。 iOS、Android、Expo、React Native、Flutter、Web アプリに対応します。

サーバー：https://appdesigns.click/api/mcp（Streamable HTTP、ステートレス、認証不要） セットアップページ：https://appdesigns.click/mcp ウォークスルー：https://appdesigns.click/blog/app-store-screenshots-mcp

インストール

エージェント	方法
Claude Code	claude mcp add --transport http --scope user appdesigns https://appdesigns.click/api/mcp を実行するか、このリポジトリをプラグインとして追加します：/plugin marketplace add haider-nawaz/app-store-screenshots-mcp の後に /plugin install appdesigns@appdesigns
Codex	codex mcp add appdesigns --url https://appdesigns.click/api/mcp
Cursor	https://appdesigns.click/mcp のワンクリックボタンを使うか、.cursor/mcp.json の mcpServers に {"url": "https://appdesigns.click/api/mcp"} を追加します
VS Code（Copilot）	code --add-mcp '{"name":"appdesigns","type":"http","url":"https://appdesigns.click/api/mcp"}'
Gemini CLI	gemini mcp add -s user -t http appdesigns https://appdesigns.click/api/mcp
その他	npx add-mcp https://appdesigns.click/api/mcp

次に、アプリのフォルダーで次のように依頼します。

このアプリの App Store 用スクリーンショットを appdesigns で作成してください。

Claude Code では、セッション中に追加したサーバーは再起動後に読み込まれます。終了して claude --continue を実行し、「続けて」と伝えてください。

仕組み

1. エージェントはプラットフォームとストアを指定して get_workflow を呼び出します。スタックに合わせたキャプチャコマンドと、画面、デモデータ、キャプションに関するルールが返されます。
2. アプリを読み取り、最適なものを先頭にして 4～5 画面を計画します。
3. 画面案、追加するデモデータ、キャプチャのために変更するコード、および各画面のキャプションを提示して、一度だけ確認を求めます。返信を待ってから作業を始め、プロダクションデータには決して触れません。
4. ステータスバーを整えた状態（9:41、バッテリー満充電）で、各画面をストアサイズでキャプチャします。
5. create_project を呼び出し、返されたアップロードコマンドを 1 回実行します（各ファイルは署名付き URL 経由でストレージに直接送られ、モデルを経由することはありません）。その後、finish_project を呼び出します。
6. ブラウザーでリンクを開きます。セットはエディターに読み込まれます。アカウントがなくてもエクスポートでき、サインイン（無料）するとライブラリに保存されます。

ツール

ツール	機能
get_workflow	1 つのプラットフォームとストア向けの手順一式：キャプチャコマンド、画面、デモデータ、キャプションのルール
list_devices	セットに使用できるデバイスフレーム
create_project	画面（名前、見出し、ファイル）を登録し、アップロードコマンドを 1 つ返します
finish_project	アップロードされたすべてのファイルを確認し、セットへのリンクを返します

サーバーは app_store_screenshots プロンプトも公開します（Claude Code では： /mcp__appdesigns__app_store_screenshots）。

スクリーンショットの取り扱い

スクリーンショットは、誰も閲覧できない非公開のステージング領域にアップロードされます。セットを保存すると、画像は個人用の非公開プロジェクトにコピーされ、ステージングされたファイルは削除されます。保存されていないセットは 72 時間後に削除されます。セットを appdesigns のギャラリーに自分で投稿しない限り、公開されることはありません。

このリポジトリの内容

• .claude-plugin/marketplace.json と plugins/appdesigns/：サーバーに接続し、app-store-screenshots スキルを追加するプラグインが1つ含まれる Claude Code プラグインマーケットプレイスです。
• plugins/appdesigns/skills/app-store-screenshots/SKILL.md：単独でも利用できるスキルです。Agent Skills を読み込む任意のエージェントで使用できます（.claude/skills/、.agents/skills/ などにコピーしてください）。
• server.json：公式の MCP Registry に click.appdesigns/screenshots として登録されています。

サーバー自体は appdesigns.click でホストされており、このリポジトリにはクライアント側の要素が含まれています。

ライセンス

MIT