Framegrove: App Store screenshot generator

Name: Framegrove: App Store screenshot generator
Author: tech-bam

作者：tech-bamバージョン 1.0.0i★ 1 (リポジトリ全体のスター)iパソコンで動く

レジストリ名io.github.tech-bam/framegrove

インストール方法

What it does

Render App Store, Google Play and iPhone Duo screenshots and Apple Creative Assets from templates.

Connects パソコンで動く
Account or key No key needed
Category ウェブ・ブラウザ

インストール

使っているAIアプリを選んで、設定をコピーしてください。

チェック 3/3 合格 · あなたのパソコンで動きます · ✓ コマンド確認済み 2026年11月14日

まず：どの AI を使っていますか？

ClaudeWeb · アプリ · スマホChatGPTWebClaude CodeターミナルCursorコードエディタVS Codeコードエディタその他その他のアプリ

使っているアプリを選ぶと、下に手順が表示されます。

Claude につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
パソコン版 Claude アプリの設定ファイルを開く
SettingsDeveloperEdit Config
完了

この設定を貼り付けて保存

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

完了

Claude を終了してもう一度開く
完了
試してみる
Framegrove: App Store screenshot generator を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude が Framegrove: App Store screenshot generator を使っていると言うか、回答に Framegrove: App Store screenshot generator のツール名が出れば接続成功です

追加の設定 2 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

FRAMEGROVE_FONTS Optional folder for the template font cache (default ~/.cache/framegrove/fonts).
FRAMEGROVE_OFFLINE Set to 1 to skip the one-time font download.

説明は英語の原文のままです。

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

ChatGPT はまだ Framegrove: App Store screenshot generator につなげません

Framegrove: App Store screenshot generator はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません

代わりにできること

A · Framegrove: App Store screenshot generator につなげるアプリを使う

Claude の手順 →先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません
Claude Code の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）
Cursor の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）
VS Code の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）

B · ウェブ・ブラウザの中で ChatGPT につなげる別のサーバー

同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました

Firecrawl MCP Server✓ ChatGPT
webclaw✓ ChatGPT
Oxylabs MCP✓ ChatGPT

Claude Code につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
完了

このコマンドを貼り付けて Enter

claude mcp add --scope user framegrove -- npx -y framegrove mcp

完了

Claude Code で /mcp と入力
Framegrove: App Store screenshot generator が一覧にあり、接続済みと表示されれば OK です
完了
試してみる
Framegrove: App Store screenshot generator を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude Code が Framegrove: App Store screenshot generator を使っていると言うか、回答に Framegrove: App Store screenshot generator のツール名が出れば接続成功です

追加の設定 2 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

FRAMEGROVE_FONTS Optional folder for the template font cache (default ~/.cache/framegrove/fonts).
FRAMEGROVE_OFFLINE Set to 1 to skip the one-time font download.

説明は英語の原文のままです。

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Cursor につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
このボタンで Cursor を開く
Cursor で開く
Cursor がインストールの確認をするので Install を押します
完了
Cursor の AI チャットを Agent モードで開く
完了
試してみる
Framegrove: App Store screenshot generator を使って、私に何ができるか教えて、1 つやってみせて
✓ Cursor が Framegrove: App Store screenshot generator を使っていると言うか、回答に Framegrove: App Store screenshot generator のツール名が出れば接続成功です

追加の設定 2 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

FRAMEGROVE_FONTS Optional folder for the template font cache (default ~/.cache/framegrove/fonts).
FRAMEGROVE_OFFLINE Set to 1 to skip the one-time font download.

説明は英語の原文のままです。

メニュー名は 2026年11月11日に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

VS Code につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
このボタンで VS Code を開く
VS Code で開く
VS Code がインストールの確認をするので Install を押します
完了
VS Code の AI チャットを Agent モードで開く
完了
試してみる
Framegrove: App Store screenshot generator を使って、私に何ができるか教えて、1 つやってみせて
✓ VS Code が Framegrove: App Store screenshot generator を使っていると言うか、回答に Framegrove: App Store screenshot generator のツール名が出れば接続成功です

追加の設定 2 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

FRAMEGROVE_FONTS Optional folder for the template font cache (default ~/.cache/framegrove/fonts).
FRAMEGROVE_OFFLINE Set to 1 to skip the one-time font download.

説明は英語の原文のままです。

メニュー名は 2026年11月11日に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください

MCP を使えるアプリをすべて見る →

JSON 設定は下の「開発者向け」にあります

つまずいたら？Framegrove: App Store screenshot generator を使っている人に聞いてみましょう💬 ディスカッション →

開発者向け：ターミナルのコマンドと JSON 設定

パソコンにインストール

Claude Code

claude mcp add --scope user framegrove -- npx -y framegrove mcp

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

{
  "servers": {
    "framegrove": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "framegrove",
        "mcp"
      ]
    }
  }
}

自分で入力する値

FRAMEGROVE_FONTS env
Optional folder for the template font cache (default ~/.cache/framegrove/fonts).
FRAMEGROVE_OFFLINE env
Set to 1 to skip the one-time font download.

説明は英語の原文のままです。

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

ひと目でわかる

GitHubスター i: 1 (リポジトリ全体のスター)
このリポジトリには複数の MCP があり、スターは順位で1件だけ数えます
週あたりのダウンロードi: 49/週
ライセンス i: MIT
接続方法: パソコンで動く
トランスポート: stdio
最新バージョンi: 1.0.0
カテゴリi: ウェブ・ブラウザ
レジストリ公開日i: 2026年10月6日
コードの最終更新i: 2026年11月1日
作者: tech-bam
パッケージ: npm: framegrove
リポジトリ: tech-bam/framegrove
ウェブサイト: framegrove.bamstudio.dev
レジストリでの状態: 有効

使えるアプリ

このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。

パソコン上で動かせるアプリ

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

すべてのアプリと長所・短所 →

できること

パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月14日にチェック

✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント tech-bam で確認済みです
✓ 合格
今もメンテナンスされている
コードの最終更新：13 日前
✓ 合格
ライセンスがある
MITを使用
– 対象外
エンドポイントが応答する
これはパソコンで動くため、インターネット上のエンドポイントはありません
– 対象外
OAuthでサインイン
パソコンで動き、代わりにローカルの設定を使います
… 未チェック
ツールの説明に隠れた指示がない
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです

話し合い

質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。

まだ投稿はありません。最初の質問や共有をどうぞ。

ここの投稿は利用者によるもので、PopNx チームのものではありません。

Google でログインして投稿

ユーザーレビュー

まだレビューはありません

Google でログインしてレビューを書く

ウェブ・ブラウザのほかのサーバーとの比較i

このカテゴリのほかの1516件のうち0%よりスターが多い
このカテゴリのほかの1516件のうち43%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの1516件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Framegrove: App Store screenshot generatorは安全ですか？

当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません（サーバー自体がオンラインサービスを呼び出す場合を除きます）。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は13 日前、最新バージョン（1.0.0）がレジストリに届いたのは39 日前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。

代わりに使えるものは？

同じカテゴリには：Browser Use, Scrapling MCP Server, Chrome DevTools MCP

同じカテゴリのほかの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Browser Use

Browser agents and stealth cloud browsers for AI: run web tasks, fill forms, extract data.

作者：browser-use広く使われている↓ 167.3万/週★ 12.1万24 日前更新

パソコンでもクラウドでも✓ 提供元 · browser-use.com

インストール

Scrapling MCP Server

Web scraping with stealth HTTP, real browsers, and Cloudflare bypass. CSS selectors supported.

作者：D4Vinci広く使われている↓ 39.7万/週★ 10.2万9 日前更新

パソコンで動く

インストール

Chrome DevTools MCP

MCP server for Chrome DevTools

作者：ChromeDevTools広く使われている↓ 186.9万/週★ 5.5万3 日前更新

パソコンで動く

インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

Framegrove

App Store, Google Play and iPhone Duo screenshot generator as an MCP server and CLI. Give it real app screenshots and captions; it renders exact-size store screenshots and Apple Creative Assets (Header, Search, Universal) from 56 curated templates. Free, MIT, runs locally.

Web editor: https://framegrove.bamstudio.dev · Source: https://github.com/tech-bam/framegrove

MCP server

Requires Node.js 20+.

Claude Code

claude mcp add framegrove -- npx -y framegrove mcp

Claude Desktop, Cursor, Windsurf, VS Code and other clients

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

Codex

codex mcp add framegrove -- npx -y framegrove mcp

Template fonts (Google Fonts, OFL) download once on the first render to ~/.cache/framegrove/fonts. Set FRAMEGROVE_FONTS to use another folder, or FRAMEGROVE_OFFLINE=1 to skip the download.

Tools

Tool	What it does
`list_templates`	Curated templates with theme, orientation, default sizes and screen count
`list_outputs`	Exact dimensions for App Store, Google Play, iPhone Duo and Creative Assets
`render_screenshots`	Render PNGs from a template, screenshot paths and captions per language
`build_project`	Write an editable `.sms.json` to fine-tune in the web editor
`inspect_assets`	Check exported dimensions and PNG alpha against an output preset

Example prompt: *"Use Framegrove to make App Store screenshots for my app from ./screens, English and German, studio-midnight template."*

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

Captions file: one line per screen, Headline [highlight] | Subtitle. Add languages with --captions-de de.txt. Pick sizes with --sizes iphone-6.9,ipad-13,android-phone or WxH.

Notes

Apple PNG outputs are written as RGB without an alpha channel, at exact dimensions.
Framegrove does not capture simulator screenshots or upload to App Store Connect; it renders what you give it.
Preview Creative Assets in App Store Connect for device-specific cropping.

Agent skill and Claude Code plugin

The repository ships an agent skill and a Claude Code plugin that bundles the skill with this MCP server:

claude plugin marketplace add tech-bam/framegrove

claude plugin install framegrove@framegrove

Framegrove: App Store screenshot generator

What it does

インストール

Node.js を入れる

パソコン版 Claude アプリの設定ファイルを開く

この設定を貼り付けて保存

Claude を終了してもう一度開く

試してみる

代わりにできること

Node.js を入れる

ターミナルを開く

このコマンドを貼り付けて Enter

Claude Code で /mcp と入力

試してみる

Node.js を入れる

このボタンで Cursor を開く

Cursor の AI チャットを Agent モードで開く

試してみる

Node.js を入れる

このボタンで VS Code を開く

VS Code の AI チャットを Agent モードで開く

試してみる

パソコンにインストール

自分で入力する値

ひと目でわかる

使えるアプリ

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

話し合い

ユーザーレビュー

ウェブ・ブラウザのほかのサーバーとの比較i

よくある質問

同じカテゴリのほかの候補

Browser Use

Scrapling MCP Server

Chrome DevTools MCP

作者のREADME

Framegrove

MCP server

Tools

CLI

Notes

Agent skill and Claude Code plugin