Mobbin

公式

Mobbinは、モバイルアプリ、ウェブアプリ、ウェブサイト向けのUI&UXデザインリファレンスにおける業界標準です。このプラットフォームは、世界中の何百万人ものプロダクトビルダーやデザイナーに、より良いデジタル体験を設計するための支援を提供しています。MobbinをAIエージェントに接続して、UI&UXデザインのアイデアをより効果的に調査・探索しましょう。

Mobbin MCPで何ができますか?

  • 検索UI画面 — search_screens を使用して、ログイン、ペイウォール、空状態、フォームなどの特定のモバイルまたはWeb画面パターンをリクエストします。
  • マルチステップフローを探索 — search_flows を使用して、オンボーディング、チェックアウト、キャンセルなどの順序立てられたユーザージャーニーを見つけます。
  • ウェブサイトのセクションを見つける — search_sections を使用して、ヒーロー、価格表、フッターなどのページ構成のリファレンスを特定します。
  • 製品デザインを比較 — AirbnbやBooking.comのチェックアウトフローなど、特定のアプリからのサイドバイサイドの例をリクエストします。
  • レート制限を処理 — HTTP 429が発生した場合、再試行する前に Retry-After ヘッダーで指定された期間待機します。

ホスト型 MCP サーバー

npx add-mcp 'https://api.mobbin.com/mcp'

Claude Code、Codex、Cursor などにインストールできます

ドキュメント

Mobbin MCP

Mobbin MCPを使用すると、対応するAIアシスタントやコーディングエージェントが、自然言語を使って公開済みデジタルプロダクトの実際のスクリーン、複数ステップのフロー、ウェブサイトのセクションを検索できます。結果には、スクリーン画像、アプリ名、フローコンテキスト、対応するMobbinページへのリンクが含まれる場合があります。

アクセス

  • エンドポイント: https://api.mobbin.com/mcp
  • トランスポート: Streamable HTTP。
  • 認証: ユーザーのMobbinアカウントを通じたOAuth。
  • プラン: Pro、Team、Enterprise。
  • レート制限: ユーザーあたり60秒間に60リクエスト。
  • インタラクティブギャラリー: MCP Apps対応クライアント(ChatGPT、Claude DesktopおよびWeb、Codex Appを含む)でサポートされています。

初回接続時、MCPクライアントはブラウザウィンドウを開き、ユーザーがMobbinにサインインしてアクセスを承認できるようにします。MCPでは手動でコピーするAPIキーは必要ありません。

現在公開されているMCPツールセットは読み取り専用です。デザインリファレンスを取得するものであり、Mobbinアカウントのコンテンツを作成、変更、削除することはありません。

ツール

search_screens

個々のモバイルおよびWeb UIスクリーンを検索します。ログイン画面、ペイウォール、空状態、ダイアログ、フォーム、ナビゲーション処理など、特定の状態やパターンに使用します。

search_flows

順序付けられた複数ステップのユーザーフローを検索します。オンボーディング、チェックアウト、アカウント設定、本人確認、サブスクリプション、キャンセルなど、順序とコンテキストが重要な場合に使用します。

search_sections

ウェブサイトのセクションを検索します。ヒーロー、価格設定セクション、お客様の声、ナビゲーション、フッターなど、ページ構成のリファレンスに使用します。

結果に含まれるもの

検索とクライアントによって、結果にはスクリーン画像、プロダクト名、フローまたはセクションのコンテキスト、Mobbinへのリンクが含まれる場合があります。MCP AppsをサポートするMCPクライアントは、結果をインタラクティブギャラリーとして表示できます。

エージェントは、重要なリファレンスについてプロダクト名とMobbin URLを保持し、ユーザーがソースを確認できるようにする必要があります。

推奨ワークフロー

  1. プラットフォーム、プロダクトカテゴリ、ユーザーの目標、デザイン上の質問を特定します。
  2. スクリーン、フロー、またはウェブサイトセクションの検索を選択します。
  3. 1つの例に頼るのではなく、関連する複数のプロダクトを確認します。
  4. 重要なリファレンスごとにプロダクト名とMobbin URLを保持します。
  5. 目に見える観察結果と、解釈および推奨事項を分けます。
  6. 調査結果をユーザーのブランド、オーディエンス、デザインシステム、アクセシビリティ要件、プロダクトの制約に適応させます。

エビデンスの限界

  • Mobbinの例は、プロダクトがそのデザインを使用したことを示しますが、そのデザインがコンバージョンや他の指標を改善したことを証明するものではありません。
  • 繰り返し見られるパターンは慣例であり、自動的にベストプラクティスになるわけではありません。
  • 鮮度が重要な場合は、キャプチャメタデータを確認してください。
  • 保護されたデザイン、ブランディング、テキスト、アセットをそのままコピーしないでください。
  • アクセシビリティは独立して評価してください。

エラーと復旧

  • 認証失敗: Mobbinに再接続し、OAuthサインインフローを完了します。
  • HTTP 429 Too Many Requests: 再試行する前に、Retry-Afterヘッダーの期間待機します。
  • 結果が不足または弱い場合: プラットフォーム、プロダクトカテゴリ、ユーザーの目標、パターン、フローを指定して、リクエストをより具体的にします。
  • 結果が狭すぎる場合: 不要な制約を削除するか、スクリーン、フロー、セクションを個別に検索します。
  • アクセス削除: Mobbinアカウント設定から接続済みクライアントを取り消します。

プロンプト例

  • バンキングアプリのオンボーディングスクリーンをMobbinで検索する。
  • AirbnbとBooking.comのチェックアウトフローの扱いを比較する。
  • 四半期および年間請求を明確に説明するモバイルペイウォールを見つける。
  • 複雑な機能比較表があるSaaS価格設定セクションを見つける。
  • 通知許可のプライミングスクリーンを表示し、繰り返し見られるパターンを特定する。
  • コラボレーション型生産性プロダクトで使用される空状態を見つける。

セットアップとサポート

価格とプランアクセス: https://mobbin.com/pricing.md

プロダクト概要: https://mobbin.com/index.md

完全なエージェントコンテキスト: https://mobbin.com/llms-full.txt