@langgenius/dify-ui 設計システムへの移行（v1.14.0）

状態: draft / 重要度: ★★★

TL;DR

• v1.14.0 で 共通 UI プリミティブを @langgenius/dify-ui npm パッケージに切り出す移行 が本格化
• 既存の web/base/ui 配下のアドホックなコンポーネントから、PreviewCard / Meter / Dialog などの設計トークン化された再利用可能パッケージへ
• アクセシビリティ修正（date/time picker、スクロールバー、modal）も同時に進行
• Dify を fork してフロントエンドをカスタマイズしている組織 には影響大

想定読者

• Dify を fork して自社ブランドで動かしているチーム
• Dify のフロントエンドに PR を送っている OSS コントリビューター
• Dify を埋め込みウィジェット / 部分埋め込みで利用している開発者

なぜ重要か

これまで Dify のフロントエンドは web/base/ui 配下にアドホックなコンポーネント群が散在していた。再利用しづらく、デザイン一貫性も保ちにくい。@langgenius/dify-ui パッケージ化により:
- 外部から npm install @langgenius/dify-ui で公式コンポーネントが使える
- デザイントークン（色・スペース・タイポ）が中央管理される
- アクセシビリティが横断的に改善される
- Storybook 等での個別検証がしやすくなる

これは Dify が「アプリケーション」から「プラットフォーム」へシフトする 兆候として読める。

アウトライン（執筆予定）

1. 移行の全体像

• 移行前の web/base/ui の構造（モノリス的）
• 移行後の @langgenius/dify-ui（独立パッケージ）
• 移行ペース（v1.14.0 で全部移行ではなく、徐々に）

2. 公開された主要コンポーネント

3. デザイントークン

• 色・タイポ・スペースの統一
• ダークモード対応の前提

4. アクセシビリティ改善

• date/time picker のキーボード操作
• auto-update strategy picker
• plugin / model selector のスクロールバー
• modal の focus trap

5. Fork 運用への影響

• 既存のカスタムテーマを当てている組織はどう乗り換えるか
• @langgenius/dify-ui を上書きする方法
• 自社デザインシステムとの併用パターン

6. プラットフォーム化への含意

• Dify が今後外部 dev に向けたパッケージを増やす可能性
• @langgenius/dify-ui 以外に予想される切り出し候補（SDK, Webhook handler 等）

検証が必要な事項

• [ ] @langgenius/dify-ui の npm 公開ステータス
• [ ] パッケージ構成（exports、ESM/CJS）
• [ ] Storybook が公開されているか
• [ ] v1.14.0 で実際に移行された比率
• [ ] デザイントークンの命名規則

ソース:
- GitHub Release v1.14.0 — UI kit and front-end platform セクション
- @langgenius/dify-ui on npm （要確認）

本記事は非公式まとめです。正式仕様は Dify 公式ドキュメントをご確認ください。