Vize
美術館とAI
AI により UI の作成が安価になります。
これは便利ですが、ボトルネックも変わります。難しい部分は、もはや「コンポーネントを作成できるか?」ということだけではありません。難しい部分は次のとおりです。
- 製品に合っていますか？
- デザインシステムを尊重していますか？
- アクセス可能ですか？
- 既存の状態と一致していますか?
- レビュー担当者は変更を理解できますか?
- 将来のエージェントは同じインテントを再利用できますか?
これが美術館が重要な理由です。
生成には制約が必要です
AI モデルは、コンポーネントの 5 つのバージョンを数秒で生成できます。
ただし、制約がなければ、これらのバージョンは変動します。
- 間隔の変更
- 状態がありません
- 色は近いですがトークン化されていません
- アクセシビリティは提案として扱われます
- 空、読み込み中、エラー、および無効な状態は忘れられます
- 設計上の決定なしに視覚的な階層が変更される
設計システムは制約層です。
この製品にとって「良い」とは何かを人間とエージェントに伝えます。
設計システムは実行可能になる必要がある
デザイン システムは、Figma ページ、README、または部族協定だけであることはできません。
AI を多用するワークフローでは、設計意図が機械可読である必要があります。
- トークン
- コンポーネントのメタデータ
- 例
- 状態
- アクセシビリティへの期待
- 視覚的回帰ベースライン
- 使用上の注意
- 生成されたドキュメント
それがムセアの目指す方向です。
美術館は単なるギャラリーではありません。これは、デザイン システムの表面をツールチェーンの一部にする方法です。
Museaが提供しようとしているもの
実用的な機能が重要です:
- コンポーネントギャラリーページ
- 例と状態を説明するアート ファイル
- 生成されたドキュメント
- パレットとトークンのワークフロー
- アクセシビリティチェック
- 視覚的な回帰テスト
- ローカル探索のための Vite の統合
- MCP の統合により、AI ツールがコンポーネントのコンテキストを検査できるようになります
重要なのは、より見栄えの良いカタログを作成することではありません。
重要なのは、コンポーネントをレビュー可能、テスト可能、文書化された成果物に変えることです。
エージェントがコンポーネントを変更する場合、Musea は次の回答を支援する必要があります。
- どの州が変わりましたか?
- どの例が影響を受けますか?
- 視覚的なベースラインは移動しましたか?
- アクセシビリティは後退しましたか?
- コンポーネントは文書化された意図と依然として一致していますか?
- 他のエージェントはその使用方法を理解できますか?
AI にはプロダクト メモリが必要です
モデルは製品を自動的に認識しません。
彼らは一般的な UI パターンを知っているかもしれませんが、製品の品質は細部に宿ります。
- UI が使用するトーン
- 操作画面の密度はどの程度であるべきか
- どのコントロールが正規であるか
- 破壊的な行為がどのように表現されるか
- 空の状態がどのように動作するか
- ブランドとアクセシビリティのトレードオフをどのように扱うか
Musea は、そうした細部の製品の記憶となることができます。
これは AI ワークフローにプロンプトよりも優れたもの、つまり実際のコンポーネント、実際の状態、実際の例、実際の制約の構造化された表面を提供します。
ビジュアルレビューがより重要になる
AI によって生成された UI は、もっともらしく見えても、まだ間違っている可能性があります。
レイアウトが微妙にずれている可能性があります。コントラストが失敗する可能性があります。ホバー状態によりレイアウトがずれる場合があります。長いラベルはうまく折り返されない可能性があります。読み込み状態が重要なコンテキストをカバーしている可能性があります。
このため、ビジュアル回帰テストはコンポーネント ギャラリーに近いものとなります。
静的解析により構造上の間違いを見つけることができます。型チェックによりコントラクトをキャッチできます。しかし、視覚システムには視覚的な証拠が必要です。
博物館は視覚的なレビューをルーチン化する必要があります。
- 状態を生成する
- スクリーンショットをキャプチャする
- ベースラインを比較する
- 表面の差分
- レビューをコンポーネントの近くに置く
これにより、デザインの品質が直前のスクリーンショット スレッドではなく、反復可能なワークフローに変わります。
デザインシステムは AI インフラストラクチャです
AI が登場する以前の時代、デザイン システムは主に人間が一貫性を持ってより迅速に行動できるよう支援していました。
AI 時代には、機械が安全に移動するのにも役立ちます。
強力な設計システムはエージェントに次のことを提供します。
- 語彙
- 真似すべき例
- 尊重すべき制約
- 合格するためのテスト
- 読むべきドキュメント
- 保存する視覚的なベースライン
それがインフラです。
Musea が存在するのは、Vize がコードの正確さにとどまるべきではないためです。フロントエンドの品質には、ビジュアル品質、アクセシビリティ、製品の一貫性が含まれます。
AI により、これらすべての必要性が高まります。
未来は「AI が UI を生成するため、デザイン システムの重要性が薄れる」というものではありません。
未来は「AI が UI を生成するため、デザイン システムは実行可能、検査可能、テスト可能になる必要がある」です。