Claude Code、Codex、Gemini CLIにApp Storeスクリーンショットのデザインを任せましょう。エージェントが編集可能なプロジェクトを作成し、ブラウザでレビューして、エクスポート用リンクを渡します。
https://appscreenshots.net/api/mcpコマンド1つで追加。無料・有料プランともMCPを利用できます。
MCPとは？
AppScreenshotsは https://appscreenshots.net/api/mcp でホスト型のMCP（Model Context Protocol）サーバーを運用しており、Claude Code、Codex、Gemini CLIなどのAIツールが、あなたのアカウント内でApp Storeスクリーンショットプロジェクトを作成・編集・レビューできます。OAuthブラウザログイン方式で、APIキーは不要です。
デザインとコピーはAIエージェントが担います。MCPサーバーに保存されるのは本物の編集可能なプロジェクトで、テンプレート・デバイスモックアップ・見出し・背景が、フレーム単位で磨き続けられるプロジェクトになります。
プレビューとエクスポートはWebサイトのエディタで行うため、あなたが確認する前に公開されることはありません。
許可されたテンプレートとアセットから、デバイスモックアップ・見出し・グラデーション・ローカライズコピーを備えたストア向けマーケティングスクリーンショットを、編集可能なプロジェクトとして作成します。
simctlやfastlane snapshotは端末画面に映っているものを撮影するツールです。生のキャプチャにはそれらを使い、画像はここにアセットとしてアップロードしてください。
はじめ方
下のエンドポイントをクライアントに追加し、ブラウザログインで認可を完了してください。このページのクライアントはすべてStreamable HTTPとOAuthに対応しています。
claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcpclaude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp次に: Claude Codeで /mcp を実行し、ブラウザでAppScreenshotsを認可します。
{
"mcpServers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}{
"mcpServers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}codex mcp add appscreenshots --url https://appscreenshots.net/api/mcpcodex mcp add appscreenshots --url https://appscreenshots.net/api/mcp次に: codex mcp login appscreenshots を実行するとブラウザログインが開きます。
[mcp_servers.appscreenshots]
url = "https://appscreenshots.net/api/mcp"[mcp_servers.appscreenshots]
url = "https://appscreenshots.net/api/mcp"gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcpgemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp次に: Gemini CLI内で /mcp auth appscreenshots を実行します。
{
"mcpServers": {
"appscreenshots": {
"httpUrl": "https://appscreenshots.net/api/mcp",
"oauth": {
"enabled": true
}
}
}
}{
"mcpServers": {
"appscreenshots": {
"httpUrl": "https://appscreenshots.net/api/mcp",
"oauth": {
"enabled": true
}
}
}
}https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcp次に: Kimi Codeで /mcp-config を開き、上のHTTPサーバーを追加して /mcp-config login appscreenshots を実行します。保存後にセッションを再起動してください。
{
"mcpServers": {
"appscreenshots": {
"url": "https://appscreenshots.net/api/mcp"
}
}
}{
"mcpServers": {
"appscreenshots": {
"url": "https://appscreenshots.net/api/mcp"
}
}
}https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcp次に: 設定を ~/.zcode/cli/config.json の mcp.servers にマージするか、Settings → MCP でHTTPサービスを追加します。セッションを再起動し、表示されたらOAuthログインを完了してください。
{
"mcp": {
"servers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}
}{
"mcp": {
"servers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}
}https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcp次に: アカウントまたはワークスペースのカスタムMCP接続エントリで、上のエンドポイントとOAuthを使用します。利用可否はワークスペースの設定次第です。
GitHubの公開接続キットには、上記すべてのクライアントの設定ファイル、ワークフローを教えるオプションのエージェントSkill、ターミナルからサーバーを診断するdoctorコマンドが含まれます。
GitHubで appscreenshots-mcp を見るツール
読み取りツールは機能・テンプレート・プロジェクト・アセットを確認し、書き込みツールはプロジェクトを作成し、リビジョン管理された構造化編集を適用します。
| ツール | できること |
|---|---|
get_capabilities | 利用権限、デザイン範囲、デバイス、プレビュー/エクスポートモードを取得 |
search_templates | 公開テンプレートのメタデータを検索 |
get_template | 利用権限のあるテンプレートを取得 |
list_projects | 許可されたプロジェクトを一覧表示（1ページ25件） |
get_project | プロジェクトの現在のリビジョンと編集可能なデザインを取得 |
get_project_preview | エディタリンク、リビジョン、ページ、ブラウザレビュー手順を取得 |
list_assets | 共有アセットと許可プロジェクト内のアセットを一覧表示 |
| ツール | できること |
|---|---|
create_project | テンプレートまたは空白キャンバスからプロジェクトを作成 |
update_project | リビジョンと冪等性保護付きの構造化編集を適用 |
仕組み
接続されたエージェントがたどる標準フローです。
クライアントにMCPサーバーを追加し、AppScreenshotsアカウントでログインします。同意ページで、ツールが使えるプロジェクトとアセット、プロジェクト作成の可否を選びます。
自然言語でスクリーンショットセットを依頼します。エージェントは機能を確認し、テンプレートを検索して編集可能なプロジェクトを作成します。
プレビューツールがエディタリンクを返します。ブラウザツールを持つエージェントはリンクを開き、スクリーンショットを確認し、視覚的な問題をMCP経由で修正します。
すべての書き込みはリビジョン管理と冪等性で保護されるため、ローカライズ・デバイス変更・リスタイルを依頼しても既存フレームは壊れません。
同じプロジェクトをWebサイトエディタで開き、ストア向け画像をエクスポートします。プレビューとエクスポートは常にあなたの手の中にあります。
利用可能なテンプレートと許可済みアセットを使って、英語のApp Storeスクリーンショットプロジェクトを作成してください。短い見出しとシンプルなレイアウトで。ブラウザツールでエディタを開き、スクリーンショットを確認して視覚的な問題を修正し、Webサイトでエクスポートできるプロジェクトリンクを渡してください。
例
プロジェクトは編集可能なまま残るので、追加の依頼は低コストです。
“現在のフレームを日本語とドイツ語に複製してください。レイアウトを保ち、見出しを翻訳し、訳文の長さは英語版の20%増以内に収めてください。”
“デバイスモックアップを大きめのPro Maxモデルに切り替え、構図のバランスが保たれるよう背景のグラデーションを調整してください。”
“2フレーム目をダーク背景に変更し、見出しを上三分之一に移動し、キャプションにはサブアクセントカラーを使ってください。”
セキュリティと制限
MCPアクセスはスコープされ、監視可能で、いつでも取り消せます。
FAQ
AIツール接続前に開発者がよく尋ねること。
AppScreenshots MCPサーバーをAIツールに追加して、1つのプロンプトから編集可能でストア対応のスクリーンショットプロジェクトへ。