サイトを量産する機械

『DesignSystem SoTの構築（SoT Machine）』プレゼンテーション解説ナラティブ
1. はじめに：なぜ今「SoT Machine」が必要なのか？
私たちは「個別のWebサイトを都度AIに作らせる」というアプローチの限界を、Phase 0のdogfooding（OshareBunny Fluffy LP）において明確に目撃しました
。自然言語による指示だけでは、AIエージェントは容易にデザインシステムを無視し、インラインのハードコード値を混入させて「デザインの乖離（デザインドリフト）」を引き起こします
。
だからこそ、私たちは**「1つのサイトを作る」から「サイトを量産する機械のSoTを作る」へと舵を切りました
**。本ADR（Proposed）を、dogfoodingの完走前である「今」この段階で描き切った理由は、設計（Fable 5）と実装（Opus）のモデル分業を徹底するためです
。設計の結晶化（ADRの明文化）を完了させ、実装セッションに曖昧な設計判断を一切残さないという開発規律の現れです
。
2. 4つの「決定済み前提条件」（D1〜D4）
このアーキテクチャを動かすにあたり、私たちはFigmaや他システム（Material/Polaris等）との関係について以下の境界線を確定しました。
D1：コンポーネント完全性の基準 — shadcn/ui registry（約46個）を正本として既存21個と突合・監査し、完全性を目指します。他システムは本アーキテクチャの成功後に「置換」ではなく「増設」として扱います
。
D2：ガイドラインのあり方 — コンポーネント管理にFigmaは使用せず、リポジトリ内の生きたページ（/guideline）のみを SoT（Source of Truth）とします
。
D3：リポジトリ構成 — 複数リポジトリ（Polyrepo）への分割は協調コストを激増させるため、Monorepo内での協調（Federated）体制を維持します
。
D4：モデル分業 — 設計をFable 5、実装をOpus 3が担当する分業体制を敷きます
。
3. 三位一体を動かす「4つのアーキテクチャ要素」（E1〜E4）
ADR-020で定義した「薄いルーター（Thin Router）」が消費するべき3つの資産（DESIGN.md / tokens.css / ui-components）を、作る側の量産装置として稼働させる4要素（E1〜E4）が本設計の心臓部です
。
E1 — 器：中立なSoTとしてのコンポーネント
すべてのコンポーネントは薄く、中立に保ちます。wired-jpの直角、無印良品のきなりといった各ブランド固有の「個性（Character）」は、TSXコード側に variant 分岐を作るのではなく、tokens.cssの変数注入のみで成立させる「結晶化層」を定義します
。
私たちは、P1（フェーズ1）の冒頭で「tokensだけで個性が本当に再現できるか」をButtonとCardで検証する『キャラクター・パイロット』を前提検証として内蔵し、検証なき仮説に基づく破綻を未然に防ぎます
。
E2 — 可視化：動的に生きた /guideline 表
Figmaの静的なStylesページの代わりとなる、生きたWebページをリポジトリ内に構築します
。
tokens.cssを書き換えた瞬間に実描画が追従するのはもちろん、値のラベル（oklch / px）自体をgetComputedStyleで動的にブラウザから直接取得します
。ガイドラインページ上に値をハードコードする行為（三重SoT drift）は三分原理に反するため、これを機械的に禁止します
。
E3 — 保証：機械的な防衛線 lint:token-consumption
「コンポーネントはtoken以外を参照してはならない」という誓約をCI/CDで保証します
。
最もインライン値や動的計算値の long-tail（例外値）が発生しやすい 02-spatial から優先的に検証（パイロット）を回すことで、不要な誤検知で開発の手が止まる事故を防ぎます
。2週間の監視期間（Warningモード）を経て、PRを拒否する「Blocking昇格」へ進む、安全な導入プロトコルを敷きます
。
E4 — 再構築：サイレント再発明を遮断する rebuild pipeline
AIにTailwindのスタイリングを直書きさせるからコードが崩壊し、トークンが激増するのです
。
機械可読カタログである components-manifest.json を整備し、新設の rebuild skill に対して「作り直すな、既存の部品を引いてこい」と指示に明文化します
。これにより、AIによるサイレントな「コンポーネントの再発明」を根絶します
。
あわせて、AIが迷う「スキルの乱立衝突」を防ぐため、brand-prototype、design-flow、rebuild の3つのスキルの排他トリガー判定表をP1で前倒し確定します
。
4. 4週間のタイムボックスと「LOOKBOOK詳細」dogfood
私たちは、インフラづくり（E1/E2）に夢中になり、肝心の「量産能力（E4）」が永久に検証されないという「やった感による未完（DES-112やDES-153の悪夢）」を極限まで警戒しています
。そのため、P1着手から「4週間」という厳格なタイムボックス（~2026-07-30）「OshareBunny LOOKBOOK 詳細ページ」を名指しで確定しています
。