generate-ui-from-brand

ブランドから UI を生成

タイプ： パイプライン／オーケストレーター
入力： URL または既存の DESIGN.md
出力： 判断を確定した、実行可能な UI 仕様

---

ステップ 1 — 抽出

URL が指定されており、Dembrandt MCP を利用できる場合：

すべての MCP 抽出ツールは非同期です。すぐに job_id が返されます。status が "completed" になるまで get_job_status をポーリングし、その後 result を読み取ります。

{ job_id } = get_design_tokens({ url })
{ result } = get_job_status({ job_id })   // repeat until status === "completed"

以下を順に実行します（抽出のたびにブラウザーが起動します）。

get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing

Dembrandt MCP を利用できない場合は、CLI を実行します：

npx dembrandt <url> --design-md --crawl 3

すでに DESIGN.md がある場合： 直接解析し、抽出をスキップします。

---

ステップ 2 — トークンを正規化

抽出した値をそのまま使わないでください。まず、意味に基づくシステムに割り当てます。

色

抽出した各色の役割を特定します。

役割	トークン	特定方法
color-primary	メインのブランドカラー	プライマリボタン、リンク、主要なインタラクティブ要素で使用
color-secondary	ブランドを補完する色	セカンダリアクション、アクセントで使用
color-surface	背景	ページまたはカードの背景
color-surface-raised	高さのあるサーフェス	カード、パネル、モーダル
color-border	境界線／区切り線	入力欄の境界線、区切り
color-text	主要なテキスト	本文
color-text-secondary	セカンダリテキスト	ラベル、メタデータ、キャプション
color-error	エラー状態	赤。他の役割には割り当てないでください
color-warning	警告状態	オレンジ／アンバー。他の役割には割り当てないでください
color-success	成功状態	緑。他の役割には割り当てないでください

判断ルール： 抽出したパレットに color-primary の候補となるブランドカラーが 2 色を超えて含まれている場合は、インタラクティブ要素で最も多く使われている色を選びます。

タイポグラフィ

抽出したサイズをスケールに割り当てます。比率の一貫性を確認します。サイズが一定の比率に従っていない場合は、最も近いモジュラースケールの段階に丸めます（ベースは 16px、推奨比率は 1.25）。

トークン	最小サイズ	役割
text-base	16px	本文。16px 未満にはしないでください
text-sm	14px	ラベル、キャプション。控えめに使用
text-lg	20px	リード段落
text-h4	25px	セクションの小見出し
text-h3	31px	セクション見出し
text-h2	39px	ページの小見出し
text-h1	49px	ページ見出し
text-display	61px	ヒーロー／ランディングページ専用

判断ルール： 抽出した本文テキストのサイズが 16px 未満の場合は、16px に上書きします。

余白

最もよく使われている小さなマージン／パディングの値から、基本となる余白単位を特定します。そこからスケールを導きます。

base = extracted smallest recurring value (usually 4px or 8px)
scale = base × 1, 2, 3, 4, 6, 8, 12, 16

角丸

インタラクティブ要素（ボタン、入力欄）で最もよく使われている角丸の値を抽出します。これを --radius-button とし、バリアントに関係なく、すべてのボタンに一律で適用します。

---

ステップ 3 — UX の判断を適用

トークンを正規化したら、以下の判断を明確に行います。未決定のままにしないでください。

視覚的階層

• 構築する UI のプライマリアクションを 1 つ特定します
• color-primary はそのアクションだけに割り当てます
• その他のアクションには、ニュートラルまたはアウトラインのスタイルを使用します
• すべてのインタラクティブ要素に cursor: pointer を適用します

ゲシュタルトのグルーピング

• 関連する要素間（狭い間隔：space-2）とグループ間（広い間隔：space-6 または space-8）の余白を定義します
• 関連するコントロールをレイアウト内の同じ場所に配置することを確認します

アクセシビリティ（WCAG 2.2 AA）

正規化したトークンのコントラストを確認します。

• color-surface 上の color-text：4.5:1 以上であること
• color-surface 上の color-text-secondary：4.5:1 以上であること
• 白またはサーフェス上の color-primary（ボタンラベル）：4.5:1 以上であること

満たさない場合は、基準を満たすようトークンを暗くするか明るくします。調整内容を記録します。

エラー／ステータスの色

• color-error が赤で、エラーにのみ使用されていることを確認します
• color-warning がオレンジ／アンバーで、警告にのみ使用されていることを確認します
• ブランドカラーにオレンジをプライマリカラーとして使っている場合、警告にも兼用できません。警告状態には、別のアンバーを定義する必要があります

---

ステップ 4 — UI 仕様を出力

具体的で、そのままコピーして使える出力を作成します。リクエストに合った形式を選択します。

デザイントークンファイル（CSS）

:root {
  /* Colours */
  --color-primary:          <value>;
  --color-secondary:        <value>;
  --color-surface:          <value>;
  --color-surface-raised:   <value>;
  --color-border:           <value>;
  --color-text:             <value>;
  --color-text-secondary:   <value>;
  --color-error:            <value>;
  --color-warning:          <value>;
  --color-success:          <value>;

  /* Typography */
  --font-sans:    <extracted font family>;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-lg:      1.25rem;
  --text-h4:      1.563rem;
  --text-h3:      1.938rem;
  --text-h2:      2.438rem;
  --text-h1:      3.063rem;

  /* Spacing */
  --space-1:  <base>px;
  --space-2:  <base×2>px;
  --space-4:  <base×4>px;
  --space-6:  <base×6>px;
  --space-8:  <base×8>px;

  /* Borders */
  --radius-button:  <extracted>px;
  --radius-card:    <extracted or radius-button + 2>px;

  /* Elevation */
  --shadow-card:   0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-modal:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
}

UX 監査（既存の UI を監査する場合）

CONTRAST ISSUES
  - color-text-secondary on color-surface: X.X:1 (required 4.5:1) → fix: darken to #...

HIERARCHY ISSUES
  - 3 primary buttons on same screen → reduce to 1 primary, 2 secondary

CONSISTENCY ISSUES
  - Button radius varies (4px, 8px, 12px) → standardize to --radius-button: 8px

MISSING STATES
  - No disabled state defined for inputs
  - No error state for form fields

FONT SIZE VIOLATIONS
  - Caption text at 12px → minimum 14px

コンポーネント構成（レイアウトを生成する場合）

Page layout:
  Header (fixed, 56px)
    Logo | Nav | [Global controls: small type]
  
  Main
    Hero section
      H1 (display scale) + lead text + primary CTA (color-primary, full)
    
    Feature grid (3-col)
      Card (shadow-card, radius-card) × 3
        Icon + H4 + body text
    
  Footer
    Links (text-sm, color-text-secondary)
    Language/currency selector (text-sm)

Primary action: CTA button in hero
Secondary actions: nav links, card CTAs (outlined)
Error states: inline, adjacent to field, red text + icon

---

複数のブランドに適用する（トークンアーキテクチャとガバナンス）

1 つのパイプラインから複数のブランドを構築する場合、それぞれをゼロから始めるものとして扱わないでください。**1 つのシステムに複数のスキンを適用します。**すべてのブランドで同じセマンティックトークンを使って生成し、ブランドごとに変えるのはプリミティブ（色、書体、角丸）だけです。修正はすべてのブランドに反映されます。

**定期的に統合してください。トークンシステムは乖離します。**複数のブランドを長期にわたって運用すると、トークンが分岐し、個別の値が入り込み、システム間の差異が広がります。定期的な統合作業を予定に組み込みましょう。

• **再抽出して比較する：**稼働中のサイトを確認します（Dembrandt の抽出機能と drift／compute-drift ツールに加え、目視確認と、サイト同士および現在のデザイントレンドやベストプラクティスとのベンチマークを活用します）。
• **乖離を共通化すべき箇所で共有セマンティックレイヤーに取り込み、**本当にブランド固有の値だけをプリミティブのオーバーライドとして残します。
• **明確な見解を反映します。**統合は単なる機械的な重複排除ではありません。各プロダクトの現状だけでなく、今後の方向性を示す明確な方針と、UX／ビジュアルデザインの見解を持ち込みます。

**異なるデザイン世代が競合する場合は、新しさを優先します。**長年にわたって構築されたプロダクトには、異なるデザイン世代のページが混在しています。最新のページやコンポーネントは、現在のデザイン意図を示す最も有力な根拠です。古いものを新しいものに寄せ、各世代を平均した折衷的なスタイルにはしないでください。ただし、新しさはあくまで原則であり、最終判断ではありません。最新の画面が、未レビューの単発の実装である可能性もあります。スタイルを標準として採用したり、古いスタイルを非推奨にしたりする前に、ユーザーに確認してください。

**大規模な一括変更ではなく、手を加える際に非推奨化します。**古い角丸、古いシャドウ、廃止されたボタンのバリエーションなど、非推奨スタイルのリストは短く保ちます。古い世代のページに手を加える際は、同じ作業の中で現在のスタイルに更新します。作業のたびにプロダクト全体の統一が進み、ロードマップに書き換えプロジェクトを追加せずに済みます。

**2～3 か所で使われていれば、パターンです。**同じビジュアル表現が独立して 2～3 か所に現れたら、それは偶然ではありません。名前を付けてトークン化し、どこでも使えるようにします。4 つ目を手作業で作るより、共通化するほうが効率的です。一度共通化したパターンはデザイン言語の一部となります。新しいコンポーネントではそのまま使うことも、元の特徴をはっきり残す範囲で調整することもできます。

**機能の利用状況を追跡し、使われていないものを非推奨にします。**同じ原則はトークンだけでなく機能にも当てはまります。実際に使われているものを計測し、**実際の利用がほとんどない機能やコンポーネントは、維持し続けるのではなく非推奨にします。**共有システムを健全に保つには、不要なものを取り除くことが重要です。使われていないコンポーネントはどれも、乖離の原因になり得るうえ、今後の変更のたびにコストを生みます。

---

引き継ぎ前の監査チェックリスト

• すべてのトークンに値ではなく意味に基づいた名前を付けている（color-blue-600 ではなく color-primary）
• すべての場所で本文のテキストが 16px 以上になっている
• すべてのテキスト／背景の組み合わせでコントラスト比を確認している
• 1 つのビューにつきプライマリボタンが 1 つになっている
• すべてのボタンで --radius-button を使っている
• すべてのインタラクティブ要素に cursor: pointer を指定している
• エラー色をエラー専用にしている
• 警告色（オレンジ）を警告専用にしている
• 余白を単一の基準単位から導出している