Communitygithub.com

huseyingayiran/inspiration-skills

Inspirationライブラリ(VASA.Works)から実際のデザインリファレンスを検索・表示・比較・批評します。ウェブサイトセクション、UIスクリーン、デッキ、ブランディング、OG画像、エディトリアル、イラスト、モーション、フォント、パレットに対応。また、ユーザーのInspirationボードやインポートしたXブックマークも管理します。

inspiration-skills とは?

このスキルは、Inspiration by VASA.WorksのMCPサーバーを介して、実在するデザインリファレンスを検索・表示・比較・批評するためのツール群を提供します。対応するカテゴリは、ウェブサイトセクション、UIスクリーン、スライドデッキ、ブランディング、OG画像、エディトリアル、イラストレーション、モーショングラフィックス、フォント、カラーパレットと多岐にわたります。主な機能として、検索時のクエリ翻訳、画像の実際の確認、類似アイテムの取得、複数リファレンスの比較表生成、ボードの作成・管理、Xブックマークの検索などがあります。特に、画像を実際に開いてから説明する「見てから話す」原則や、ユーザーの意図に合った4~6件の厳選されたリファレンスを提示する点が特徴です。また、APIコールの節約(バッチ処理)やクォータ管理に関するガイドラインも含まれています。Claude Code、Cursor、CodexなどのAIエージェントクライアント上で動作し、ユーザーがデザインパターンの具体例、ムードボード、または「もっとこういう感じ」のリファレンスを求めているときに特に有効です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/huseyingayiran/inspiration-skills/tree/HEAD/skills/inspiration-references

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

インスピレーションリファレンス

要件を簡潔で誠実な実際のリファレンスのセットに変えます:ライブラリを検索し、実際の画像を見て、それぞれが要件に合致する点を説明し、ユーザーが絞り込むのを助けます。良い回答は、ユーザーが行動できる4~6件のリファレンスであり、12個のリンクをダンプすることではありません。

いつ使うか

  • 「インスピレーションを探して」「良い価格ページを見せて」「優れたオンボーディングフローとはどんなものか」「フィンテックのヒーローセクションのリファレンス」「ムードボードを作って」「これに似たもの」「これら二つを比較」「これをボードに保存」「自分のボードを見る」「Xブックマークを検索」などのリクエスト。
  • また、ユーザーが「インスピレーション」と言わなくても、デザインパターンの実例を求めている場合。
  • ページのデザインや構築(inspiration-art-directionを使用)、パレットやフォントキット(inspiration-brand-kitを使用)、またはリファレンスの質問がないコード変更には使用しません。

ツールはここでは裸の名前(search_inspiration)で命名されています。クライアントによっては、mcp__plugin_inspiration_inspiration__(Claude Codeプラグインインストール)、mcp__inspiration__、またはコネクタ名などのサーバープレフィックスが付きます。

1. セットアップを確認

任意のプレフィックスの下で search_inspiration という名前のツールを探します。ホストがツールを遅延読み込みしている場合、ホストのツール検索を通じて読み込めれば利用可能と見なします。見つからない場合は references/setup.md を読み、ユーザーにクライアントに応じた設定手順を1つ伝えて停止します。それでも続行したい場合は、ライブラリのリファレンスを表示できないことを率直に伝え、自分の知識から一般的なガイダンスを提供します。ID、タイトル、画像URL、説明をでっち上げることは絶対にしないでください。

2. 要件を翻訳する

4つの要素を抽出します:何を(カテゴリとサブタイプ)、見た目(スタイル、色、テーマ、タイポグラフィ)、雰囲気(ムード)、コンテキスト(業界)。具体的で視覚的な単語を query に、明確な制約だけを filters に入れます。

search_inspiration(
  query="dark SaaS pricing with a highlighted middle tier",
  category="website-sections",
  filters={"subtype": ["pricing", "pricing-table"], "theme": ["dark"]},
  limit=6)
  • filters はキー間ではAND、キー内ではいずれか一致(OR)です。1~3つのキーが適切なことが多く、それ以上キーを追加するとほぼ結果がゼロになります。
  • subtype は、website-sections の場合はセクションタイプ(hero、pricing、cta、footer...)、slide-decks の場合はスライドの役割(cover、traction、the-ask...)、それ以外のカテゴリではアセットタイプ(logo、poster、dashboard...)を意味します。カテゴリごとの値とレシピは references/search-recipes.md を参照してください。
  • 要件が曖昧だったり値が不明な場合は、list_facets(category=..., top=25) を呼び出します。これは無制限です。エラーになった場合は、引き続き references/search-recipes.md の値を filters で使用し、フィルターを削除するのはその検索が結果ゼロの場合のみにしてください。
  • ユーザーが特定のブランドの見た目を指定した場合は、brand="<ウェブサイトスタイルのスラグ>" を渡して並べ替えを行うか、プロファイル辞書(palette、style、mood、typography、industry、tags、theme)を渡します。
  • 結果がゼロの場合は suggestions が返されます。提案を試すか、フィルターを1つ削除して1回だけ再試行し、緩和した内容をユーザーに伝えます。

limit=6 を使用すると、全セットが1回の画像呼び出しに収まります。limit=1 は「1つだけ」の場合に使用し、alternates が追加されます。

3. 見てから話す

検索ではURLとメタデータが返され、ピクセルは返されません。get_image をIDのリスト(最大6つ)で1回呼び出し、各画像を実際に見てから説明を書いてください。

各リファレンスについて以下を提供します:

  • IDとタイトル(IDはボードやフォローアップで使用します)。
  • 実際に何をしているか 要件に合致する点を、画像から1~2行で:レイアウト、階層、タイプの処理、色の割合、注目すべき詳細。
  • 適合ラベル 完全一致でない場合:「部分的:ダークでエディトリアル調だが、強調された段がない」。正直なラベルはリストを水増しするよりも優れています。

次に、2~3行の総合的な分析を追加します:強いリファレンスに共通するパターン、そしてどれから始めるべきか、その理由。タイトル、タグ、フィルターの一致は、画像が確認しない限り説明に含めないでください。theme: dark で通過した結果でも、明るいページである可能性があります。部分的とラベル付けします。目に見えるものだけを説明してください:モーション、ホバー状態、スクロール効果は静止画像では見えません。

4. さらに、絞り込む、または類似

  • 同じ検索の続き: exclude_ids=[既に表示したID](推奨)または offset=6 を指定して再検索。最初に has_more を確認します。
  • これに類似: similar_items(id, limit=6)、または同じ呼び出しでシードのファセットも取得したい場合は get_inspiration(id, similar=6)。
  • これに似ているが変更あり(「もっと明るく」「もっと遊び心を」「フィンテック向けに」):シードのファセット(get_inspiration(id))を読み、シードの画像を見てから、そのサブタイプと変更された制約をフィルターまたはクエリワードとして検索し、シードを除外します。get_inspiration がエラーの場合、search_inspiration(query="<スラグの単語>", category="<シードのカテゴリ>", limit=3) でシードの行を見つけ、image_url を開いてピクセルから見た目を取得します。シードと比較して何が変わったかをメモします。
  • いくつかの詳細: get_inspiration([ids], detail="standard") を1回の呼び出しで。detail="full" は大きいので、必要なフィールドが不足している場合のみ使用します。

5. リファレンスの比較

ユーザーが「どちらが良いか」「どう違うか」と尋ねた場合、すでに取得した画像(不足しているものがあれば1バッチで取得)を基に候補を並べて比較します:

リファレンス Aリファレンス B
階層
タイポグラフィ
色とコントラスト
密度と間隔
何を参考にするか

最後に、ユーザーの要件に基づいた推奨と、それぞれから何を残すべきかを述べます。原則を参考にし、ピクセルをコピーしないでください:ロゴ、コピー、画像、ライセンスフォントをコピーすることは提案しないでください。

6. ボード

ボードはユーザーのInspirationアカウント(inspiration.vasa.works)に保存されます。

  • 明示的な依頼、またはユーザーの同意があった場合のみ書き込みます。 検索、表示、いいねは許可ではありません。結果を表示した後、一度だけ「これをボードに保存しますか?」と提案します。
  • save_to_board(title, ids=[...]) はボードを作成するか、同じタイトルのボードが存在する場合は追加します。board_url、item_count、added、already_in_board を返します。URLを共有してください。
  • save_to_board(title, query=..., filters=..., category=..., limit=...) は検索と保存を1回で行います。ユーザーが事前に確認せずに「見つけたものを全て保存」と依頼した場合のみ使用します。
  • list_my_boards() は「自分のボード」を表示します。get_board(board)(IDまたはスラグ)で1つのボードを表示し、ユーザーが画像を見たい場合は、そのアイテムIDのうち最大6つに対して get_image を呼び出します。
  • add_to_board(board, item_ids) は特定の既存ボードに追加します。create_board(title, item_ids) は空またはシード付きの新しいボードを作成します。
  • エラー:board_limit または item_limit(ユーザーに伝え、既存のボードを提案)、rate_limited(待機して1回再試行)、nothing_to_save(IDを渡す)。

7. ユーザーのXブックマーク

ユーザーが自分のブックマークや保存した投稿について言及した場合、search_x_bookmarks(query, limit=10) を呼び出します。これはインポートされたブックマークのみを検索します。"status": "not_connected" の結果には connect_url が含まれます。それをユーザーに渡します。結果にはツイートテキスト、画像URL、投稿リンクが含まれます。画像を実際に閲覧できた場合のみ説明し、そうでなければ保存されたテキストを引用して「画像は見ていません」と伝えます。

予算

無料アカウントでは、月間(UTC)あたり50回のメーター制呼び出しが許可されています。典型的なリクエストは3~5回の呼び出しを消費します:

ステップ呼び出し回数
list_facets(曖昧な場合のみ)0、無制限
search_inspiration1(1回の再試行で2)
get_image(最大6件のバッチ)1
フォローアップ1回(さらに、類似、比較、保存)1または2

全てをバッチ処理します:get_image は最大6つのIDを受け付け、get_inspiration はリストを受け付けます。アイテムごとに1回呼び出すループは絶対にしないでください。

クォータとエラー

ツールがエラー、quota_exhausted、capped を返した場合、または get_image が失敗した場合(パブリックな image_url による画像フォールバックがあり、メーター制呼び出しは消費されません)は、初回のみ references/library-rules.md を読んでください。簡略版:quota_exhausted は全てのメーター制呼び出しを停止します(https://inspiration.vasa.works/pricing へのリンクを提供し、現在の内容で終了)。capped はそれ以上のページがないことを意味します。not_found は再検索を意味します(IDを推測しないでください)。subscription_required はサインインを意味します。2つの異なるツールで同じサーバーエラーが発生した場合は、縮退モードを示します。エラーになった呼び出しも予算にカウントされます。ボードのエラーはセクション6を参照してください。

ルール

  • 忠実性。 実際に開いた画像(get_image、または image_url フォールバック)で見たものだけを説明してください。タイトルだけから詳細を主張しないでください。
  • 原則であって、ピクセルではない。 リファレンスは参考にするものであり、コピーするためのテンプレートではありません。
  • ライブラリ名のみを指定する。 Inspirationライブラリ、またはInspiration by VASA.Worksと呼んでください。アイテムの出所について推測しないでください。サードパーティのサイトをアイテムの出典としてリンクしないでください。フォントファウンドリやライセンスページ、ユーザー自身のブックマーク投稿リンク、ボードURLは問題ありません。
  • サイレントなボード書き込みは禁止。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル