Builder MCPでデザインシステムのコード生成を自動化する

FigmaのデザインをAIに渡してコードにしたい。ただ、AIは自社のデザインシステムを知らないため、生成されたコードは社内コンポーネントとまったく噛み合わない——そんな場面はフロントエンド開発でよく起きる。

Builder.ioは2026年5月7日、この問題に直接対処するMCPサーバー「Builder MCP」のリリースを発表した。AIコーディングアシスタントがデザインシステムのドキュメントやFigmaエクスポートを直接参照しながらコードを生成できる仕組みだ。

この記事でわかること：

Builder MCPが解決するデザインシステムとAIの断絶
Claude Code・Cursor・VS Codeへの設定手順
FigmaデザインをBuilder MCPでコードに変換する流れ
Figma MCPとの違いと使い分け

Builder | Builder MCP

Connect your AI coding assistant to Builder's Design System Intelligence for component documentation, design tokens…

Builder.io

デザインシステムとAIの断絶という問題

AIコーディングアシスタントは汎用的な知識を持つが、社内固有のデザインシステムは知らない。「Buttonコンポーネントを使って」と指示しても、AIが参照するのは一般的なHTMLやCSSであり、社内Storybook上のButtonコンポーネントのAPIとは別物のコードが出てくる。

Figmaのデザインを渡しても同じだ。AIはスクリーンショットを「見る」ことはできても、自社のCardコンポーネントのprops定義や、デザイントークンの命名規則は持っていない。

Builder MCPはこの問題を、MCPサーバー経由でデザインシステムドキュメントをAIに渡すことで解消する。Builder上に蓄積したコンポーネントの使い方、デザイントークン、UIパターンをAIが参照し、社内標準に沿ったコードを生成する。現時点でEnterprise向け機能として提供されている。

Builder MCPでできること

Builder MCPが提供するのは主に5つの機能だ。

デザインシステムドキュメントへのアクセス　Builder上に登録したコンポーネントの使い方や、デザイントークンの一覧をAIが参照できる。「どのButtonバリアントが使えるか？」「Cardコンポーネントに画像を入れるには？」といった問いに、自社仕様に沿った答えが返ってくる。

FigmaデザインのIDE実装　Builder FigmaプラグインでエクスポートしたデザインのQuick Copy ID（vcp-abc123形式）をAIに渡すと、デザインシステムのコンポーネントを使って実装コードを生成する。スクリーンショットを添付する手間なく、Figmaのレイヤー構造をAIに伝えられる。

Builderプロトタイプのローカル展開　Builder上で作成したプロトタイプをローカルリポジトリに展開できる。プロトタイプURLをAIに渡しながら、既存の認証コンポーネントへの適合を指示することも可能だ。

ブランチ同期　ローカルブランチをBuilderにプッシュ、またはBuilderから引き込める。AIとのビジュアル共同編集の結果をコードに反映しやすい。

実装計画の作成　プロンプトと対象デザインを渡すと、デザインシステムに基づいた実装計画を生成し、実際にコードファイルを書き込んだうえで変更ファイルの一覧と行数を返す。5分のタイムアウト制限が設けられており、意図しない処理の継続を防ぐ設計になっている。

セットアップ方法

セットアップはNode.js v20以上の環境で2ステップで完了する。

まず次のコマンドで認証する。

npx @builder.io/dev-tools@latest auth

次に、使用するIDEにMCPサーバーの設定を追加する。

Claude Codeの場合（~/.claude/settings.local.jsonまたは.mcp.jsonに記述）:

{
  mcpServers: {
    builder-mcp: {
      command: npx,
      args: [@builder.io/dev-tools@latest, mcp]
    }
  }
}

コマンドラインで設定する場合は以下を実行する。

claude mcp add builder-mcp -- npx @builder.io/dev-tools@latest mcp

Cursorの場合（~/.cursor/mcp.jsonまたは.cursor/mcp.jsonに記述）:

{
  mcpServers: {
    builder-mcp: {
      command: npx,
      args: [@builder.io/dev-tools@latest, mcp]
    }
  }
}

設定後はCursorを再起動するか、コマンドパレットでMCP: Restart Serversを実行する。

VS Code + GitHub Copilotの場合（.vscode/mcp.jsonに記述）:

{
  servers: {
    builder-mcp: {
      type: stdio,
      command: npx,
      args: [@builder.io/dev-tools@latest, mcp]
    }
  }
}

設定後はコマンドパレットでMCP: List Serversを開き、Startをクリックして起動する。

FigmaデザインをIDEで実装する流れ

Builder MCPを使ったFigmaデザインの実装は次の手順で進む。

FigmaでBuilder Figmaプラグインを開く
実装したいフレームまたはコンポーネントを選択する
「Smart Export」または「Export to Code」を実行する
表示されたQuick Copy ID（vcp-abc123def456のような文字列）をコピーする
AIアシスタントに次のようなプロンプトを入力する

このFigmaデザインを自社のデザインシステムで実装してください: vcp-abc123def456

AIはFigmaのデザインデータを読み込み、Builderのデザインシステム上のコンポーネントとトークンでマッチングを行い、実装計画の作成からコード生成まで一貫して処理する。

Figma MCPとの違い

Figmaも公式のDev Mode MCPサーバーを提供している。Figma MCPはFigmaファイル上で選択中のレイヤー構造、オートレイアウト、バリアント、テキストスタイルをリアルタイムでAIに渡す。デザインの構造を忠実に再現したいときに力を発揮する。

Builder MCPの特徴は「自社のデザインシステムを理解した上でコードを生成する」点にある。汎用コードではなく、社内コンポーネントライブラリのAPI・命名規則・パターンに沿った実装を得られる。

両者を組み合わせることも可能だ。Figma MCPでレイヤー情報をAIに渡しながら、Builder MCPで自社仕様のコンポーネントを適用する構成を取れば、設計の忠実度と実装の一貫性を同時に確保できる。

まとめ

Builder MCPは、AIとデザインシステムの断絶を埋めることを目的としたMCPサーバーだ。セットアップはClaude Code・Cursor・VS Codeのいずれでも数分で完了し、FigmaのQuick Copy IDを渡すだけでデザインシステムに準拠したコードを得られる。

デザインと実装の乖離をAIレイヤーで解消しようとしているプロジェクトに、選択肢として加えられる。