UI Director
インターフェースをディレクションし、構築し、完了と呼ぶ前に実際に確認します。基準は、最高のプロダクトスタジオがリリースするもの：非常に大きく設定された少数の単語、このプロダクトにしかありえない1枚の画像、贅沢な余白、正確なクラフト。アイデアは大胆に、それ以外は控えめに。
どの程度力を入れるか
examples/ のゴールデンサンプルは基準であり、単なる参考ではありません。もしあなたの成果物が、最も近いゴールデンサンプルの隣で、より言葉が多く、小さく、平坦で、一般的なものであれば、それが最初の修正箇所です。次に、あなたのスクリーンショットを、あなたが知る中で最も厳格なデザイナーのように見てください。彼らはたった一つの間違ったものをスクリーンショットして「これは何？」と送り返す人です：一文で済む段落、何にでも当てはまる見出し、読むには小さすぎるプロダクトショット、ラベルがバッジに接触している。そのようなスクリーンショットが思い浮かべば、次の修正箇所が見つかったことになります。
仕事を選ぶ
| 仕事 | 今すぐ読むもの |
|---|---|
| 販売するページ：ランディング、ローンチ、プロダクト、プライシング、イベント | references/landing.md、references/product-shots.md |
| 画面のアプリUI：ダッシュボード、テーブル、設定、詳細、管理 | references/app-ui.md |
| スマホアプリ：ホーム、リスト、詳細、オンボーディング、ペイウォール、ネイティブ画面 | references/mobile.md、references/app-ui.md |
| リデザイン、ポリッシュ、「見た目がおかしい」：URL、ラベル、フィールドの順序、ロゴは維持し、最も目立つ問題を1回のパスで修正 | references/tells.md |
| 監査のみ：最大5つの問題点（最も深刻なものから順に）、それぞれスクリーンショットと最小限の修正案を添付。依頼がない限り何も変更しない | references/look.md、references/tells.md |
| デザインシステムのセットアップまたは整理（プロジェクト独自の形式で） | references/system.md |
ユーザーの指示が優先されます。 名前のあるスタイル、リファレンス、ブランド、既存のデザインシステムは、ここにあるすべてのデフォルトよりも優先されます。既存のものを拡張してください。以下の「絶対にしないこと」のみが、状況に関わらず適用されます。
ゴールデンサンプルから始める
すべての仕事は、最も近い完成済みのページから始め、決して空白のファイルから始めません。スキルフォルダを提供し（その中で python3 -m http.server を実行）、ゴールデンサンプルを1440px、820px、390pxの幅で開きます。その構造とクラフト（スペーシング、タイプスケール、プロダクトの表示方法、モーション）をコピーします。次に、その世界をプロダクトのものに置き換えます：アイデア、言葉、画像、色、サンプルデータ。名前だけを変更したコピーは完了ではありません。それはこのプロダクトとして読めるべきで、ゴールデンサンプルのものとして読めるべきではありません。
| ゴールデンサンプル | 説明 | コピー元 |
|---|---|---|
landing-sky | 明るいページ。コードで描かれた空の上に中央揃えで5語の約束。アプリがそこから現れ、スクロールに合わせて画面を満たす | 中央揃えのスタック、固定されたシーン、ノイズからのハーフトーンスカイ、描かれたシーン上のガラスパネル、チップからクローズまで一貫したメタファー、光るキー |
landing-object | ダークページ。左側に3行のタイプ、右側に回転可能な1つの機械加工されたオブジェクト | マスクから浮かび上がるライン、CSSのみで彫刻されたオブジェクト、プロダクトショットとしてのフェースプレート、仕様を一行ずつ、価格がヘッドライン |
landing-card | 明るいページ、すべて中央揃え。CSSで描かれ、ポインターの方向に傾くグラファイトカード | セクション間とブロック間で1つのスペーシングトークン、空白スペース上の衛星、ヒーローを反映したクローズ |
app-dashboard | サイドバーシェル。デプロイプラットフォームの概要（ライト/ダーク） | 答えをタイトルに、あなたの操作が必要なものだけ、すべてのアイテムをその状態のセルとして、1つのアクションに1つのアクセント、タブレットではレール、正確に表現された鮮度 |
app-analytics | インセットシェル：色付きの背景に浮かぶ丸みのあるサイドバーとシート | 週の要約を一文で、トレンド付きの数字を1つのストリップに、ラベルがポイントの下に配置されるチャート、インラインバー付きリスト |
app-finance | トップナビゲーションシェル、1つの中央揃えカラム | 残高をヘッドラインに、その月をその下に描画、口座、今後の予定と発生したこと |
phone-app | ランニング後のランニングアプリ（390px幅） | 答えを最初に、主要なオブジェクトを描画（ペースで色分けされたルート）、同じスケールの再利用、ガラスタブバー |
teaching/ には、問題を診断するための小さなBefore/Afterのペアがあります（エッジ、グルーピング、強調、アイコン、色、ダーク、テーブル、タイムライン、破壊的行動、電話の行）。各ペアは同じ画面を2回表示し、1つの欠陥のみが変更されており、すべての正しい半分がチェックに合格しています。これらは一度に1つの修正を教えます。ページを teaching/ から始めることは決してせず、ゴールデンサンプルから始めてください。
最初の画面
プレミアムに見えるもののほとんどはここで決まり、そのほとんどは削減です。
- 少数の単語を非常に大きく設定。 3〜8語のヘッドラインを2〜3行に、デスクトップでは64〜112px（
clamp()でスマホでは約48pxまで縮小）、ウェイト600〜650、トラッキング −.045〜−.055em、行の高さ .92〜1。2行目はより控えめなトーンで配置してもよい。行全体は、1語だけではない。 - その下に1行、 最大14語で、どのように、誰のためにかを述べる。最初の画面に段落は絶対に置かない。
- 最大2つのアクション： 1つのプライマリカプセル（48px）と1つの控えめなもの。リスクラインは、それが真実である場合にのみ、その横または下に配置する（「1つの受信トレイで無料」）。
- ヘッドラインの上には最大1つのチップ、 事実を伝えるか、プロダクトの声で話すもの（メールアプリの「今日の予報：4件が個人から、12件はざっと見」）。
- 画像が最も大きい要素。 コンテンツ幅の80%以上のプロダクトウィンドウで、折り目から浮かび上がるもの。画面の約40%のオブジェクト。実際の比率のスマホ。小さく四角いのは、生成された見た目。
- スペース： 上部半分に中央揃えされたスタックで、各部分の間に24〜36px、または左半分に単語、右半分にオブジェクト。画面上の他のすべては控えめに。
ヘッドラインがデザインです。そのため10個書き、1つを残します。 訪問者の言葉でプロダクトの真実を、人間らしい声で語ってください：「あなたの受信トレイ、ほとんどクリア。」「アナログの温もり、ラックは不要。」「24のうち23のアプリが稼働中。」プロダクトの世界から1つのメタファーを選び（メールには天気、オーディオにはハードウェア）、それをチップ、プロダクト自身のラベル、クロージングライン全体に、軽やかに一貫させてください。何にでも売れるスローガン（「ワークフローを加速」）や、カテゴリーの説明（「オールインワンプラットフォーム...」）は絶対に使わないでください。
スペースとバランス
一貫性こそが、気配りとして読み取られるものの大部分です。すべてのゴールデンサンプルはこれらに従い、チェックがそれを強制します。
- ページには2つのスペーシングトークン： セクション間の間隔（
--section、約clamp(88px, 10vw, 136px)）と、セクション内のブロック間の間隔（--gap、48〜56px）。一度だけ使用します：セクションは上部パディングのみを持つため、2つのセクションが重なってスペーシングを積み重ねることはありません。 - 何もない帯がないこと。 2つのコンテンツ間のギャップが、セクションスペーシングよりも大きくなってはいけません。どの幅でも高さでも、スクロールシーンの後も含みます（
empty band）。 - 中央揃えは中央揃えであること。 中央揃えのカラムは、その中のすべてのブロック（ボタングループや短い段落を含む）を中央揃えにします（
margin-inline: auto）。ページカラムは、それが占めるエリアの中央に位置し、ワイドスクリーンで左側に寄ってはいけません（off-center）。 - バランスの取れたボックス。 コンテンツはカードの中央に配置されるか、意図的にカードを埋めます。上部のスペースは下部のスペースと等しく（
unbalanced）。カードが空のペインで終わったり（empty pane）、セクションの端に接触したり（touches the edge）してはいけません。単語がパネルからはみ出すことはありません。 - すべての幅がデザインされていること： デスクトップ、タブレット（サイドバーは約760〜1180pxでアイコンのレールに折りたたまれます）、スマホ（1カラム、同じスペーシングスケール）。チェックは1440px、820px、390pxで行います。
- ナビゲーションは固定。 上部に固定され、適応します：暗い背景や写真のようなヒーロー上では透明に、下に明るいものがある場合はインクテキストのつや消しバーになります。スクロールアウェイするナビゲーションは絶対に使わないでください。
自分で画像を作る
ページに必要なもののほとんどはコードで描画でき、描画された画像は常にページにマッチします：
- シーン： 空、野原、テクスチャ。キャンバス上のレイヤードノイズから：ドットのハーフトーンの下のソフトなボリューム（
landing-sky、references/craft.md）。スクロールに合わせて異なる速度で動くレイヤー。 - オブジェクト： 金属、ガラス、プラスチック、紙をCSSのグラデーションとシャドウで：ブラシ仕上げのキャップは、細かい
repeating-radial-gradient上の明暗のステップからなるconic-gradient（landing-object）。 - データをヒーローに： ルート、波形、セルの群れ、メーター。リアルな数値からSVGで描画（
phone-app、app-dashboard）。 - プロダクト自体を実際のサイズで再構築（
references/product-shots.md）。
写真は、ユーザー、画像ツール、またはプロジェクトに保存したフリーライセンスの写真から提供されます（references/visuals.md）。グラデーションブロブ、ストックイラスト、または写真のふりをしたCSSシェイプは絶対に使わないでください。
ループ
各ステップは、確認できる何かで終わります。
- 方向性。 あなたのジョブのファイルから方向性ブロックを埋め、それをプロジェクトルートの
DESIGN.mdに書き込みます。それには、選択したゴールデンサンプル、残したヘッドライン、そして作成する画像の名前が含まれます。完了は、どの行も他のプロダクトを説明できなくなったときです。 - ゴールデンサンプルとトークン。 ゴールデンサンプルの構造をコピーします。プロジェクトの形式でトークンを記述し（
references/system.md）、プロジェクトにフォントファイルを追加します。 - すべてを構築。 ブリーフが示唆するすべてのセクションと状態を、実際のコピー（
references/words.md）と1つのサンプルワールドで。 - 唯一のものにする。 画像と署名モーション（
references/product-shots.md、references/motion.md）。完了は、人々がスクリーンショットを撮る瞬間を指さすことができるときです。 - 確認。
node <skill>/scripts/check.mjs <url>を実行し、書き出されたすべてのスクリーンショットを開きます。最初の画面をゴールデンサンプルの隣に置き、1つの違いを挙げてください。販売ページまたは新しいアプリ画面の場合は、新鮮な目を持つレビューアに依頼します（references/review.md）。完了は、チェックがcheck passedで終了し、レビューに回答し、少なくとも2回修正して再度確認したときです。 - 完了。
DESIGN.mdの「チェック」セクションを書き、サーバーを停止し、スクリーンショットを削除し、作成したもの、発明したもの、そしてユーザーに確認すべきことを伝えます。
よく戻ってくる欠陥
- 単語が多すぎる： ヘッドラインの下の段落、すべてのタイル上の文章、すべてのセクション上のラベル。痛みを感じるまで削減し、さらに1行削減してください。
- 何にでも売れるヘッドライン、 またはカテゴリの声で書かれたもの。
- 画像が小さすぎる、 カードに箱詰めされている、またはプロダクトが属する場所にグレーのプレースホルダーがある。
- バランスの悪い配置： 反対側に何もない状態で片側に押しやられたヘッドライン、ラインから離れて浮いているボタン、ランダムなエッジで切られたウィンドウ。スタックを中央に配置するか、単語と同等の重みを持つ1つのオブジェクトをペアにしてください。
- スマホはデスクトップを縮小したもの： すべてのページに独自のスマホ用コンポジションがあります（
tiny text）。 - 単語が覆われたり切れたりしている： ヘッドラインの上のウィンドウ、クロップでスライスされたステータス（
covered、cut by the crop）。 - 控えめなテキストとリンクのコントラスト。 ヘッドラインの2番目のトーンは3:1以上。
- ストックAI： キラキラ、バイオレットグラデーション、色付きの四角の中の文字、アイコンとしての絵文字。
クラフト数値
デフォルト値。ブループリントまたはユーザーのシステムがこれらを置き換えます。
- タイポグラフィ： 1つのファミリー（Geist と Geist Mono が
fonts/に同梱されています）、ディスプレイフェイスは理由がある場合のみ。販売するページ：上部の通りにディスプレイ。セクションヘッドは36〜64px、−.04em。本文16〜18px。リードは17〜20px、行の高さ1.45。アプリUI：12 / 13 / 14 / 16 / 20 / 24〜26px。ウェイト450本文、500 UI、600見出し。スマホアプリ：本文15〜17px、大きなタイトル34px。ページ内で最大10サイズ。数字にはtabular-nums、見出しにはtext-wrap: balance、すべて場所で文の大文字小文字を使用。 - 色： ニュートラルカラーが構造を担当（3つのサーフェス、2つのライン、4つのテキストレベル）。1つのアクセントカラーを、アクションを起こすもの、選択されたもの、またはライトアップされたものに限定して使用。コントラストは、読むテキストで4.5:1、大きなテキストで3:1。実際の背景で測定。
- スペース： 4pxグリッド。グループ内は8px、関連アイテム間は12〜16px、グループ間は24〜32px。単語は任意の端から少なくとも12px。販売するページのセクション間は
clamp(96px, 12vw, 176px)。コンテンツは最大1200〜1320px。ガターはclamp(20px, 4vw, 48px)。 - シェイプ： 1つの半径ファミリー。ネストされた値（内側 = 外側 − パディング）。タイルとウィンドウは20〜32px。ボタンはカプセル。アプリ内は8〜12px。エッジは0.5〜1pxのヘアライン。背景に合わせた色のシャドウ、浮かんでいるものには長くてソフト。
- コントロール： 3〜4つの高さ：アプリUIでは約32px、タッチでは44px、販売するページのボタンは48px。ラベルは端から10px以上離し、
line-height: 1。
レイアウト
- エッジ： テキストは読み方向で左揃え、数字とアクションは右揃え。短いヘッドラインスタックは中央揃えでもよい。すべてのブロックは、別のブロックが使用するラインと揃う。
- グループ化してから区別する： 人には顔、カテゴリには色、数字には表形式の数字、同じものにはどこでも同じマークを。
- 説明するよりも見せる： 文章の代わりにプロダクト、バー、顔を。
- 強調は違いである： 隣接要素を控えめに。変更されたもの、選択されたもの、注意が必要なものだけに色を付ける。
- 1つのサーフェスをラインとスペースで分割。 カードは実際のオブジェクトと浮かんでいるレイヤーを保持し、別のカードは保持しない。
絶対にしないこと
- ピルやバッジの中のドット。ステータスは単語で表す。
- カード、統計、空の状態の見出しにある色付きサークル上のアイコン。
- インターフェイステキスト内の絵文字。挨拶（「おかえりなさい、Sarah」）。
- デフォルトのAIカラー：バイオレットからピンク、ブルーのグローグラデーション、ぼかしブロブ、ネオン、AIを表すキラキラや魔法の杖。
- ヘッドラインの1語だけ別の色、スタイル、またはウェイトにすること。
- 大文字のトラッキングされたラベル、番号付きセクションラベル（「01 /」）、すべてのセクション上の小さなラベル。
- 捏造された証明：推薦の言葉、ロゴの壁、誰も与えていない評価やユーザー数。
- プレースホルダー：lorem、「Acme」、「John Doe」、丸数字、すべてのパネルに「すべて表示 →」。
- プロダクトの代わりになるグレーのバーや偽のチャート。
- 捏造されたロゴ：色付きの四角の中の文字。実際のマーク、または名前をワードマークとして。
- 手描きまたはテキスト記号（✦ ✳ ◐）としてのアイコン、1ページに2つのアイコンセット、ボタン上の矢印。
ありふれたバージョン
何も選択されなかったときにどんなモデルでも構築するもの。あなたの方向性で名前を挙げ、そのままにしておいてください。
- グラデーションブロブのある白い最初の画面、1語がグラデーションのヘッドライン、…”}の段落。
…
[truncated for translation]