Screen Browser

Screen Browser 技能

由指南或编码 Agent 为你的 Web 应用制作配有旁白的演示和教程视频。

让了解你代码库的 Agent 为某项功能制作教程视频。它会使用你的按钮和字段上的文字撰写操作指南；Screen Browser 会在已部署的应用中通过真实浏览器按指南操作，为视频配上旁白和屏幕效果，然后由 Agent 将 MP4 视频连同 GIF、字幕和章节一并交给你。应用发生变化时，修改一行内容并再次提出请求即可。

这是根据请求 “制作一个创建营销活动的教程视频” 制作的 66 秒视频的第一章。从这句话到最终视频的完整过程，包括确切的提示词和每个操作界面，都记录在 Claude Code 指南中。

此代码库为你的 Agent 提供两项内容：

• screenbrowser 技能 — 介绍如何读取你的代码库并编写 Screen Browser 所需的两份指南（登录流程和操作指南）、如何为不同环节选择合适的效果、如何免费检查指南后再录制，以及如何在交付前审核视频。
• MCP 服务配置 — Agent 调用的工具：创建项目、上传指南、检查指南、启动录制任务、轮询任务状态、获取视频。服务本身属于你的 Screen Browser 账户，地址为 https://mcp.screenbrowser.com。

Claude Code、Codex、Cursor 或任何 MCP 客户端都可以使用它。登录在浏览器中完成；无需粘贴密钥。

安装（Claude Code）

将此代码库添加为插件市场并安装插件：

claude plugin marketplace add screenbrowser/skill
claude plugin install screenbrowser@screenbrowser

Agent 首次调用 Screen Browser 工具时，Claude Code 会打开浏览器：登录 Screen Browser，批准连接即可完成。无需复制任何内容。（如果没有提示，请运行 /mcp 并选择 screenbrowser → Authenticate。）

如果没有使用插件系统，请自行注册服务并复制技能：

claude mcp add --transport http screenbrowser https://mcp.screenbrowser.com
cp -r skills/screenbrowser ~/.claude/skills/

使用 API 密钥

如果你的 Agent 无法打开浏览器登录，请在 Screen Browser 的 Settings → API keys 下创建密钥，并将其作为 bearer token 传入：

claude mcp add --transport http screenbrowser https://mcp.screenbrowser.com \
  --header "Authorization: Bearer <your API key>"

任何 MCP 客户端都可以用相同方式连接：通过 https://mcp.screenbrowser.com 使用 Streamable HTTP；交互式登录使用支持动态客户端注册的 OAuth 2.1；也可以使用 Authorization: Bearer <key>。

其他 Agent

此技能是符合开放 Agent Skills 格式的纯 SKILL.md 文件，而服务是标准的 HTTP MCP，因此这两部分也适用于 Claude Code 之外的场景。

Cursor、VS Code、GitHub Copilot 和其他 Agent Plugins 客户端 — 此代码库也是一个 Agent Plugins 软件包（plugin.json、mcp.json、skills/），因此可以从代码库 URL 将其作为插件安装，并在客户端提示时登录。未使用插件的 Cursor：将服务添加到 .cursor/mcp.json（或 Cursor 设置中的全局配置文件），点击服务旁的 Sign in，然后将技能复制到 .cursor/skills/：

{
  "mcpServers": {
    "screenbrowser": { "url": "https://mcp.screenbrowser.com" }
  }
}

mkdir -p .cursor/skills && cp -r skills/screenbrowser .cursor/skills/

OpenAI Codex CLI — 将服务添加到 ~/.codex/config.toml，登录一次，然后将技能复制到 Codex 的技能文件夹：

[mcp_servers.screenbrowser]
url = "https://mcp.screenbrowser.com"

codex mcp login screenbrowser
mkdir -p ~/.codex/skills && cp -r skills/screenbrowser ~/.codex/skills/

其他工具（Gemini CLI、Windsurf、自定义 Agent） — 按照工具的文档，通过 URL 注册 HTTP MCP 服务；支持 OAuth 的客户端会引导你登录，不支持的客户端则使用 API 密钥作为 Authorization: Bearer 标头。将 skills/screenbrowser/SKILL.md 作为说明提供给 Agent（粘贴内容，或让工具的规则文件引用该文件）。MCP 服务本身也提供指南语法资源和 write-tutorial-guide 提示词，因此支持 MCP 提示词的客户端无需技能文件也能使用。

使用方法

视频可以在桌面端录制，也可以在手机或平板上录制（device: iphone、android、ipad，……）；画面可以放在竖屏 9:16 或宽屏 16:9 画布的手机边框中，也可以直接显示屏幕；一次运行对应一台设备。

在 Claude Code 中打开应用的代码仓库，然后提出：

制作一个创建营销活动的教程视频。

Agent 会检查额度、创建项目（并询问你部署后的 URL、演示用户和法律声明），根据你的路由和模板编写指南并进行验证，向你展示指南，然后启动运行，几分钟后提供视频链接。

MCP 服务还提供 write-tutorial-guide 提示词，可引导任何客户端完成相同流程；以及两个资源：screenbrowser://guide-syntax 和 screenbrowser://example-guides。

应用需要满足的条件

• 一个使用电子邮件和密码登录的演示用户：不使用 OAuth、双重身份验证或验证码。请为其填充逼真的数据。
• 要录制的部署后 URL（可以是预发布环境），以及应用会连接的所有主机（API 子域名、身份验证提供商、CDN）。
• 确认你有权录制该应用（应用属于你、属于已授权的客户，或是内部工具）。

发送的内容及其去向

插件执行的所有操作都会发送到同一个地方：Screen Browser MCP 服务 https://mcp.screenbrowser.com，通过 HTTPS 传输，并使用你的 Screen Browser 帐户登录。技能本身只是提供给 Agent 的指令；它不会在你的计算机上运行任何内容，也不会获取任何内容。

当你要求制作视频时，Agent 会向 Screen Browser 发送：

• 项目设置：应用 URL、应用会连接的主机、登录检查、旁白语言和声音；
• 根据代码编写的指南：用简明句子描述屏幕上显示的按钮和字段。保存前请先阅读；Agent 会向你展示指南；
• 演示用户的凭据，作为项目变量。Screen Browser 会对这些凭据加密存储，仅用于录制时登录，绝不会通过任何工具返回。你提供给 Agent 的值会经过其对话；如需避免凭据出现在聊天中，请在 Screen Browser 控制面板的项目页面中设置；
• 运行命令：启动、轮询、取消；只有在你同意后，才会发送录制器的屏幕截图以及 Screen Browser 端运行失败时的日志，以生成故障报告。

它绝不会发送你的源代码。Agent 会在本地读取你的代码仓库以了解界面标签；只有指南文本会离开你的计算机。不会向任何其他服务发送内容。Screen Browser 会保留哪些内容以及保留多久，请参阅隐私政策。

费用

套餐起价为每月 $49，按成品视频分钟数分档。录制前检查指南免费，运行失败不收费。视频时长上限为五分钟；不提供免费套餐。当前价格请见定价页面。

布局

plugin.json                        Agent Plugins manifest (Cursor, VS Code, Copilot, …)
mcp.json                           Agent Plugins MCP config (the URL; sign-in is OAuth)
.claude-plugin/plugin.json         Claude Code plugin manifest
.claude-plugin/marketplace.json    lets this repo act as its own Claude Code marketplace
.mcp.json                          Claude Code MCP server config
skills/screenbrowser/SKILL.md      the skill
skills/screenbrowser/references/   guide syntax reference, worked example
examples/chatamatic/               a real auth guide + main guide pair

指南示例

使用简明语言，每行一个步骤，并描述屏幕上显示的内容。Screen Browser 会将其转换为脚本——包括旁白、重点标注和节奏安排——并根据实时页面解析每个步骤：

Go to https://app.acme.test/campaigns
"Let's create a spring promotion."
Click "New campaign"
Type "Spring promo" into the Name field
Click "Save"
Confirm text "Campaign created" is visible

需要精确定位时，可以使用 Id 和 name= 属性；构建工具生成的类名则不允许使用。完整参考（包括可选的效果指令）请见 skills/screenbrowser/references/guide-syntax.md。

面向 AI Agent 的文档索引

该技能包含 Agent 编写指南和运行录制所需的一切内容。其他信息——前置条件、费用、限制和 API——请参阅 Markdown 格式的公开文档索引 https://screenbrowser.com/llms.txt；此集成的参考文档请见 https://screenbrowser.com/docs/agents/。

支持

欢迎在此代码库中提出有关该技能的问题和想法。有关您的账户或特定录制内容的问题，请使用联系表单：https://screenbrowser.com/contact/。

许可证

MIT。Screen Browser 本身是一项托管服务；此代码库仅包含面向 Agent 的技能、配置和示例。