# Mobbin MCP

来自Mobbin的官方MCP服务器，连接AI助手与超过60万个真实应用界面及设计模式，让每一次生成的UI都基于经过验证、已发布的产品。

Canonical URL: https://a2a-mcp.org/entry/mobbin-mcp-zh

Language: zh

Category: MCP Servers

Updated: 2026-05-13

## 概述

Mobbin MCP 是由全球最大的真实 UI/UX 设计灵感库 Mobbin 官方推出的模型上下文协议（MCP）服务器。它能让 AI 智能体和编码工具直接、安全地访问超过 60 万张精心筛选的界面截图、13 万+用户流程，以及来自 1651 款已上架应用的设计模式。

AI 工具无需再猜测如何设计付费墙、新手引导流程或结账体验——现在它们可以精确参考顶级产品（金融科技、健康、电商、社交等领域）是如何解决相同问题的。

## 核心功能

- **海量真实案例库**：包含 62.15 万+界面截图和 13.02 万+用户流程，涵盖知名应用和潜力应用，每周更新最新设计趋势。
- **场景感知搜索**：AI 智能体可查询特定模式（如"显示 43 个金融科技应用的付费墙"、"社交应用的下拉刷新动画"、"通知权限设置流程"）。
- **无缝集成**：原生支持 Claude Code、Cursor、Lovable、Codex 及所有兼容 MCP 的 AI 工具。
- **身份验证访问**：使用现有的 Mobbin 付费账户即可——无需单独申请 API 密钥或凭据。
- **结构化数据**：直接向智能体返回界面截图、标注信息、应用上下文和设计元数据。

## 工作原理

1. 您向 AI 智能体发出提示（例如："设计一个转化率高的 Pro 版付费墙"）。
2. 智能体在后台调用 Mobbin MCP。
3. MCP 返回来自类似应用的数十个真实成功案例。
4. 智能体将最佳模式整合到您的代码库中，提供准确的组件、流程和交互。

告别泛泛的 AI 设计——每个输出都源自已在生产环境中验证的有效方案。

## 配置步骤（2 分钟）

1. 拥有有效的 Mobbin 付费计划（已包含 MCP 功能）。
2. 在 Claude Code、Cursor 或任何支持的工具中运行：
   ```bash
   claude mcp add mobbin --transport http https://api.mobbin.com/mcp
   ```
3. 在 AI 会话中运行 `/mcp`，通过浏览器窗口登录。
4. 完成——您的智能体现已即时接入整个 Mobbin 数据库。

## 应用场景

- **快速原型制作**：直接基于真实参考生成带版本管理的 Next.js/React 原型。
- **UI 调研**：询问"Airbnb 和 Booking.com 如何处理结账流程？"即可获得即时视觉对比。
- **微交互设计**：提取底部弹窗、404 页面、空白状态或权限提示的示例。
- **竞品分析**：参考行业领导者如何解决您当前面临的特定问题。
- **设计系统对齐**：确保 AI 生成的代码符合现代、高转化率的设计模式。

## 优势

- 消除猜测和千篇一律的 AI 输出。
- 大幅提升设计质量和转化潜力。
- 每周节省数小时的手动模式研究时间。
- 让您的 AI 工具始终紧跟最新推出的 UI 趋势。
- 已获得 Figma、Shopify、Airbnb、Uber 设计团队的信任，现扩展至 AI 驱动开发工作流程。

## 适用人群

- 使用 Claude/Cursor/Lovable 构建用户界面的开发者。
- 希望 AI 输出基于真实设计的产品团队。
- 与 AI 编码代理协作的设计师。
- 厌倦了 AI 生成的界面看似合理但实际转化不佳的用户。

Mobbin MCP 能将你的 AI 编码代理转变为精通设计的协作者，基于已有成功案例进行构建。

## Tags

- MCP服务器
- UI-UX
- 设计灵感
- AI助手
- Claude
- Cursor
- 设计模式
- 移动设计
- 网页设计
- 原型设计

## Sources

- [Project website](https://mobbin.com/mcp)