design-style-installer

Design Style Installer

ブランドを刷新する際と同じように、プロジェクトにデザインシステム全体を適用します。まずトークンを設定し、次に接続し、最後にコンポーネントを整えます。トークンですでに定義されている値をハードコードすることはありません。参照元は、Open Agent Stack の design-styles/ にある本番用テーマ7種類です。それぞれに tokens.json（W3C デザイントークン）、theme.css、tailwind.tokens.js、WCAG コントラスト確認シートが含まれます。または、任意のローカルの W3C 形式トークンファイルも使用できます。

ワークフロー

1. スタイルを選びます。 ユーザーがスタイルを指定した場合は、open-agent-stack リポジトリから取得する（またはローカルクローンを読み込む）ようにします。指定がない場合は、特徴を一言で説明しながら7つの選択肢を提示し、製品に合うものを尋ねます。aurora-mesh（柔らかな未来的ダーク、グラデーションメッシュ）、cirrus（雲や空を思わせる明るい色調、すりガラス）、liquid-glass（半透明のレイヤー）、mono-brutalist（大胆でタイポグラフィー主導）、neo-terminal（CRT風の黒地に緑）、sand-terra（温かみのあるエディトリアルなニュートラルカラー）、tidal（深い海の青）。
2. プロジェクトを読み取ります。 技術スタック（Tailwind のバージョン、CSS モジュール、styled-components、通常の CSS）を検出し、現在のスタイル設定の全体像を確認します。色、フォント、角丸、シャドウが現在どこで定義されているか、それらの値がコンポーネント内にいくつハードコードされているかを調べます。
3. トークンを導入します。 技術スタックに応じてテーマを接続します。Tailwind の場合は tailwind.tokens.js を theme.extend にマージします（v4 の場合は CSS 変数として @theme を出力します）。それ以外の場合は、theme.css のカスタムプロパティを :root／[data-theme] に追加します。テーマのフォントは適切に読み込みます（next/font または事前接続した <link> を使用）。読み込みを妨げるインポートチェーンは使いません。
4. 色を塗り替えます。 コンポーネント内のハードコード値をトークン参照に置き換えます。最も近い16進カラーコードではなく、役割に基づいて対応づけます。旧プライマリー色は新しいアクセント色に、旧ページ背景は bg.base に、旧カードは surface に対応づけます。旧デザインに、テーマにはない役割（3つ目のアクセントや警告色の淡色など）がある場合は、テーマのパレットのロジックに沿って導出し、追加分をトークンファイルに記録します。独自の色を思いつきで追加してはいけません。
5. 検証します。 ビルドを実行し、ナビゲーション、ヒーロー、すべての状態のボタン、フォーム、カードといった主要な画面要素が正しく表示されることを確認します。色を導出した場合は、文字色と背景色の組み合わせが引き続きコントラスト確認シートの AA 基準を満たすことを確かめます。design-install-report.md を出力し、導入したトークン、変更したファイル、残っているハードコード値（パスを含む）、追加した派生トークンを記載します。

ルール

• 導入後、トークンだけを唯一の信頼できる情報源とします。コンポーネント内に16進カラーコードが散在したままなら、色の塗り替えは完了していません。
• 見た目の類似ではなく、意味上の役割に基づいて対応づけます。旧デザインのライトグレーの境界線とライトグレーの無効状態テキストは、たとえ同じ16進カラーコードでも別々のトークンです。
• テーマを混在させてはいけません。ユーザーが sand-terra のページに aurora-mesh のカードを使いたい場合は、カスタムテーマとしてトークンファイルをフォークし、内容に即した名前を付けます。
• レイアウトとコンテンツはそのまま維持します。このスキルで変更するのは見た目であり、構造ではありません。構造上気になった点は、提案としてレポートに記載します。
• テーマのモーショントークンも尊重します。時間やイージングもスタイルの一部であり、省略してよい装飾ではありません。
• テーマのアクセシビリティ保証を維持します。導出した色は、リリース前に必ずコントラストを確認します。

クイックコマンド

• 「このプロジェクトに [style] を導入して」――ワークフロー全体を実行
• 「スタイルを見せて」――各スタイルの特徴を紹介するステップ1のギャラリーを表示
• 「色の塗り替えは不要。トークンだけ」――ステップ1～3を実行
• 「まだハードコードされている箇所は？」――ステップ5の差分監査を実行