デザインディレクション
デザインが独自性を持つとは、その分野に詳しい人が見れば、この特定の製品のものだとわかることです。 使いやすさは慣れ親しんだ構造から生まれます。独自性は、この製品だけが持つもの、つまりブランド、その世界観、グラフィックデバイス、そして一つのシグネチャームーブから生まれます。これらは人間から生まれるものです。したがって、このスキルは描き始める前に質問をします。
生成AIを単独で使うと同じような見た目（defaults.md）に収束します。以下のすべての決定は、インタビューから得られたものか、そのリストと照合されたものです。最初に思いついたという理由で選択されるものはありません。
ディレクションが文書化され、人間によって選ばれ、以降のすべてのビルドがそれを参照するようになった時点で完了です。
1. 既存のものを収集する
ブランドを定義する既存のもの（ロゴファイル、色、フォント、ブランドガイドライン、写真、イラスト、以前のデッキやページ、リポジトリ内のデザインシステムファイル、およびproduct-uiスキルのプロジェクトファイル（.claude/product-ui.md）が存在すればそれ）をすべて要求し、読み込みます。既存のシステムが出発点です。ディレクションはそれを拡張し、決して矛盾しません。どのアセットが存在し、どれが不足しているかを記録します。
2. インタビュー
interview.mdを実行します。ラウンドごとに数問の質問を行い、各ラウンドは前の回答に基づいて構築されます。質問をし、耳を傾け、驚きの回答にはさらに一段深く掘り下げます。ラウンドは、製品の世界観、個性、アンチリファレンスを1段落で要約でき、人間がそれに同意した時点で完了です。
3. モード
インタビューからモードを決定します。
- オペレート（人が作業するアプリケーション）：構造、ナビゲーション、コントロールは、そのカテゴリの慣れ親しんだものを維持します。ディレクションは、タイプフェイス、パレット、デンシティ、静かなエリア（ヘッダー、空の状態、オンボーディング、ローディング）でのグラフィックデバイス、そして一つのシグネチャームーブに貢献します。
- パースエード（ランディングページ、キャンペーン、デッキ）：ディレクションは、ページ全体（構成、画像、モーション、レイアウト）を形成することができます。
両方を持つ製品は、一つのディレクションを持ち、それをモードごとに適用します。
4. ディレクションを提案する
インタビューの内容から、一目で異なる2つまたは3つのディレクションを書きます。それぞれに以下の名前を付けます。
- トークン：パレット（役割を持つ4～6の名前付きカラー）、タイプの組み合わせとスケール、半径、ボーダー、エレベーション、デンシティ。ステップ1のブランドアセットからtokens.mdを使って構築します。参照製品はその特性（速度、密度）を貸し与えますが、色や書体は決して借用しません。
- グラフィックデバイス：製品の世界観から取られた形状言語と幾何学、およびそれらの形状から構築された生成背景、パターン、フィラー画像のレシピ。
- イメージ：写真やイラストが何を示すか、そしてそれがどのように切り抜かれ、処理されるか。
- 構造：グリッド、リズム、画面やページの構成方法。
- ボイス：インターフェースの話し方を表す3つの単語と、ボタン、空の状態、エラーそれぞれに対するサンプル文。
- シグネチャームーブ：視聴者が覚えている具体的で名前を付けられるアイデア（「ステータスが…として描かれる」）。
- サンプル：実際のコンテンツでレンダリングされた、実際の画面またはセクション。
サンプルを同じサイズ、同じコンテンツで横に並べて表示します。人間が1つを選ぶか、部分を組み合わせ、その理由を述べます。
サンプル上のすべての数字とラベルには、人間が同意する定義が必要です（「アクティブユーザー」：ログインしている？今日のセッション中？）。彼らが疑問視したものは未解決の定義として収集します。これらは製品に関する質問であり、ステップ6の記録に含めます。
人間がまだ汎用的に見えるが、その理由を言えない場合、同じ画面で独立したトグル（タイプフェイス、パレット、形状（半径、境界、チップ）、密度、アイコンスタイル）に分割し、感覚がなくなるまでそれぞれを切り替えられるようにします。その感覚を取り除いたトグルが原因を示します。
5. 独自性を確認する
選ばれたサンプルをdefaults.mdおよび人間のアンチリファレンスと照合します。一致するものがあれば、その決定を変更するか、この製品がなぜそれを維持するかを記録します。次に、帰属テストです。インタビューから得られたサーフェスの独自性レベルによって重み付けされます。ロゴを隠した場合、その分野に詳しい人がこの製品の名前を挙げられるでしょうか？高いレベルでは、「誰のものでもあり得る」という結果は、最も弱い要素とともにステップ4に戻ります。低いレベルでは、クリーンで馴染みのある結果は合格であり、記録にはそのように記載されます。
独自性は決して使いやすさを犠牲にしません。コントロールを隠したり、コントラストを下げたり、そのカテゴリの慣れ親しんだパターンを壊すシグネチャームーブは、静かなエリアに移動されるか、削除されます。
6. 記録する
ディレクションをプロジェクトファイルの「ディレクション」セクションに書き込みます（.claude/product-ui.md、またはCLAUDE.mdがプロジェクトのデザイン決定を保持する場所として指定している場所。存在しない場合はproduct-uiテンプレートから作成します）。日付、モード、トークン、デバイス、イメージレシピ、構造、ボイス、シグネチャームーブ、アンチリファレンス、未解決の定義、およびそれらを正当化するインタビューの回答を含めます。トークン自体はコードのトークンファイルに格納します。以降のビルドとレビューは、まずプロジェクトファイルを読み取ります。