AppScreenStudio

AppScreenStudio MCP

AI エージェントに AppScreenStudio で App Store と Google Play のスクリーンショットをデザインさせましょう。

AppScreenStudio は、ブラウザー上で使える App Store と Google Play のスクリーンショット生成ツールです。個人開発者、モバイルマーケター、ASO チームは、アプリ画面の素材をアップロードし、テンプレートを選んで、iPhone、iPad、Android のデバイスフレームに配置し、見出し、背景、画像を編集して、必要なストアサイズをワンクリックですべて書き出せます。オプションの AI 機能では、ローカライズ、マスコット、背景、アセットに対応します。インストールは不要で、ブラウザー上で動作します。

このリポジトリには、ホスト型 AppScreenStudio MCP サーバーのドキュメントとクライアント設定が含まれています。サーバー自体は www.appscreenstudio.com 上で動作するため、ここでビルドや実行を行う必要はありません。

MCP サーバーでできること

このサーバーは、MCP クライアント（Claude Code、Cursor、Codex、Gemini CLI、VS Code など）を、ブラウザーで開いている AppScreenStudio エディターに接続します。エージェントはプロジェクトを読み取り、カード、テキスト、画像、スマートフォン、HTML ブロックの追加や編集、テンプレート、デバイス、サイズの切り替え、アプリ画面のアップロード、AI アセットや背景の生成、セット全体の新しい言語への翻訳、ストア掲載文の入力、プレビュー一覧のレンダリングによる作業の確認を行えます。変更はすべてエディターにリアルタイムで反映され、ほかの編集と同様に、そこで元に戻すこともできます。

エンドポイント	https://www.appscreenstudio.com/api/mcp
トランスポート	Streamable HTTP
認証	Authorization: Bearer <token> ヘッダー
レジストリ名	com.appscreenstudio/app-screen-studio

トークンの取得

1. appscreenstudio.com にサインインし、エディターでプロジェクトを開きます。
2. エディターで Connect Your Agent をクリックします。
3. MCP Details を開きます。エンドポイント、トークン、すぐに貼り付けられる MCP 設定が表示されます。
4. エディターのタブは開いたままにしてください。 サーバーはすべてのツール呼び出しを開いているエディターに中継するため、タブを閉じると「No editor is connected」というエラーが発生し、呼び出しに失敗します。

トークンはアカウントに紐付けられており、Rotate token をクリックして古いトークンを無効にするまで変わりません。パスワードと同様に扱ってください。

クライアントの設定

YOUR_TOKEN をエディターで取得したトークンに置き換えてください。

Claude Code

claude mcp add --transport http app-screen-studio https://www.appscreenstudio.com/api/mcp \
  --header "Authorization: Bearer YOUR_TOKEN"

Cursor

これを ~/.cursor/mcp.json（すべてのプロジェクト用）または .cursor/mcp.json（1つのプロジェクト用）に追加します。エディターの MCP config コピーボタンで取得できる設定と同じです。

{
  "mcpServers": {
    "app-screen-studio": {
      "url": "https://www.appscreenstudio.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      }
    }
  }
}

Codex

これを ~/.codex/config.toml に追加します。

[mcp_servers.app-screen-studio]
url = "https://www.appscreenstudio.com/api/mcp"
bearer_token_env_var = "APPSCREENSTUDIO_MCP_TOKEN"

次に、Codex を実行するシェルでトークンをエクスポートします。

export APPSCREENSTUDIO_MCP_TOKEN="YOUR_TOKEN"

Gemini CLI

gemini mcp add -t http -H "Authorization: Bearer YOUR_TOKEN" app-screen-studio https://www.appscreenstudio.com/api/mcp

または、これを ~/.gemini/settings.json に追加します。

{
  "mcpServers": {
    "app-screen-studio": {
      "httpUrl": "https://www.appscreenstudio.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      }
    }
  }
}

VS Code

これを .vscode/mcp.json に追加します。VS Code はトークンを一度だけ要求し、安全に保存します。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "appscreenstudio-token",
      "description": "AppScreenStudio MCP token (editor: Connect Your Agent, MCP Details)",
      "password": true
    }
  ],
  "servers": {
    "app-screen-studio": {
      "type": "http",
      "url": "https://www.appscreenstudio.com/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:appscreenstudio-token}"
      }
    }
  }
}

その他のクライアント

カスタムヘッダー付きの Streamable HTTP に対応する MCP クライアントであれば利用できます。https://www.appscreenstudio.com/api/mcp を指定し、Authorization: Bearer YOUR_TOKEN を送信してください。

ツール

ツール	機能
get_editor_snapshot	開いているエディターのプラットフォームセットを1つ読み取ります。
update_text	開いているエディターのスクリーンショット上にあるテキストレイヤーを更新します。
add_text	開いているエディターのスクリーンショットにテキストレイヤーを追加します。
remove_text	開いているエディターのスクリーンショットからテキストレイヤーを削除します。
add_screenshot	プラットフォームセットの末尾にカードを追加します。
update_screenshot	カードとメインのスマートフォンを更新します。背景、スマートフォンの配置とアプリ画面、パターン、フェード、シャドウを変更できます。
remove_screenshot	開いているエディターからスクリーンショットを削除します。
add_asset	カードに画像レイヤーを追加します。
update_asset	開いているエディターのスクリーンショット上にある画像レイヤーを更新します。
remove_asset	開いているエディターのスクリーンショットから画像レイヤーを削除します。
add_div	カードにボックスレイヤーを追加します。
update_div	カード上のボックスレイヤーを更新します。
remove_div	開いているエディターのスクリーンショットからボックスレイヤーを削除します。
add_phone	開いているエディターのスクリーンショットカードにスマートフォンを追加します。
update_phone	add_phone で追加したスマートフォンを更新します。
remove_phone	add_phone で追加したスマートフォンを削除します。
reorder_element	同じ種類のレイヤー内で、レイヤーを前後に1つ移動します。
set_template	開いているプロジェクトのテンプレートを設定します。
update_template_color	開いているプロジェクトのテンプレートの色を1つ更新します。
set_resolution	プラットフォームセットのピクセルサイズを設定します。
set_device	プラットフォームセットのデバイスを設定します。
set_phone_color	プラットフォームセットのデバイスの色を設定します。
set_show_notch	プラットフォームセットのノッチの表示／非表示を切り替えます。
set_squircle_frame	プラットフォームセットのスクワークルフレームの有効／無効を切り替えます。
set_link_texts	プラットフォームセット間で一致するテキストレイヤーをリンクまたはリンク解除します。
rename_project	開いているプロジェクトの名前を変更します。
undo	開いているエディターで最後の編集を元に戻します。
redo	開いているエディターで最後に元に戻した編集をやり直します。
search_google_fonts	ファミリー名、カテゴリ、またはその両方で Google Fonts を検索します。
add_project_font	Google Fonts のファミリーを開いているプロジェクトに追加します。
list_library	このアカウントに保存されたアセットまたはマスコットを一覧表示します（スクリーンショットや背景は含みません）。
get_sprite	保存されたアセットまたはマスコットを1つ、spriteSheet と poses を含め、list_library の項目と同じ形式で返します。
generate_asset	AI でアセットスプライトを生成し、アカウントのライブラリに保存します。
generate_mascot	AI でマスコットスプライトを生成し、アカウントのライブラリに保存します。
generate_background	1つのカード用の AI 背景を生成します。
update_store_listing	現在の言語の App Store または Google Play の掲載情報のフィールドを更新します。
capture_platform_strip	エディターでの表示どおりに、プラットフォームセットのすべてのカードを横並びにした JPEG を1つ返します。
upload_image	開いているプロジェクトに画像をアップロードする準備をします。
duplicate_screenshot	スクリーンショットを複製し、その直後にコピーを挿入します。
copy_screenshot	スクリーンショットを別のプラットフォームセットにコピーします。
move_screenshot	プラットフォームセット内でスクリーンショットを左右に移動します。
set_language	開いているエディターを、プロジェクトにすでに存在する言語に切り替えます。
ai_translate	エディターと同じ AI ローカライズの手順で、開いている言語を翻訳して最大5つの言語を追加します。
add_platform_set	開いているプロジェクトにプラットフォームセットを追加します。
remove_platform_set	追加のプラットフォームセットを削除します。
set_project_background	プロジェクトの背景画像を設定または解除します。
set_realistic_frame	プラットフォームセットのリアルなデバイスフレームの有効／無効を切り替えます。
report_mcp_feedback	バグ、予期しないツールの結果、またはこれらの MCP ツールに関する提案に気づいたときに報告します。
rate_this_mcp	直前に完了したタスクでこれらの MCP ツールがどの程度役立ったかを、星1〜5個で評価します。
AI ツール（generate_asset、generate_mascot、generate_background、ai_translate）は、アカウントの AppScreenStudio AI クレジットを消費します。

プロンプトの例

• 「AppScreenStudio プロジェクトを読み込み、すべての見出しを 5 語以内のメリット訴求に書き換えてください。」
• 「./screenshots の画面をアップロードして、各カードに 1 枚ずつ配置し、すべてのカードに見出しを付けてから、ストリップを表示してください。」
• 「iOS セットをリアルな 3D iPhone フレームに切り替え、各スマートフォンを少し傾けて、左右交互に配置してください。」
• 「iOS カードを Android セットにコピーし、新しいサイズに収まらなくなった部分を修正してください。」
• 「プロジェクトをドイツ語、日本語、スペイン語に翻訳し、プレビュー用ストリップですべての言語を確認してください。」
• 「予算管理アプリ用の親しみやすいマスコットを生成し、最初のカードに配置してください。」
• 「現在の言語で、App Store のサブタイトル、プロモーションテキスト、キーワードを書いてください。」

リンク

• ウェブサイト：www.appscreenstudio.com
• テンプレート：www.appscreenstudio.com/en/templates
• 料金：www.appscreenstudio.com/en/pricing

ライセンス

このリポジトリ内のドキュメントと設定ファイルは、MIT License の下で公開されています。AppScreenStudio サービス、ホスト型 MCP サーバー、AppScreenStudio の名称およびアセットは、このライセンスの対象外です。