内容
# Mobbin 技能与 MCP
一种本地优先的 Mobbin 集成，适用于 [Mobbin](https://mobbin.com)，为代理提供了一个持久的设计参考工作流：
- 搜索 Mobbin 的反向工程内部 API，以获取应用、屏幕、流程、网站部分、过滤器、集合和截图。
- 直接将 Mobbin 流程、屏幕和网站部分捕获到一个具有项目感知能力的本地参考存储中。
- 通过技能、MCP 工具、提示、联系表、视觉相似性、PR 参考包和内存导出重用已保存的参考。
Mobbin 没有公共 API。此服务器是通过反向工程其内部端点构建的。
## 快速入门
```bash
npm install -g @aos-engineer/mobbin-mcp
mobbin-mcp auth
mobbin-mcp skills install
mobbin-mcp skills status
```
对于大多数代理工作流，技能安装是推荐的路径。本地 MCP 设置在客户端需要 MCP 工具、资源、提示或内联图像内容时仍然可用。
### 一步捕获 Mobbin 流程
```bash
mobbin-mcp skill capture-flow '{"platform":"web","flow_actions":["Checkout"],"app_name":"Example","feature_area":"checkout","tags":["checkout"],"compute_visual_hashes":true}'
```
生成的工件存储有序步骤、屏幕 URL、热点元数据、模式、元素、源 URL、可选的感知哈希和项目上下文。使用 `capture-screen` 获取单个应用屏幕，使用 `capture-site-sections` 获取 Mobbin 的网站部分参考。
## 技能模式
此存储库现在还提供聚焦的代理技能，以便代理无需将整个 MCP 表面加载到上下文中即可使用 Mobbin 工作流。
源技能位于 `source/skills/`：
- `mobbin-search`
- `mobbin-capture`
- `mobbin-prompts`
- `mobbin-visuals`
- `mobbin-flow-architect` — 研究顶级应用如何在 Mobbin 上处理流程，并将其适应为此项目中的流程规范、任务计划和（经批准后）构建
使用以下命令构建技能工件：
```bash
npm run build
```
生成的技能包被复制到 `dist/skills/` 以及 Codex、Claude Code、Gemini、OpenCode、Pi、Cursor、Rovo Dev、Qoder、Trae、Roo Code、GitHub Copilot 和相关代理的提供程序文件夹中。
在全局安装软件包后，将技能链接到所有支持的全局 CLI/IDE 技能文件夹：
```bash
npm install -g @aos-engineer/mobbin-mcp
mobbin-mcp skills install
```
对于大多数用户，这取代了 MCP 设置。技能不会连接到 MCP 服务器；它们通过 `mobbin-mcp skill ...` 调用相同的软件包，重用相同的 Mobbin 身份验证、API 客户端、本地工件存储、提示生成器和视觉实用程序在 MCP 工具后面。如果您已经将 Mobbin MCP 服务器添加到 Claude Code、Codex 或另一个 CLI，可以在确认 Mobbin 技能出现在工具的技能列表后删除该 MCP 条目。
参见 [docs/SKILLS.md](docs/SKILLS.md) 获取提供程序目标和发布详情。
技能发布通过四个聚焦的能力技能以及 `mobbin-flow-architect` 覆盖了 MCP 工具、资源和提示，`mobbin-flow-architect` 将它们编排成一个参考 → 规范 → 计划 → 构建管道。完整的映射在 [docs/SKILLS.md](docs/SKILLS.md#mcp-coverage) 中有文档记录。
## 当前功能
- 搜索 Mobbin 应用、屏幕、流程、集合和过滤器
- 获取完整截图和可选的主导颜色
- 自动检测活动仓库，环境变量或 cwd
- 将流程、屏幕、网站部分、设计参考、实施笔记、决策和流程步骤捕获到本地项目存储中
- 自动保存有序流程步骤、屏幕 URL、热点元数据、模式、元素、源链接和可选的视觉哈希
- 搜索、更新、删除、编目、导入和导出捕获的工件
- 从保存的屏幕和流程生成视觉联系表
- 计算感知哈希并查找视觉相似的捕获工件
- 生成 PR-ready 参考 Markdown 和差异准备的功能评审报告
- 从 Mobbin 集合元数据中播种本地存储
- 可选地将本地项目存储与文件系统支持的共享存储同步
- 为 Claude Code、Codex、Pi 或 Mem Palace 生成提示就绪的实施、分析、入职和代理特定上下文包
- 将 Mobbin 中的参考应用的流程适应为此项目中的流程规范、任务计划和构建
- 通过技能或 MCP 支持 Claude Code、Codex、Pi 样式的对话代理和 Mem Palace 导出工作流
## 与原始分支的变更
原始上游项目主要是一个用于 Claude 的 Mobbin 浏览器。
此存储库现在添加：
-具有项目意识的本地工件存储
- 捕获 CRUD 和编目
- MCP 资源和可重用的提示
- 多代理上下文生成
- 跨会话和系统重用/导入工作流
- 诊断和测试
更改的假设：
- 不再仅限于 Claude
- 不再仅限于搜索
- 不再局限于暂时的临时灵感查找
删除了旧形状的限制：
- 不需要手动为每个项目设置引用
- 不依赖每次重用流程时都编写临时提示
- 没有下游代理的 MCP 资源/提示
## 工具
### 搜索 Mobbin
| 工具 | 描述 |
| --- | --- |
| `mobbin_search_apps` | 按类别和平台搜索和浏览应用 |
| `mobbin_search_sites` | 按名称、标语或关键词搜索 Mobbin 的独立网站集合 |
| `mobbin_get_site_sections` | 获取带有图像 URL、源 URL、模式、裁剪边界和视频段元数据的可复制网站部分 |
| `mobbin_search_screens` | 按 UI 模式、元素或文本内容搜索 iOS、Android 和 Web 应用屏幕 |
| `mobbin_search_flows` | 按操作类型搜索用户流程 |
| `mobbin_quick_search` | 应用或网站名称的快速自动完成搜索 |
| `mobbin_popular_apps` | 获取按类别分组的热门应用 |
| `mobbin_list_collections` | 列出已保存的集合 |
| `mobbin_get_screen_detail` | 获取特定屏幕的完整截图，带有可选的主导颜色提取 |
| `mobbin_get_filters` | 获取所有可用的过滤器值 |
### 捕获和参考工作流
| 工具 | 描述 |
| --- | --- |
| `mobbin_doctor` | 检查身份验证、项目检测、工件存储和运行时健康状况 |
| `mobbin_get_project_context` | 自动检测当前仓库/工作目录并显示捕获状态 |
| `mobbin_capture_artifact` | 将屏幕、流程、笔记、决策和实现参考保存到本地项目索引中 |
| `mobbin_capture_flow_from_search` | 搜索 Mobbin 流程并保存所选的 iOS、Android 或 Web 流程，带有有序步骤、热点、元数据和可选的视觉哈希 |
| `mobbin_capture_screen_from_search` | 搜索 Mobbin 屏幕并保存所选屏幕，带有模式、元素、源 URL 和可选的视觉哈希 |
| `mobbin_capture_site_sections` | 获取 Mobbin 网站部分并保存所选的有序 Web 部分，带有图像 URL、页面 URL、模式元数据和可选的视觉哈希 |
| `mobbin_get_captured_artifact` | 按 ID 获取单个捕获的工件 |
| `mobbin_update_captured_artifact` | 更新现有工件的元数据、笔记、步骤和决策 |
| `mobbin_delete_captured_artifact` | 从本地项目索引中删除工件 |
| `mobbin_search_captured_artifacts` | 按关键词、标签、类型、应用或功能区域搜索以前捕获的工件 |
| `mobbin_get_capture_catalog` | 返回类型、标签、应用、模式和功能区域的面计数 |
| `mobbin_export_captured_artifacts` | 将工件导出为 JSON、Markdown、提示包或 Mem Palace JSONL |
| `mobbin_import_captured_artifacts` | 从以前的导出中导入工件 |
| `mobbin_generate_feature_prompt` | 从捕获的工件生成实现、分析或入职提示 |
| `mobbin_generate_agent_context` | 为 Claude Code、Codex、Pi 或 Mem Palace 生成代理特定上下文 |
| `mobbin_generate_flow_contact_sheet` | 从保存的工件生成拼接的 PNG 联系表 |
| `mobbin_find_similar_artifacts` | 使用感知哈希查找视觉相似的工件 |
| `mobbin_generate_pr_reference` | 从选定的参考中生成 PR-ready Markdown |
| `mobbin_sync_collections_to_artifacts` | 从 Mobbin 集合元数据中播种本地存储 |
| `mobbin_generate_feature_review` | 生成差异准备的功能评审报告 |
| `mobbin_sync_shared_store` | 将本地项目存储与共享文件系统存储推送、拉取或合并 |
## 资源
| 资源 | 描述 |
| --- | --- |
| `mobbin://project/context` | 从 git 或 cwd 检测到的当前项目上下文 |
| `mobbin://project/captures` | 当前项目的捕获工件索引为 JSON |
| `mobbin://project/catalog` | 当前项目的工件编目和面计数 |
## 提示
| 提示 | 描述 |
| --- | --- |
| `mobbin_feature_implementation_prompt` | 从捕获的工件中构建可重用的实现提示 |
| `mobbin_feature_analysis_prompt` | 从捕获的工件中构建功能分析提示 |
| `mobbin_onboarding_brief_prompt` | 从捕获的工件中构建入职简介提示 |
## 设置
### 先决条件
- Node.js 18+
- 一个 [Mobbin](https://mobbin.com) 账户（免费或付费）
## 安装
已发布的软件包：
```text
@aos-engineer/mobbin-mcp
```
推荐的技能优先安装路径：
```bash
npm install -g @aos-engineer/mobbin-mcp
mobbin-mcp auth
mobbin-mcp skills install
```
贡献者和备用路径：
### 选项 A：从 GitHub 运行
```bash
npx -y github:aos-engineer/mobbin-mcp auth
```
### 选项 B：从本地检查运行
```bash
git clone https://github.com/aos-engineer/mobbin-mcp.git
cd mobbin-mcp
npm install
npm run build
node dist/index.js
```
### 1. 身份验证
**选项 A：全局安装（推荐用于 Claude Code）**
```bash
mobbin-mcp auth
```
**选项 B：npm 包路径**
```bash
npx -y @aos-engineer/mobbin-mcp auth
```
**选项 C：GitHub 备用**
```bash
npx -y github:aos-engineer/mobbin-mcp auth
```
**选项 D：本地检查**
```bash
node dist/index.js auth
```
这是一次性设置，每个机器一次。会话存储在全局范围内，并在项目之间自动重用。
CLI 期望两个 Supabase 身份验证 cookie 片段合并成一行：
1. 打开 [mobbin.com](https://mobbin.com) 并登录
2. 打开浏览器控制台（`Cmd+Option+J`）
3. 运行：
```js
copy(
document.cookie
.split("; ")
.filter((c) => c.startsWith("sb-ujasntkfphywizsdaapi-auth-token.0=") || c.startsWith("sb-ujasntkfphywizsdaapi-auth-token.1="))
.join("; ")
)
```
4. 将该值粘贴到 CLI 提示符中
您的会话保存在 `~/.mobbin-mcp/auth.json`（或 `XDG_CONFIG_HOME/mobbin-mcp/auth.json`）中，并自动刷新。
> **复制了什么？** 这只复制了 Mobbin 身份验证所需的两个 Supabase 身份验证 cookie 片段。这些是敏感的会话凭证。它们存储在您的本地计算机上，路径为 `~/.mobbin-mcp/auth.json`，并且永远不会发送到除 Mobbin 的 API 之外的任何地方。
**选项 B：环境变量（手动）**
1. 在 Chrome 中打开 [mobbin.com](https://mobbin.com) 并登录
2. 打开 DevTools（`Cmd+Option+I`）→ **应用程序** 选项卡 → **Cookie** → `https://mobbin.com`
3. 复制 `sb-ujasntkfphywizsdaapi-auth-token.0` 和 `sb-ujasntkfphywizsdaapi-auth-token.1` 的完整值
4. 将它们合并成一个字符串：
```
sb-ujasntkfphywizsdaapi-auth-token.0=<value0>; sb-ujasntkfphywizsdaapi-auth-token.1=<value1>
```
5. 将 `MOBBIN_AUTH_COOKIE` 设置为该值（参见步骤 2 下方）
### 环境变量
| 变量 | 目的 |
| --- | --- |
| `MOBBIN_AUTH_COOKIE` | 手动身份验证输入：组合的 `sb-...auth-token.0/.1` cookie 对 |
| `MOBBIN_DATA_DIR` | 覆盖默认数据目录 |
| `MOBBIN_AUTH_FILE` | 覆盖身份验证会话文件路径 |
| `MOBBIN_PROJECT_ROOT` | 显式项目根目录，用于捕获存储 |
| `PROJECT_ROOT` | 替代显式项目根目录 |
| `MOBBIN_BASE_URL` | 覆盖 Mobbin 站点基准 URL |
| `MOBBIN_SUPABASE_URL` | 覆盖 Mobbin Supabase 项目 URL |
| `MOBBIN_SUPABASE_PUBLISHABLE_KEY` | 覆盖 Mobbin Supabase 可发布密钥 |
| `MOBBIN_SUPABASE_COOKIE_PREFIX` | 覆盖 Supabase 身份验证 cookie 前缀 |
### 2. 将技能安装到您的 CLI 或 IDE 中
技能是 Claude Code、Codex、Gemini、OpenCode、Pi、Cursor、Rovo Dev、Qoder、Trae、Roo Code、GitHub Copilot 和相关代理的推荐设置。
```bash
mobbin-mcp skills install
mobbin-mcp skills status
```
稍后升级：
```bash
npm install -g @aos-engineer/mobbin-mcp@latest
mobbin-mcp skills install --force
```
这会创建到软件包的已构建技能的全局符号链接。安装后重启任何正在运行的 CLI 或 IDE，以便它可以发现它们。
您不需要在安装技能时添加 Mobbin MCP 服务器。如果您专门需要原生 MCP 工具/资源/提示或 MCP 内联图像响应，请保留 MCP。
### 可选：添加 MCP 到 Claude Code
推荐的全局安装路径：
```bash
claude mcp add mobbin -- mobbin-mcp
```
npm 备用：
```bash
claude mcp add mobbin -- npx -y @aos-engineer/mobbin-mcp
```
GitHub 备用:
```bash
claude mcp add mobbin -- npx -y github:aos-engineer/mobbin-mcp
```
如果您使用了 CLI 身份验证命令（选项 A），则不需要额外的配置 — 服务器会从 `~/.mobbin-mcp/auth.json` 自动读取。
如果使用环境变量（选项 B），请在添加时传递：
推荐的全局安装路径：
```bash
claude mcp add mobbin -e MOBBIN_AUTH_COOKIE="sb-ujasntkfphywizsdaapi-auth-token.0=...; sb-ujasntkfphywizsdaapi-auth-token.1=..." -- mobbin-mcp
```
npm 备用：
```bash
claude mcp add mobbin -e MOBBIN_AUTH_COOKIE="sb-ujasntkfphywizsdaapi-auth-token.0=...; sb-ujasntkfphywizsdaapi-auth-token.1=..." -- npx -y @aos-engineer/mobbin-mcp
```
GitHub 备用:
```bash
claude mcp add mobbin -e MOBBIN_AUTH_COOKIE="sb-ujasntkfphywizsdaapi-auth-token.0=...; sb-ujasntkfphywizsdaapi-auth-token.1=..." -- npx -y github:aos-engineer/mobbin-mcp
```
### 可选：添加 MCP 到 Codex
如果您的 Codex 运行时配置为使用 stdio MCP 服务器，请首选已安装的二进制文件：
```json
{
"mcpServers": {
"mobbin": {
"command": "mobbin-mcp"
}
}
}
```
软件包备用：
```json
{
"mcpServers": {
"mobbin": {
"command": "npx",
"args": ["-y", "@aos-engineer/mobbin-mcp"]
}
}
}
```
对于本地检查，请使用：
```json
{
"mcpServers": {
"mobbin": {
"command": "node",
"args": ["/绝对路径/to/mobbin-mcp/dist/index.js"]
}
}
}
```
### 可选：Claude 桌面版 MCP
对于 Claude 桌面版，最简单的路径是一键 **MCPB 包**（`.mcpb`）。使用 `npm run build:mcpb` 构建它，然后双击 `dist-mcpb/mobbin-mcp.mcpb` 或将其拖入 **设置 → 扩展**。有关 Claude 桌面版、Claude Code 和 Codex 的详细信息，请参见 [docs/DESKTOP.md](docs/DESKTOP.md)。
要手动配置，请在您的 Claude 桌面版配置中添加：
```json
{
"mcpServers": {
"mobbin": {
"command": "npx",
"args": ["-y", "@aos-engineer/mobbin-mcp"]
}
}
}
```
### 可选：本地 MCP 替代
如果您更喜欢在安装 `npx` 之前在本地锁定，请构建一次本地版本，并将您的 MCP 客户端直接指向编译后的服务器：
```json
{
"mcpServers": {
"mobbin": {
"command": "node",
"args": ["/绝对路径/to/mobbin-mcp/dist/index.js"]
}
}
}
```
## 示例提示
- "我正在为一款外卖应用设计一个结账流程 — 显示像 DoorDash 和 Uber Eats 这样的顶级应用如何处理它"
- "调出 Duolingo 入职流程并带我了解每一步的设计决策"
- "找到使用底部表格的登录屏幕并提取配色方案 — 我需要为我们的身份验证重新设计提供灵感"
- "比较金融科技应用如何处理设置屏幕 — 从 Robinhood、Cash App 和 Venmo 中显示示例"
- "在旅行应用中搜索具有卡片式布局的屏幕，然后显示其中最好的一个"
- "当前 iOS 上最流行的 UI 模式是什么？ 显示顶级屏幕"
- "将此入职流程保存为捕获的工件，并为其添加 `signup`、`ios` 和 `trust-building` 标签"
- "找到第一个市场应用的网络结账流程，并使用视觉哈希捕获它以便我们的购物车重新设计"
- "从此 Mobbin 网站参考中捕获网页部分作为网页设计工件"
- "为使用我们保存的 `checkout` 引用生成 Codex 就绪的实现提示"
- "将我们保存的增长入职捕获导出为 Mem Palace JSONL"
- "给我一个计费领域的入职简介，使用所有标记为 `billing` 的内容"
- "为我们保存的入职参考生成联系表"
- "找到与此保存的结账屏幕视觉相似的工件"
- "为计费重新设计工作生成 PR 参考 Markdown"
- "将我的 Mobbin 收藏同步到此项目的本地工件存储中"
- "比较预期的入职参考与实际交付的入职工件"
## 工作原理
Mobbin 是一个 Next.js 应用，背后由 Supabase 支持。技能和 MCP 服务器通过调用 Mobbin 的内部 API 路线（`/api/content/search-apps`、`/api/content/search-screens` 等）使用您的会话 cookie 进行身份验证。令牌会在过期前通过 Supabase 的 `/auth/v1/token` 端点自动刷新，并在使用 CLI 身份验证方法时持久保存到 `~/.mobbin-mcp/auth.json`。
屏幕图像通过 Mobbin 的 Bytescale CDN 提供。MCP 的 `mobbin_get_screen_detail` 工具可以返回获取的截图作为内联图像内容块。技能路径使用 `mobbin-search` / `screen-detail`，它在 CLI 输出中打印元数据和可选的主导颜色。
捕获的工件存储在 `~/.mobbin-mcp/projects/<project-id>/artifacts.json` 下的项目感知索引中。CLI 会自动检测活动仓库（如果可能），然后回落到当前工作目录。这使得保存的 Mobbin 引用在技能和 MCP 客户端之间可移植，同时仍然限定在您正在处理的项目中。
重复的 Mobbin 读取会在短时间内缓存，以减少对常见搜索、自动完成、筛选、集合和热门应用查找的冗余 API 流量。
工件可以包括：
- 功能区域、旅程、会话名称和参与者
- 实现提示和决策日志
- 有序步骤，包含模式、元素和热点几何
- 对 URL 或其他已保存工件的引用
- 集合链接和预览屏幕派生的引用
- 用于相似性搜索的缓存视觉哈希
## 推荐工作流程
1. 在 Mobbin 中搜索相关应用、屏幕和流程。
2. 使用 `mobbin_get_screen_detail` 检查截图。
3. 使用 `mobbin_capture_flow_from_search`、`mobbin_capture_screen_from_search`、`mobbin_capture_site_sections` 或更低级别的 `mobbin_capture_artifact` 保存持久引用。
4. 使用功能区域、旅程和决策笔记标记和组织它们。
5. 使用 `mobbin_search_captured_artifacts` 和 `mobbin_get_capture_catalog` 审查保存的语料库。
6. 根据需要生成联系表、PR 参考包或功能审查报告。
7. 从保存的工件中生成实现、分析、入职或特定于代理的上下文。
8. 可选地，将项目存储与基于共享文件系统的存储同步，以供团队重复使用。
## 存储布局
```text
~/.mobbin-mcp/
auth.json
projects/
<project-id>/
artifacts.json
```
服务器是本地优先的。它不需要共享后端即可使用，但捕获的工件可以导出并重新导入到不同的机器、仓库或代理。
## 开发
```bash
npm install
npm run build
npm run lint
npm test
```
其他文档：
- [架构](docs/ARCHITECTURE.md)
- [可移植性](docs/PORTABILITY.md)
- [技能](docs/SKILLS.md)
- [桌面应用（Claude Desktop，Claude Code，Codex）](docs/DESKTOP.md)
- [工作流程](docs/WORKFLOWS.md)
- [发布](docs/RELEASE.md)
- [实现想法](docs/IMPLEMENTATION_IDEAS.md)
## 项目结构
```
src/
index.ts # MCP 服务器入口点、CLI 路由和工具注册
constants.ts # API URL、密钥和配置
types.ts # Mobbin 模型和捕获工件的 TypeScript 接口
cli/
auth.ts # 交互式 CLI 身份验证流程
services/
auth.ts # 令牌解析、过期检查和自动刷新
api-client.ts # 带有缓存/超时功能的 Mobbin API 端点的 HTTP 客户端
utils/
auth-store.ts # 持久会话存储（~/.mobbin-mcp/auth.json）
artifact-store.ts # 项目感知捕获存储、搜索、导入/导出和提示生成
capture-workflows.ts # 直接流程/屏幕/站点部分捕获编排
formatting.ts # 工具响应的 Markdown 格式化程序
project-context.ts # Git / cwd 自动发现，用于仓库感知捕获
docs/
ARCHITECTURE.md # 当前架构和 MCP 界面
PORTABILITY.md # 代理可移植性策略
SKILLS.md # 技能安装、升级和 MCP 覆盖
WORKFLOWS.md # 推荐的使用模式
RELEASE.md # 发布检查清单和 npm 发布过程
IMPLEMENTATION_IDEAS.md # 下一步扩展想法
test/
*.test.js # 捕获存储和项目检测的 Node 测试覆盖
```
## 路线图
优先事项：
1. 在发现其他 Mobbin 集合内容端点后，支持项目级别的集合同步。
2. 实现基于嵌入式或混合视觉/文本相似性排名，超越感知哈希。
3. 自动捕获已发布的应用程序流的截图，以便进行直接的预期与实际比较。
4. 支持基于共享 HTTP 的团队存储，而不仅仅是文件系统同步。
5. 从保存的引用中提取设计系统，生成可重用的实现资产。
## 许可证
MIT
MCP 配置
以下是此 MCP Server 的配置信息，可直接复制到 Cursor 或其他 MCP 客户端中使用。
mcp.json
连接信息
猜你喜欢
暂无推荐服务器