ランディングページ仕上げ ステップ1：構成とビジュアルを決める

Signature — OpenCode のためのシェイプ＆アイデンティティパイプライン

Top 50 Websites for Design Inspiration（50サイトをブラウザでライブ表示、2026年10月22日確認）とNutlopeのHallmarkのプロセスコアから派生。すべてのシェイプとアイデンティティは実際のコーパスエビデンスに基づいています — ライブラリは観察であって、好みの民間伝承ではありません。

役割分担（曖昧にしないこと）

• frontend-design はクラフトを担当：アートディレクション、タイポグラフィ判断、色彩判断、モーションフィロソフィー、コピーライティング、自己批評ループ。ロードされたらそれに従うこと — ここでそのルールを再記述しない。
• Signature はプロセスとライブラリを担当：このビルドがどのページ シェイプ か、どの アイデンティティ を纏うか、重複禁止台帳、そして機械的な（grep と計算による）ゲートリスト。

動詞

build（デフォルト）

1. ブリーフを分解：ドメイン、オーディエンス、エネルギーワード（「映画的」「密度が高い」「パーソナル」「壮大」）。
2. references/structures.md から シェイプ を選ぶ。それを一行で言う：Shape: <名前> (runner-up: <名前>)。ブリーフがあいまいな場合は、ドメイントリオを提示すること — 決して黙ってデフォルトにしない。
3. コーパスに対して検証する：シェイプ/アイデンティティ行から1〜2個のエビデンスURLを Playwright MCP（ナビゲート + スクリーンショットツール）または webfetch で開く。リンク切れは次の行を昇格させる。パレットアンカーは、実際のライブページを見るまでは種として扱う。
4. シェイプのムードを共有する references/identities.md から アイデンティティ を選び、実際に見たものに基づいてトークンシードを修正する。
5. 最初にトークンを書く：1つのセマンティック :root ブロック + スタンプ（下記参照）、コンポーネントCSSの前に。
6. 構築する。1つの記憶に残る要素がページを牽引し、それ以外は控えめに（frontend-design の抑制ルール — 適用する、再導出しない）。
7. すべての ゲート を実行し、すべての失敗を修正する。次にテイストパス — frontend-design がロードされていればそれに従い、そうでなければAIが生成した特徴のキャリブレーションリストに照らして判断する。

audit <ターゲット>

コード/サイトを読み、ゲート のみを実行する。各失敗は1つの箇条書き：ファイル:行 — ゲート番号 — 一行修正。機械的な発見のみ。テイストの問題がある場合は、新しいルールを発明する代わりに、関連するfrontend-designの原則を一行で示す。スタンプが存在する場合、そのシェイプが以前のビルドと重複していないかを報告する。

redesign <ターゲット>

情報アーキテクチャ、コピー、ブランドアセットは保持する。スタンプをgrepする：新しいシェイプは最後にスタンプされたシェイプと異なっている必要がある。アイデンティティは変更可能。ブランドボイスやパレットの変更は、事前に確認が必要。

study <URL | スクリーンショット>

ソースを開く。抽出：セクション順序 → 最も近いシェイプ；パレットアンカー（実際の色をサンプリング）；タイプの役割と観察されたフォント → 最も近いアイデンティティ。1行出力：study: source=<URL> shape≈<Shape> identity≈<Identity> anchors=<hex>。ライブラリに該当するものがない場合は、新しいアイデンティティ行を追加する（identities.mdの下部にあるフォーマットに従う） — しかし、決して黙ってstudy結果をライブラリ選択に代用しない：ユーザーが調査したDNAをそのまま欲しい場合、スタンプは identity=studied:<source> となり、study値がトークンとなる。

台帳はコードである

• メインスタイルシートの先頭にスタンプ（HTMLのみのビルドでは index.html のheadにもミラー）： /* signature: shape=<Shape> identity=<Identity> refs=<実際に開かれたURL> */
• 選択する前に、プロジェクト内の既存のスタンプをgrepする。連続する2つのビルドで同じシェイプを共有しないこと；アイデンティティの再利用も避けるのが望ましい。
• 別個の台帳ファイルは不要。CSSが台帳である。

契約

• デザイントークンは1か所に配置（:root カスタムプロパティ、プロジェクトの tokens.css、またはTailwind @theme）。名前はセマンティックな役割（--color-ink）であり、値ではない。
• プロジェクト固有のトークン名をシャドウするのではなく再利用すること；Tailwindテーマを拡張し、任意の値をインラインで決して使用しない。
• 既存のグローバルスタイルシートは 追記専用：すべての @tailwind/@import "tailwindcss" ディレクティブをそのまま維持し、既存ルールの下にトークンを追加し、新しい @import は最上部に配置する。フレームワークディレクティブを黙って削除しない — アプリ全体のスタイルが解除される。完全な書き換えは明示的な要求があった場合のみ。
• フレームワークのファイル規約に従う。プロジェクトがすでに持っているルーティング/レイアウトパターンを再発明しない。
• スコープ：これはテイストプロセスである。発明されたコピー（ユーザーが言葉を与えていない場合は尋ねること）は不可；ビジネスロジックは不可；ブランドアイデンティティを無から選ぶことは不可 — 与えられたものに従うこと。

ゲート（機械的 — すべての答えは「いいえ」である必要あり；各失敗はハンドオフ前に1つの修正）

トークン規律

1. コンポーネント内に名前付きトークンに解決されない #hex、oklch()、rgb()、font-family がある場合に失敗。それを昇格させるか置き換える。
2. パディング/ギャップ/マージンがプロジェクトのスペーシングスケール（名前付きトークンがない場合、4pxの倍数）から外れている場合に失敗。任意の 17px は特徴的。
3. スタンプコメントがない、または実際に開かれたことのないURLを指定している場合に失敗。

レイアウト生存 4. 320〜1920pxの任意のビューポート幅でページが水平スクロールする場合に失敗。html と body の両方に overflow-x: clip（hidden ではない — clipは sticky/fixed を保持する）。 5. 画像を含むグリッド/行トラックで 1fr が minmax(0, 1fr) でない場合に失敗。 6. 表示サイズのテキストに overflow-wrap: anywhere（およびコンテナに min-width: 0）がない場合に失敗 — 長い複合語がスマートフォンではみ出す。 7. クリック可能なテキスト（ボタン、ナビゲーション、タブ、CTAラベル）が320/375/768/1280pxで2行に折り返す場合に失敗。

コードの事実 8. transition: all がある場合に失敗 — プロパティを指定すること。 9. 1つの要素に複数のホバー効果（translate + scale + shadow + colorの組み合わせ）がある場合に失敗。 10. 入力の border-width が状態間で変化する場合に失敗；状態の変更は色/アウトライン/シャドウに適用。フォーカスリングは outline であり、borderではない。無効状態は2つ以上必要：opacity、cursor: not-allowed、disabled/aria-disabled。 11. 装飾的な <svg>/<canvas>/要素が aria-hidden="true" またはアクセシブルな名前を持たない場合に失敗。

モーションとパフォーマンス 12. アニメーション/キーフレームが prefers-reduced-motion: reduce フォールバックを持たない場合に失敗。 13. ホバーおよびフォーカスで一時停止しない自動回転コンテンツがある場合に失敗（WCAG 2.2.2）。 14. LCPヒーローアセットが loading="lazy" である、またはヒーロービデオに poster/fetchpriority="high" がない場合に失敗。

コントラストと誠実さ 15. 色/背景のペアがWCAG 4.5:1（本文）または3:1（大きなテキスト、アイコン、フォーカスリング）を満たさない場合に失敗。2つのホットスポット：親が背景を切り替えたときにテキストが色を継承するケース、およびボタンの塗りつぶしがテキストの明度と5％以内のケース。 16. 捏造された事実（ユーザーが提供していない指標、パーセンテージ、引用、名前、価格、統計スロットの埋め合わせ）がある場合に失敗。プレースホルダースロットは「確認」と表示し、決して発明しない。 17. 絵文字を機能/ステップ/価格アイコンとして使用している場合に失敗；1ページあたり最大1つのアイコンライブラリ。 18. 偽のブラウザバー、偽のスマートフォンノッチ、偽のターミナル/IDEウィンドウフレームなど、再描画されたクロームがある場合に失敗。実際のスクリーンショットを使用するか、使用しない。

ライブラリ規律 19. 読み込まれたフォントが既知の無料/ライセンス済みWebフォントでない場合に失敗。コーパス内のファウンドリ（Commercial Type、Klim、Grilli Type、type.today、Pangram Pangramトライアル）は表示用参照 — ライセンスを確認し、支払い前に問い合わせること。Google Fontsとオープンソースの可変フォントは合格。 20. このビルドのシェイプがプロジェクトの最新のスタンプと一致する場合に失敗（台帳ルールに従い、最初にgrepする）。

参考文献 — 必要に応じて読み、一度にすべて読まないこと

• references/structures.md — 骨格、エビデンス、ドメイントリオ表を持つ10のページシェイプ。シェイプ選択時（build/redesign/audit）に読むこと。
• references/identities.md — 20のアイデンティティ：パレットシード、フォントペアリング、コーパスエビデンス。アイデンティティ選択時（build/redesign/study）に読むこと。

実例（コーパス自身のガイダンスから）

ブリーフ：「Meet India Journeys — ケーララの川と遺産を巡る旅程のツアーオペレーターサイト。」 ドメインワード「旅行」→ トリオはScroll Story・Case Catalog・Luxury Ledger。Scroll Story（次点：Case Catalog）を選択。なぜなら、対象は一度に1つずつ表示される場所だから。apple.comとsimplychocolate.dkをライブで開き、チャプターのペース、ヒーローメディア、フルブリード処理を調査。アイデンティティ：Forest Confection（深い緑+ココア、凝縮された表示）が川と遺産に適合；トークンを修正する前にライブ参照をサンプリング。スタンプ： /* signature: shape=Scroll Story identity=Forest Confection refs=apple.com,simplychocolate.dk */