Framegrove: App Store screenshot generator

Framegrove

App Store、Google Play、iPhone Duo 向けのスクリーンショットを生成する MCP サーバー と CLI です。実際のアプリのスクリーンショットとキャプションを渡すと、厳選された56種類のテンプレートから、正確なサイズのストア用スクリーンショットと Apple Creative Assets（Header、Search、Universal）を生成します。無料、MIT ライセンスで、ローカルで動作します。

ウェブエディター：https://framegrove.bamstudio.dev · ソース：https://github.com/tech-bam/framegrove

MCP サーバー

Node.js 20 以降が必要です。

Claude Code

claude mcp add framegrove -- npx -y framegrove mcp

Claude Desktop、Cursor、Windsurf、VS Code、その他のクライアント

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

Codex

codex mcp add framegrove -- npx -y framegrove mcp

テンプレートのフォント（Google Fonts、OFL）は、初回のレンダリング時に ~/.cache/framegrove/fonts へ一度だけダウンロードされます。別のフォルダーを使用するには FRAMEGROVE_FONTS を設定するか、ダウンロードをスキップするには FRAMEGROVE_OFFLINE=1 を設定してください。

ツール

ツール	機能
list_templates	テーマ、向き、デフォルトサイズ、画面数を含む厳選されたテンプレート一覧
list_outputs	App Store、Google Play、iPhone Duo、Creative Assets の正確なサイズ
render_screenshots	テンプレート、スクリーンショットのパス、言語ごとのキャプションを使って PNG を生成
build_project	ウェブエディターで微調整できる編集可能な .sms.json を書き出し
inspect_assets	出力プリセットに対して、書き出した画像のサイズと PNG のアルファチャンネルを確認

プロンプトの例：「Framegrove を使って、./screens にあるアプリのスクリーンショットから、英語とドイツ語の App Store 用スクリーンショットを studio-midnight テンプレートで作成してください。」

CLI

npx framegrove templates
npx framegrove outputs
npx framegrove render --template studio-paper --shots ./screens --lines captions.txt --out ./store
npx framegrove render --template creative-paper-header --shots ./screens --out ./header
npx framegrove inspect ./store/*.png --output iphone-6.9
npx framegrove project --template duo-paper-inner --shots ./inner --out ./editable.sms.json
npx framegrove --help

キャプションファイル：各画面につき1行で、Headline [highlight] | Subtitle の形式です。言語を追加するには --captions-de de.txt を使用します。サイズは --sizes iphone-6.9,ipad-13,android-phone または WxH で指定します。

注意事項

• Apple 向けの PNG は、アルファチャンネルなしの RGB 形式で、正確なサイズで書き出されます。
• Framegrove はシミュレーターのスクリーンショットを撮影したり、App Store Connect にアップロードしたりするものではありません。渡された素材をレンダリングします。
• デバイスごとの切り抜きを確認するには、App Store Connect で Creative Assets をプレビューしてください。

エージェントスキルと Claude Code プラグイン

このリポジトリには、エージェントスキルと、そのスキルをこの MCP サーバーと一緒にバンドルした Claude Code プラグインが含まれています。

claude plugin marketplace add tech-bam/framegrove
claude plugin install framegrove@framegrove

MIT © Framegrove コントリビューター