Vize
Musea と AI
AI によって、UI を作るコストは下がりました。
便利な変化である一方、開発のボトルネックも移ります。「コンポーネントを作れるか」だけでなく、次のことが課題になります。
- プロダクトに合っているか
- デザインシステムのルールを守っているか
- アクセシビリティを満たしているか
- 既存の状態と一貫しているか
- レビューする人が変更を理解できるか
- 将来のエージェントが同じ意図を引き継げるか
ここに、Musea の役割があります。
生成には制約が必要
AI モデルは、数秒でコンポーネントの案を五つ作れます。
しかし、制約がなければ、それぞれの案は少しずつずれていきます。
- 余白が変わる
- 必要な状態が抜ける
- 色は似ていても、デザイントークンを使っていない
- アクセシビリティが任意の提案として扱われる
- 空、読み込み中、エラー、無効化の状態が忘れられる
- デザイン上の判断なしに、視覚的な階層が変わる
デザインシステムは、こうした制約を担います。
そのプロダクトにとって「良い」とは何かを、人にもエージェントにも伝えます。
デザインシステムを実行できる形にする
デザインシステムを、Figma のページ、README、チーム内の暗黙の了解だけに留めることはできません。
AI を多く使う開発では、デザインの意図を機械にも読める形にする必要があります。
- トークン
- コンポーネントのメタデータ
- 使用例
- 状態
- アクセシビリティの要件
- 視覚的回帰テストの基準
- 利用上の注意
- 生成されるドキュメント
Musea が目指しているのは、この方向です。
Musea は、コンポーネントを並べるギャラリーに留まりません。デザインシステムを、ツールチェーンの一部として扱うための仕組みです。
Musea が目指すもの
具体的な機能が大切です。
- コンポーネントのギャラリーページ
- 使用例と状態を記述する art ファイル
- 生成されるドキュメント
- パレットやトークンを扱うワークフロー
- アクセシビリティの検査
- 視覚的回帰テスト
- ローカルで試すための Vite との統合
- AI ツールがコンポーネントの背景を調べるための MCP との統合
目的は、カタログの見栄えを良くすることだけではありません。
コンポーネントを、レビューでき、テストでき、ドキュメントで説明できる成果物にすることです。
エージェントがコンポーネントを変更するとき、Musea が次の疑問に答えられることを目指します。
- どの状態が変わったか
- どの使用例に影響があるか
- 視覚的な基準が変わったか
- アクセシビリティが悪化していないか
- コンポーネントは、説明されている意図に今も合っているか
- 別のエージェントも使い方を理解できるか
AI にプロダクトの知識を引き継ぐ
モデルが、プロダクトの事情を自動的に知っているわけではありません。
一般的な UI パターンは知っていても、プロダクトの品質を左右するのは細部です。
- UI の言葉遣いや雰囲気
- 操作画面に求められる情報の密度
- 標準として使うコントロール
- 破壊的な操作の示し方
- 空の状態の振る舞い
- ブランドとアクセシビリティの折り合いの付け方
Musea は、こうした知識を保つ場所になれます。
プロンプトだけに頼るよりも、実際のコンポーネント、状態、使用例、制約を整理した情報を、AI のワークフローに渡せます。
目で確認するレビューの重要性
AI が生成した UI は、もっともらしく見えても、正しいとは限りません。
レイアウトに微妙な不統一があったり、コントラストが不足したり、ホバー時に配置がずれたりします。長いラベルの折り返しが崩れることも、読み込み表示が重要な情報を覆うこともあります。
そのため、視覚的回帰テストはコンポーネントのギャラリーと近い場所に置く必要があります。
静的解析は構造の誤りを見つけ、型チェックは契約を確かめられます。見た目については、実際の表示を示す証拠が必要です。
Musea では、次の視覚的なレビューを日常的に行えるようにしたいと考えています。
- 状態を生成する
- スクリーンショットを撮る
- 基準と比較する
- 差分を示す
- コンポーネントのすぐそばでレビューする
こうすれば、デザインの品質を、直前にスクリーンショットを送り合う作業から、繰り返せるワークフローに変えられます。
デザインシステムは AI の基盤になる
AI が普及する前、デザインシステムは主に、人が一貫性を保ちながら速く作業するためのものでした。
AI の時代には、機械が安心して作業するためにも役立ちます。
優れたデザインシステムは、エージェントに次のものを渡します。
- 共通の語彙
- 手本となる使用例
- 守るべき制約
- 通過するべきテスト
- 読むべきドキュメント
- 保つべき視覚的な基準
これらは、開発を支える基盤です。
Vize は、コードの正しさだけで終わるべきではありません。フロントエンドの品質には、見た目、アクセシビリティ、プロダクト全体の一貫性も含まれます。そのために Musea があります。
AI によって、これらすべての必要性は高まります。
「AI が UI を生成するから、デザインシステムは重要でなくなる」という未来ではありません。
「AI が UI を生成するからこそ、デザインシステムを実行し、調べ、テストできる形にする必要がある」という未来です。