AppScreenStudio

AppScreenStudio MCP

让你的 AI Agent 在 AppScreenStudio 中设计 App Store 和 Google Play 截图。

AppScreenStudio 是一款基于浏览器的 App Store 和 Google Play 截图生成器。独立开发者、移动营销人员和 ASO 团队可以上传原始应用屏幕，选择模板，将其放入 iPhone、iPad 和 Android 设备边框中，编辑标题、背景和图片，然后一键导出所有所需的商店尺寸。可选的 AI 功能可用于本地化、吉祥物、背景和素材。无需安装：直接在浏览器中运行。

此代码仓库包含托管版 AppScreenStudio MCP 服务的文档和客户端配置。服务本身运行在 www.appscreenstudio.com 上，因此无需在此构建或运行任何内容。

MCP 服务的功能

此服务将 MCP 客户端（Claude Code、Cursor、Codex、Gemini CLI、VS Code 等）连接到你在浏览器中打开的 AppScreenStudio 编辑器。你的 Agent 可以读取项目，添加和编辑卡片、文本、图片、手机设备和 HTML 块，切换模板、设备和尺寸，上传应用屏幕，生成 AI 素材和背景，将整套内容翻译成新语言，填写商店上架文案，并渲染预览条来检查自己的工作。每项更改都会实时显示在编辑器中，你也可以像撤销其他编辑一样在其中撤销更改。

端点	https://www.appscreenstudio.com/api/mcp
传输方式	Streamable HTTP
认证	Authorization: Bearer <token> 标头
注册表名称	com.appscreenstudio/app-screen-studio

获取令牌

1. 在 appscreenstudio.com 登录，并在编辑器中打开一个项目。
2. 在编辑器中点击 Connect Your Agent。
3. 打开 MCP Details。其中会显示端点、你的令牌，以及可直接粘贴的 MCP 配置。
4. 保持该编辑器标签页处于打开状态。 服务会将每次工具调用转发到已打开的编辑器，因此关闭标签页后，调用会因“No editor is connected”而失败。

令牌属于你的账户，在你点击 Rotate token 之前会一直保持不变；点击后，旧令牌将失效。请像对待密码一样妥善保管它。

客户端配置

将 YOUR_TOKEN 替换为编辑器中的令牌。

Claude Code

claude mcp add --transport http app-screen-studio https://www.appscreenstudio.com/api/mcp \
  --header "Authorization: Bearer YOUR_TOKEN"

Cursor

将以下内容添加到 ~/.cursor/mcp.json（所有项目）或 .cursor/mcp.json（单个项目）。这与编辑器中 MCP config 复制按钮提供的配置相同。

{
  "mcpServers": {
    "app-screen-studio": {
      "url": "https://www.appscreenstudio.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      }
    }
  }
}

Codex

将以下内容添加到 ~/.codex/config.toml：

[mcp_servers.app-screen-studio]
url = "https://www.appscreenstudio.com/api/mcp"
bearer_token_env_var = "APPSCREENSTUDIO_MCP_TOKEN"

然后在运行 Codex 的 shell 中导出令牌：

export APPSCREENSTUDIO_MCP_TOKEN="YOUR_TOKEN"

Gemini CLI

gemini mcp add -t http -H "Authorization: Bearer YOUR_TOKEN" app-screen-studio https://www.appscreenstudio.com/api/mcp

或者将以下内容添加到 ~/.gemini/settings.json：

{
  "mcpServers": {
    "app-screen-studio": {
      "httpUrl": "https://www.appscreenstudio.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      }
    }
  }
}

VS Code

将以下内容添加到 .vscode/mcp.json。VS Code 会询问一次令牌，并将其安全存储。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "appscreenstudio-token",
      "description": "AppScreenStudio MCP token (editor: Connect Your Agent, MCP Details)",
      "password": true
    }
  ],
  "servers": {
    "app-screen-studio": {
      "type": "http",
      "url": "https://www.appscreenstudio.com/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:appscreenstudio-token}"
      }
    }
  }
}

其他客户端

任何支持带自定义标头的 Streamable HTTP 的 MCP 客户端都可以使用。将其指向 https://www.appscreenstudio.com/api/mcp，并发送 Authorization: Bearer YOUR_TOKEN。

工具

工具	功能
get_editor_snapshot	读取打开的编辑器中某个平台的快照。
update_text	更新打开的编辑器中截图上的文本图层。
add_text	在打开的编辑器中截图上添加文本图层。
remove_text	移除打开的编辑器中截图上的文本图层。
add_screenshot	在某个平台组的末尾添加一张卡片。
update_screenshot	更新卡片及其主手机，包括背景、手机位置和应用屏幕、图案、渐隐效果或阴影。
remove_screenshot	从打开的编辑器中移除一张截图。
add_asset	在卡片上添加图像图层。
update_asset	更新打开的编辑器中截图上的图像图层。
remove_asset	移除打开的编辑器中截图上的图像图层。
add_div	在卡片上添加方框图层。
update_div	更新卡片上的方框图层。
remove_div	移除打开的编辑器中截图上的方框图层。
add_phone	在打开的编辑器中为截图卡片添加另一部手机。
update_phone	更新通过 add_phone 添加的额外手机。
remove_phone	移除通过 add_phone 添加的额外手机。
reorder_element	在同类图层中将一个图层向前或向后移动一层。
set_template	设置打开项目的模板。
update_template_color	更新打开项目模板中的一种颜色。
set_resolution	设置某个平台组的像素尺寸。
set_device	设置某个平台组的设备。
set_phone_color	设置某个平台组的设备颜色。
set_show_notch	显示或隐藏某个平台组上的刘海。
set_squircle_frame	启用或停用某个平台组上的圆角方形边框。
set_link_texts	链接或取消链接不同平台组中匹配的文本图层。
rename_project	重命名打开的项目。
undo	撤销打开的编辑器中的上一次编辑。
redo	重做打开的编辑器中上一次撤销的编辑。
search_google_fonts	按字体系列名称、类别或两者搜索 Google Fonts。
add_project_font	将一个 Google Fonts 字体系列添加到打开的项目。
list_library	列出此账户中保存的素材或吉祥物（不包括截图或背景）。
get_sprite	以与 list_library 项相同的结构返回一个已保存的素材或吉祥物，包括 spriteSheet 和 poses。
generate_asset	使用 AI 生成素材精灵图，并保存到账户素材库。
generate_mascot	使用 AI 生成吉祥物精灵图，并保存到账户素材库。
generate_background	为一张卡片生成 AI 背景。
update_store_listing	更新当前语言的 App Store 或 Google Play 商店列表字段。
capture_platform_strip	返回一张 JPEG，其中并排展示某个平台组的所有卡片，呈现效果与编辑器渲染结果一致。
upload_image	为打开的项目准备图像上传。
duplicate_screenshot	复制一张截图，并将副本紧接着插入原图之后。
copy_screenshot	将一张截图复制到另一个平台组。
move_screenshot	在某个平台组内向左或向右移动一张截图。
set_language	将打开的编辑器切换到项目中已有的语言。
ai_translate	使用与编辑器相同的 AI 本地化流程，通过翻译当前语言添加最多 5 种语言。
add_platform_set	向打开的项目添加一个平台组。
remove_platform_set	移除一个额外的平台组。
set_project_background	设置或清除项目背景图像。
set_realistic_frame	启用或停用某个平台组上的真实设备边框。
report_mcp_feedback	发现问题时，报告错误、意外的工具结果或对这些 MCP 工具的建议。
rate_this_mcp	为刚完成任务中这些 MCP 工具的表现评分，范围为 1 到 5 星。
AI 工具（generate_asset、generate_mascot、generate_background、ai_translate）会消耗你账户中的 AppScreenStudio AI 积分。

示例提示词

• “读取我的 AppScreenStudio 项目，并将每条标题改写为不超过五个词的优势描述。”
• “上传 ./screenshots 中的屏幕截图，每张卡片放一张，为每张卡片添加标题，然后向我展示整组卡片。”
• “将 iOS 套装切换为逼真的 3D iPhone 边框，并让每部手机稍微倾斜，左右交替。”
• “将 iOS 卡片复制到 Android 套装，并调整所有不适应新尺寸的内容。”
• “将项目翻译成德语、日语和西班牙语，然后通过预览条检查每种语言。”
• “为我的预算应用生成一个友好的吉祥物，并将它放在第一张卡片上。”
• “为当前语言撰写 App Store 副标题、宣传文本和关键词。”

链接

• 网站：www.appscreenstudio.com
• 模板：www.appscreenstudio.com/en/templates
• 定价：www.appscreenstudio.com/en/pricing

许可证

此代码库中的文档和配置文件根据 MIT 许可证 发布。AppScreenStudio 服务、托管的 MCP 服务以及 AppScreenStudio 名称和素材均不受此许可证约束。