mcpField
A
AppScreenshots

AppScreenshots

远程服务
github.com/horace68媒体与设计02 周前更新
代码仓库

关于 AppScreenshots

AppScreenshots 的托管 MCP 服务与辅助工具，面向需要制作应用商店截图项目的 Agent。Agent 可用获授权的素材创建、编辑项目并检查设计，之后由用户在网站编辑器中导出。

主要功能

  1. 01创建和编辑截图项目
  2. 02使用获授权的素材
  3. 03在编辑器中预览并检查设计
  4. 04提供连接配置辅助工具
  5. 05可选安装 Agent Skill

适用场景

  1. 01根据截图制作应用商店项目
  2. 02检查并修正截图中的裁切或布局问题
  3. 03将项目链接交给用户导出

MCP 相关

托管 MCP 服务通过 Streamable HTTP 提供工具，并采用 OAuth 授权访问项目和素材。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://appscreenshots.net/api/mcp
一键复制安装命令
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

AppScreenshots MCP

简体中文 · 客户端设置 · 工具 · 故障排除

让你的 AI Agent 创建可编辑的应用截图项目，使用你已授权的素材，利用可用的客户端浏览器工具检查并修正设计，然后交付编辑器链接，以便在 AppScreenshots 中导出网站内容。

预览服务已上线。 2026 年 9 月 18 日，一款协议客户端完成了 OAuth，创建并编辑了一个包含两帧的项目，在网站编辑器中打开该项目，并导出了两张 PNG。Claude Code、Codex、Gemini CLI、Kimi Code、ZCode 和 ChatGPT 的独立集成尚未通过认证。在网站的回环地址回调修复部署之前，使用 127.0.0.1 重定向 URI 的客户端可能无法完成授权；请参阅故障排除。

此公开代码仓库包含连接示例、一个小型安装助手和一个可选的 Agent Skill。MCP 服务在 AppScreenshots 内运行。网站、身份验证、数据库、账单和渲染后端代码仍在现有的私有部署中。该助手不是本地 stdio 服务。

连接 MCP 服务

远程 Streamable HTTP 端点：

https://appscreenshots.net/api/mcp

选择你的客户端并按照其 OAuth 流程操作。使用你的 AppScreenshots 账户登录，选择项目/素材，并可选择允许创建新项目。无需数据库凭据或服务 API 密钥。

Claude Code

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

在 Claude Code 中打开 /mcp 并授权 AppScreenshots。

Codex

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

Gemini CLI、Kimi Code、ZCode 和 ChatGPT 的设置说明，请参阅客户端设置。只需 MCP 即可调用工具；下方的 Skill 可提供可重复使用的设计和预览工作流。

安装可选的 Skill

需要 Git 和 Node.js 20+。不会使用 npm 依赖项或安装钩子。

git clone https://github.com/horace68/appscreenshots-mcp.git
cd appscreenshots-mcp
node bin/appscreenshots.mjs install-skill codex

对于 Claude Code，请将最后一行替换为：

node bin/appscreenshots.mjs install-skill claude

安装程序会将 skills/appscreenshots 复制到 Codex 的 ~/.agents/skills/appscreenshots 或 Claude Code 的 ~/.claude/skills/appscreenshots。如果目标目录已存在，安装程序会拒绝覆盖。重启 Agent 以发现 Skill，然后在 Codex 中使用 $appscreenshots，或在 Claude Code 中使用 /appscreenshots。请单独连接并授权 MCP。

对于项目本地或其他兼容的 Skill 宿主，请明确指定 Skill 的父目录：

node bin/appscreenshots.mjs install-skill custom --dir /path/to/project/.agents/skills --dry-run
node bin/appscreenshots.mjs install-skill custom --dir /path/to/project/.agents/skills

使用客户端要求的目录。安装程序不会自动配置其他客户端，也不会修改现有 MCP 设置。若要更新自定义的 Skill，请将其与此代码仓库中的版本进行比较并合并你的修改；若要进行干净更新，请先将旧目录移到其他位置，然后重新运行安装。若要卸载，只需删除已安装的 appscreenshots Skill 目录。请在网站设置中单独撤销服务访问权限。

连接助手

node bin/appscreenshots.mjs config codex
node bin/appscreenshots.mjs config claude
node bin/appscreenshots.mjs config gemini
node bin/appscreenshots.mjs config kimi
node bin/appscreenshots.mjs doctor

config 会打印一段配置片段，供你合并到现有设置中。doctor 会检查公开的 OAuth 发现信息，不发送凭据；如果发现信息不可用，则以非零状态码退出。它不会进行身份验证或测试渲染。npm 包名尚未发布到 npm registry；请使用此 Git 代码仓库。

尝试一个任务

使用我已授权的截图创建一个英文 App Store 截图项目。选择一个可用模板，保持标题简短，使用可用的浏览器工具打开编辑器，检查截图，修正裁切、剪裁或布局问题，然后把项目链接发给我，以便我在网站上导出。

请先在网站上上传截图，并授权项目或单独授权素材。聊天附件不会自动提供给 MCP。工具参考介绍了编辑、重试、预览和下载。

可用性与数据

默认流程不需要云端渲染：MCP 保存项目，Agent 使用自己的浏览器工具检查网站，用户在编辑器中导出。浏览器访问权限由客户端提供，此 Skill 不会安装浏览器。网站登录与 MCP OAuth 相互独立。如果浏览器或图像工具不可用，视觉验证仍待完成。项目、模板和导出权益仍然适用。请参阅浏览器审查指南。

在设置 → 已连接的 AI 工具中管理或撤销访问权限。本仓库不提供购买、删除、托管式 AI 生成或应用商店发布功能。安全与范围。

开发

npm test
npm run check
npm pack --dry-run

测试涵盖配置生成、安装隔离、覆盖保护、CLI 故障和发现诊断。CI 使用 Node.js 20 和 22，在 Linux、macOS 和 Windows 上运行。一个协议客户端已完成托管式创建、编辑器预览和导出流程；各个客户端集成和资源上传仍未验证。请参阅兼容性矩阵。

MIT 许可证适用于本仓库的辅助工具、示例和 Skill；它不授予对托管服务的访问权限，也不授予对用户资源、付费模板或网站后端的权利。

评论

支持 Markdown

第一次接触 MCP？

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

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