AI导哈

Mobbin设计搜索服务器

一个连接Mobbin设计灵感平台的非官方MCP服务器，支持搜索应用、浏览截图、探索用户流程和访问保存的收藏。

  • by pdcolandrea
  • TypeScript
  • 本地部署
  • 46 星标
  • 更新于
在 GitHub 查看 pdcolandrea/mobbin-mcp

使用说明

Mobbin MCP服务器

[！警告] 此存储库已存档，不再维护。

Mobbin已经发布了一个官方的MCP服务器——请使用它：https://mobbin.com/mcp

该项目是在官方MCP支持存在之前通过逆向工程Mobbin的内部端点构建的。既然Mobbin维护着第一方服务器，那么官方服务器是推荐的选择，并将与他们的平台保持同步。此回购仅供历史参考；将不接受进一步的更新、错误修复或PR。

连接到的非官方MCP服务器 莫宾 --设计灵感平台，拥有1100+个应用程序的600k+屏幕。搜索应用程序、浏览屏幕截图、探索用户流，并直接从Claude访问您保存的收藏。

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

工具

工具 说明 使用时
mobbin_search_apps 按类别和平台搜索和浏览应用程序 您希望按平台或类别查找目录。更喜欢 mobbin_quick_search 当您已经知道应用程序名称并需要其应用程序ID时
mobbin_search_screens 按UI模式、元素或文本内容搜索屏幕 您需要跨应用程序的全局屏幕灵感。使用 screen_patterns Mobbin分类概念和 screen_keywords 用于可见/OCR文本。使用 mobbin_get_app_screens 之后 mobbin_quick_search 对于一个命名的应用程序。
mobbin_search_flows 按操作类型搜索用户流（例如，入职、结账） 您希望按操作类型获得全球旅程灵感。更喜欢 mobbin_get_app_flows 之后 mobbin_quick_search 用于来自一个命名应用程序的流。
mobbin_quick_search 按名称快速自动完成应用程序搜索 您有一个应用程序名称或可能的应用程序名称，需要它的应用程序ID。首选 mobbin_search_apps 用于平台/类别浏览。
mobbin_get_app_screens 获取一个应用程序的每个屏幕（与配对 quick_search 深入特定应用程序） 用户命名了一个特定应用程序，并希望看到该应用程序的屏幕。更喜欢 mobbin_search_screens 查看广泛的跨应用程序示例。
mobbin_get_app_flows 获取一个应用程序的每个用户流量（与配对 quick_search 深入特定应用程序） 用户命名特定应用程序并希望该应用程序的流程。更喜欢 mobbin_search_flows 适用于广泛的跨应用程序之旅。
mobbin_popular_apps 按类别对热门应用进行分组 您需要一个按类别分组的热门度快照。更喜欢 mobbin_search_apps 随着 sort_by: "publishedAt" 用于分页最近的应用程序浏览或类别过滤器。
mobbin_list_collections 列出您保存的收藏 您需要保存的收藏名称、ID和应用程序/屏幕/流量计数。这仅列出元数据；在以下时间之前无法提取收藏项目 mobbin_get_collection 土地。
mobbin_get_screen_detail 获取特定屏幕的完整屏幕截图图像，并可选择主色提取 您已经拥有 screen_url 并且需要完整的图像、视觉检查、元数据或可选的主色提取。
mobbin_get_filters 获取一个过滤器方面的有效值： kind: "categories" | "patterns" | "elements" | "actions" 在填充之前，您需要有效的筛选值或定义 categories, screen_patterns, screen_elements，或 flow_actions 在搜索工具上。

深入特定应用

mobbin_search_screens 和 mobbin_search_flows 全球指数Mobbin——他们不接受 app_id 过滤器（上游API以静默方式忽略per-app过滤器）。对于“向我展示Notion的入职培训”风格的查询，请使用两步路径： mobbin_quick_search 查找应用程序的 id那么 mobbin_get_app_screens 或 mobbin_get_app_flows 说完这个 app_id详细信息工具从Mobbin的SSR应用程序详细信息页面读取，因此它们返回Mobbin为该应用程序提供的所有内容。

迁移： mobbin_get_filters

无参数表单已删除。一个响应中的完整分类超过了每个工具的MCP结果标记上限，并迫使代理从临时文件中读回结果。通过a 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

设置

先决条件

  • Node.js 18+
  • A. 莫宾 帐户（免费或付费）

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复制到剪贴板。这包括您的Subabase会话令牌，MCP服务器需要代表您发出API请求。Cookie存储在您的本地计算机上 ~/.mobbin-mcp/auth.json 并且从不发送到除Mobbin的API之外的任何地方。

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

  1. 打开 mobbin.com 在Chrome浏览器中登录
  2. 打开DevTools(Cmd+Option+I) → 应用 tab → 饼干 → https://mobbin.com
  3. 查找名为的Cookie sb-ujasntkfphywizsdaapi-auth-token.0 和 sb-ujasntkfphywizsdaapi-auth-token.1
  4. 复制 全额 每一块饼干
  5. 将它们组合成一个字符串：
sb-ujasntkfphywizsdaapi-auth-token.0=<value0>; sb-ujasntkfphywizsdaapi-auth-token.1=<value1>
  1. 集 MOBBIN_AUTH_COOKIE 到该值（见下面的步骤2）

2.添加到克劳德代码

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

如果使用CLI auth命令（选项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桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json):

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

示例提示

  • “我正在为一款送餐应用程序设计结账流程——向我展示DoorDash和Uber Eats等顶级应用程序是如何处理的”
  • “调出Duolingo入职流程，引导我了解每个屏幕的设计决策”
  • “找到使用底部页面的登录屏幕并提取调色板——我需要灵感来重新设计我们的身份验证”
  • “比较金融科技应用程序如何处理设置屏幕——向我展示Robinhood、Cash App和Venmo的示例”
  • “在旅游应用程序中搜索基于卡片布局的屏幕，然后详细地向我展示最好的一个”
  • “iOS上现在流行什么UI模式？显示顶部屏幕”

运作原理

Mobbin是由Supabase支持的Next.js应用程序。此服务器调用Mobbin的内部API路由(/api/content/search-apps, /api/content/search-screens等）使用您的会话cookie进行身份验证。代币通过Supabase自动刷新 /auth/v1/token 在它们过期之前终止，并持久化回 ~/.mobbin-mcp/auth.json 使用CLI身份验证方法时。

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

项目结构

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

许可证

国际学生委员会

相关 MCP