gather について
gatherは、画面の新規作成や改修前にビジュアル参考を集めるデザイン調査スキルです。接続済みのソースを並行検索し、参考をボードに整理して、各項目から取り入れる部分を記録します。
主な機能
- 01接続済みソースの並行検索
- 02画像を使った参考検索
- 03リンク付き参考を一つのボードに整理
- 04取り入れる画面要素のメモ
- 05重複を避けた参考の保存
活用シーン
- 01画面改修前のインスピレーション収集
- 02複数ソースのUIパターン比較
- 03選んだ参考のライブラリへの保存
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ playful-design/ router --skill gatherインストール後、Claude Code で/gatherを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
board.htmlcollect.mjsLICENSEsources.mdagents/openai.yaml詳細
Gather
このスキルでは、デザインを作成または改修する前に、インスピレーションを集めます。すべてのソースを一度に検索し、結果が届くたびに1つのボードにまとめ、参考資料ごとに取り入れるべき部分へのリンクを付けます。
コピーするスタイルではなく、選択の根拠を集める
参考資料は、ある部分がどのように機能するかを示すものです。ユーザーがトップバーを求めているのに、アプリ全体の見た目を取り入れてしまうのは、gather の目的から外れています。指定がない場合は、少なくとも3つのソースから20件以上の参考資料を集めてください。
ユーザーがインスピレーションや参考資料、または「inspo」を求めた場合、あるいは画面の見た目が悪いと言って改善方法を尋ねた場合に使います。ボードをもとにバリエーションを作る作業は prototype に属します。参考資料をそのまま忠実に再現する作業は match に属します。
1. 依頼内容を明確にする
対象の画面や要素、そのプラットフォーム、注目する点(レイアウト、ナビゲーション、情報密度、書体、色、動き、全体のテイスト)を1行で示します。目的のない検索は gather-name-the-brief です。
依頼内容を「トップバー」「空の状態」「行の情報密度」のような要素に分け、各要素に同義語を2~3個付けます。各要素から、2~3語の検索クエリを作ります。依頼内容全体を含む長い検索クエリを1つだけ使うのは gather-split-the-brief です。
作業対象と同じプラットフォームを検索します。デスクトップアプリやWebアプリなら、Webとデスクトップの参考資料を探します。デスクトップアプリのためにモバイル画面を探すのは gather-same-platform です。
2. ユーザーが提供したものから始める
ほかの場所を検索する前に、スレッドにすでにあるタブ、スクリーンショット、リンク、デザインファイルを開きます。ステップ4の画像検索では、これらを起点にします。ユーザーのスクリーンショットをブラウザーで開いたまま、パターンライブラリを検索するのは gather-start-with-given です。
3. 不足している接続先の追加を提案する
Pond、marked.dev、Are.na、Cosmos、Pinterest、Mobbinのうち、どれが接続されているかを確認します。不足しているソースをそれぞれ個別の選択肢として示し、接続せずに続行する選択肢も添えて、一度だけ尋ねます。不足しているソースを省いたり、尋ねずに検索を進めたりするのは gather-offer-to-connect です。
接続されているソースがない場合は、回答を待ちます。各ソースの接続方法については、sources.md を参照してください。
4. すべてのソースを一度に検索する
接続されているソースごとにエージェントを1つ起動するか、エージェントが利用できない場合は検索を並列で実行します。それぞれ sources.md に示す形式で candidates/<source>.json を作成します。ソースを1つずつ順に検索するのは gather-parallel-sources です。
Mobbinから月間利用量が多いという応答があった場合は、Mobbinへの呼び出しを停止し、ユーザーに伝えて、ほかのソースからの検索を続けます。Mobbinの検索を再開するのは、ユーザーが名前を指定して求めた場合に限ります。この警告の後にMobbinを再度呼び出すのは gather-stop-at-usage-limit です。
ユーザー自身の保存資料を各グループの先頭に置きます。Pondまたはmarked.devに該当する保存資料があるのに、ボードにそれらが1件も含まれていない場合は gather-own-library-first です。
少なくとも3つのソースから集めます。パターンライブラリはフローや画面、厳選されたギャラリーは完成した作品、ボードはテイストを示します。1つのアプリだけから作ったボードは gather-go-wide です。
ユーザーが提供したものや、ユーザーの保存資料の中で最も近いものを起点に、Pondの visual とCosmosで画像検索を行います。ユーザーがスクリーンショットを共有しているのに、テキストクエリだけで検索するのは gather-search-by-image です。
最適な参考資料がリリース済みの製品であれば、その製品の公開ページを開き、該当箇所のスクリーンショットを撮ります。1回のクリックで開けるサイトを、ギャラリーのサムネイルだけで済ませるのは gather-capture-live です。
依頼された件数のおよそ2倍を集めてから絞り込みます。ユーザーから追加を求められた場合は、ボードにすでにあるURLをすべて除外します。「あと50件」の中に重複があるのは gather-enough-to-choose です。
5. 1つのボードにまとめる
最初の候補が届いたらコレクターを実行し、すぐにボードを開きます。ボードページをコピーし、すべての画像と動画をダウンロードして、エージェントの作業が完了するたびにボードへ反映します。
node <skill>/collect.mjs .gather/<brief> --serve
.gather/ はバージョン管理の対象外にします。sources.md の説明に従って、タイトル、概要、グループの順序を .gather/<brief>/board.json に記述します。ボードではなくチャットにリンクを貼るのは gather-one-board です。
コレクターとボードはスキルに同梱されているため、実行時に書き込まれるのはデータだけです。手書きのボードページや、ダウンロードまたはビルドを行う実行ごとのスクリプトは gather-shipped-collector です。
6. すべての参照を確認する
ダウンロードしたファイルを1つずつ開き、概要で指定された部分を確認します。タイトル、メタデータ、プレビューだけで参照を判断するのは gather-look-at-every-image です。
明らかに対象外のものだけを、board.json の cut に URL を追加して除外します。2つの参照がどちらとも言い切れない場合は、両方を残してユーザーに判断してもらいます。エージェントが迷うものを独断で除外するのは gather-cut-clear-misses です。
各参照には、たとえば「トップバー」のように、参考にする部分を示すメモを1つ付けます。メモのない参照は gather-name-the-part です。各参照には出典へのリンクを残します。リンクのない画像は gather-link-every-reference です。
各参照の details の Kind に、Shipped または Concept を指定します。コンセプト画像を出荷済み製品として見せるのは gather-concept-or-shipped です。
グループ名は「Agent Activity」のように2語または3語のタイトルケースにし、詳細は説明に記載します。文のようなグループ名は gather-short-group-names です。
絞り込みが終わったら、--done を付けてコレクターをもう一度実行し、ボードの再読み込みを停止します。
7. 返ってきた内容を活用する
ボードには3つのプロンプトがコピーされます。Copy Picks はユーザーのメモとともに選んだ候補を返し、これが次のステップの概要になります。More Like This は参照を1つ返します。Save Picks は保存する候補を返します。
More Like This では、その参照をもとに画像検索を開始し、同じグループ内に絞り込みます。ボード上のすべての URL は検索対象から除外します。参照のタイトルでテキスト検索するのは gather-more-from-the-pick です。
8. ユーザーが残したものを保存する
ユーザーの指定先(ライブラリ、チャンネル、ボード)に候補を送ります。まず保存先の命名規則を確認し、それに合わせます。fashion / inspiration / 2026 / fall winter の隣に新しいチャンネル「FW 26 🔥」を作成するのは gather-match-the-naming です。
追加する前に、各項目を確認します。保存済みの項目を重複して追加するのは gather-no-duplicates です。出典へのアクセスにログインまたは CAPTCHA が必要な場合は、そこで止めてどちらが必要かを伝えます。ログインを回避するのは gather-ask-at-login です。
ペア
チェックはすべてペアです。誤った行の隣に、それに置き換わる行を示します。
| ルール | 誤り | 置き換え |
|---|---|---|
gather-name-the-brief | "設定ページを検索" | "デスクトップの設定ページ。グループ化と密度を探す" |
gather-split-the-brief | query: "desktop settings page with grouped dense options" | "settings groups"、"preferences list"、"dense settings" |
gather-same-platform | デスクトップアプリ向けに iOS の画面を表示 | platform: "web" とデスクトップアプリ |
gather-start-with-given | ユーザーのタブが開いているのに、パターンライブラリを検索 | まず開いているタブを確認 |
gather-offer-to-connect | marked.dev と Mobbin が未接続のまま、Pond だけを検索 | "marked.dev または Mobbin に接続しますか?それとも Pond を続けますか?" |
gather-parallel-sources | Pond、Mobbin、Cosmos の順に、1つずつ検索 | ソースごとにエージェントを1つ割り当て、同時に開始 |
gather-stop-at-usage-limit | 「今月の利用量が多い」と表示された後も Mobbin を再検索 | "Mobbin から今月の利用量が多いと通知されたので、検索を停止しました" |
gather-own-library-first | Pond に一致する項目があるのに、Mobbin の画面を集めたボードを作成 | 各グループで、まずユーザー自身の保存項目を表示 |
gather-go-wide | 1つのアプリから画面を20枚集める | 保存項目、ボード、パターンライブラリ |
gather-search-by-image | ユーザーのスクリーンショットがスレッドにあるのに、テキストで検索 | search_library で、その画像を visual に指定 |
gather-capture-live | linear.app の Land-book サムネイル | linear.app にリンクした、実際のトップバーのスクリーンショット |
gather-enough-to-choose | 「さらに50件」で最初の20件が再表示される | 以前の URL を除いた、新しい参考資料50件 |
gather-one-board | リンクを20件チャットに貼り付ける | .gather/settings/ を配信して開き、アイデアごとに分類 |
gather-shipped-collector | この実行用に build.mjs を作成 | node collect.mjs .gather/settings --serve |
gather-look-at-every-image | 画面をタイトルやプレビューのままにする | ダウンロードしたファイルを開き、トップバーを確認 |
gather-cut-clear-misses | 似た参考資料を2つ見つけ、そのうち1つをエージェントが除外 | ユーザーが確認できるよう、両方をボードに表示 |
gather-name-the-part | 注釈のないスクリーンショット | "色ではなく、グループ化されたリストを使う" |
gather-link-every-reference | 出典のない画像 | 画像を元のページにリンク |
gather-concept-or-shipped | Dribbble のコンセプトを製品として表示 | details: { Kind: "Concept" } |
gather-short-group-names | "アクティビティ:思考、ツール呼び出し、ステップ" | "エージェントのアクティビティ" |
gather-more-from-the-pick | More Like This を "Linear settings" で検索 | 選んだ画面を起点に画像検索 |
gather-match-the-naming | "FW 26 🔥" という新しいチャンネルを作成 | fashion / inspiration / 2026 / fall winter |
gather-no-duplicates | 同じピンを2回追加 | 既存の項目を確認して、重複をスキップ |
gather-ask-at-login | ログインを回避 | "Pinterest にサインインする必要があります" |
レポート
重大度。 HIGH は、一部だけを求められたのに見た目全体をコピーした場合、または項目を重複して保存した場合や、誤った名前で保存した場合です。
MEDIUM は、プラットフォームの誤り、ソースが1つだけ、ソースを順番に検索、リンクのないボード、または手作業で作成したボードやビルドスクリプトです。接続するかどうかの確認を省略した検索や、ユーザー自身の保存項目を確認しなかった検索も該当します。未確認のままにした参考資料、エージェントが独断で決めた類似候補、または製品として表示したコンセプトも該当します。Mobbin の利用量に関する警告後に呼び出した場合も該当します。
LOW は、長すぎるクエリ、画像検索が適しているのにテキスト検索をした場合、または実際のサイトのギャラリーサムネイルを使った場合です。注釈のない参考資料、長すぎるグループ名、「さらに表示」での重複、More Like This をタイトルで検索した場合も該当します。
形式。 根本原因ごとに指摘を1件記載し、該当するファイルがない場合は依頼内容を引用します。
file:line - [rule-id] what is wrong
request 2 - [rule-id] what is wrong
続けて、Rule | Count | Severity の概要を記載します。HIGH が1件でも残っている場合は Block、それ以外は Approve とします。アクセスできなかったすべてのソースに Not verified と記載します。