mcpField
S
search

search

github.com/mobbinデザイン・UI53587 回インストール4 日前に更新
リポジトリ

search について

Mobbinのデザイン参考を検索するエージェント向けスキルです。画面、マーケティングサイトのセクション、ユーザーフローについて、クエリの作成、ツールとモードの選択、追加結果の取得、結果不足への対処を案内します。

主な機能

  1. 01対象に応じたツール選択
  2. 02制約を絞ったクエリ作成
  3. 03画面検索モードの選択
  4. 04ページやIDによる追加取得
  5. 05結果不足や画像エラーへの対処

活用シーン

  1. 01特定アプリの画面参考を探す
  2. 02マーケティングサイトのセクションを検索
  3. 03ユーザーフローやその一段階を探す
  4. 04一致度の低い検索を調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mobbin/skills --skill search

インストール後、Claude Code で/searchを入力して読み込まれたか確認します。

詳細

Mobbin の検索

まずベストプラクティスを確認してください。 この会話で Mobbin の best-practices スキルをまだ読んでいない場合は、検索を行うべき状況や、別のスキルに検索を任せるべき状況が記されているため、検索する前に呼び出してください。

呼び出し元のスキルが、問題ごとのクエリ数や使用するモードなど、独自の検索ルールを定めている場合があります。これらのルールがここに記載された内容と異なる場合は、呼び出し元のスキルのルールを優先してください。

検索の仕組み

  • 検索ではキーワードではなく意味が照合されます。 単純なフレーズ(「無料トライアル付きのペイウォール」)のほうが、キーワードの羅列(「ペイウォール、トライアル、サブスクリプション、料金」)より効果的です。
  • タスクで必要な場合にのみ、アプリ名を指定してください。 クエリにアプリ名を追加すると、そのアプリの結果に絞り込まれます。ただし、すべての結果がそのアプリのものとは限らないため、引用する前に app_name と site_name を確認してください。
  • クエリで言語を指定すると、画面とフローもその言語で絞り込まれます(「日本語の銀行アプリ」など)。タスクで必要な場合にのみ、言語を指定してください。
  • 結果が乏しい場合は、クエリを変更してください。 条件を削るか言い換えるか、ユーザー自身の言葉を使ってください。依頼されていない要素を追加しないでください。limit を増やしたり、同じクエリを再送信したりしても、同じ結果が返されます。うまくいったクエリでさらに結果を得る方法については、2回目の取得を参照してください。

ツールの選択

対象ツール
アプリ内の画面またはコンポーネントplatform を指定して search_screens
マーケティングサイトのセクション(ヒーロー、料金、機能一覧、フッター)platform を指定しない search_sections
ユーザージャーニー、またはジャーニー内での位置が重要な画面(サインアップのメール認証ステップなど)platform を指定して search_flows。単一の画面を探す場合は、フローの画面から選んでください。プレビューが付属する画面は一部のみです。引用する前に、プレビューのない画面の image_url を開いてください

platform は ios または web で、設定できるフィルターはこれだけです。ツールには Android がないため、Android を対象とする場合は ios を検索してください。引用する箇所では、参照先が iOS であることを明記してください。

クエリの作成

クエリごとに、画面、フロー、またはセクションを1つにします。 まず、対象となるタイプを指定します。タイプだけのシンプルなクエリでも十分です。

各クエリは、次の制限内に収めます。

  • 制約は最大3つです。 状態、ステップ、表示部分、または視覚的な特徴(dark mode、bottom sheet)は、それぞれ1つの制約です。「プランカードと無料トライアルボタンがあるペイウォール」は2つの制約です。タイプ(「ペイウォール」、「登録画面」)、ドメイン(「瞑想アプリ」、「銀行アプリ」)、アプリ名(「Calm」、「Revolut」)は制約ではないため、「プランカードがあるCalmのペイウォール」は制約が1つです。依頼に3つを超える制約がある場合は、最も重要な3つを残し、結果を見て残りを確認します。同じ対象について、残りを2つ目のクエリに回さないでください。各クエリでは、一部の要素だけがある画面が見つかってしまいます。
  • すべての制約は、依頼または問題に由来するものにします。 プロフィールのアバターや、ペイウォールのプランカードなど、対象にありそうだと予想した要素を追加してはいけません。推測に一致する画面に結果が絞られてしまいます。

ルール:

  • 対象と同じレベルで検索します。 画面が対象なら、画面全体を検索します(「取引がない家計簿アプリのホーム画面」)。カード1枚だけを検索するのではありません。コンポーネントが対象なら、それが含まれる画面を検索します。
  • 選択肢の中から選ぶタスクでは、選択肢の1つではなく、対象の要素を指定します。 結果には、複数の解決方法が表示される必要があります。「プランカードと無料トライアルボタンがあるペイウォール」とし、「年間プランの切り替えがあるペイウォール」とはしません。選択肢を「または」でつないだり、クエリに修正案(「追加を促すプロンプトがある」、「プレースホルダーのバー」)を入れたりしないでください。まさにその要素を探すタスクなら、それを指定します(「テキストラベルがある銀行アプリの検索タブ」)。
  • 同じことは一度だけ述べます。 「空の状態」、「まだ取引がない」、「何も追加する前」は、いずれも同じ状態です。最も短い表現を使います。
避ける使う
「アバター、フォロワー数、投稿グリッドがあるソーシャルアプリのユーザープロフィール」(ユーザーの質問が単に「ソーシャルアプリのプロフィール画面を探して」なら、依頼されていない要素が追加されています)「ソーシャルアプリのユーザープロフィール画面」
「トライアルボタンが長い表の下に埋もれているペイウォール」(クエリ内に問題を含めています)「無料トライアルボタンがあるペイウォール」
「空の状態で、まだ取引がなく、最初の支出の追加を促すプロンプトがある家計簿アプリのホーム概要」(状態を重複して述べ、修正案も指定しています)「取引がない家計簿アプリのホーム画面」
「まだデータがない支出チャートカード、プレースホルダーのバー、または空のドーナツチャート」(画面全体が対象なのにカード1枚だけを指定し、2つの選択肢を「または」でつないでいます)「取引がない支出概要」
「iosの登録画面」(クエリにプラットフォームを含めています)「登録画面」とし、platform を ios に指定
「Acmeのすっきりしたモダンな請求書一覧」(好みを表す言葉とユーザーの製品名が含まれています)「請求書一覧」
「オンボーディング、ペイウォール、設定画面」(1つのクエリに複数の画面タイプが含まれています)画面タイプごとに1回検索
「ヒーロー、プラン、FAQがある料金ページ」(1つのクエリに複数のセクションが含まれています)セクションごとに1回検索
「チームメイトを招待する画面」(対象が一連の流れなのに、画面1つだけを指定しています)search_flows で「ワークスペースのセットアップ中にチームメイトを招待する」

ユーザーが指定したコピー、データ、ブランド名、「例」や「最良」などの指示は含めないでください。視覚的な特徴は、依頼または問題で言及されている場合に限り、Mobbinのタグを使います:dark mode、bottom sheet、modal、full-screen、card-based。

検索結果にタスクのドメイン外の製品が含まれる場合は、それらを引用するのではなく、ドメインの名詞を使って再検索します(「瞑想アプリのペイウォール」)。別のドメインの製品を引用する場合は、構造だけを参考にしていることを明記してください。

モードの選び方

mode は search_screens でのみ指定します。作成したクエリに応じて選んでください。

クエリmode
制約なし(「ソーシャルアプリのユーザープロフィール画面」「Calm のペイウォール」)standard
制約が1〜3個(「ライフタイムオプションと割引のあるペイウォール」)deep

deep はスコアが低いと判定した候補を除外するため、limit より少ない結果が返ることがあります。結果が少ない場合は、近い候補が少ないということであり、Mobbin に存在しないという意味ではありません。何かが見つからないと言う前に、2回目の検索を実行するか、クエリを変更してください。

2回目の検索

必要な結果が得られなかった場合は、ツールの方法で追加の結果を取得し、同じクエリをもう一度実行してください。最初の結果の並べ替えではなく、新しい結果が得られます。除外条件があっても、クエリを変更すると新しい検索になります。

  • search_screens:同じクエリと mode を使い、すでに確認したすべての ID を exclude_screen_ids に含めます。最大100件です。
  • search_sections と search_flows:次の page を指定し、すでに確認した結果を除外します。has_next_page が false の場合、次のページはありません。その場合はクエリを変更してください。

検索で必要な結果が得られない場合

各ケースについて、以下のように対応してください。それでも解決しない場合は、検索失敗の報告先となる呼び出し元のスキルで、または呼び出し元がない場合は返信で、その旨を1行で伝えてください。

指定した製品が見つからないとは、どの結果の app_name にも site_name にも含まれていないことを指します。

  1. クエリで製品名のつづりを間違えた場合は、製品独自のつづりで再検索します。
  2. セクションには名前フィルターがないため、has_next_page が true の間は次の page をリクエストします。サイトは1ページ目より後に表示される結果を上位にランク付けすることがあります。
  3. タスクが特定のプラットフォームに限定されていない場合は、画面とフローで別の platform を試します。製品が Mobbin に iOS のみ、またはウェブのみで掲載されていることがあります。見つかった場合は、そのプラットフォームのものとして引用してください。タスクが特定のプラットフォーム向けの場合(iOS のリデザインにウェブ画面は役立ちません)は、この手順を省略します。

それでも見つからない場合は、カテゴリ検索を続けてください。その製品について記憶を頼りに説明したり、別の製品の画面を代わりに使ったりしないでください。ユーザーが共有したスクリーンショットがある場合は、引き続きそれを参照してください。

画像が開けない。 プレビューは webp 形式で返されるため、すべてのホストで開けるとは限りません。image_format を jpg に設定して再度呼び出してください。それでも開けない場合は、その呼び出しの結果を引用しないでください。確認できなかった画面は参考資料として使えません。

ツールが呼び出しを拒否する。 再試行したりクエリを変更したりしないでください。いずれの呼び出しも拒否されます。検索を中止し、その旨を伝えてください。無効な引数など、入力に関するエラーは別です。その場合は入力を修正して、再度呼び出してください。

コメント