brand-search について
brand-searchは、自然言語クエリによるWebサイト検索や、抽出済みサイトに似たブランドの検索方法を案内するデザインスキルです。クエリの作成、結果の確認、ブランド情報の抽出手順を定めています。
主な機能
- 01自然言語クエリでブランドを検索
- 02抽出結果から類似ブランドを検索
- 03依頼の意図に沿ったクエリ作成
- 04全結果のメタデータとスクリーンショットを確認
- 05必要に応じたブランド抽出と結果の確認
活用シーン
- 01デザイン方針に合うサイト参考例の収集
- 02指定サイトを起点に視覚的な参考例を拡張
- 03検索結果を確認してデザイン参考例を選定
- 04後続作業向けにサイトのデザイン属性を抽出
MCP 対応
このスキルは、`search_brands`、`search_similar_brands`、`extract_brand`、`poll_brand_extraction`、`get_brand_extraction_result`などのツールの利用方法を案内します。検索、ブランド情報の抽出、抽出状況の確認手順を説明します。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ taste-ai/ skills --skill brand-searchインストール後、Claude Code で/brand-searchを入力して読み込まれたか確認します。
詳細
ブランド検索
1. 適切な検索ツールを選ぶ
どちらのツールも同じものを返します。要約されたブランドメタデータとスクリーンショットを含む、ウェブサイトの参照情報です。入力内容が異なります。
search_brands:自然言語のクエリを入力します。ユーザーやエージェントが求めた内容がクエリになります。例:search_brands("dark brutalist developer tools")、search_brands("warm pastel skincare landing pages")。
search_similar_brands:抽出が完了したサイトの submission_id を入力すると、そのサイトに最も近いビジュアル上の類似サイトが返されます。例:linear.app を抽出して submission_id を受け取り、その ID を渡します。
search_brands
探しているもの(スタイル、レイアウト、配色、動き、トーン)を把握したうえで、以下のガイドラインに沿って各クエリを作成します。
- ユーザーまたはエージェントのプロンプトにある本来の意図に必ず従います。求められていないものを追加したり、内容を別の表現に置き換えたりしないでください。プロンプトに「モノクロ」とあれば、クエリもモノクロです。「白黒」ではありません。
- 参照先を選ぶ前に、ステップ 3 の説明に従って、返された結果をすべて確認します。
雰囲気だけを示すプロンプトなら、クエリもその雰囲気だけにします。例:search_brands("dreamy editorial skincare, calm and warm", top_k=6)。
ユーザーがスタイルやムーブメントを指定した場合は、その言葉をそのまま使います。スタイル用語は、正式なタグが付いていないものも含めて検索側で解釈されます。独自の類義語に置き換えると、検索側が判断すべき内容をこちらで決めてしまうことになります。search_brands("vintage feeling clothing brand site") では、コーパス内でこの系統に付けられている正式なタグが「Retro」であっても、「vintage」を維持します。ユーザーが「vintage」と言ったので、検索するのも「vintage」です。同じ考え方で、search_brands("y2k web aesthetic for a music label") や search_brands("swiss international style studio portfolio") もそのまま使います。
プロンプトの起点が色やトーンの場合は、色相ではなく色の役割を基準に探します。有用なのは、トーンが同じ構造的な役割(背景、文字色、アクセント)を果たしているサイトのまとまりです。色相が近くても、別の役割を果たしているサイトは対象にしません。search_brands("cream ground with a terracotta accent") はこのように作成します。
比較対象を指定するプロンプトは、それ自体を検索の方向付けに使うため、クエリに含めます。参照情報として扱うわけではありません。例:search_brands("like Notion but for restaurants")。サイト間検索の方法も独立した検索セットとして実行します。詳細は以下を参照してください。
プロンプトがすでに業界をまたいだ組み合わせを含んでいる場合(「遊び心のあるカラフルな消費者向けフィンテック」、「ゲームに影響を受けた印象の B2B SaaS ブランド」など)、その組み合わせをそのままクエリに含めます。新たに考える必要はありません。例:search_brands("playful colorful consumer fintech")、search_brands("B2B SaaS brand that feels gaming inspired")。
search_similar_brands
すでにブランドが決まっていて、それに似たブランドを探したい場合に使います。そのブランドを参考にする場合も、方向転換の起点にする場合も同じです。このツールが読み取るのは完了済みの抽出結果であり、urlではないため、まず起点となるブランドを用意します。
- この実行時または以前の実行時に抽出が済んでいる場合は、その
submission_idをそのままsearch_similar_brandsに渡します。 - urlしかない場合は、
search_brandsのカードにあるものでも、ユーザーが指定したサイトでも、まず抽出します。extract_brand(url)→ ポーリング →search_similar_brands(submission_id)の順に進めます。この一連の流れは手順 4 に記載されています。
「自社のようなサイト」「acme.com の競合」「patagonia.com のようなサイト」のように、特定の条件を付けないサイト検索では、2 つの視点を同時に使います。抽出結果に対する search_similar_brands(submission_id) は「見た目」(全体的な視覚表現が近いもの)をたどり、起点を指定した深掘り型の search_brands は「意味」(文化的な近接領域)をたどります。patagonia.com の場合は、search_brands("outdoor apparel brand with rugged environmental storytelling") が該当します。2 つの結果セットは分けて確認し、それぞれの順位を維持します。
参照元がすでに指定されている場合は、「linear.app のレイアウト、ramp.com の色」のように、そのまま直接抽出します。すでに参照先が決まっているためです。extract_brand("https://linear.app")、extract_brand("https://ramp.com") のように実行します。ボードでさらにその見た目に近いものを探したい場合に限り、どちらかに対して search_similar_brands(submission_id) を実行します。それらのサイトで網羅されていない要素は、代わりに search_brands に渡します。
方向転換を含むサイトの場合は、クエリと並行して 2 つ目の経路を実行します。起点を抽出し、その類似サイトを探します。たとえば、「Notion のような、レストラン向けのもの」というプロンプトなら、Notion の抽出結果に対して search_similar_brands(submission_id) を実行します。結果セットは分けておきます。クエリは方向転換の要件を反映し、類似サイトは起点の視覚的な近接領域だけを示します。
さらに詳しく調べる価値のある候補が見つかった場合、それはプロンプトの形式ではなく、このツールのもう 1 つの使い方です。すでに得られた結果セットを別の視点で調べる方法で、1 位の結果に対して search_similar_brands(submission_id) を実行します。詳しくは手順 3 を参照してください。
2. スタイルを決めつけずにクエリを書く
各クエリには、プロンプトに実際に書かれている内容を反映します。業界、ページの種類、対象ユーザー、コンテンツ、指定された参照先、そしてユーザーが挙げたスタイル、レイアウト、配色に関する言葉です。独自の思い込みを美的な検索フィルターにしてはいけません。プロンプトにスタイルの指定がなければ、スタイルは含めず、返された参照先から方向性を見つけます。
プロンプトにない形容詞をクエリに付け足してはいけません。「大胆なレトロ」「食欲をそそる」「地域の活気」などです。独自に追加した表現は、その都度、コーパスが判断するはずのことを先回りして決めつけてしまうため、結果は自分の予想に同意するものばかりになります。表現豊かな形容詞は、結果を見てから、そこに見つけた要素を根拠にさらに調べる段階で使います。
プロンプトに、事実とは言えない形容詞が含まれていることもあります。「完全にカスタムで独自の個人ウェブサイト」には、業界、スタイル、参照先のいずれも指定されていません。「カスタム」と「独自」はどのプロンプトにも当てはまる一方、検索条件としては何も絞り込めません。search_brands("completely custom and unique personal website") を実行すると、コーパスが「珍しい」とタグ付けしたものが返ってくるだけで、実際に役立つ方向性を示すとは限りません。意味のない形容詞は省き、残された 1 つの事実、search_brands("personal portfolio website") を検索して、結果から方向性を見つけます。
top_k のデフォルト値は 6 で、サーバーは最大 30 まで受け付けます。プロンプトで幅広いムードボードが求められている場合は、12 に増やします。
3. 再ランキングせずに結果を確認する
結果はランキング順に返されます。上位の結果は、検索でクエリに最も近いと判断されたものです。「discovery」とラベル付けされた結果も、検索でそのスタイルに合致すると判断されたサイトであり、結果の多様性を保つために含まれています。
discovery の結果には、そのスタイルに関連するインスピレーションが示されています。スタイルの異なる側面を取り入れたものや、クエリに書き込もうとは思わなかった配色、レイアウト構成、イラスト、タイポグラフィの扱いなどがあります。
あらゆるクエリのすべての結果、discovery の結果も含めて、すべて必須の根拠です。各結果について、メタデータと説明を読み、スクリーンショットを確認してください。参照先を選ぶ前に、返された順に結果を確認してください。動きやインタラクションについて説明する場合は、実際のサイトで確認してください。確認したデザインがユーザーのプロンプトと矛盾する場合は、その結果を除外できます。具体的な不一致点を明記してください。
結果をさらに詳しく確認する場合は、その結果に対して extract_brand を実行してください。抽出後、その結果に対して search_similar_brands を実行すると、そのブランドのビジュアル面で近い範囲も含めて結果を広げられます。
4. ソースを取得する
カードに表示されている情報だけでは足りない場合に限り、抽出してください。メタデータ、説明、スクリーンショットだけで参照先を判断できる場合がほとんどで、デザインを作るのに十分なこともよくあります。そのソースを直接もとに構築するために、実際の値(書体、余白、配色、レイアウト構成など)が必要な場合や、search_similar_brands に渡す submission_id が必要な場合は、extract_brand を使用してください。デフォルトで結果セット全体を抽出にかけないでください。
抽出が必要な場合は、ソースを extract_brand に渡し、結果が返ってくるまでポーリングしてください。
extract_brand(url) → submission_id
poll_brand_extraction(submission_id) # accepted → extracting → ... → completed or failed
get_brand_extraction_result(submission_id)
バッチの実行中は、すでにあるソースを調べてからキューに戻ってください。完了した各結果を get_brand_extraction_result で読み取ってください。失敗は記録し、同じクエリの次のランキング結果に置き換えてください。