storeshots-mcp

storeshots-mcp

コマンドラインから App Store と Google Play のスクリーンショットを生成したり、AI コーディングエージェントに任せたりできます。

storeshots は、アプリの未加工のスクリーンショットを完成したストア掲載用ビジュアルに仕上げます。デバイスフレーム、メリットを訴求する見出し、ブランド背景、iOS と Android の正確なストア寸法を適用します。掲載内容全体を 1 つの storeshots.json に記述して storeshots build を実行すれば、すべてのプラットフォーム向けに、すべての言語で出力できます。コピーの作成と翻訳は AI エージェント（またはあなた）が行い、storeshots がピクセルを描画します。CLI を中心に設計されており、シェルを使えないエージェント向けに MCP サーバーも用意されています。デザインツールも、サブスクリプションも、API キーも不要です。

_{リリース済みの 2 つのアプリからの実際の画面です：bombo（パネル 1〜3）と Studio Zero（パネル 4）。パネル 3 は Android プリセットで、トルコ語の見出しを、ロケールに合わせた İ と Ğ を使って大文字化しています。}

---

アイデア

ストアのスクリーンショット制作には、ひとつに見せかけた 2 つの作業があります。クリエイティブな作業（何を伝えるか、どの画面でどの機能を訴求するか、6 つの言語でどう表現するか）と、制作作業（フレーム、タイポグラフィ、正確なピクセル寸法、アルファチャンネルなし）です。デザインツールでは両方を手作業で行う必要があり、スクリーンショット制作の SaaS では制作作業をサブスクリプションの制限下に置いています。

storeshots-mcp はこの 2 つを切り分け、それぞれに最適なものを使えるようにします。

AI エージェントが決めること	storeshots が描画するもの
掲載する画面	正確なスケールのデバイスフレーム
各画面の見出し	タイポグラフィ、コントラスト、レイアウト
自然な翻訳	言語ごとに正しい大文字・小文字表記（トルコ語の İ、ドイツ語の ß）
ブランドカラーと順序	ストアの正確な寸法に合わせた、再現性のある PNG

描画処理は純粋にローカルで実行されるため、同じ入力からは常に同じピクセルが生成されます。処理にモデルは介在せず、どこにもアップロードされません。

クイックスタート

npx storeshots init --langs en,tr --bg "#E31837"   # finds ./screenshots, writes storeshots.json
# replace the TODO headlines in storeshots.json
npx storeshots build --watch                       # renders everything, re-renders on save

init は、未加工のスクリーンショット（screenshots/、raw-shots/、raw/、shots/、fastlane/screenshots/、または --screens <dir> で指定した場所）を一覧表示し、次のような設定ファイルを作成します：

{
  "background": "#E31837",
  "presets": ["ios-phone", "android-phone"],
  "languages": ["en", "tr"],
  "outputDir": "output",
  "screens": [
    { "screenshot": "screenshots/home.png",
      "copy": { "en": ["Track", "your daily mood"], "tr": ["İzle", "günlük ruh halini"] } },
    { "screenshot": "screenshots/stats.png", "variant": "tilted",
      "copy": { "en": ["Discover", "weekly insights"], "tr": ["Keşfet", "haftalık içgörüler"] } }
  ],
  "featureGraphic": { "screen": 1 },   // optional: Play Store 1024 × 500 header
  "showcase": true                     // optional: one preview strip per set
}

build は、各画面 × プリセット × 言語の組み合わせを描画します：

output/
  en/ios-phone/en_01.png … en_06.png
  en/android-phone/en_01.png …
  en/play-feature-graphic/en_feature.png
  tr/ios-phone/tr_01.png …
  showcase/en_ios-phone.png …

描画は再現性があるため、build は変更されたものだけを再描画します。トルコ語の見出しを 1 つ編集すると、そのファイルだけが再度描画されます。画面を削除すると、対応する古いファイルも削除されます。出力はすべて、書き込まれる前に各ストアのルールに照らして検証されます。

npx storeshots ではなく storeshots と入力したい場合は、npm i -g storeshots-mcp でグローバルにインストールしてください。

コマンド

コマンド	説明
storeshots init	スクリーンショットの元ファイルが入ったフォルダーから storeshots.json を作成し、AGENTS.md / CLAUDE.md に storeshots セクションを追加します
storeshots build	設定全体をレンダリングします。--watch、--lang tr、--preset ios-phone、--dry-run、--force、--jobs 4
storeshots compose	設定ファイルなしで、フラグからスクリーンショットを 1 枚レンダリングします
storeshots showcase	画像またはフォルダーをつなぎ合わせて、1 つのプレビュー帯を作成します
storeshots validate	ファイルまたはフォルダー全体がストアのルールに準拠しているか確認します（失敗時は 1 を終了コードとして返すため、CI で使用できます）
storeshots presets	プリセットと正確な寸法を一覧表示します

初回のビルドが成功すると、storeshots は GitHub でスターを付けるかどうかを一度だけ尋ねます。CI では尋ねません。無効にするには STORESHOTS_NO_STAR=1 を設定してください。すべてのコマンドで、機械可読形式の出力には --json、詳細の表示には --help を指定できます。終了コード：0 成功、1 レンダリングまたは検証の失敗、2 使用方法または設定の誤り。設定エラーでは、各問題のパスとともにすべての問題が一度に表示されます（screens[2].copy.tr: missing）。

設定リファレンス

フィールド
background	ブランドカラー（6 桁の 16 進数）。必須です。
presets	ios-phone、android-phone、ipad-13、android-tablet のいずれか。デフォルト：両方のスマートフォン。
languages	BCP-47 コード。デフォルト：最初の画面の copy に指定された言語。
screens[]	最大 10 件。ストアでの表示順に指定します。それぞれに screenshot、言語ごとの copy（["verb", "descriptor"] または {"verb", "descriptor"}）、必要に応じて独自の variant または background を指定します。
screens[].screenshot	設定ファイルからの相対パスです。{lang}、{preset}、{platform}（ios／android）を使って、言語別またはプラットフォーム別のキャプチャを指定できます。例："shots/{platform}/{lang}/home.png"。プリセット ID をキーとし、"default" をフォールバックとして指定するオブジェクトも使用できます。
variant	text-top（デフォルト）、text-bottom、または tilted。セット全体に適用されます。画面ごとに variant が指定されている場合は、そちらが優先されます。
panorama	{ "to": "#hex" }：background からすべてのパネルに広がる 1 つのグラデーションです。
frame	カスタムフレーム、またはプリセット ID ごとに指定します。
featureGraphic	{ "screen": n } を指定すると、画面のスクリーンショットとコピーを再利用します。screenshot、copy、background を直接指定することもできます。
showcase	true にすると、言語とプリセットごとに output/showcase/ へプレビュー帯を出力します。
outputDir, noGradient	出力フォルダー（デフォルトは output）です。noGradient は控えめな垂直グラデーションを無効にします。

AI エージェントと使用する

storeshots は、クリエイティブ作業と制作作業を分けています。エージェントはアプリを読み込み、各画面の利点を選び、見出しを作成して翻訳し、storeshots.json に記述してから storeshots build を実行します。シェルを使えるエージェントであれば、Claude Code、Cursor、Codex、Windsurf など、セットアップなしで利用できます。ガイド付きのフローを使うには、Claude Code プラグインをインストールしてください。

「./raw-shots のスクリーンショットを使って、App Store と Play Store 向けのセットを一式作成してください。ブランドカラーは #E31837、言語は英語とトルコ語です。」

MCP サーバー。 シェルを使えないクライアント（たとえば Claude Desktop）では、同じエンジンを stdio MCP サーバーとして実行できます。

claude mcp add storeshots -- npx -y storeshots-mcp

{ "mcpServers": { "storeshots": { "command": "npx", "args": ["-y", "storeshots-mcp"] } } }

Codex CLI では ~/.codex/config.toml を使用します。

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

生成されるもの

各ストアが求める正確なサイズの5つのプリセット：

プリセット	ストア	寸法
ios-phone	App Store、iPhone 6.9"	1320 × 2868
android-phone	Google Play、スマートフォン	1080 × 1920
ipad-13	App Store、iPad Pro 13"	2064 × 2752
android-tablet	Google Play、10" タブレット	1600 × 2560
play-feature-graphic	Google Play のフィーチャーグラフィック	1024 × 500

そして、セットをデザインされた仕上がりにする細かな工夫：

• 組み込みのデバイスフレーム — iPhone（ダイナミックアイランド）、Pixel 風の Android（パンチホール）、iPad、タブレットを正確なスケールでプログラムにより描画します。カスタムフレームを使うこともできます。
• レイアウトバリエーション — text-top、text-bottom、tilted。セット内で組み合わせれば、同じテンプレートを6回コピーしたような見た目になりません。
• パノラマセット — すべてのパネルにわたってグラデーションが途切れずに流れるため、ストアでは一続きの画像のように見えます。パノラマをご覧ください。
• メリットを先に伝える見出し — 太字の動詞と短い説明を組み合わせ、ロケールに合った特殊文字とコントラストを考慮した色で自動的に大文字表記します。
• ショーケースコンポーザー — リポジトリ、ローンチ投稿、クライアント向け資料に使える、セット全体の横長プレビュー画像を作成します。

すべての出力は、App Store Connect が拒否するアルファチャンネルを取り除くためにフラット化され、書き込み前にプリセットに照らして検証されます。

MCP ツール

ツール	機能
build_project	storeshots.json をビルドし、変更されたものだけを再レンダリングします。storeshots build と同じエンジンです。
generate_set	1つのプラットフォームと言語向けに、順序を指定したセットを一括レンダリングします。パノラマに対応しています。
compose_screenshot	1枚のスクリーンショットをレンダリングします（背景、フレーム、見出し、ソース画像）。
create_showcase	生成したスクリーンショットをつなぎ合わせて、1枚のプレビュー用ストリップを作成します。
validate_screenshot	ストアの寸法および形式のルールに照らして画像をチェックします。
list_presets	すべてのプリセットについて、ストアと正確な寸法を一覧表示します。

各ツールはファイルパスと構造化された概要を返すため、エージェントは結果を確認して反復できます。

多言語セット

翻訳は storeshots ではなく、エージェントが行います。各画面の copy に言語キーを追加すると、storeshots はロケールに合った大文字表記でレンダリングします。トルコ語の i は İ に変わり、ドイツ語の ß はそのまま保持されます。storeshots build --lang de を実行すると、単一の言語を再ビルドできます。

パノラマセット

"panorama": { "to": "#1E3A8A" } を追加すると、各パネルの単色背景がセット全体にわたる横方向のグラデーションになり、パネルごとに分割されます。ストアで横に並べると、スクリーンショットが途切れのない1枚の画像のように見えます。

カスタムフレーム

特定のデバイスの見た目を使いたい場合は、独自のフレーム PNG（画面が見える部分は透明）と、スクリーンショットが収まるピクセル矩形を指定します。

{
  "frame": {
    "image": "./frames/iphone-16-pro.png",
    "screenX": 40, "screenY": 40,
    "screenWidth": 1080, "screenHeight": 2280
  }
}

storeshots.json で "frame" として使います。すべてのプリセットに同じフレームを指定することも、{ "ios-phone": {…}, "android-phone": {…} } のように指定することもできます。また、storeshots compose --frame frame.png --frame-screen 40,40,1080,2280、または compose_screenshot や generate_set ツールに渡すこともできます。パスは設定ファイルからの相対パスで、フレーム画像が変更されると再レンダリングが実行されます。組み込みのフレームを使う場合は、省略してください。

エージェントのセットアップ

プロジェクトの指示。 storeshots init は、プロジェクトのエージェント用指示ファイルに、マーカーで囲まれた短い storeshots セクションを追加します。コーディングエージェント（Claude Code、Codex、Cursor など）は、これによりこのプロジェクトでスクリーンショットを作成する方法を把握できます。つまり、storeshots.json を編集し、storeshots build を実行して、PNG を手動で編集しないことです。

• 既存の AGENTS.md と CLAUDE.md のいずれか、または両方を使用します。CLAUDE.md が @AGENTS.md をインポートするだけの場合、セクションが追加されるのは AGENTS.md のみです。
• どちらのファイルも存在しない場合は、AGENTS.md と、それをインポートする CLAUDE.md を作成します。
• 再実行すると、セクションがその場で更新されます。--no-agents はこの処理をスキップし、storeshots init --agents-only は既存のプロジェクトにセクションを追加します。

Claude Code プラグイン。 同梱のスキルが、ガイド付きワークフローを追加します。コードベースから各画面の利点を見つけ、レンダリング前に見出しの承認を求めます。その後、storeshots.json を最新の状態に保ち、言語を追加し、アップロードの手順を案内します。

/plugin marketplace add mtbun/storeshots-mcp
/plugin install storeshots@storeshots

続いて Claude Code に「このアプリのストア用スクリーンショットを作成して」と依頼してください。

llms.txt は、コマンドと設定形式をエージェント向けに1つのファイルにまとめています。

設計原則

1. 決定論的 — レンダリング処理に AI による画像生成はありません。同じ入力なら、同じピクセルになります。
2. 設定不要 — API キーやアカウントは不要で、完全にオフラインで動作します。
3. ストアの要件に準拠 — 寸法は推奨されるのではなく、強制され、検証されます。
4. エージェントネイティブ — ツールは構造化データを公開し、コピーライティングは本来あるべき場所であるモデル内に留まります。

ロードマップ

• ガイド付きの利点発見ワークフローを備えた Claude Code スキル
• Play Store のフィーチャー画像プリセット（1024 × 500）
• レイアウトのバリエーション — text-top、text-bottom、tilted
• カスタムデバイスフレーム
• パノラマセット
• 増分 build と --watch に対応したプロジェクト設定
• Claude Code プラグインと AGENTS.md / CLAUDE.md の統合
• アプリのプレビュー動画フレーム
• その他のストア（Mac App Store、Chrome Web Store）

貢献

Issue や PR を歓迎します。AGENTS.md には、人間のコントリビューターとコーディングエージェントの両方に向けて、アーキテクチャと規約を記載しています。

ライセンス

MIT