# MCP とデザインシステム：エージェント統合の基盤層 - 著者：小川 修一郎（デザイン研究者／デザインコンサルタント）https://jamjet-iqbal.com/ - 初出：2026-06-26、更新：2026-06-27 - 正規の URL（HTML）：https://jamjet-iqbal.com/notes/mcp-design-agent-integration/ - 英語版：https://jamjet-iqbal.com/en/notes/mcp-design-agent-integration/（Markdown：https://jamjet-iqbal.com/en/notes/mcp-design-agent-integration.md） - 言語：ja - キーワード：MCP, design-system, Figma, Claude-Design, agent-integration, Code-Connect, Connectors, design-to-code, 2026 > MCP（Model Context Protocol）が2025〜2026年にデザインツール間の共通接続層として急速に普及。Figma MCP サーバー（2025-06ベータ）、Figma Config 2026 Connectors、Claude Design のデザインシステムインポートにより、デザイン-コード間のエージェントループが閉じつつある。構造的な発見は2つ。(1)デザインシステムの成熟度がエージェント出力精度の上限を決める（Figma 公式認定）。(2)最良のエージェントは最少ツールで動作する（Vercel 実験: 15ツール→1ツールで成功率80%→100%、速度3.5倍）。MCP はツール間のプロトコルであると同時に、デザインシステムを『エージェントのコンテキスト層』に転換する装置である。 **MCP（Model Context Protocol）** は Anthropic が公開したプロトコルで、AI エージェントが外部ツールのコンテキストを取得・操作するための標準的な接続方式を定義する。 2025年後半からデザインツール領域での採用が加速し、2026年6月時点で Figma、Anthropic（Claude Design/Claude Code）、Vercel が MCP を介したデザイン-コード統合を実装している。 関連: [デザインエージェントツール 2026：自律制作の現在地](https://jamjet-iqbal.com/notes/design-agent-tools-landscape-2026/)（各ツールのエージェント機能）／[Vibe Coding とUIエージェント：自然言語による制作とその境界](https://jamjet-iqbal.com/notes/vibe-coding-design-production/)（UI 生成エージェント）／[デザイン業界における AI 活用 — 産業・制度・開発者の声（2026）](https://jamjet-iqbal.com/notes/ai-in-design-industry/)（産業調査）／[エージェンティックコーディング：オーケストレーションパターンの現在地（2026）](https://jamjet-iqbal.com/notes/agentic-coding-orchestration-patterns/)（オーケストレーションの設計パターン）／[LLM 時代のナレッジ管理手法（2026年中間地点）](https://jamjet-iqbal.com/notes/llm-knowledge-management-2026/)（MCP を含む LLM 向けナレッジ管理）／[デザインシステム＝AIの基盤レイヤー — 構造化されたデザイン知識がエージェント精度を決める](https://jamjet-iqbal.com/notes/design-systems-ai-infrastructure/)（本ノートの観察を学術文献27件で裏付けた構造分析）。 ## Figma の MCP 統合 Figma は2025年6月に **Dev Mode MCP サーバー** をベータ公開した[^fig-mcp]。 このサーバーは、Figma のコンポーネント、変数、スタイルの構造化メタデータ、スクリーンショット、コード例を外部の LLM へ提供する。 Dev または Full seat が必要で、アウトプットの精度は **Code Connect**（デザインコンポーネントと実装コードのマッピング定義）の整備状況に依存する。 [^fig-mcp]: figma.com/blog/introducing-figma-mcp-server/ (2025-06-04) Figma は MCP サーバーとデザインシステムの関係について、公式ブログで次のように述べている。 > デザインコンテキストなしで AI エージェントにコード生成を依頼することは、オンボーディング前に新人エンジニアに本番コードを書かせるようなものだ。[^fig-ds-quote] [^fig-ds-quote]: figma.com/blog/design-systems-ai-mcp/ この比喩は、MCP サーバーの設計上の前提を明示している。 デザインシステムが整備されていなければ、MCP を介して提供されるコンテキストが不十分になり、エージェントの出力精度は低下する。 Figma Designer Advocate の Ana Boyer はこの構造を「チームのデザインがデザインシステムを活用しているほど、MCP サーバーの効果は高まる」と表現している[^boyer]。 [^boyer]: figma.com/blog/design-systems-ai-mcp/ 2026年6月の Config 2026 では、MCP を基盤とした **Connectors** が発表された[^fig-connectors]。 GitHub、Atlassian、Slack、Notion、Hex、Granola、Dovetail と接続し、デザインエージェントがこれらの外部ツールのコンテキストを参照して制作に反映できる。 書き戻し（外部ツールへの出力）にも対応している。 [^fig-connectors]: figma.com/blog/agent-custom-tools-context-skills/ MCP サーバーが提供する3つの機能を整理すると次のようになる。 1. **コンポーネントコード生成**: デザインコンテキストと既存コードを参照し、フレームワーク整合性を維持したコードを生成する。 2. **デザイントークン自動化**: トークンが未適用の箇所を特定し、適用を提案する。 3. **デザイン-コード整合監査**: レイヤー名やコンポーネント props の不整合を検出する。 ## Claude Design のデザインシステム統合 Claude Design は2026年6月のアップデートで、デザインシステムインポート機能を追加した[^claude-ds]。 GitHub リポジトリ、デザインファイル、直接アップロードからデザインシステムを読み込み、以後のプロジェクトで色、タイポグラフィ、コンポーネントを自動適用する。 複数のデザインシステムを維持でき、Enterprise では管理者が標準デザインシステムの承認と編集ロックを設定できる。 [^claude-ds]: anthropic.com/news/claude-design-anthropic-labs / VentureBeat 報道経由 (2026-06-17) Claude Code との双方向同期により、ターミナルから `/design` コマンドでデザインを作成し、`/design-sync` でデザインシステムを Claude Design へ取り込むループが成立する。 Figma がデザインキャンバスからコードへの方向を主軸にしているのに対し、Claude Design はコードからデザインへの方向も同等に扱う設計になっている。 ## 最少ツール原則 MCP によるツール統合が進む中で、Vercel の実験結果がエージェント設計の原則を示している。 Vercel Office of CTO の Andrew Qu は、データ分析エージェント d0 で15個のツールを bash 単一ツールに削減したところ、成功率が80%から100%に上昇し、速度は3.5倍、トークン消費は37%減少したと報告している[^vercel-tools]。 Qu は「モデルが自力で解ける問題を我々が（ツールの選択肢で）制約していた」と述べ、最良のエージェントは最少ツールで動作するという設計原則を提唱した。 [^vercel-tools]: vercel.com/blog/we-removed-80-percent-of-our-agents-tools (2025-12-22) この知見は MCP の運用にも含意を持つ。 MCP で接続可能なツールが増えるほどエージェントの能力が上がるわけではなく、適切に絞り込まれたコンテキスト（整備されたデザインシステム、明確なコンポーネントマッピング）の方がエージェント出力の品質を高める。 Figma の「Code Connect が整備されていない場合は精度低下」という公式の認定と、Vercel の「ツール削減で成功率向上」は、同じ構造を異なる角度から記述している。 ## デザインシステムの役割の変化 MCP の普及以前、デザインシステムは人間のデザイナーと開発者の間の一貫性を担保する道具だった。 MCP の普及以後、デザインシステムはエージェントに対するコンテキスト層としての役割を追加で担うようになった。 この変化は、デザインシステムへの投資の性格を変える。 従来はチーム内の効率化（同じコンポーネントを再利用する）が主な投資理由だった。 エージェント時代には、デザインシステムの整備がエージェント出力精度の前提条件になるため、「エージェントを使いこなすためのインフラ投資」という意味が加わる。 Figma の Config 2026 で発表された **Skills**（チーム規約をスラッシュコマンド化して共有する仕組み）は、デザインシステムの延長線上にある[^fig-skills]。 エージェントに対して「このチームではこう作る」というルールを明文化し、共有する手段として機能する。 デザインシステムが視覚的な一貫性のルール集であるのに対し、Skills は制作プロセスのルール集にあたる。 [^fig-skills]: figma.com/blog/agent-custom-tools-context-skills/ ## 信頼の分断 Ana Boyer が引用した数値として、「デザイナーと開発者の68%が AI をコード生成に使っている一方、AI 出力を信頼しているのは32%にとどまる」という報告がある[^trust-gap]。 利用率と信頼率の乖離は、MCP とデザインシステムの統合が解こうとしている問題を端的に示している（採用と評価の乖離そのものの分析は [90%採用 × 10%肯定 — AIツール普及と評価乖離のパラドクス](https://jamjet-iqbal.com/notes/adoption-approval-paradox/)）。 デザインシステムという「信頼できるコンテキスト」をエージェントに与えることで、出力の予測可能性を高め、利用と信頼のギャップを縮める。 [^trust-gap]: figma.com/blog/design-systems-ai-mcp/（調査の標本・設問は非開示 [要一次検証]） ## 参照文献 - Figma. "Introducing our Dev Mode MCP server." 2025-06-04. https://www.figma.com/blog/introducing-figma-mcp-server/ - Figma. "Design Systems And AI: Why MCP Servers Are The Unlock." 2025-08. https://www.figma.com/blog/design-systems-ai-mcp/ - Figma. "Figma's Design Agent, Now With Custom Tools and Greater Context." 2026-06. https://www.figma.com/blog/agent-custom-tools-context-skills/ - Anthropic. "Introducing Claude Design by Anthropic Labs." 2026-04-17. https://www.anthropic.com/news/claude-design-anthropic-labs - Andrew Qu (Vercel). "We removed 80% of our agent's tools." 2025-12-22. https://vercel.com/blog/we-removed-80-percent-of-our-agents-tools