概要
Spotifyがデザインシステム「Encore」をAI対応（AI-Ready）にするための取り組みを公開した。MCPサーバーの構築、機械可読なドキュメント整備、レイヤードアーキテクチャへの移行など、AIエージェントとの協調を前提とした設計変更を実施している。
出典: How Spotify is Making Their Design System AI-Ready — Into Design Systems
背景: なぜAI対応が必要か
AI採用が進むにつれ、開発チームはデザインドキュメントを参照する前にAIエージェントに相談するようになっている。これにより以下のリスクが生じる:
- 一貫性のないUI実装
- 非準拠のカスタムコード
- デザインシステムの採用率低下
- システムの存在意義の喪失
SpotifyのVictoria Tholerus（Webエンジニア）とAleksander Djordjevic（シニアプロダクトデザイナー）は、「AIがチームメイトより先に相談される存在になったとき、何が起きるか？」という問いを立てた。
Spotifyの戦略的転換
Spotifyはデザインシステムの目的を再定義した。
「人間だけでなく、機械にも良いシステムであるには？」
この問いから、2つの並行イニシアチブが生まれた:
- 機械可読なドキュメント — MCPを通じてAIエージェントがデザインルールにアクセス可能に
- コンポーネントアーキテクチャ再設計 — 固定的なバンドルから柔軟なレイヤード構造へ
MCPサーバーの構築
SpotifyはEncore用のMCP（Model Context Protocol）サーバーを構築した。
実現したこと:
- ドキュメントをAIエージェントに直接公開
- Cursorなどのツールが、Spotify標準に沿ったコードを即座に生成可能に
テストフレームワークも構築:
- 生成されたコンポーネント vs 公式Encoreコンポーネント
- Lintエラー検出
- 類似度スコア
- ビジュアル出力の評価（Spotifyではプロトタイプもコードと同様に重視）
異なるMCPツール同士を比較し、どれがユーザーに最も価値を提供するかも評価している。
レイヤードアーキテクチャ
Encoreは3つのアーキテクチャパターンを採用:
1. レイヤー分離
| レイヤー | 役割 |
|---|---|
| 基盤層（Foundational） | トークン、タイポグラフィ、カラー |
| コンポーネントスタイル層 | ブランド表現、ビジュアル |
| コンポーネント振る舞い層 | インタラクション、状態管理 |
2. ヘッドレスコンポーネント
React ARIAやBase UIなどのシステムを基盤に構築。これらがインタラクションロジックを提供し、Encoreはブランド・アクセシビリティ・一貫性に集中。
3. 摩擦の低減
人間向け: イノベーションのスピードで作業できる
機械向け: コンテキストのスコープが小さくなる。AIは基盤、ボタンのコンテキスト、ヘッドレスシステム（すでにトレーニングセットに含まれている）を個別に理解できる。
5つの移転可能なパターン
個人開発者が自分のプロジェクトに適用できるパターン:
| パターン | 説明 |
|---|---|
| Presence（存在） | デザインシステムはAIが動作する場所に存在しなければバイパスされる |
| Structure Over Generation（生成より構造） | 制約が一貫性を生む。生成機能より構造が重要 |
| Flexible Over Rigid（柔軟 > 固定） | レイヤードアーキテクチャは固定的なバンドルよりスケールする |
| Test Real Output（実出力のテスト） | AI生成コードを自分の基準でテストするフレームワークを構築 |
| Infrastructure Mindset（インフラ思考） | 人間、機械、開発速度すべてをサポート |
個人開発者への示唆
Spotifyの取り組みから、ソロ開発者が学べるポイント:
- ドキュメントを機械可読に — READMEやコンポーネントの説明を、AIが解釈しやすい形式で書く
- MCPサーバーの検討 — 自分のプロジェクト用MCPサーバーを構築することで、CursorやClaude Codeとの連携が劇的に改善
- レイヤー分離の恩恵 — 小さなコンテキストはAIの理解を助ける。モノリシックなコンポーネントより、責務分離されたコードが好まれる
- AI出力のテスト — 生成されたコードを自分の基準で評価する仕組みを持つ
自分のデザインシステムをAI対応にする第一歩は、機械可読なドキュメントから。
関連イベント
Into Design Systemsは2026年3月19-20日にAIオンラインカンファレンスを開催予定。MCPとデザインシステムに関するセッションが多数。
元記事: Victoria Tholerus（Webエンジニア）とAleksander Djordjevic（シニアプロダクトデザイナー）のStockholmミートアップでの発表より