dembrandt

dembrandt — UX パイプラインオーケストレーター

@VictorGjn によるコンセプトです。

複数の観点にまたがる UI/UX タスクを、順序立てた 6 つのステージを通して処理します。各ステージでは必要に応じてサブスキルを読み込みます。タスクで実際に必要なものだけを使用します。

このスキルとサブスキルを直接使い分ける場合：

• 複数の観点にまたがるタスク（「デザインレビュー」、「インターフェースの監査」、「UI の構築」）→ このオーケストレーターを使用します
• 単一の観点に関するタスク（「カラーパレットの確認」、「ボタンの状態のレビュー」）→ 該当するサブスキルを直接使用します
• URL または DESIGN.md を使った、ブランドからトークン、仕様へのパイプライン → 代わりに generate-ui-from-brand を使用します
• デザインではなく、既存のページを再現する場合 → 代わりに clone-website を使用します
• ライブサイトからトークンを読み取るだけの場合 → 代わりに extract-design を使用します

---

パイプライン

ステージ 1 — ブランドの基盤

トークンを決める前に、ビジュアル言語を確立します。

サブスキル（必要に応じて読み込み）：

• brand-visual-language — 形状の言語、アイコンのスタイル、タイポグラフィのトーン
• algorithmic-color-palette — ブランドカラーから状態とブランドカラーを反映したグレーを導き出す
• color-mode-and-theme — ライトモード、ダークモード、または両方の選択と、テーマセレクターを提供するタイミング

ゲート： 次に進む前に、ブランドのトーンとカラーシステムについて合意します。

---

ステージ 2 — デザイントークンとスケール

数値システムを決め、すべてのコンポーネントで共通の基盤を使用できるようにします。

サブスキル（必要に応じて読み込み）：

• modular-scale-typography — 比率ベースのタイプスケール、最小サイズ、コンテキストに応じた使い方
• elevation-and-depth — 影のスケール、角丸、カードとモーダルのパターン
• surface-separation — 各サーフェスには境界線、エレベーション、塗りつぶしのいずれか 1 つを使用し、不透明度は状態の表現に使用する
• button-states — 6 つの状態：通常、ホバー、アクティブ、フォーカス、無効、読み込み中
• component-family-consistency — ボタン、入力欄、ピルで共通する角丸、色、高さ
• sizing-units — px、rem、相対値の使い分け：ユーザーがテキストを拡大したときに変化する値
• status-colors-and-errors — 最小限のセマンティックカラー、エラーからの回復、エラーの防止

ゲート： トークンが定義され、コンポーネントファミリー全体で一貫していることを確認します。

---

ステージ 3 — レイアウトと構造

対象のプロダクトコンテキストに合わせて、レイアウトを決定します。

サブスキル（必要に応じて読み込み）：

• layout-paradigms-and-consistency — コンテンツに合ったレイアウトパラダイムを選択し、画面間で同じページの骨格を再利用する（マクロスケールでの一貫性）
• gestalt-ui-organisation — 関連するコントロールを近接性、類似性、共通領域によってグループ化する
• visual-emphasis-and-hierarchy — 各ビューに CTA を 1 つ配置し、色とサイズで強調する
• information-architecture — 命名、メンタルモデル、データ UI、確認ダイアログ
• ui-context-and-scope — 階層、パンくずリスト、カラー領域、スコープの伝達
• marketing-vs-product-system — サイトとプロダクトでは情報密度が異なるため、トークンレイヤーを共有する
• responsive-paradigms — モバイル、タブレット、デスクトップにおけるナビゲーション、セクション、スティッキー動作
• ui-density — プラットフォームとユーザータイプに合わせて情報密度を調整する
• sticky-and-fixed-elements — ヘッダー、下部ツールバー、z-index トークン
• scroll-areas — 内部スクロールを避け、スクロール方向を 1 つに限定し、ユーザーが操作できるようにする

ゲート： ブレークポイントとユーザーコンテキスト全体で、レイアウトに一貫性があることを確認します。

---

ステージ 4 — コンポーネントとインタラクション

コンポーネントのパターンとインタラクティブな状態を確認します。

サブスキル（必要に応じて読み込みます）：

• real-world-metaphors — カード、カルーセル、ドロワー：使い分けと使用方法
• tab-navigation — タブの種類、オーバーフロー、キーボード操作、ARIA、状態の永続化
• modal-and-overlay-patterns — ツールチップ／ポップオーバー／ドロワー／モーダルの階層、フォーカス管理、破壊的操作の確認
• form-design — 補助テキスト、プレースホルダー、バリデーション、送信状態
• data-display-and-selection — グリッド／リスト／テーブル、大きなクリック領域、一括操作
• repeated-component-alignment — スロットモデルとしての反復コンポーネント：サイズの統一、アンカーの固定、あふれたテキストのクランプと復元
• operational-expert-tool-ui — 日常的に利用する訓練済みの B2B ユーザー向けの、密度が高くワークフロー主導の UI
• coordinated-data-views — テーブルとビジュアルビュー（マップ、図、チャート）を同期させる
• domain-expert-configuration — ソルバー／アルゴリズムの設定をドメインの用語で表示する
• authentic-product-representation — 演出されたモックアップやマーケティング要素よりも、実際のコンテンツと実際の出力を優先する
• app-shell — トップバー、アプリランチャー、テナントと環境の手がかり、ステータスバー：全体で一貫したシェル
• global-toolbar-controls — 通貨、言語、地域、単位のセレクター
• notifications-and-recovery — トースト、バナー、再試行、取り消し — 常に次へ進む手段を用意する

ゲート： すべてのインタラクティブな状態に対応し、行き止まりがありません。

---

ステージ 5 — UX の仕上げ

UX の原則とモーションを適用し、品質の感じ方を高めます。

サブスキル（必要に応じて読み込みます）：

• nielsen-usability-heuristics — 10 のユーザビリティ原則とレビュー用チェックリスト
• user-flows-and-guided-paths — ウィザード、購入フロー、オンボーディングの手順
• micro-interactions — アニメーションアイコン、トグル、表示演出、お祝いの演出
• loading-states-and-perceived-performance — スピナー、スケルトンスクリーン、段階的な表示
• motion-and-storytelling — UI におけるディズニーの原則と映画的な表現

ゲート： フローを最初から最後まで明確に把握でき、体感パフォーマンスが許容範囲内です。

---

ステージ 6 — アクセシビリティと技術面のゲート

リリース必須の厳格なゲートです。省略したり先送りしたりしないでください。

サブスキル（必要に応じて読み込みます）：

• wcag-accessibility — WCAG 2.2 AA / EN 301 549：コントラスト、キーボード操作、ARIA
• semantic-html-and-seo — HTML5、代替テキスト、Open Graph、プログレッシブエンハンスメント
• performance-and-web-vitals — Lighthouse 監査、LCP、CLS、INP、画像、フォント、JS の読み込み

ゲート： WCAG 2.2 AA に準拠しています。2025 年 6 月以降にリリースされる製品には、欧州アクセシビリティ法（EAA）により準拠が義務付けられています。

---

出力

ばらばらなコメントの羅列ではなく、構成されたレビューを 1 つ作成します。重要度ごとに、最も優先度の高いものから指摘をまとめます。

1. ブロッカー — WCAG 2.2 AA、フローの破損、行き止まりなど、必須ゲートに不合格となる問題。リリース前に必ず修正してください。
2. 重大 — 一貫性、階層、または中核となる UX 原則を損なう問題。今回のイテレーションで修正してください。
3. 軽微 — 仕上げ、マイクロインタラクション、体感パフォーマンスの改善。バックログに追加してください。

指摘ごとに、該当するステージ、具体的な要素、問題点、具体的な修正方法を示します。

タスクに必要なステージだけを実行します。ブランドとトークンが確定している既存製品はステージ 3 から開始し、アクセシビリティのみを確認する場合はステージ 6 だけを実行します。実行したステージと省略したステージを、その理由とともに明記します。

---

generate-ui-from-brand との関係

generate-ui-from-brand はトークン抽出のパイプラインです：URL または DESIGN.md → トークン → UI 仕様。オーケストレーターのステージ 1〜2 と重複します。ブランドの情報源があり、具体的な仕様が必要な場合はこれを使用してください。特定のブランド抽出を出発点とせず、UX に関するあらゆる側面を通してレビューまたは構築する場合は、このオーケストレーターを使用してください。