UI/UXエンジニア向けMCPサーバー14選

AnthropicのModel Context Protocol（MCP）によってLLMの機能が拡張され続けるなか、UI/UXエンジニアはワークフローを大幅に強化できる、専門ツールのエコシステムを活用できるようになっています。これらのMCPサーバーは、AIアシスタントと、現代のUI/UX業務を支えるデザイン・開発ツールとの間をつなぎます。AnthropicはMCPをネイティブにサポートしており、OpenAIなどの企業によるサポートも近日中に提供される予定です。LangChainのような人気フレームワークも、開発者向けにこのプロトコルをサポートしています。 

UI/UXの専門家向けに、オープンソースのMCPサーバーを14種類紹介します。開発の進捗には差がありますが、すべてオープンソースなので、誰でもプルリクエストを作成して機能を拡張できます。Figmaとのシームレスな連携から、Adobe Illustratorのスクリプトによるベクターグラフィックの自動化、ブラウザーの自動操作まで、これらのツールはAIを活用したデザインと開発の新たな進化を示しています。

UI/UXの分野では、AIを中心に据えた新しいワークフローが見え始めています。

画像の説明を表示する

デザインツールとの連携

1. Sonny LazuardiによるCursor Talk to Figma MCP（GitHubで2.4k ⭐）

この強力な連携機能は、Cursor AIとFigmaの間でModel Context Protocolを実装し、自然言語コマンドを使ってFigmaのデザインを読み取ったり変更したりできるようにします。（Cursor以外のMCPクライアントでも動作する可能性は高いものの、Cursor向けに設計されています。）

利用可能なツール：

外部API： Figma Plugin API、WebSocket、Bun、TypeScript、Zod

設定要件：明示的なAPIキーは不要ですが、FigmaプラグインとCursorのインストールが必要です（他のMCPクライアントで動作させるには、多少の調整が必要になる場合があります）。

このMCPサーバーは、Figmaを操作するための幅広いツールを備えており、基本要素の作成から複雑なコンポーネントシステムの管理まで対応します。Cursor AIとFigmaプラグインをWebSocket接続でつなぐことで、AIを活用したデザイン編集をシームレスに実現します。

2. GLipsによるFramelink Figma MCP Server（GitHubで4.4k ⭐）

FigmaのデザインファイルとAIを活用したコーディングツールをつなぐために設計されたこのサーバーを使うと、Cursor、Windsurf、ClineなどのアシスタントがFigmaのデザインデータにアクセスし、その内容を理解できます。

利用可能なツール：

外部API： Figma REST API、MCP SDK、Express.js、Zod、Remeda

設定要件：Figma APIアクセストークンが必要です。コマンドライン引数または環境変数で指定します。

この実装の特長は、複雑なFigma APIレスポンスをAIに適した形式に簡素化する点です。重要なレイアウト情報を抽出し、スタイルデータを簡素化して画像参照を処理するとともに、ノード階層をLLMが解析しやすい、整理された構造にまとめます。

Play Video: Creating a UI with Figma to Cursor MCP Server

3. archimedescryptoによるFigma MCP Server with Chunking（GitHubで1 ⭐）

このMCPサーバーは、チャンク分割やページネーションなどの高度なメモリ管理機能を活用して、大規模なFigmaファイルを効率よく処理することに特化しています。

利用可能なツール：

外部API： Figma API、MCP、Node.js、TypeScript、Axios、Docker

設定要件：Figma APIアクセストークン（FIGMA_ACCESS_TOKEN）が必要です。

この実装は、大規模なデザインシステム、数千のベクターノードを含む複雑なイラスト、メモリやLLMのコンテキスト制限があるチーム全体のデザインリポジトリを扱うエンタープライズユーザーに特に役立ちます。ただし、Geminiが数百万トークンのコンテキストサイズに対応したことで、こうした問題は今後ますます小さくなるかもしれません。 

4. studentofjsによるMCP Figma to React Converter（GitHubで4 ⭐）

この特化型MCPサーバーは、FigmaのデザインをReactコンポーネントに直接変換して、デザインと開発をつなぎ、UI/UX開発のワークフローを効率化します。

利用可能なツール：

外部API： Figma API、React、Tailwind CSS、TypeScript、Express.js、Zod、Axios、Prettier

設定要件：Figmaアカウントの設定ページで取得できるFigma APIトークンが必要です。

デザインをコードに変換したい、コンポーネントライブラリを管理したい、プロトタイピングを加速したいUI/UXエンジニアに特に役立つツールです。アクセシビリティ属性を自動的に追加し、FigmaのスタイルをTailwind CSSクラスに変換します。

5. SheshiyerによるFramer Plugin MCP（GitHubで7 ⭐）

この特化型MCPサーバーは、web3機能を組み込んだFramerプラグインの作成と管理を支援し、Framerのデザインエコシステムと暗号資産ウォレットやスマートコントラクトなどのweb3コンポーネントをつなぎます。

利用可能なツール：

外部API： MCP SDK、Framer SDK、Web3技術、Node.jsエコシステム（fs-extra）、TypeScript

設定要件：基本的な操作に外部APIキーは必要ありません。

このサーバーを使うと、Wallet Connectとの連携、スマートコントラクトの操作、NFT表示コンポーネントなど、ブロックチェーン機能を組み込んだFramerプラグインを開発できます。

6. Spencer HubertによるIllustrator MCP Server（GitHubで14 ⭐）

この革新的なブリッジを使うと、AIアシスタントがJavaScriptの実行と視覚的なフィードバックを通じてAdobe Illustratorを操作できます。

利用可能なツール：

外部API： Python、MCP、AppleScript、Adobe Illustrator JavaScript API、httpx、Pillow

設定要件：macOS（AppleScriptへの依存のため）とAdobe Illustratorが必要です。

このサーバーは、ベクター作成の自動化、デザインのプロトタイピング、グラフィック要素の生成など、AI主導のデザインに大きな可能性をもたらします。双方向通信によって、デザインの概念を理解し、ベクターグラフィックに直接反映できるアシスタントとの、強力なデザインフィードバックループを実現できる可能性があります。 

7. evalstateによるMCP-Miro（GitHubで33 ⭐）

この包括的なMCPサーバーは、Claude Desktop（および他のクライアント）をMiroのホワイトボード共同作業プラットフォームに接続し、AIアシスタントがMiroボードを操作してビジュアルコンテンツを作成できるようにします。

利用可能なツール：

外部API： Miro REST API、Node.js、TypeScript、MCP

設定要件：Miro OAuthトークンが必要です（環境変数またはコマンドライン引数で指定）。

このサーバーを使えば、ビジュアルブレインストーミング、図の作成、情報の整理、ボードの分析など、強力なワークフローを実現できます。作者によると、特に「付箋の写真を撮って、Claudeに同等のMIROボードを作成するよう頼む」といった使い方が便利です。

8. loonghaoによるPhotoshop Python API MCP Server（GitHubで11 ⭐）

このMCPサーバーは、PythonアプリケーションとAdobe Photoshopをつなぎ、プログラムから操作してタスクを自動化したり、Photoshopをワークフローに組み込んだりできます。

外部API： Python、Poetry（依存関係管理）、Nox（テスト・ビルド）、pytest、GitHub Actions

設定要件：基本的な設定に特定のAPIキーは必要ありません。

このリポジトリはまだ開発の初期段階のようですが、Photoshopの操作を自動化されたワークフローやデザインシステム、カスタムツールに組み込みたいUI/UXエンジニアにとって、重要な出発点となるでしょう。今すぐインストールするのはおすすめしませんが、オープンソースコミュニティの貢献によって機能が充実すれば、大きな可能性を秘めています。そのため、今回リストに加えました。必要なのは、掘り下げてPhotoshop APIに取り組む時間だけです。

画像の説明を表示する

ブラウザーとテストの連携

9. MicrosoftによるPlaywright MCP（GitHubで7k ⭐）

Playwrightブラウザー自動化フレームワークを拡張し、AIエージェントが構造化された信頼性の高い方法でWebブラウザーを操作できるようにします。これはMicrosoftの公式実装ですが、PlaywrightをベースにMCPを利用する多数の非公式実装もあります。 

利用可能なツール（スナップショットモード）：

利用可能なツール（ビジョンモード）：

外部API： Playwright、MCP、Node.js、Zod、TypeScript

設定要件：APIキーは不要ですが、ブラウザーやモードに関する各種設定が可能です。

Webテストの自動化、データ抽出、フォームの自動入力、UI/UXリサーチに取り組むUI/UXエンジニアに特に役立ちます。アクセシビリティを重視した設計と決定論的な操作により、アクセシブルなデザインのテストに最適です。ビジョンモードは、マルチモーダルなフィードバックループへの興味深い転換も示しています。 

10. Angie JonesによるMCP Selenium Server（GitHubで78 ⭐）

このMCP実装は、広く利用されているSelenium WebDriverフレームワークを使ったブラウザー自動化を可能にし、AIアシスタントとブラウザー自動化をつなぎます。

利用可能なツール：

外部API： Selenium WebDriver、MCP SDK、Node.js、Chrome/Firefoxブラウザー

設定要件：APIキーは不要ですが、ブラウザーの選択と設定が必要です。

このサーバーは、UIテストの自動化、ワークフローの自動化、クロスブラウザ互換性テスト、アクセシビリティテストに役立ちます。広く採用されているSelenium WebDriverフレームワークを通じて、ブラウザ自動化の強固な基盤を提供します。

11. Vibe-Eyes monteslu作（GitHubで22 ⭐）

この革新的なMCPサーバーは、ブラウザベースのゲームやアプリケーションを使ったバイブコーディング中に、LLMの「目」として機能し、AIアシスタントに視覚的なコンテキストを提供するという課題を解決します。とてもクリエイティブだと思ったので、このリストに加えました。

利用可能なツール：

外部API： @neplex/vectorizer、Socket.IO、Express、SVGO、MCP SDK、Zod

設定要件：特定のAPIキーは不要ですが、サーバーとクライアントの設定を変更できます。

Vibe-Eyesはクライアント・サーバーアーキテクチャを採用しています。ブラウザクライアントがキャンバスのコンテンツとデバッグ情報を取得してNode.jsサーバーに送信し、サーバーが画像をベクター化してMCP経由でLLMから利用できるようにします。これにより、ブラウザ上のゲームやインタラクティブなアプリケーションのデバッグに特に役立つ、視覚的なフィードバックループを実現します。

フレームワークと開発ツール

12. Storybook MCP Server dannyhw作（GitHubで4 ⭐）

このMCPサーバーは、LLMと人気のUIコンポーネント開発フレームワークStorybookをつなぎ、AIアシスタントがコンポーネント情報にアクセスできるようにします。Storybook自体もオープンソースで、無料で利用できます。

利用可能なツール：

外部API： MCP SDK、Storybook、Bun、TypeScript、Zod

設定要件：基本機能の利用にAPIキーは不要です。

現在は初期開発段階ですが、このサーバーはAI支援によるUI開発、コンポーネントの検索、ドキュメント作成支援、自動テストの提案に大きな可能性を示しています。

13. MCP Server Flutter Anton Malofeev作（GitHubで18 ⭐）

このMCPサーバーはFlutterアプリケーションとの連携に特化しており、AI言語モデルとFlutterアプリ開発をつなぎます。

利用可能なツール：

外部API： MCP SDK、Flutter、TypeScript、Node.js、Zod

設定要件：Flutterリポジトリへの有効なパスが必要です。

このサーバーは、Flutter開発ワークフローの自動化、AI支援によるアプリ開発、FlutterアプリケーションへのAI機能の統合に便利です。ツールは1つだけですが、実行できるコマンドは多数あり、create、pub、run、screenshotなどがあります。

14. MCP-Toolbox AI-ZeroLab作（GitHubで9 ⭐）

この包括的なツール集は、MCPを通じてLLMの機能を拡張し、UI/UXエンジニアが外部サービスやAPIを利用するための幅広い機能を提供します。

利用可能なツール：

外部API： Figma API、OpenAIのWhisper、Tavily API、DuckDuckGo Search API、Flux API、XiaoyuZhouFM API、FastEmbed、NumPy、httpx、Pydantic

設定要件：機能に応じて各種APIキーが必要です：FIGMA_API_KEY、TAVILY_API_KEY、DUCKDUCKGO_API_KEY、BFL_API_KEY。

この包括的なツールキットは、Figmaとの連携から画像生成、ファイル操作、高度な検索まで、UI/UXエンジニアにさまざまな機能を提供します。あらゆるUI/UXワークフローに柔軟に取り入れられます（「toolbox」という名前も納得です）。

比較分析

主な焦点、テクノロジー、ユースケース

ツールの機能とMCPエコシステムとの連携

これらのMCPサーバーを組み合わせて使う

UI/UXエンジニアにとって、MCPサーバーの真価はAIエージェントのワークフローに組み合わせて活用することで発揮されます。これらのツールの連携方法を示す、（完全に仮定の）シナリオをいくつか紹介します。

シナリオ1：フルスタックのデザインから実装までのパイプライン

1. まずCursor Talk to Figmaを使って、デザインの構造を把握し、理解します。デザインの作成を支援してもらうこともできます。

2. Figma to React Converterを使って、デザインからコンポーネントコードを生成します。

3. Playwright MCPまたはMCP Seleniumでコンポーネントをテストします。

4. Storybook MCPでコンポーネントのドキュメントを作成します。

5. MCP-Miroでステークホルダー向けのビジュアル資料を作成します。

このワークフローを使えば、各段階でAIの支援を受けながら、デザインの引き継ぎから実装までのプロセスを大幅に効率化できます。

シナリオ2：クロスプラットフォームのデザインシステム

1. Figma MCP with Chunkingを使って、大規模なFigmaファイルからデザインシステムのコンポーネントを抽出します。

2. Figma to React ConverterでWebコンポーネントを生成します。

3. MCP Server Flutterでモバイル向けの実装を作成します（React Converterを使わず、WebでもFlutterアプリを使う方法も考えられます）。

4. Playwright MCPでブラウザ間のテストを行います。

5. MCP-ToolboxのMarkdown変換ツールで、すべてをドキュメント化します。

この方法なら、AIの支援で生産性を高めながら、プラットフォーム間の一貫性も保てます。

シナリオ3：高度なビジュアルアセットの作成

1. MCP-Toolboxの画像生成機能で初期案を作成します。

2. Illustrator MCPでベクターグラフィックを仕上げます。

3. （開発が完了すれば）Photoshop Python APIで写真にエフェクトを適用します。

4. Framer Plugin MCPを使ってプロトタイプに組み込みます。

5. テスト中にVibe-Eyesで視覚的なフィードバックを得ます。

このワークフローにより、複数のクリエイティブツールを使ってビジュアルアセットをシームレスに作成し、仕上げられます。

UI/UXエンジニアリングにMCPサーバーを活用する理由

UI/UXワークフローにMCPサーバーを取り入れると、次のような大きなメリットがあります。

1. デザインと開発をつなぐ：従来、デザインとコードの間にあった摩擦をなくし、クリエイティブな工程から技術的な工程へスムーズに移行できます。

2. 反復作業を自動化する：デザイン・開発ツールをプログラムから操作できるため、MCPサーバーがデザインからコードへの変換やクロスブラウザテストなど、手間のかかる手作業を減らします。

3. コラボレーションを強化する：デザイナー、開発者、AIアシスタントが共通の言葉で連携できるようになり、コミュニケーションと相互理解が深まります。

4. アクセシビリティを向上させる：Playwright MCPなど、多くのサーバーにはアクセシビリティのサポートが組み込まれているため、誰もが使いやすいアプリケーションを標準で構築できます。アクセシビリティをデバッグの最適なループに組み込めば、実装の質も高まります。

5. ワークフローを加速する：UI/UXエンジニアが日常的に使うツールにAIアシスタントが直接アクセスできるため、MCPサーバーによって開発期間を短縮できる可能性があります。

UI/UXエンジニアリングの新しいワークフロー

この記事で紹介した14のMCPサーバーは、UI/UXエンジニアがAIアシスタントと連携して働く方法を大きく進化させます。Figma、Illustrator、ブラウザ、開発フレームワークなどのツールにClaudeやほかのLLMが直接アクセスできるようにすることで、AIは受け身のアドバイザーから、デザインや開発プロセスに積極的に参加する存在へと変わります。

MCPエコシステムの拡大に伴い、さらに深いインテグレーションと高度なワークフローが実現すると期待されます。今これらのツールを取り入れるUI/UXエンジニアは、次世代のAI支援型デザイン・開発の実践をリードする立場に立てるでしょう。インテグレーションの設定に取り組む価値は大きく、ワークフローの高速化、技術的負債の削減、コラボレーションの強化、そして人間が得意とする創造的な問題解決により多くの時間を割けるようになります。

デザイン、開発、テスト、あるいは製品ライフサイクル全体のどの段階に取り組んでいる場合でも、ワークフローを強化し、新たな創造の可能性を広げるMCPサーバー（またはサーバーの組み合わせ）が見つかります。UI/UXエンジニアリングの未来は、協働と自動化、そしてAIによって支えられます。MCPサーバーは、その未来への架け橋です。

SnykでAI生成アプリを安全に

Flutter、React、React NativeのMCPサーバーを使ってデザインを実用的なコードに変換する場合は、利用できる最適なツールでコードのセキュリティを確認しましょう。IDEから直接Snykでコードをスキャンできます。

無料プランのような利用制限なしで、Snykの最先端ツールをエンタープライズ向けに利用したい場合は、オープンソースプロジェクト向けの無料エンタープライズアクセスにお申し込みいただけます。このプログラムはSecure Developerプロジェクトを通じて提供されています。