Shuichiro Ogawa

Notes ・ updated 2026-06-27

MCP とデザインシステム：エージェント統合の基盤層

MCP（Model Context Protocol） は Anthropic が公開したプロトコルで、AI エージェントが外部ツールのコンテキストを取得・操作するための標準的な接続方式を定義する。 2025年後半からデザインツール領域での採用が加速し、2026年6月時点で Figma、Anthropic（Claude Design/Claude Code）、Vercel が MCP を介したデザイン-コード統合を実装している。

関連: design-agent-tools-landscape-2026（各ツールのエージェント機能）／vibe-coding-design-production（UI 生成エージェント）／ai-in-design-industry（産業調査）。

Figma の MCP 統合

Figma は2025年6月に Dev Mode MCP サーバー をベータ公開した1。 このサーバーは、Figma のコンポーネント、変数、スタイルの構造化メタデータ、スクリーンショット、コード例を外部の LLM へ提供する。 Dev または Full seat が必要で、アウトプットの精度は Code Connect（デザインコンポーネントと実装コードのマッピング定義）の整備状況に依存する。

Figma は MCP サーバーとデザインシステムの関係について、公式ブログで次のように述べている。

デザインコンテキストなしで AI エージェントにコード生成を依頼することは、オンボーディング前に新人エンジニアに本番コードを書かせるようなものだ。2

この比喩は、MCP サーバーの設計上の前提を明示している。 デザインシステムが整備されていなければ、MCP を介して提供されるコンテキストが不十分になり、エージェントの出力精度は低下する。 Figma Designer Advocate の Ana Boyer はこの構造を「チームのデザインがデザインシステムを活用しているほど、MCP サーバーの効果は高まる」と表現している3。

2026年6月の Config 2026 では、MCP を基盤とした Connectors が発表された4。 GitHub、Atlassian、Slack、Notion、Hex、Granola、Dovetail と接続し、デザインエージェントがこれらの外部ツールのコンテキストを参照して制作に反映できる。 書き戻し（外部ツールへの出力）にも対応している。

MCP サーバーが提供する3つの機能を整理すると次のようになる。

  1. コンポーネントコード生成: デザインコンテキストと既存コードを参照し、フレームワーク整合性を維持したコードを生成する。
  2. デザイントークン自動化: トークンが未適用の箇所を特定し、適用を提案する。
  3. デザイン-コード整合監査: レイヤー名やコンポーネント props の不整合を検出する。

Claude Design のデザインシステム統合

Claude Design は2026年6月のアップデートで、デザインシステムインポート機能を追加した5。 GitHub リポジトリ、デザインファイル、直接アップロードからデザインシステムを読み込み、以後のプロジェクトで色、タイポグラフィ、コンポーネントを自動適用する。 複数のデザインシステムを維持でき、Enterprise では管理者が標準デザインシステムの承認と編集ロックを設定できる。

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%減少したと報告している6。 Qu は「モデルが自力で解ける問題を我々が（ツールの選択肢で）制約していた」と述べ、最良のエージェントは最少ツールで動作するという設計原則を提唱した。

この知見は MCP の運用にも含意を持つ。 MCP で接続可能なツールが増えるほどエージェントの能力が上がるわけではなく、適切に絞り込まれたコンテキスト（整備されたデザインシステム、明確なコンポーネントマッピング）の方がエージェント出力の品質を高める。 Figma の「Code Connect が整備されていない場合は精度低下」という公式の認定と、Vercel の「ツール削減で成功率向上」は、同じ構造を異なる角度から記述している。

デザインシステムの役割の変化

MCP の普及以前、デザインシステムは人間のデザイナーと開発者の間の一貫性を担保する道具だった。 MCP の普及以後、デザインシステムはエージェントに対するコンテキスト層としての役割を追加で担うようになった。

この変化は、デザインシステムへの投資の性格を変える。 従来はチーム内の効率化（同じコンポーネントを再利用する）が主な投資理由だった。 エージェント時代には、デザインシステムの整備がエージェント出力精度の前提条件になるため、「エージェントを使いこなすためのインフラ投資」という意味が加わる。

Figma の Config 2026 で発表された Skills（チーム規約をスラッシュコマンド化して共有する仕組み）は、デザインシステムの延長線上にある7。 エージェントに対して「このチームではこう作る」というルールを明文化し、共有する手段として機能する。 デザインシステムが視覚的な一貫性のルール集であるのに対し、Skills は制作プロセスのルール集にあたる。

信頼の分断

Ana Boyer が引用した数値として、「デザイナーと開発者の68%が AI をコード生成に使っている一方、AI 出力を信頼しているのは32%にとどまる」という報告がある8。 利用率と信頼率の乖離は、MCP とデザインシステムの統合が解こうとしている問題を端的に示している。 デザインシステムという「信頼できるコンテキスト」をエージェントに与えることで、出力の予測可能性を高め、利用と信頼のギャップを縮める。

ただし、これは multi-agent-end-user-value で指摘した「代理実行の精度向上＝探索の終局化の精緻化」と表裏の関係にある。 エージェントの出力を信頼できるようにすることは、ユーザーの判断介入を減らす方向に作用しうる。 デザインシステムをエージェントのコンテキストにすることが、出力の一貫性を高める（制作効率の向上）と同時に、出力の多様性を制限する（探索の縮小）可能性は、今後の運用で検証が必要な論点である。

参照文献

Footnotes

  1. figma.com/blog/introducing-figma-mcp-server/ (2025-06-04) ↩

  2. figma.com/blog/design-systems-ai-mcp/ ↩

  3. figma.com/blog/design-systems-ai-mcp/ ↩

  4. figma.com/blog/agent-custom-tools-context-skills/ ↩

  5. anthropic.com/news/claude-design-anthropic-labs / VentureBeat 報道経由 (2026-06-17) ↩

  6. vercel.com/blog/we-removed-80-percent-of-our-agents-tools (2025-12-22) ↩

  7. figma.com/blog/agent-custom-tools-context-skills/ ↩

  8. figma.com/blog/design-systems-ai-mcp/（調査の標本・設問は非開示 [要一次検証]） ↩

← Notes 一覧 ・ ホーム