mcpField
G
gather

gather

github.com/raphaelsalajaデザイン・UI4741 回インストール今日更新
リポジトリ

gather について

デザインの新規作成や改修の前に、参考資料を集めるスキルです。まずユーザー自身の保存資料を調べ、その後複数の情報源から集めた参考を、着目点と出典リンク付きのボードにまとめます。

主な機能

  1. 01ユーザー提供資料を先に確認
  2. 02ユーザーの保存資料を優先検索
  3. 03複数の情報源から参考を収集
  4. 04参考ごとに着目点を記載
  5. 05リンクを一つのボードに整理

活用シーン

  1. 01新しいインターフェースの着想探し
  2. 02既存画面の改修に向けた参考収集
  3. 03指定プラットフォームの画面例検索
  4. 04検討用デザイン案の整理

インストール

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

$npx skills add https://github.com/raphaelsalaja/skills --skill gather

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

board.html
sources.md
agents/
openai.yaml

詳細

Gather

このスキルは、デザインを作成または再設計する前に、インスピレーションを集めます。まずユーザー自身の保存済みアイテムを検索し、次に幅広い情報源を調べ、すべての参考例が元の情報源へのリンクと、取り入れるポイントを記載した1つのボードにまとめます。

参考例を判断材料にする。模倣するスタイルにしない

参考例からは、ある部分をどう実現できるかがわかります。ユーザーがトップバーを求めているのに、アプリ全体の見た目を取り入れるのは、判断の誤りです。数の指定がない場合は、3つ以上の情報源から少なくとも20件の参考例を集めます。

ユーザーがインスピレーションや参考例、または「inspo」を求めた場合や、画面の見栄えが悪いと言って改善方法を尋ねた場合に使います。ボードをもとにバリエーションを作る作業はprototypeに属します。参考例を完全に忠実に再現する作業はmatchに属します。

1. 要件を明確にする

対象、プラットフォーム、探すポイント(レイアウト、ナビゲーション、情報密度、書体、色、動き、全体的な雰囲気)を1行で記述します。目的の定まらない検索はgather-name-the-briefです。

作業対象と同じプラットフォームで検索します。デスクトップアプリやWebアプリなら、Webとデスクトップの参考例を探します。デスクトップアプリの参考例にモバイル画面を使うのはgather-same-platformです。

2. ユーザーが提示したものから始める

ほかを検索する前に、スレッド内にあるタブ、スクリーンショット、リンク、デザインファイルを開きます。ユーザーのスクリーンショットがブラウザーで開かれているのに、パターンライブラリを検索するのはgather-start-with-givenです。

3. まずユーザー自身の好みを探す

公開情報源より先に、ユーザー自身のライブラリやボードを検索します。保存済みのアイテムには、すでにユーザーの好みが反映されています。ユーザー自身のライブラリに該当する保存済みアイテムがあるのに、公開ライブラリから探し始めるのはgather-own-library-firstです。各情報源へのアクセス方法はsources.mdに記載されています。

4. 幅広く探す

3つ以上の情報源から集めます。パターンライブラリはフローや画面を示します。ボードや保存済みアイテムからは、書体、色、写真、ムードなどの好みがわかります。1つのアプリだけから作ったボードはgather-go-wideです。

指定された件数を集めます。ユーザーが追加を求めた場合は、新しい参考例を提示し、すでに見せたものは除外します。「さらに50件」と言われたのに重複するのはgather-enough-to-chooseです。

5. 取り入れる部分とリンクを記載する

各参考例には、「トップバー」や「空の状態」など、取り入れる部分を1行で記載します。メモのない参考例はgather-name-the-partです。ユーザーが元の情報源を開けるよう、それぞれに元のリンクを付けます。リンクのない画像はgather-link-every-referenceです。

6. ボードを1つ作って開く

board.htmlを.gather/<brief>/index.htmlにコピーします。このフォルダーは無視対象であり、ソースツリーには作成しません。ヘッダーコメントに示された形式で、隣にboard.jsを作成し、画像をimg/に配置してから開きます。ボードではなく、リンクをチャットに貼るのはgather-one-boardです。

ボードの見た目はスキルに含まれているため、データだけを書き込みます。独自のマークアップやスタイルを含むページはgather-shipped-boardです。

各グループ名は「Agent Activity」のように2、3語のタイトルケースにし、詳細はメモに記載します。文のようなグループ名はgather-short-group-namesです。

7. ユーザーが選んだものを保存する

ユーザーはボード上の「Keep」で選んだアイテムに印を付け、「Copy Picks」でコピーして返します。選んだアイテムの保存を求められたら、指定された場所(ユーザーのライブラリ、チャンネル、ボードなど)に保存します。まず保存先の命名規則を確認し、それに合わせます。fashion / inspiration / 2026 / fall winterの隣に「FW 26 🔥」という新しいチャンネルを作るのはgather-match-the-namingです。

追加する前に、各アイテムが保存済みか確認します。保存済みアイテムを重複して追加するのはgather-no-duplicatesです。情報源へのアクセスにログインやCAPTCHAが必要な場合は、作業を止めてその旨を伝えます。ログインを回避するのはgather-ask-at-loginです。

ペア

各チェックはペアです。問題のある行の隣に、それを置き換える行があります。

ルール問題のある行置き換える行
gather-name-the-brief"設定ページを検索""デスクトップの設定ページで、グループ化と密度を探す"
gather-same-platformデスクトップアプリのiOS画面platform: "web" とデスクトップアプリ
gather-start-with-givenユーザーのタブが開いている状態で、パターンライブラリを検索まず開いているタブを確認
gather-own-library-first公開ライブラリを先に検索まずユーザーのライブラリを検索し、その後に範囲を広げる
gather-go-wide1つのアプリから20画面保存した項目、ボード、パターンライブラリ
gather-enough-to-choose"50件追加"で最初の20件が再び返される以前のIDを除外した、新しい参考資料50件
gather-name-the-part注記のないスクリーンショット"色ではなく、グループ化されたリストを参考にする"
gather-link-every-reference出典のない画像画像から元のページにリンクする
gather-one-boardチャットに貼り付けられた20件のリンクアイデア別にまとめられた.gather/settings/index.htmlを開く
gather-shipped-board最初から作成したボードページboard.htmlをコピーし、board.jsのみを作成
gather-short-group-names"アクティビティ:思考、ツール呼び出し、ステップ""エージェントのアクティビティ"
gather-match-the-naming"FW 26 🔥"という新しいチャンネルfashion / inspiration / 2026 / fall winter
gather-no-duplicates同じピンを2回追加既存の項目を確認してスキップ
gather-ask-at-loginログインを迂回"Pinterestにサインインしてください"

報告

重大度。 HIGHは、あるパーツだけを求められたのに全体の見た目をコピーした場合、または項目を重複して保存した場合や誤った名前で保存した場合です。MEDIUMは、プラットフォームが違う、出典が1つだけ、リンクのないボード、または手書きのボードです。LOWは、参考にする箇所の注記がない参考資料、または長いグループ名です。

形式。 根本原因ごとに1件の指摘を記載します。該当するファイルがない場合は、リクエストを引用します。

file:line - [rule-id] what is wrong
request 2 - [rule-id] what is wrong

続けて、Rule | Count | Severityの概要を記載します。HIGHが1件でも残っている場合はBlock、それ以外はApproveとします。アクセスできなかった出典にはすべてNot verifiedと記載します。

コメント