Mobbin MCPを試してみた

• URL: https://dev.classmethod.jp/articles/mobbin-mcp-setup-claude-code/
• 日付: 2026-06-05
• Tier: Tier 3
• 要旨: Mobbinの60万件超UIスクリーンショットをClaude CodeからMCP経由で検索できる「Mobbin MCP」の導入手順と活用例。UIパターン分析やFigmaへの参照貼り付けまでのワークフローを実演。

詳細

• セットアップ: claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp の1コマンド後、/mcp で認証
• 提供ツール: search_screens の1ツールのみ。パラメータは query（自然言語）、platform（ios/web）、mode（deep/fast）、limit（最大30）
• 利用例: 「チャット画面のUIをMobbinで10枚集めて、共通パターンを教えて」→ 全体構成・バブルデザイン・入力バーの共通パターンを分析
• Figma連携: Mobbin MCPで収集した参照スクショをFigma MCPと組み合わせて新規UIを生成・並置
• 注意点: ①件数上限30件 ②platform指定で結果が変わる ③クエリは具体的に ④スクショの鮮度は収録時点
• 評価: 競合UIをざっと確認する用途に有効。ただしデザイン分析の出発点として使い、最終判断は人間が行う必要あり