コンテンツへスキップ

Claude CodeとCursor向けの最適なデザインMCPサーバー

ScreensDesignやAIDesignerを含む8つのデザイン向けMCPベンダーを、ワークフロー、アクセス要件、Claude CodeおよびCursor向けのセットアップ方法で比較します。

Stefano
Stefano

デザインMCPサーバーを使用すると、コーディングエージェントはModel Context Protocol経由でデザインの読み取り、UIリファレンスの検索、画面の生成を行えるようになります。既存のFigmaデザインがある場合は、まずFigmaから始めましょう。リファレンスを検索したい場合はMobbinを活用できます。編集可能なプロジェクトで新しいモバイルアプリ画面を作成したい場合は、その用途に特化したSleekが選択肢となります。

本記事では、8社の公式ドキュメントをもとに、機能とClaude Code・Cursor向けの設定手順を比較します。情報は2026年9月28日に確認しました。私たちはSleekを開発・提供しています。以下の推奨は各連携で何ができるかに基づくもので、実際に出力品質を比較して順位を付けたものではありません。

重要ポイント
  • 目的に応じて選択：デザインの読み取り、リファレンスの検索、画面生成にはそれぞれ異なるツールが必要です。
  • FigmaのリモートMCPはデザインの読み取りとキャンバスへの書き込みが可能です。デスクトップサーバーの機能セットはより限定的です。
  • Mobbinは実際のプロダクトリファレンスを提供します。StitchとSleekはホスト型サービス経由で新しい画面を生成できます。
  • PencilとPaperを使用すると、エージェントがローカルのデザインキャンバス上で作業できます。このワークフローでは該当するドキュメントを開いたままにしてください。
  • Sleekには一度限り付与されるクレジットを使った無料のAPIトライアルがあります。継続的な利用にはProまたはTeamプランが必要で、Starterプランは対象外です。

デザインMCPサーバーとは？

デザインMCPサーバーは、デザインプロダクトのツールをAIクライアントに開放するものです。エージェントがツールを呼び出してデータや画像を受け取るため、ユーザーが細部をすべてチャットにコピーする必要はありません。プロトコル（MCP）は接続を提供し、サーバー側がエージェントによるファイルの読み取り、カタログの検索、あるいはデザインの変更が可能かどうかを決定します。

ホスト型サーバーはURL経由で接続します。ローカル連携はPC上のソフトウェアに接続します。ただし、どちらの形態であるかによって画面生成が可能かどうかが決まるわけではありません。サーバーを選択する前に、利用可能な操作を確認してください。

デザインMCPサーバーの比較

デザインをFigma内で管理したい場合はFigmaが適しています。Mobbinは既存のプロダクトからリファレンスを提供します。StitchとSleekはホスト型の画面生成ワークフローを提供し、PencilとPaperはエージェントをローカルキャンバスに接続します。一部の機能は重複しているため、単にツールの数の多さで選ぶのではなく、必要な成果物とワークフローに合わせて選択してください。

以下のアクセス詳細はすべて2026年9月時点のものです。各ベンダーの情報源とクライアント設定手順は表の後に記載しています。

サーバーデザインの読み取り画面の作成・編集リファレンス検索認証方式利用権限・プラン制限Claude Code / Cursor
Figmaリモートフレーム、変数、コンポーネント可能（キャンバスへの書き込みはベータ版）リファレンスカタログなしOAuthすべてのプランとシート（レート制限あり）プラグインまたはHTTP / プラグイン
Figmaデスクトップ選択したデザインのコンテキストリモート版のみ書き込み対応リファレンスカタログなしデスクトップセッションDevまたはFullシートを持つ有料プランローカルHTTP / ローカルHTTP
Google Stitchプロジェクトおよび画面データ可能（生成画面）主な目的ではないAPIキーまたはOAuth現在のアカウント制限を確認リモートHTTP / リモートHTTP
Mobbinリファレンス画像生成ツールに関する記載なし画面、フロー、ウェブサイトセクションOAuthPro、Team、EnterpriseコネクターまたはHTTP / プラグイン
Sleek画面のHTMLおよび画像可能（モバイルアプリ画面）厳選されたSleekリファレンスOAuth（APIキーによるフォールバックあり）無料トライアル、継続利用はProまたはTeamリモートHTTP / リモートHTTP
ScreensDesignアプリ画面とUXフローあり（ライブラリに基づく生成）iOSアプリライブラリと収益シグナルOAuthまたはスコープ付きAPIキーProリモートHTTP / リモートHTTP
AIDesigner生成デザインとキャンバスコンテキストあり（TailwindによるHTML/CSS）リファレンスカタログなし。ウェブサイトのURLを指定可能OAuthアカウントと生成クレジットCLIまたはHTTP / CLIまたはHTTP
Pencil（現 pen.dev）開いている.penドキュメント可能（キャンバス上）リファレンスカタログなしローカルアプリ接続現在は無料（コーディングエージェント費用は別）アプリ連携 / IDE拡張機能
Paper開いているドキュメント可能（HTML/CSSキャンバス）リファレンスカタログなしローカルアプリ接続MCP呼び出し：Freeは週100回、Proは週100万回プラグイン / プラグイン

この表では、生成機能とリファレンス取得機能を区別しています。検索結果はエージェントがチェックアウトパターンを理解するのに役立ちますが、それ自体がアプリ用の新しいチェックアウト画面になるわけではありません。

Figma MCPサーバーでできること

Figma MCPは、レイアウト、変数、コンポーネントなど、実装に必要なデザインコンテキストを提供します。リモートサーバーを使用すると、対応するクライアントからFigmaのネイティブコンテンツを作成・編集することも可能です。Figmaをベースにして作業を行いたい場合や、Figma内に書き込みを行いたい場合に活用してください。ローカルのデザインコンテキストを読み取るためのデスクトップサーバーも引き続き利用できます。

Figmaのヘルプセンターによると、リモートアクセスはすべてのプランとシートで利用可能で、デスクトップアクセスは有料のDevまたはFullシートが対象、キャンバスへの書き込みはベータ期間中無料で利用できます。アクセスは無制限ではなく、Figmaのレート制限ページでは、Starterプランの読み取りツールの呼び出しは月20回までとなっており、有料のDevやFullシートでは上限が緩和されています。

コマンドは2026-09-28に確認しました。

リモートインストールガイドでは、以下のClaude Codeプラグインの使用を推奨しています：

claude plugin install figma@claude-plugins-official

あるいは、サーバーのみを追加することもできます：

claude mcp add --transport http figma https://mcp.figma.com/mcp

Claude Codeで /mcp を開き、認証を行います。Cursorの場合、同ガイドではエージェントチャットで以下のコマンドを入力するよう記載されています：

/add-plugin figma

デスクトップ接続を行う場合は、FigmaのDev ModeインスペクトパネルでMCPサーバーを有効化します。デスクトップガイドには、以下のClaude Codeコマンドが記載されています：

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Cursorのデスクトップ設定は以下の通りです：

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

フレームのリンクを貼り付けて、エージェントに実装を指示します。レイアウトがすでに決まっている場合、これが最も分かりやすい開始手順となります。また、Figma内で直接コンテンツを作成したい場合も、リモートサーバーの書き込みツールが有効な選択肢となります。

Google Stitch MCPサーバーでできること

Google Stitchは、Stitchプロジェクトの操作やテキストからの画面生成を行えるホスト型MCP接続を提供します。生成されたデザインはStitchプロジェクト内に保存されます。コーディングエージェントからGoogleのデザインジェネレーターを利用し、同じワークフロー内で画面データを取得したい開発者に適しています。

Stitch MCPセットアップガイドには、APIキーおよびOAuthによる認証方法が記載されています。APIキーを使用する場合は、Stitchの設定画面からキーを取得します。公式Stitch SDKにも、リモートエンドポイント、画面生成、ならびに画面のHTMLおよび画像の取得方法が記載されています。

セットアップガイドのAPIキー設定を使用したClaude Codeでの記述例：

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursorの場合（.cursor/mcp.jsonに記述）：

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

プレースホルダーをご自身のキーに置き換え、このファイルをバージョン管理の対象外にしてください。一括処理を計画する前に、Stitchアカウントの制限を確認してください。セットアップページは接続ガイドです。

アイデアをアプリデザインに

Mobbin MCPサーバーでできること

Mobbin MCPを使用すると、エージェントは実際のプロダクトのインターフェースを検索し、画面画像を受け取ることができます。フローのデザインや未決定のパターンの実装を始める前に役立ちます。公式ドキュメントに記載されているツールは既存の素材を検索するものであり、新しいアプリデザインを生成するわけではありません。出力結果は、次の意思決定のためのリファレンス資料となります。

Mobbinの概要ドキュメントでは、OAuth認証とPro、Team、Enterpriseプランでのアクセスが確認されています。機能（ツール一覧）には、画面、フロー、ウェブサイトセクションの検索が含まれます。高解像度画像のURLは30日後に期限切れになります。

MobbinのClaude Codeガイドでは、まずClaude Desktopまたはウェブ上で検証済みコネクターを設定することが推奨されています。また、CLIのみの代替手段として以下が記載されています：

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

その後、/mcp を開き、Mobbinを選択して認証を行います。

Cursorの場合、ベンダーのセットアップ手順ではJSONスニペットではなくMarketplaceプラグインを使用します：

  1. Cursor MarketplaceでMobbinプラグインを開き、「Add to Cursor」を選択します。
  2. 「Add Plugin」を選択します。
  3. Cursorで「Customize」→「Installed」→「Mobbin」を開きます。
  4. 「Authenticate」を選択してサインインします。

銀行アプリのオンボーディング画面など、具体的なリファレンスを要求してください。ジェネレーターやコーディングエージェントに独自のフローの実装を依頼する前に、役に立つパターンを選択しておきましょう。

Sleek MCPサーバーでできること

Sleek MCPを使用すると、エージェントはSleekプロジェクト内で編集可能なiOSおよびAndroidアプリの画面を生成できます。エージェントは画面のHTMLの取得、画像のレンダリング、レビュー用のプロジェクトリンクの提供を行えます。要件をコードに落とし込む前に、モバイルアプリの画面デザインが必要な場合に利用します。

Sleek MCPのREADMEには、ホスト型サーバー、OAuthサインイン、ならびにFigmaおよびコードへのエクスポート機能が記載されています。Sleekが画面全体を一括で設計できるよう、アプリの要件定義を1つのメッセージにまとめてエージェントに渡してください。生成を行うとワークスペースのクレジットが消費されますが、読み取りやレンダリングではクレジットは消費されません。

Claude Code：

claude mcp add --transport http sleek https://sleek.design/api/mcp

Claude Codeで /mcp を開き、Sleekを選択してブラウザでの認証を完了します。Cursorの場合は、単一プロジェクト用の .cursor/mcp.json または全プロジェクト用の ~/.cursor/mcp.json に以下を追加します：

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

サーバーを有効化してサインインします。READMEではOAuthが推奨されています。APIキーはOAuthに対応していないクライアント向けのフォールバック機能です。

無料アカウントは、1回限り付与される60クレジットを使用してAPIをお試し利用できます。公開されているサブスクリプションプランのうち、APIおよびエージェントの継続的なアクセスにはStarterプランではなくProまたはTeamプランが必要です。2026年9月時点で、Proプランは月額$69または年額$360で、毎月20,000クレジットが付与されます。Figmaおよびコードへのエクスポートはすべてのプランに含まれていますが、Freeプランでのエクスポートはアンロックされた画面に限定されます。

MCP READMEによると、新規画面の生成には1画面あたり約30クレジット、編集には5〜30クレジットと見積もられています。1つのプロジェクトで同時に実行できるデザイン生成は1件です。design の呼び出しは最大270秒間待機し、必要に応じて実行中ステータスを返します。エージェントは要件定義を再送信するのではなく、get_design_run をポーリングする必要があります。

Sleekはデザインとエクスポート可能なUIコードを生成します。アプリのデータや動作の接続、およびReact NativeやSwiftUIで開発している場合の画面コードの調整は、コーディングエージェント側で行う必要があります。REST APIを使ったワークフローを希望する場合は、Claude Code UIデザインスキルガイドでSleekの個別スキルインストール手順を解説しています。

ScreensDesign MCPサーバーでできること

ScreensDesign MCPは、iOSアプリのリサーチと画面生成を組み合わせたツールです。同サービスのMCPページには、2026年9月時点で2,715以上のトップセールスアプリのライブラリ、完全なUXフロー、収益シグナル、そしてそれらのリファレンスをもとに画面を生成するツールが掲載されています。既存のモバイルパターンを分析することから始める開発案件に適しています。

MCPの利用にはScreensDesign Proが必要です。ホスト型サーバーはOAuthまたはスコープ付きAPIキーに対応しています。Claude Codeの場合、HTTPエンドポイントを追加し、/mcp経由で認証を行います。

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Cursorの場合は、.cursor/mcp.jsonに以下を追加してサーバーに接続します。

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

アカウント固有の設定方法については、ベンダーのセットアップ手順を参照してください。なお、収益シグナルはリファレンスアプリの傾向を示すものであり、画面を模倣すれば自社アプリのコンバージョン率が上がると保証するものではありません。

AIDesigner MCPサーバーでできること

AIDesigner MCPは、モバイルやデスクトップのビューポート向けにTailwindを使用したHTML/CSSデザインを生成・調整します。リポジトリのコンテキストを活用し、結果をキャンバスと共有できます。既存プロジェクトに合わせたインターフェースコードを生成したい場合に適していますが、そのまま実装として扱う前に出力内容を確認してください。

公式セットアップガイドでは、サーバーとエージェント指示を設定するCLIが提供されています。Claude Codeの場合は、プロジェクトのルートディレクトリで以下を実行します。

npx -y @aidesigner/agent-skills init

Cursorの場合は、ホストを明示的に指定します。

npx -y @aidesigner/agent-skills init cursor

どちらもhttps://api.aidesigner.ai/api/v1/mcpに接続します。クライアントのMCPパネルからOAuthサインインを完了してください。生成にはアカウントのクレジットを消費するため、バリエーションを繰り返し試す前に残高を確認してください。ドキュメントに記載されている出力結果はインターフェースのHTMLであり、完全なネイティブモバイルアプリではありません。

Pencil MCPサーバーでできること

Pencil（現 pen.dev）は、デスクトップアプリまたはIDE拡張機能で開かれている .pen ドキュメントにエージェントを接続します。同じファイルで作業している間に、エージェントがキャンバスを確認・変更することができます。リポジトリと一緒にデザインドキュメントを管理し、インタラクティブなローカル編集ワークフローを行いたい開発者に適しています。

AI連携ドキュメントには、アプリへのローカルstdio接続に関する説明があります。インストールガイドでは、別の環境でも使えるURLの代わりに以下のClaude Codeの手順が提供されています：

  1. pen.devで .pen ドキュメントを開きます。
  2. 「Settings」→「MCP」を開き、「Claude Code CLI」を有効にします。
  3. Claude Codeを起動または再起動します。
  4. /mcp を実行し、pencil が接続されていることを確認します。

Cursorの場合は、ドキュメントに記載されているIDE拡張機能の手順を使用します：

  1. 「Extensions」を開き、「pen.dev」を検索します。
  2. 拡張機能をインストールします。
  3. .pen ファイルを作成するか開きます。

料金ページによると、2026年9月現在、pen.devは無料で利用可能です。これにはコーディングエージェントの別途サブスクリプション費用は含まれません。このMCPワークフローを利用する際はドキュメントを開いたままにしてください。推測したホスト型エンドポイントや他の人のPCからコピーしたバイナリパスで代用しないでください。

Paper MCPサーバーでできること

Paper MCPを使用すると、エージェントはHTMLおよびCSSで構築されたPaperデザインドキュメントの読み取りと編集が行えます。共有キャンバスワークフローに対応しており、エージェントがデザインを変更し、ユーザーがそれを確認して、エージェントが実装時にその結果を利用することができます。これらのドキュメント操作を行うには、Paper Desktopが起動しており、ファイルが開かれている必要があります。

Paper MCPガイドには、以下のプラグインのインストール手順が記載されています。まずPaper Desktopをインストールして開きます。Claude Codeの場合は以下を実行します：

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

その後、Claude Codeを開いて /mcp を確認します。Cursorの場合、エージェントパネルで以下を実行します：

/add-plugin paper-desktop

サーバーが表示されない場合はCursorを再読み込みしてください。Paperの以前のlocalhost HTTP設定も引き続き動作しますが、現在のプラグインはPaper CLIを使用します。Desktopが閉じられている間でもCLIからツールを公開できますが、ドキュメントの読み取りと書き込みには引き続きアプリが必要です。

Paperの料金ページによると、2026年9月時点で、MCPの呼び出し回数はFreeプランで週100回、Proプランで週100万回となっています。Proプランはエディター1人あたり月額$20、または年払いの場合月額$16です。ツール呼び出し回数の上限は画面数ではない点に注意してください。1つのデザインタスクで複数回の呼び出しが行われる場合があります。

どのデザインMCPサーバーを使うべきか？

既存のFigmaデザインを実装するにはFigmaを、リファレンスを探すにはMobbinを、確認およびエクスポートが可能なプロジェクト内でモバイル画面を生成するにはSleekを使用します。Stitchもホスト型生成のもう1つの選択肢です。ローカルキャンバス上でエージェントと同じデザインドキュメントを編集したい場合は、PencilまたはPaperを選択してください。

まずは目の前のタスクから始めましょう。チームメンバーからすでにFigmaフレームを渡されている場合、別のジェネレーターを併用すると不要なデザイン上の判断が増える可能性があります。レイアウトが決まっていない場合は、生成前に画面に何を配置すべきかを決めるのにリファレンスが役立ちます。新しいモバイルアプリの要件定義がある場合は、エージェントをSleekに接続し、生成された画面を確認してから実装に進んでください。無料トライアルでは約1回のデザイン生成が可能です。Proプランは継続的な利用に対応しています。

既存のブランドルールがある場合は、要件定義の一部としてエージェントに渡してください。DESIGN.mdライブラリでは、これらのツールと併用できる書面でのデザインガイドラインを提供しています。これはMCP接続とは別の入力項目です。

エージェント連携以外の選択肢については、AIモバイルアプリデザインツールのランキングおよびClaude Design代替ツールを参照してください。

よくある質問

Figma MCPサーバーは無料ですか？

Figmaのリモートサーバーは、利用制限付きですべてのプランおよびシートで利用できます。2026年9月時点で、Starterプランでは読み取りツールの呼び出しが月20回までとなっています。デスクトップアクセスには有料プランのDevまたはFullシートが必要です。キャンバスへの書き込みはベータ期間中無料です。

Mobbin MCPは新しい画面を生成できますか？

ドキュメントに記載されているツールは、既存の画面、フロー、ウェブサイトセクションを検索するものです。エージェント向けにリファレンス画像を返しますが、新しいアプリデザインを作成するわけではありません。

複数のデザインMCPサーバーを接続することはできますか？

はい、可能です。リファレンス検索とデザイン生成など、異なる役割を持つツールを接続してください。意図したワークフローを明確にするため、各ステップでエージェントがどのサービスを使用すべきかを指定してください。

Sleek MCPはStarterプランで動作しますか？

いいえ。StarterプランにはAPIアクセスが含まれていません。無料アカウントは、1回限りのお試しクレジットでAPIを体験できます。継続的なアクセスはProおよびTeamプランに含まれており、2026年9月時点でProプランは月額$69または年額$360です。

PencilとPaperを使用するには、ローカルアプリを開いておく必要がありますか？

はい。本記事で説明したMCPによるドキュメント編集では必要です。PencilはデスクトップアプリまたはIDE拡張機能で開いている.penドキュメントと連携します。Paperは、Desktopが閉じられている間でもCLIからツールを公開できますが、ドキュメントの読み取りと書き込みにはDesktopと開かれたファイルが必要です。

デザインMCPサーバーとデザインスキルの違いは何ですか？

MCPサーバーは、エージェントが呼び出せるツールを公開するものです。スキルは指示を提供し、スクリプトやAPIガイドを含めることができます。Sleekは両方に対応しており、MCPはOAuth経由で接続し、スキルはエージェントにREST APIの使用方法を提示します。

他の記事も読む

2026年のモバイルアプリデザイン向けAIツール12選
2026年のモバイルアプリデザイン向けAIツールを比較。Sleek、Google Stitch、Figma Makeの画面品質、エクスポート、9月時点の料金で選べます。
Stefano
Stefano
記事を読む
コピーして使えるプロンプト付きAIモバイルアプリデザイン10選
実際のプロンプト付きの素晴らしいAIモバイルアプリデザイン例を10個ご紹介します。睡眠トラッカーからバンキングアプリまで、AIデザインツールで何が可能かをご覧ください。
Mattia
Mattia
記事を読む
Claude Code向けUI UX Pro Maxスキルとfrontend-designの比較
UI UX Pro Max、Anthropicのfrontend-designスキル、Sleekのモバイルデザインスキルを比較。ソース内の指示、インストール方法、成果物、限界について解説します。
Stefano
Stefano
記事を読む

今日から次のアプリをデザインしよう

アイデアから数分でアプリデザインへ。