デザインシステムの運用

VibeProには、UI刷新とデザイン統制のためのDesign System（デザインシステム）コマンドがあります。

これらのコマンドは、見た目に関する判断を、プロダクト上の意味、画面経路の証跡、StoryやSpecの文脈に結びつけるためのものです。デザイン判断そのものの代替ではありません。

デザインシステム生成物を初期化する

コードから得られる証跡がまだない段階でデザインシステム生成物が必要な場合は、init を使います。

vibepro design-system init /path/to/repo \
  --id <ds-id> \
  --product "<プロダクト名>"

これにより、形式としては有効だが証跡の薄い生成物が作られます。実際のプロダクトやコードから得られる証跡は、ゲートとして残ります。

コードから導出する

画面経路、スタイル、トークン、プロダクト文脈が存在する場合は derive を使います。

vibepro design-system derive /path/to/repo \
  --id <ds-id> \
  --product "<product name>" \
  --routes "/,/settings" \
  --brief "Quiet operational SaaS UI for repeated expert use" \
  --from-code

Storyに対して検証する

vibepro design-system validate /path/to/repo \
  --id <ds-id> \
  --story-id <story-id>

この検証では、デザインシステム生成物がStory、Spec、Architectureの文脈と整合しているか、ずれや証跡不足によってPR作成を止めるべきかを確認します。

UI刷新計画

既存UIを刷新する場合は、デザインシステム生成物を入力として計画を作ります。

vibepro design-modernize plan /path/to/repo \
  --id <story-id> \
  --product "<プロダクト名>" \
  --routes "/,/settings" \
  --design-system-id <ds-id>

生成される見た目の計画は仮説です。現在のコード、Story、Spec、デザインシステムのゲート、Gate DAGを正としてください。