Inspiration Art Direction — 実在の参照からサイトとデッキを作る

Inspiration アートディレクション

与えられたブリーフを、デフォルトではなくInspirationライブラリの実在リファレンスから作業することで、考え抜かれたページに仕上げます。このスキルを実行すると、ユーザーのプロジェクトに以下の3つの成果物が生成されます：

• .inspiration/references.md： 仕様書（閲覧した5～8件のリファレンスと、それぞれから得られるもの）。
• .inspiration/direction.md： デザイン方針。すべての決定がどのリファレンス（スペシメン）に基づくか明記。
• ビルド、さらに.inspiration-out/ の下にスクリーンショットとインスペクタレポート。プロジェクトに .gitignore がある場合は、最初の書き込みの前に .inspiration-out/ を追加します。

使用するタイミング

• 「ランディングページをデザインして」「このサイトに外観を付けて」「ヒーローセクションはどうあるべきか」「リファレンスを探して構築して」「このデックをアートディレクションして」といったリクエスト。
• ユーザーが構築前に文章による指示を希望する場合、または出力が「ジェネリック」「テンプレートっぽい」「AIっぽい」と感じられ、よりプレミアムで、編集部的で、大胆で、個性的なものにしたい場合。
• リファレンスの調査だけ（inspiration-referencesを使用）、パレットとタイプキットだけ（inspiration-brand-kitを使用）、またはビジュアルデザインを伴わないコード変更（CSSバグ、リファクタリング）には使用しません。

厳格なルール

1. 忠実性。 実際に開いた画像（get_image から、またはその image_url フォールバック）で見たものだけを説明します。タイトル、why 文字列、ファセットは手がかりであり、証拠ではありません。自分で閲覧しなかったリファレンスを引用してはいけません。
2. 決してコピーしない。 原則を取り入れ、ピクセル単位でコピーしません。レイアウトを丸ごと流用してはいけません。リファレンスのコピー、画像、イラスト、ロゴ、ライセンスフォントを再利用してはいけません。各スペシメンは、何を残すかを指定しなければなりません。
3. 予算。 約12回の計測ツール呼び出しを計画します（以下の予算表を参照）。エラーになったものを含め、計測呼び出しのすべてをカウントします。バッチ処理：get_image は最大6つのIDを受け付け、get_inspiration はリストを受け付けます。
4. ボードはオプトイン。 ユーザーが明示的に依頼しない限り、save_to_board、create_board、add_to_board を呼び出してはいけません。
5. 命名。 ソースは「Inspirationライブラリ」または「Inspiration by VASA.Works」と呼びます。アイテムは https://inspiration.vasa.works/item/<id> としてリンクし、ツールが返す image_url 値も同様にします。アイテムの出典としてサードパーティのサイトにリンクしてはいけません。フォントファウンドリやライセンスページ、ボードURLは問題ありません。

ステップ0： セットアップ確認

search_inspiration という名前のツールが、任意のサーバープレフィックス（Claude Codeプラグインインストールの場合は mcp__plugin_inspiration_inspiration__、mcp__inspiration__、mcp__Inspiration__、コネクタ名、またはプレフィックスなし）で利用可能か確認します。ホストがツールを遅延ロードとしてリストしている場合、ホストのツール検索を通じてロードできれば利用可能とみなされます。このスキル内のツールはプレフィックスなしで記述されています。

• 利用可能： 続行。
• 欠落： references/setup.md を読み、クライアントに合ったセットアップ手順を1回だけユーザーに伝えます。その後、ユーザーが先に接続したいと言わない限り、以下の「ライブラリなし」モードで続行します。
• {"error": "subscription_required"} を返す呼び出しは、サーバーに接続されているがサインインしていないことを意味します：references/setup.md からサインイン手順を伝えます。

ステップ1： ブリーフと題材の棚卸し

検索する前に、以下の項目を書き出します（リポジトリや会話から推測できないものだけを尋ねます）：

• それが何か： 製品またはテーマを一文で、訪問者が理解すべきことを一つ。
• ターゲット： 誰か、何を既に知っているか、何が彼らに信頼感を与えるか。
• 伝える必要のあるコンテンツ： 実際の見出し、証拠（ユーザーが実際に持っている数字、ロゴ、引用）、利用可能な製品ビジュアル、CTA、法的または価格に関するコンテンツ。リストアップします。これがセクションを決定します。
• 制約： 技術スタック、既存コンポーネント、ブランド資産（ロゴ、色、ライセンスを持つフォント）、アクセシビリティ要件、期限、ライト/ダークの好み。
• 既存のブランド？ .inspiration/brand-kit.md または .inspiration/tokens.css が存在する場合、それらを既存のブランドとして扱います。存在する場合、デザイン方針はそれを置き換えるのではなく拡張しなければなりません。ブランドに合致する website-styles のスラグがあれば、ブランドに沿ったランキング（brand パラメータ）のためにそれをメモします。
• ページの構成： ページに必要なセクションを順序立てて（例：ヒーロー、ロゴ、特徴、仕組み、価格、FAQ、CTA、フッター）。特に主張を伝えるセクションを2～4つマークします。それらのセクションについては個別に検索を行います。

プロンプトにコンテンツがない場合（証拠、価格、ビジュアルのない一言指示）、立ち止まって質問せず、ブリーフ内に明確にマークされたプレースホルダーとして欠落項目をリストし、続行します。

これを .inspiration/direction.md の最初のブロックとして書き、ユーザーが早期に修正できるようにします。

ステップ2： 調査計画

references/research.md を読み、ページタイプごとのクエリレシピ、フィルター例、予算表を確認します。デフォルト計画：

#	呼び出し	計測	目的
a	list_facets(category="website-sections")	いいえ	subtype、style、mood、layout、typography のための実際の語彙を取得
b	1～2回のムード検索	はい	全体的な雰囲気。カテゴリをまたいで（category または website-sections なし）
c	2～3回のセクション検索	はい	キーセクションごとに1回。category="website-sections"、filters={"subtype": ["hero"]} など
d	1回のカテゴリ間検索	はい	テクスチャ：fonts、website-styles、branding または editorial-print。ブリーフに最も必要なもの
e	オプションで1回の similar_items(id)。最初の get_image バッチの後	はい	実際に見た中で最も強い候補から広げてドリフト。最初のバッチに既に多様性があればスキップ
f	2回の get_image([...6 ids])	はい	ショートリストを閲覧
g	1回の get_inspiration([キープしたID])	はい	パレットの16進数、タイポグラフィノート、キープしたセットの完全な説明
h	オプションで analyze_palette または generate_palette	はい	パレットの確認または拡張

これで計測呼び出しは7～11回（bからh）になり、約12回の予算内に1回の再試行余地が残ります。ユーザーがProプランだと述べた場合、セクション検索や3回目の画像バッチを追加しても構いませんが、キープするセットは5～8個に留めます。

検索の衛生：

• クエリは実際に見えるものをフレーズ化：「ダークヒーローで特大セリフ見出し、製品スクリーンショット」、「良いヒーロー」ではありません。
• 制御値は filters に（キー間はAND、キー内はany-of）。フィルターで表現できない部分だけクエリに残します。
• 既に見たIDは exclude_ids に渡して、後の検索で繰り返さないようにします。diversify はオンのまま。
• 結果がゼロの場合は suggestions を返します：そのうちの1つで1回だけ再試行し、それでもダメなら次に進みます。
• list_facets がエラーになった場合、references/research.md にリストされた一般的な値（特に subtype）を filters で使い続けます。そのフィルターで検索結果がゼロになる場合のみ、フィルターを削除します。

検索結果から、最大12個のIDの候補リストを作成します。1つのルックの12バージョンではなく、異なる構造やムードの範囲を選びます。

ステップ3： 閲覧とショートリスト作成

1. 最大6つの候補IDを1回の呼び出しで、最大2回呼び出して get_image を実行します。応答はマニフェスト（order、errors）で始まります。その順序で各画像をIDにマッピングし、errors にリストされたIDは除外します。2つのバッチの間に、オプションでこれまで見た中で最も強い画像に対して similar_items を実行し（ステップ2、行e）、その最良の選択を2回目のバッチに入れます。 get_image が失敗した場合： references/library-rules.md の画像フォールバック（公開 image_url、計測呼び出しなし）を通じて候補を表示します。
2. 各画像を適切に観察します：構造、タイポグラフィ（分類、スケールコントラスト、ケース、トラッキング）、カラーフィールドとアクセント、密度、イメージ、1つの異例の動き。
3. 5～8個をキープします。キープする各リファレンスは、役割（ムード、ヒーロー、名前の付いたセクション、タイポグラフィ、パレット、テクスチャ）を獲得しなければなりません。類似したものや、具体的に何かを言えないものはカットします。
4. キープしたIDをリストにして get_inspiration を1回呼び出し、パレットの16進数とタイポグラフィノートを取得します。そのテキストは補足詳細として扱い、自身の観察が優先されます。エラーの場合は再試行せず、開いた画像から16進数をサンプリングします（例：magick <n>.png -resize 200x200 -colors 6 -format %c histogram:info:-、ImageMagickが必要。なければ見た目から推定しその旨を明記）。シートに16進数はサンプリングしたと明記し、ピクセルからタイポグラフィを判断します。

ステップ4： 仕様書

references/specimen-sheet.md の正確なフォーマットを使用して .inspiration/references.md を記述します。キープした各リファレンスについて：

• id、タイトル、役割、リンク https://inspiration.vasa.works/item/<id>、そして image_url。
• 見たもの： 2～4つの具体的で目に見える事実。
• 取り入れるもの： 借用する原則。異なる対象にも適用できるように記述。
• 残すもの： 意図的に使用しないもの（レイアウト、コピー、イメージ、ブランドマーク、書体、このブリーフに合わないものすべて）。
• 活かし方： その原則がこのページで具体的にどのような形になるか。

シートの最後に、セットに共通する点と、解決すべき対立点を1行ずつ記述します。

ステップ5： デザイン方針

リファレンスからデザイン方針を導き出します。プリセットスタイルに手を伸ばしてはいけません。.inspiration/direction.md（ブリーフブロックの後）に、以下の見出しで記述し、各決定の後にリファレンスIDを角括弧で引用します：

1. コンセプトライン。 デザイナーが議論できるような一文。例：「ダッシュボードではなくフィールドガイド」。
2. アンチ目標。 このページが絶対に似せてはいけない3～5つの事項（通常なら生成するであろうジェネリックなデフォルト：中央寄せヒーロー、紫のグラデーション、3つのアイコンカードなどを含む。ただしブリーフに合わない場合）。
3. タイポグラフィシステム。 ファミリーと役割（表示用、本文用、UI用、オプションでモノスペース）、1440px幅と390px幅でのサイズスケール（px）、行間、トラッキング、ケース。プロジェクトが法的にロードできるフォントを使用（オープンライセンスのファミリーまたはユーザーのライセンスフォント）。ライブラリのフォントアイテムは分類とペアリングを通知しますが、ライセンスは付与しません。予算が許せば、フォントIDに対する suggest_pairing が役立ちます。
4. パレット。 役割（グラウンド、サーフェス、テキスト、薄いテキスト、アクセント、状態色）付きの16進数、各テキストペアのコントラスト。オプションで analyze_palette(hexes) または generate_palette(color) を実行してランプを取得。
5. レイアウトとグリッド。 カラム数、最大コンテンツ幅、ガター、セクション間スペーシングのリズム、配置ルール、ブレークポイント。
6. セクション。 順序付けられたページ。各セクションの役割、インベントリから受け取るコンテンツ、参照するリファレンス。
7. イメージとグラフィック。 存在するビジュアル、作成するもの（図、クロップ、イラストスタイル）、避けるべきもの。
8. モーション。 理解を助ける場所、継続時間とイージング、動きを減らした場合のフォールバック。デフォルトは控えめに。
9. シグネチャーディテール。 リファレンスから来た、記憶に残り、構築可能な1つの動き。コピーではなく再解釈。

コンセプトライン、アンチ目標、シグネチャーディテールを短いメッセージでユーザーに示します。ユーザーが反対するか、先に承認を求めない限り続行します。

ステップ6： ビルド

• プロジェクトのスタックとコンポーネントを使用します。プロジェクトがない場合、1つの静的な index.html をインラインCSS（と最小限のJS）で構築します。
• トークンから開始：デザイン方針に基づくタイプスケール、スペーシング、色、角丸のCSSカスタムプロパティ。次にセクション、ページ順に。
• インベントリからの実際のコンテンツ。コンテンツがない場合は、明確にマークされたプレースホルダーを使用。顧客のロゴ、 testimonial、指標、賞を決してでっち上げて実際のものとして提示してはいけません。
• セマンティックHTML：1つの h1、順序付けられた見出し、意味のある画像すべてに alt、可視フォーカス状態、入力にラベル。
• モバイルとデスクトップを同時に構築。最後ではなく、390px幅で随時確認。

ステップ7： ルック・アンド・フィックスループ

references/critique.md を読み、ルーブリックを確認します。その後、最大3ラウンド：

1. レンダリング。 このスキルのフォルダ（このSKILL.mdを保持するフォルダ）からインスペクタを実行： node <skill-folder>/scripts/inspect.mjs <url-or-html-path> --out .inspiration-out/round-<n> これにより page-1440.png、page-390.png、report.json（使用中のフォント、テキストと背景色、見出しサイズ、文字数、オーバーフロー、欠落alt、低コントラストサンプル）が出力されます。Playwrightがない場合は1行の修正が表示されます（npx -y -p [email protected] node <skill-folder>/scripts/inspect.mjs ...）。ホストが独自のブラウザやスクリーンショットツールを持っている場合、それでも構いません。
2. 観察。 スクリーンショットを開いてレポートを読みます。各セクションをそれが引用するリファレンスと比較し、ページ全体をコンセプトラインとアンチ目標と比較します。
3. 採点。 ルーブリックの各行を0～2で評価し、最も大きな問題を3つ、最も目立つものから順にリストアップします。両方を .inspiration/direction.md の「Round 」の下に記述します。
4. 修正。 その3つを修正し、再レンダリングします。

すべてのルーブリック行が2になった時点、ラウンド3終了時、またはあるラウンドで実質的な変更がなかった時点で停止します。ブラウザが全く動作しない場合、コードをルーブリックに対してレビューし、ユーザーにスクリーンショットを提供できるか尋ね、視覚的チェックが行われなかったことを明確に述べます。

ステップ8： 引き渡し

ユーザーに簡単に伝えます：

• 何がどこに構築されたか、そしてコンセプトライン。
• 使用したリファレンス：id、タイトル、リンク https://inspiration.vasa.works/item/<id>、それぞれが貢献した1つのこと。
• 最終のインスペクタラウンドでまだフラグが立っている内容（あれば）。
• 実行で使用した計測呼び出しのおおよその回数、スキップまたは劣化したステップ（サーバーエラー、image_url フォールバック、クォータ）。
• 提案：「これらのリファレンスをInspirationボードに保存しますか？」「はい」の場合のみ、save_to_board(title, ids=[...]) を呼び出し、返されたボードURLを共有します。

クォータとエラー

ツールがエラー、quota_exhausted、または capped を返した最初の時点で references/library-rules.md を読みます。短いバージョン：quota_exhausted はすべての計測呼び出しを停止します（https://inspiration.vasa.works/pricing にリンク、手持ちで終了）、capped はそれ以上のページがないことを意味し、subscription_required はサインインが必要であることを意味します（ステップ0）、同じサーバーエラーが2つの異なるツールで発生した場合は縮退モードを意味します。エラーになった呼び出しも予算にカウントされます。

ライブラリなしの場合

MCPが接続されていない場合（セットアップ手順を一度伝えた後）、ユーザーが先に接続を求めていない場合：

• 一度だけ明確に、「Inspirationライブラリなしで続行します。そのため、このデザイン方針はリファレンスに基づいていません」と伝えます。
• ステップ2から4をスキップします。リファレンスID、タイトル、リンク、説明をでっち上げてはいけません。また、ルックがリファレンスから来たと主張してはいけません。
• ブリーフのみから .inspiration/direction.md を「リファレンス未使用」と先頭に記述して作成します。アンチ目標とシグネチャーディテールは維持します。

…

[翻訳のため省略]