デザイン（リーン）は何をしますか？

インターフェースは3つのモードで動作し、一連のゲートとして実行されます。各ゲートには、合格条件、残す証拠、リトライ上限、失敗時の処理があります。疑似プロダクトUI（ヒーローデモ、弁当タイル、カーソルチュートリアル）は design-demo スキルであり、このスキルをルールとして読み込みます。

なぜこのスキルが存在するのか。 モデルのデフォルトUIは、これまで見てきたすべてのUIの平均です。中央揃えの見出し、その上のラベル、アイコンカードの行、ソフトなグラデーション、すべてに一つの半径と一つのグレーの影。意図は散文にありますが、コード生成はパターンから引き出されるため、「温かく具体的」と書いてもテンプレートが出力されます。したがって、すべての選択は文書化された決定に基づいて行われ、チェックされます。別のモデルが同様のプロンプトで実質的に同じ画面を生成する場合、その作業は失敗です。スロップを取り除くことは仕事の半分に過ぎません。どのプロダクトにも属しうるクリーンな画面が、次のテンプレートです。

このスキルより優先されるもの。 (1) 実際のブランド、書かれた仕様、または名前付きのビジュアルディレクション：それがこのスキルがデフォルトと呼ぶものを要求する場合でも、正確に従います。各競合をレポートにリストし、ルールを適用するための一行の変更を示します。バイオレットからブルーへのグラデーション、スパークル、グローは、ユーザーがブランドであると明言しない限り、ロゴであってもスロップとみなされます。(2) .design/system.md（またはレガシー .interface-design/system.md）：最初にそれを読みます。それらの決定は確定しており、逸脱にフラグを立てます。(3) このスキルは、上記で決まらなかったすべてのものに対して適用されます。

ワークフロー

G0 ルート

順番に質問し、最初の「はい」で決定します。

変更なしで所見のみ？ → レビュー
イラストとしての疑似プロダクトUI？ → design-demo を読み込む
機能、コンテンツ、セクション順序を維持する必要がある既存のUI？ → ポリッシュ
その他（コンテンツや構造を変更する可能性のある再デザインを含む） → ビルド

サーフェス：ページ（読んでスクロールする：ランディング、マーケティング、ポートフォリオ、イベント、組織サイト。ヒーロー、コピー、画像、セクションリズムに依存）またはアプリ画面（操作する：ダッシュボード、管理、設定、テーブル、受信トレイ、ツール。階層、密度、状態、トークンに依存）。アプリを表示するプロダクトサイトはページであり、その中のアプリの断片はアプリ画面のルールに従います。

ゲート登録

ゲート	合格条件	残す証拠	上限	上限到達時の失敗処理
G1 方向性	名前除去テストに合格。人物が確認する、またはスキップルールが適用される	方向性ブロック	2回の探索ラウンド	最も強いオプションを採用し、レポート内で仮定としてマークする
G2 計画レビュー	類似のプロンプトが同じ場所に着地する箇所がすべて修正されている。`.design/decisions.md` が作成されている	decisions.md	1回の修正	続行。レポートに残っているデフォルトをリストする
G3 コンポーネント	`gate.js --only <名前>` が1440と390で合格し、コンポーネントが decisions.md に従うか、例外を記録する	1行のゲートログ	チェックごとに2回の修正試行	原因とともに未解決の問題として記録。依存するものが他にない場合のみ続行
G4 ページ	完全な `gate.js` 実行が合格。4つのテストと判断チェックリストが合格	ゲート合計、デスクトップと電話のスクリーンショット	3回のレンダリングラウンド	まだ失敗しているものを報告
G5 レポート	レポートテンプレートのすべてのフィールドが入力されるか、「なし」とマークされる	レポート	—	—
R1 所見（レビュー）	各所見に基準、場所、重大度、具体的な修正がある	所見リスト	—	証拠のない所見は破棄

ビルドはG1〜G5を実行します。ポリッシュはG1、次にG4とG5を実行します。そのパスは画面全体に及ぶため、コンポーネントごとではなく最後に一度だけゲートします。レビューはG0とR1を実行します。

G1待機のスキップルール： 人物が「やっていいよ」と言った場合、ブランドや仕様によって既に方向性が決まっている場合、既存のデザイン内の1つの小さなコンポーネントの場合。

無人実行。 誰も答える人がいない場合（スケジュール実行、後で確認すると言った場合、質問が未回答の場合）、G1で待機しません。方向性を採用し、レポートの先頭に仮定として記載し、それを変更する一行を示して続行します。有料画像生成をスキップし、Visualsの次のオプションを使用します。スロップが見つからないポリッシュ実行は、修正を適用せずに提案された改良点を報告します。後で方向転換する場合は、1メッセージを消費する必要があります。

ビルドでは、一度に1つのコンポーネントを処理します。 ゲートし、ログに記録し、次のコンポーネントを開始します。失敗は後でまとめて修正するのではなく、その場で修正します。問題は複合的に発生します。

方向性

意図

ビジュアルの決定の前に回答します。簡潔なブリーフに保ちます。

この人間は誰か？ 実際の人物：どこにいるのか、5分前に何をしていたか、次に何をするか。
彼らは何を達成しなければならないか？ 動詞：これらの提出物を採点する、壊れたデプロイを見つける。何が先行し、何が続き、何を隠すかを決定します。
どのように感じるべきか？ 意味のある言葉：ノートのように暖かく、ターミナルのように冷たく、トレーディングフロアのように密度が高い。「クリーンでモダン」は何も意味しません。

ブリーフが主題を特定していない場合、具体的な主題、対象者、主要ジョブを提案して確認します。コンテキストが責任ある仮定を許す場合は、それを1行で述べて続行します。意図は体系的です。感触が暖かい場合、サーフェス、テキスト、境界線、アクセント、タイプはすべて暖かくなります。「一般的」または「機能する」は理由になりません。

ドメイン探索

以下4つすべてを生成します。ドメイン（対象の世界からの5つ以上の概念とメタファー）、カラーワールド（その物理的なバージョンからの5つ以上の色）、シグネチャー（このプロダクトだけが持つ、それが属する場所で一貫して使用される要素）、拒否するデフォルト（明白な3つの選択肢、それぞれに代替案）。名前除去テスト：プロダクト名を削除して提案を読み、誰もそれが何のためのものかわからない場合、再度探索します（上限：2ラウンド）。

方向性ブロック

製品：      [何をするものか、誰のために、一文]
特性：      [具体的な言葉2～3個、クリーン/モダン/スリム/ミニマル/プレミアムではない]
世界：      [それが属する場所や素材。ニュートラルティント、アクセント、ビジュアルを設定]
瞬間：      [コンテンツから選んだ、豊かな色と詳細を得る1～2か所]
シグネチャー：[このプロダクトだけが持つ1つのディテール]
拒否：      [デフォルト → 代替案] × 3

レンダリングが利用可能な場合は、小さな標本（実際のスウォッチ、実際のフェイスでのタイプスケール、実際のコンポーネントとしてのシグネチャー）とともに表示し、「その方向性は正しいですか？」と尋ねます（G1）。

デフォルトが生成するデザインクラスター。 それぞれ特定のブリーフでは正当ですが、対象とは無関係に現れます。ブリーフが軸を自由にしている場合、ここでそれを使い果たさないでください。(1) #F4F1EA 付近の暖かいクリームに、高コントラストのセリフと #D97757 付近のテラコッタアクセント。(2) ネイティブブラックに、1つのアシッドグリーンまたはバーミリオンのアクセント。(3) 大判紙のヘアライン、ゼロ半径、密度の高い新聞コラム。(4) SaaSカードキット：同一の角丸カード、1つの半径、同じ柔らかいグレーの影、グラデーションウォッシュ。(5) テンプレートのクローム：トラッキングされたすべて大文字のアイブロウ、A · B · C メタ文字列、WORD — fragment ラベル、ブラックにティントされたネイティブブラック、等幅データラベル、ボタンの →、バイオレットまたはインジゴのアクセント。

決定ファイル

方向性の後、.design/decisions.md を一度だけ作成します。パレットトークンとその理由、タイプフェイスとスケールとその理由、深度戦略とその理由、スペーシングベースと密度とその理由、シグネチャーとそれが現れる場所、拒否された3つのデフォルト。これにより、すべてのコンポーネントを再正当化する必要がなくなります。G3では、判断質問は1行です。「このコンポーネントは decisions.md に従っていますか？」逸脱する場合、例外とその理由をゲートログ行に記録します。

クラフトルール

(ゲート対象) とマークされたルールは gate.js によって測定されます。G4チェックリストは残りのルールのみをカバーします。

階層と構成

ビューごとに1つの焦点：人物が何をしに来たかを指定し、サイズ、コントラスト、位置、またはスペースによってそれを勝利させます。
太さと色はサイズ以上の効果を発揮します。1つの14pxサイズで3つの階層を保持します：value 600 プライマリ、label 500 セカンダリ、meta 400 ミュート。
密度はピクセル単位の決定であり、事前に選択され、繰り返されます。ツールパネルは12～16パディングでタイトに感じられ、24はパンフレットのように感じられます。
不均等に呼吸します：グループ内はタイトに、グループ間は緩く。
プロポーションは物語ります。280pxのサイドバーはナビゲーションがコンテンツにサービスすることを示し、360はそれらが同等であることを示します。
抑制：おおよそ60/30/10でニュートラル、セカンダリトーン、アクセント。大胆さを1か所に注ぎ込み、次に付属品を1つ削除します。

スペーシング

すべてのマージン、パディング、ギャップ、固定高さは4の倍数です（ゲート対象）。小さなコントロール内の2pxの微調整は問題ありません。
等しいものは等しくします：リストごとに1つの行の高さとギャップ、カードセットごとに1つのパディング。コンテンツが要求しない限り、対称的なパディング。
ものを揃えます：アイコンは1列に、ラベルは1つのベースラインに、数字は右揃え。
ページ：デスクトップではセクション間を80～128離し、セクション内のどのギャップよりも明らかに大きくします。アプリ：ページパディングは24～32。

カラー

1つのニュートラルランプを世界に向けてティントし、背景、サーフェス、境界線、テキストに使用します。1つの色相をサーフェス全体で使用し、明度のみを変化させます。アプリではサーフェスはほぼニュートラルを保ち、コンテンツが色を運びます。
4つのテキストロール：プライマリ、セカンダリ、ミュート、無効。
クローム内の1つのアクセントを、まれに使用します。プライマリアクション、選択、重要な1つの数字。選択された瞬間の内部では、各色が意味を持つ場合、色は豊かになります。実際のブランドカラーはアクセントになり、サーフェスからは離れます。
本文テキストとアクセント付きテキストのコントラストは4.5:1、大きなテキストは3:1です（ゲート対象）。
セマンティックカラーは意味のみを伝え、パレットに調和し、ダークではわずかに彩度を落とします。本文はフルインクで表示します。
カラーはトークンから取得され、コンポーネントCSS内で未加工の値は使用しません（ゲート対象）。
サーフェス上の色相間グラデーション、グラデーションテキスト、色付きグローやシャドウ、放射状ウォッシュ、ブロブ、ネオンボーダーは禁止です。グラデーションは、単一ニュートラル内のトーンシフト、または写真上のテキストの下のニュートラルスクリムとしてのみ許可されます。

サーフェス、境界線、深度

1つの深度戦略：境界線のみ（技術的、密度が高い）、微妙なシャドウ（親しみやすい）、レイヤードシャドウ（プレミアム）、またはサーフェストーンシフト。
エレベーションは控えめに。ダーク：各ステップは数ポイントの明度（ページ→カード→浮上）にヘアラインを加えたもの。ライト：静止 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05)、浮上 0 8px 24px rgba(0,0,0,.06)。ダークリフト：0 0 0 1px rgba(255,255,255,.08)。
ヘアライン：プライマリテキストカラーを6～10%の不透明度（ダークでは12%）で、小さな段階で使用します。ディバイダー、標準、強調、フォーカスリング。
サイドバー：ページと同じか、ダークでは1段階深く、ヘアラインで区切られ、異なる色相は決して使用しません。ポップオーバーは親より1レベル上にします。入力は周囲よりわずかに暗くします。

タイポグラフィ

タイプは個性を運びます。1ファミリーが標準で、2つが上限で明確に異なります。ディスプレイフェイスは大きな見出しのみ。実際のブランドフォントは維持します。
比率をステップします。密度の高いUIでは約1.2、ほとんどのプロダクトUIでは1.25、表現力豊かなページでは1.333。ページごとに最大5サイズ。
ウェイトは400と500。600は数字とまれな強調用。700～900はブランド仕様で指定された場合のみ。
すべての箇所でセンテンスケース。大文字トラッキングラベル、イタリック強調、斜体、太字、または色で区別された単一の見出し語は禁止。
16px未満では文字間隔0、40pxから約−0.02em、56pxから−0.03em。本文行間は約1.5、セリフ本文はわずかに多め。行長は45～75文字。
数字：表形式の数字（ゲート対象）、全体で1つのフォーマット。
見出しには text-wrap: balance、本文には pretty。ルートに -webkit-font-smoothing: antialiased。

アイコン

装飾として使用される絵文字は、1つのセット（プロジェクト独自のもの、またはlucide）からのラインアイコンになり、16または18px、ストローク1.5、テキストロールの色、行ごとに同じボックス幅、ラベルから8～10px離します。何も追加しないアイコンは削除します。色を必要とするカテゴリはステータスドットを取得します。

コピー

人物の側から書きます（彼らはwebhook設定ではなく通知を管理します）。説明し、販売しません。
見出しは、プロダクトが誰のために何をするかを、ページ上の事実を使用して述べます。競合他社の名前がまだ当てはまる場合は書き直します。
ボタンは何が起こるかを示します（「変更を保存」）。アクションはフローを通じてその名前を維持します（「公開」→「公開済み」）。
エラーは、謝罪なしに何が起こったかと修正方法を示します。空の状態は次のアクションを促します。
能動態、平易な動詞。感嘆符、挨拶の見出し、誇大広告（超強力、シームレス、アンロック、マジック、ゲームチェンジャー）、または AI搭載 は禁止。短いラベル（検索）。変更はその比較を示します（前月比+12%）。見出し、ラベル、ボタン、トーストに末尾のピリオドは不要。
証拠を決して捏造しない：顧客、引用、レビュー、ロゴ、統計はなし。ブリーフにギャップがある場合のサンプルコンテンツは問題なく、確認のためレポートに含めます。

構造は意味を持つ

アウトライン、境界線、番号、アイブロウ、ディバイダーは情報をエンコードします。01 / 02 / 03 は実際のシーケンスに対してのみ使用します。PRO、New ✨ などのバッジは、意味を伝える場合は削除し、そうでない場合は控えめなテキストにします。カウントとメタは控えめなテキストであり、ピルではありません。

レイアウト：ページ

ヒーローは、対象の世界で最も特徴的なものを、最も適切な形式で開きます。大きな数字と小さなラベルとグラデーションは、それが本当に最良の場合のみ。
最初の画面は、訪問者の最初の質問に大きなタイプで答え、h1、1つのプライマリアクション、最大1つのセカンダリアクションを運びます。
最強のヒーロー：1つのシーン画像を端から端まで配置し、その落ち着いた部分に見出しを置くか、ビジュアルが少なくとも半分を占める非対称の分割。中央揃えのスタックは、ビジュアルなしの短いヒーローにのみ使用します。
ナビゲーション：ワードマーク、既存のリンク、1つのボタン。ログインはテキストリンク。フローティングピルやガラスは禁止。
各セクション：見出し、隣接とは異なる構成、完全なコンテンツ。デッドバンドは禁止。フッターはデザインされたクローズであり、サイトマップではありません。
小さな画面：リーディングオーダーでスタックし、再構成。11px未満のテキストなし、水平スクロールなし（ゲート対象）。

レイアウト：アプリ画面

実際のプロポーション：シェルはビューポートを埋め、サイドバーは240～280、コンテンツは流動的で1440～1600付近で上限、トップバーは56～64。狭い中央のカラムは決して使用しません。
サイズを変えます。1つの広いチャートの上にコンパクトな統計。同一のカードの行は決して使用しません。メインチャートは幅の少なくとも2/3と280～360の高さを取ります。
統計カード：ラベル、数字、その比較を含む変化。フィラーのスパークラインやアイコンはなし。数字は他の場所で繰り返しません。
テーブル：密（行の高さ44～52、12～16パディング）、ヘッダーは本文と同じスタイル、数値は右揃え、アクションはホバーで表示。キャンバスと同じ高さにするために、コンテナ高さ制限 overflow: auto を使用しません。
フォーム：ラベルは上、1列、必須フィールドは最小限、エラーはインライン。フィルターはコンパクト（トークン、小さな入力、アイコンボタン）。
状態を考慮：空、読み込み中、エラー、エッジケースを表示します。空のテーブルにはヘッダーと空の状態があります。読み込み中はタイトル、コンテンツサイズ、アクションをスケルトン表示します。
すべてのクリック可能な要素は、フォーカスリング、ホバー、アクティブ状態を持ちます。境界線のないサイドバーアイテムは、テキスト色と背景色の両方を変更して選択を示します。

アニメーションとトランジション

モーションは便利です。ポップオーバーとモーダルは 150ms ease-out の出現。ページ遷移は 300ms ease-in-out。カラーと境界線は 150ms。
prefers-reduced-motion: reduce に従います。
ページローディングスケルトンは出現し、フェードし、またはブロックします。フェードインする行やスケルトンが同時にロードされることはありません。
トランジションは意味をコード化します。出現、削除、置換、リフト。リストリオーダーは置換です。

画像

写真：本物の（Unsplash / Stocksy）、白黒、2枚の組み合わせ、透明オーバーレイなし、テキストは写真の上ではなく隣に。左か右にオフセット。
イラスト：主題の世界のもののみ（ソフトウェアセットアップ図 → ノート、ケーブル、ワークデスクのイラスト、顔のないボットではない）、線画のスタイル、彩度を抑えた色、主題が提供する場合は手描き。
アイソメトリック：主題が空間的である場合のみ。
UIのスクリーンショット：実際のプロダクトのスクリーンショットが利用可能な場合はそれを使用。スクリーンショットを持ち上げてヘアラインで囲み、フル幅。
画像はコンテンツです。装飾的な画像は aria-hidden にします。
画像生成では主題を尊重し、モデルは生成しません。テキストが画像に登場するのは、それが実際のコンテンツ（メニュー、切符、本）である場合のみ。写真：生成時は --style natural、ポートレートは被写界深度を浅く、擬似現実（Netflixのインターフェースが映ったiMac、ダッシュボードが映ったノートパソコン）は --chaos 20。
代替テキストは必須ではありません。なぜその画像が選ばれたかは述べません。

インタラクションとアクセシビリティ

フォーカススタイルを見えるようにします（デフォルトのアウトラインは厚さ2pxのカスタムリング、オフセット2px、許容できれば全角、高コントラストの outline-offset: 2px）。
すべてのインタラクション要素はキーボードから到達可能であるべきです。
フォームエラーは赤だけでなく、視覚的でテキストベースの手がかりも提供します。
フォントサイズは、アプリでは13～14pxのベース、マーケティングでは16～18pxのベース。ユーザーがブラウザ設定で拡大しても、レイアウトは壊れません。
タッチターゲットは44px以上。

レスポンシブデザイン

ブレークポイント：モバイル 390、タブレット 768、デスクトップ 1024+。各ブレークポイントで異なるレイアウトとコンテンツを提供する場合、異なるブレークポイントを使用可能。
モバイル：ナビゲーションはハンバーガーまたはボトムタブ、コンテンツ幅は最大100%、テーブルはカードに変換、テキストは16px以上。
タブレット：サイドバーは折りたたみ可能、コンテンツは最大2列。
デスクトップ：すべての要素を表示。

gated ルール（自動チェック）

次のルールは JavaScript と Playwright で実装された gate.js によって自動的にチェックされます。

すべてのパディング、マージン、ギャップは4の倍数です。
カラーはすべてCSSカスタムプロパティ（var(--...)）から取得されます。
カラーのコントラスト比は、小さなテキストで4.5:1、大きなテキストで3:1以上です。
数字は表形式の数字で表示されます。
テキストサイズはどこでも11px以上です。
水平スクロールは発生しません（overflow: hidden または auto は許可されますが、コンテンツが隠れたりクリップされたりしてはいけません）。
リンクと画像は、関連するすべてのアクセシビリティ属性を持ちます。

レポートテンプレート

G5の結果。

## デザインレポート

### 要約
[何が構築/研磨/レビューされたか、現在の状態、残っている問題] 

### 所見
| # | 基準 | 場所 | 重大度 | 修正 |
|---|------|------|--------|------|
| 1 | [ルールまたは期待] | [コンポーネント/場所] | [高/中/低] | [具体的なアクション] |

### 仮定
- [G1で行われた仮定またはユーザー入力] 

### 未解決の問題
- [修正されなかったG3の問題] 

### スクリーンショット
[デスクトップとモバイルのビューのスクリーンショットへのリンク] 

### メモ
[追加の文脈や決定]

プロダクトUI（プロダクトファーストUI）

これはユーザーオンボーディング、機能紹介、プロダクト強調のためのアプローチです。

用語は曖昧にしません。機能には真の名前があります。「分析」は「分析」であり、「洞察」ではありません。「設定」は「設定」であり、「環境設定」ではありません。
機能のないプロダクトUIは見えません。各画面は、プロダクトが実際に行うことを示す実データとアクションを表示します。
プロダクトUIの画面ショットは常に製品ロゴ、実際の機能名、実データ、機能的なUI要素を示します。
実際の製品のパターンを使用してプロダクトを示します。例えば、実際のチャートは実際のデータポイントと目盛りラベルを示します。
簡略化されたモックアップや製品の抽象的な表現は、デザインの決定の文脈でのみ使用され、主要なコミュニケーションとして使用されることはありません。

外部リソース

gate.js はクラフトルールを検証するためのカスタムスクリプトです。
.design/system.md または .interface-design/system.md はプロジェクト固有のデザインシステムファイルです。
design-demo スキルは、プロダクトデモやイラスト用のUI例を作成するためのものです。
画像は unsplash.com、stocksy.com、またはプロジェクトが指定するソースから取得します。

決定ログ

.design/decisions.md が存在する場合、そこには以下が含まれているはずです。

使用される主要なカラーパレットとトークン
タイポグラフィの選択とスケール
スペーシングシステム（ベースユニット、密度）
深度戦略（シャドウ、境界線、またはエレベーション）
シグネチャー要素とその使用箇所
拒否されたデフォルトの選択肢と、それらが拒否された理由
アイコンセットの選択
プロダクトが対象とする主要なユーザーとその目標に関するメモ

この決定ログは、各コンポーネントの正当化を毎回行うのではなく、すべてのG3決定を導くために使用されます。

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

ドキュメント

デザイン（リーン） は何をしますか？