Mobbin MCP 服务器

这是一个非官方的 MCP 服务器，用于连接 Mobbin —— 一个拥有来自 1,100 多个应用的 60 万+ 屏幕的设计灵感平台。直接从 Claude 搜索应用、浏览截图、探索用户流程并访问您保存的收藏。

Mobbin 没有公开的 API。此服务器是通过对其内部端点进行逆向工程构建的。

工具

深入了解特定应用

mobbin_search_screens 和 mobbin_search_flows 对 Mobbin 进行全局索引——它们不接受 app_id 筛选器（上游 API 会静默忽略针对特定应用的筛选器）。对于“向我展示 Notion 的入职流程”这类查询，请使用两步路径：先使用 mobbin_quick_search 查找应用的 id，然后使用该 app_id 调用 mobbin_get_app_screens 或 mobbin_get_app_flows。详细信息工具从 Mobbin 的服务端渲染（SSR）应用详情页面读取数据，因此它们会返回 Mobbin 为该应用提供的所有内容。

迁移：mobbin_get_filters

无参数形式已被移除。单次响应中的完整分类超出了 MCP 每个工具结果的令牌上限，并迫使代理从临时文件读取结果。传递一个 kind 以将响应范围限定为一个维度：

mobbin_get_filters({ kind: "patterns" })                               // newline list of names
mobbin_get_filters({ kind: "patterns", include_definitions: true })    // bullets with descriptions
mobbin_get_filters({ kind: "patterns", include_counts: true })         // bullets with content counts

Related MCP server: figma-mcp-server

设置

先决条件

• Node.js 18+

• 一个 Mobbin 账户（免费或付费）

1. 身份验证

选项 A：CLI 命令（推荐）

npx -y mobbin-mcp@latest auth

这将引导您从浏览器复制会话 Cookie：

1. 打开 mobbin.com 并登录

2. 打开浏览器控制台 (Cmd+Option+J)

3. 运行 copy(document.cookie) 将您的 Cookie 复制到剪贴板

4. 粘贴到 CLI 提示符中

您的会话将保存到 ~/.mobbin-mcp/auth.json 并自动刷新。

copy(document.cookie) 是做什么的？ 它会将您浏览器中当前站点 (mobbin.com) 的 Cookie 复制到剪贴板。这包括 MCP 服务器代表您发出 API 请求所需的 Supabase 会话令牌。Cookie 存储在您本地机器的 ~/.mobbin-mcp/auth.json 中，除了发送给 Mobbin 的 API 外，绝不会发送到任何其他地方。

选项 B：环境变量（手动）

1. 在 Chrome 中打开 mobbin.com 并登录

2. 打开开发者工具 (Cmd+Option+I) → Application 选项卡 → Cookies → https://mobbin.com

3. 找到名为 sb-ujasntkfphywizsdaapi-auth-token.0 和 sb-ujasntkfphywizsdaapi-auth-token.1 的 Cookie

4. 复制每个 Cookie 的完整值

5. 将它们合并为一个字符串：

sb-ujasntkfphywizsdaapi-auth-token.0=<value0>; sb-ujasntkfphywizsdaapi-auth-token.1=<value1>

6. 将 MOBBIN_AUTH_COOKIE 设置为该值（见下文第 2 步）

2. 添加到 Claude Code

claude mcp add mobbin -- npx -y mobbin-mcp

如果您使用了 CLI 身份验证命令（选项 A），则无需额外配置——服务器会自动从 ~/.mobbin-mcp/auth.json 读取。

如果使用环境变量（选项 B），请在添加时传递它：

claude mcp add mobbin -e MOBBIN_AUTH_COOKIE="sb-ujasntkfphywizsdaapi-auth-token.0=...; sb-ujasntkfphywizsdaapi-auth-token.1=..." -- npx -y mobbin-mcp

替代方案：Claude Desktop

添加到您的 Claude Desktop 配置 (~/Library/Application Support/Claude/claude_desktop_config.json)：

{
  "mcpServers": {
    "mobbin": {
      "command": "npx",
      "args": ["-y", "mobbin-mcp"]
    }
  }
}

示例提示词

• “我正在为外卖应用设计结账流程——向我展示 DoorDash 和 Uber Eats 等顶级应用是如何处理的”

• “调出 Duolingo 的入职流程，并带我了解每个屏幕的设计决策”

• “查找使用底部工作表（bottom sheets）的登录屏幕并提取调色板——我需要为我们的身份验证重新设计寻找灵感”

• “比较金融科技应用如何处理设置屏幕——向我展示 Robinhood、Cash App 和 Venmo 的示例”

• “搜索旅游应用中基于卡片布局的屏幕，然后详细向我展示最好的一个”

• “iOS 上目前流行的 UI 模式是什么？向我展示最热门的屏幕”

工作原理

Mobbin 是一个由 Supabase 支持的 Next.js 应用。此服务器使用您的会话 Cookie 进行身份验证，调用 Mobbin 的内部 API 路由（/api/content/search-apps、/api/content/search-screens 等）。令牌会在过期前通过 Supabase 的 /auth/v1/token 端点自动刷新，并在使用 CLI 身份验证方法时持久化回 ~/.mobbin-mcp/auth.json。

屏幕图像通过 Mobbin 的 Bytescale CDN 提供服务。mobbin_get_screen_detail 工具会自动将搜索结果中的 Supabase 存储 URL 转换为 CDN URL，获取图像，并将其作为模型可以查看和分析的 base64 内容返回。可选的颜色提取使用 sharp 从截图中返回主十六进制颜色。

项目结构

src/
  index.ts              # MCP server entry point, CLI routing, and tool registration
  constants.ts          # API URLs, keys, and config
  types.ts              # TypeScript interfaces for all Mobbin data models
  cli/
    auth.ts             # Interactive CLI authentication flow
  services/
    auth.ts             # Token parsing, expiry checks, and auto-refresh
    api-client.ts       # HTTP client for all Mobbin API endpoints
  utils/
    auth-store.ts       # Persistent session storage (~/.mobbin-mcp/auth.json)
    formatting.ts       # Markdown formatters for tool responses

许可证

ISC