mcpField
F
Framegrove: App Store screenshot generator

Framegrove: App Store screenshot generator

本地服务
framegrove.bamstudio.dev媒体与设计13 周前更新
代码仓库访问官网

关于 Framegrove: App Store screenshot generator

Framegrove 是面向应用团队的本地 MCP 服务和命令行工具，可用现有截图与文案制作应用商店截图及 Apple Creative Assets。它提供 56 个模板，并按指定尺寸渲染成品。

主要功能

  1. 01提供 56 个精选模板
  2. 02用截图和文案渲染商店图片
  3. 03生成 Apple Creative Assets
  4. 04检查尺寸与 PNG 透明度
  5. 05导出可编辑项目文件

适用场景

  1. 01制作本地化 App Store 截图
  2. 02准备 Google Play 和 iPhone Duo 图片
  3. 03生成 Apple Creative Assets
  4. 04按输出预设检查 PNG

MCP 相关

MCP 服务提供浏览模板和输出尺寸、渲染截图、构建可编辑项目及检查导出素材的工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "tech-bam-framegrove": {
      "command": "npx",
      "args": [
        "-y",
        "framegrove"
      ],
      "env": {
        "FRAMEGROVE_FONTS": "<FRAMEGROVE_FONTS>",
        "FRAMEGROVE_OFFLINE": "<FRAMEGROVE_OFFLINE>"
      }
    }
  }
}
启动命令npx -y framegrove
需要配置的环境变量
FRAMEGROVE_FONTSOptional folder for the template font cache (default ~/.cache/framegrove/fonts).
FRAMEGROVE_OFFLINESet to 1 to skip the one-time font download.

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmframegrove1.0.0

工具

5

收录的工具列表 · 更新于 2 周前

此工具无需参数。

详细介绍

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 alpha 通道

示例提示词：“使用 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

说明文字文件：每个屏幕一行，格式为 Headline [highlight] | Subtitle。使用 --captions-de de.txt 添加语言。使用 --sizes iphone-6.9,ipad-13,android-phone 或 WxH 选择尺寸。

注意事项

  • Apple PNG 输出采用 RGB 格式，不含 alpha 通道，且尺寸精准。
  • Framegrove 不会捕获模拟器截图，也不会上传到 App Store Connect；它只渲染你提供的内容。
  • 在 App Store Connect 中预览 Creative Assets，检查针对特定设备的裁切效果。

Agent 技能和 Claude Code 插件

此仓库包含一项 Agent 技能和一个 Claude Code 插件，插件将该技能与此 MCP 服务打包在一起：

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

MIT © Framegrove 贡献者

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。