mobbin

Mobbin

UI/UX パターンのデザインインスピレーションを得る際は、Mobbin MCP のみを主要な情報源として使用します。Mobbin は、実際にリリースされたモバイルおよび Web の画面・フローを厳選して収録したライブラリであり、ポートフォリオ用のモックアップではありません。MCP は実際のリファレンス（画像＋メタデータ＋Mobbin のリンク）を返すため、エージェントがありきたりな UI を推測する必要がなくなります。

必須条件： このタスクのリファレンスが Mobbin MCP から返されるまで、または MCP が利用できないことを報告した後にユーザーが明示的に条件を免除するまで、新しい UI の方向性を提案、スケッチ、実装してはいけません。

ワークフロー

1. Mobbin MCP を確認する — Mobbin MCP サーバーとそのツールを検出します。サーバーが見つからない、認証されていない（needsAuth）、またはエラーが発生した場合は、UI の考案を中断し、mcp-setup.md に従います。必要に応じて認証し、記憶に頼って先へ進んではいけません。
2. デザインの課題を明確にする — 対象とするプロダクトの画面・機能、プラットフォーム（ios | web）、ユーザーの目的、制約（ブランド、情報密度、アクセシビリティ）、単一画面・複数ステップのフロー・マーケティング／サイトのセクションのどれが必要かを整理します。検索意図に影響する場合に限り、確認質問をします。
3. 適切なツールで検索する — search-playbook.md に従います。
   • search_screens — 単一画面／レイアウト／コンポーネントの構成
   • search_flows — 複数ステップのユーザージャーニー（オンボーディング、チェックアウト、KYC、権限設定）
   • search_sections — Web サイトのセクション（料金、フッター、ヒーロー、機能グリッド）
4. 検索結果を確認する — 返された画像と mobbin_url のリンクを開いて確認します。「モダンな見た目」といった曖昧な印象より、具体的な UI 構造、階層、CTA、空状態／エラー状態を優先します。
5. 模倣ではなく、パターンを統合する — 階層、段階的な情報開示、信頼のシグナル、フローの動きなどのパターンを抽出し、プロジェクトのブランド／システムに合わせて適用します。synthesis.md を参照してください。
6. 検索を繰り返す — 検索結果が弱い、重複している、または対象分野とずれている場合は、クエリを書き換えます（UI の詳細を追加し、類似するアプリ名を指定し、以前の画面 ID を除外します）。デザインに進む前に、焦点を絞った検索をさらに 2〜3 回行います。
7. その後にのみデザインまたは実装を行う — Mobbin のリファレンス（アプリ名＋リンク）を引用して提案の根拠を示します。求められていない限り、適切な忠実度を保ち（まずは低〜中程度の忠実度のワイヤーフレームを作成します）。

適用ルール

• インスピレーション、ベンチマーキング、リデザインの方向性、「優れたアプリは X をどう実現しているか？」という質問には、必ず Mobbin MCP を呼び出します。
• 呼び出す前に、必ずツールのスキーマを確認します（引数名を推測してはいけません）。
• 必ず platform を ios または web に明示的に設定します。クエリ文字列にプラットフォームを埋め込んではいけません。
• 必ず具体的なクエリを作成します。検索ごとに意図を 1 つに絞り、UI 要素とその関係性を明示します。曖昧なスタイル語（modern、clean、beautiful）や否定表現（without ads）は避けます。
• 微妙なニュアンスを含むデザインの質問では、必ず mode: "deep" を優先します。素早く広く調べる場合、またはレート制限からの復旧時に限り "standard" を使用します（"fast" は非推奨の "standard" のエイリアスです）。
• 方向性を決定する前に、具体的なリファレンスを少なくとも 2〜3 件（アプリ名＋採用したパターン）必ず引用します。ただし、ユーザーが単一のリファレンスを求めた場合、または MCP から利用可能な結果がそれより少なく返された場合を除きます。
• Mobbin MCP が利用可能な場合、学習時の記憶、Dribbble／Behance 風の印象、「一般的な SaaS」の既定値から UI を考案してはいけません。
• Mobbin を、独自アセット、ロゴ、ピクセル単位で同一のレイアウトをコピーする許可と見なしてはいけません。利用するのはパターンと構造のみです。
• MCP が利用できない場合：障害とセットアップ手順を報告します。暫定的な調査として Mobbin の Web サイトを手動検索する方法を案内します。ただし、リファレンスを捏造してはいけません。

検証

このスキルを使ったデザイン／UI 作業を完了する前に、次の項目を確認します。

• Mobbin MCP を実際に呼び出した（ツール名＋クエリ＋プラットフォームを記録した）。
• 用途に合ったツールを選んだ（画面／フロー／セクション）。
• クエリが具体性のルールに従っている（曖昧なスタイル語を使わず、クエリごとに意図が 1 つ）。
• アプリ名を並べるだけでなく、検索結果（画像／リンク）を確認した。
• 最終的な方向性で、実際にリリースされたリファレンスを引用し、パターンをどう適用したか説明した。
• 実装がプロジェクト既存のデザインシステム／ブランドの制約を守っている。