Pixso MCPについて
MCP（Model Context Protocol）は、大規模言語モデル（LLM）に対して、外部ツールやデータソースとの連携を可能にする、標準化、安全かつ拡張性の高いフレームワークを提供するオープンプロトコルです。
Pixso MCPサーバーは、Pixsoのデザインデータを、AIプログラミングツールを搭載したローカルIDE（Cursor、VS Code、Windsurfなど）に送信し、インテリジェントにフロントエンドコードを生成します。これにより、デザインからコードへの変換を効率的に実現します。
Pixso MCP機能はPixsoクライアントでのみ利用可能です。
Pixso MCPにより、ユーザーは以下の操作が可能です：
- 選択したフレーム（デザイン）のコード生成： デザインからコードへの変換を実現します。
- フレームの構造化データ抽出： フレームに対応するフロントエンドコードと画像データを直接クライアントに送信します。
Pixso MCPの使い方
手順1: Pixso MCPを有効化
・Pixsoクライアント（バージョン2.2.0以上）をインストールしてログインします。
・Pixsoクライアントで新規または既存のデザインファイルを開きます。
・デザインファイルの左上「ファイル」メニューから【Pixso MCP】を有効化します
手順2: Pixso MCPをクライアントに統合する
Pixso MCPサーバーが正常に起動したら、MCPクライアントで以下の設定を行うことで接続が完了します。
対応クライアントと設定概要：
Cursor
・Cursorを開き、「設定」を開き、「MCP & Integrations」を選択します。
・「MCP Tools」セクション内の「New MCP Server」をクリックします。
・表示された mcp.json ファイルに、以下の設定コードを貼り付け、保存します。
{
"mcpServers": {
"Pixso MCP": {
"url": "http://localhost:3667/mcp",
"headers":{}
}
}
}
保存後、「MCP & Integrations」ページに戻り、Pixso MCPの起動をオンにします。起動プロセス中に「Loading tools」が表示され、ツールの読み込みが完了すると、Pixso MCPサーバーへ正常に接続されたことを示します。
VS Code
・VS Codeを起動し、会話パネル（Ctrl+Alt+I）を開き、入力ボックスで「Configure Tools」を選択して開きます。
・「Configure Tools」ページで「Add MCP Server」を選択し、プロトコルタイプとして「HTTP」を選択し、初回設定時は任意の内容を入力して mcp.json ファイルを生成・開きます。
・以下の設定を mcp.json ファイルに貼り付けて保存します。
{
"servers": {
"pixso": {
"url": "http://localhost:3667/mcp",
"type": "http"
}
},
"inputs": []
}
・保存後、入力ボックスにMCPサーバー関連の設定が表示されます。その中の「設定」をクリックし、続いて「Start Server」をクリックして、クライアント内でMCPサービスを起動します。
コンソールに「Connection state: Running」と出力されれば、接続は成功です。
注意: VS Codeバージョン1.99以降でのみMCPがサポートされています。ご利用前にバージョンを必ずご確認ください。
Windsurf
・Windsurfを開き、ログイン後、「Settings」をクリックして「Windsurf Settings」を開きます。
・「General」ページで「MCP Servers」を見つけ、「Manage MCPs」をクリックしてMCP設定パネルを開きます。
・MCP設定パネルで「View raw config」をクリックし、mcp_config.jsonファイルを開きます。以下の設定をJSONファイルに貼り付けて保存します。
{
"mcpServers": {
"pixso": {
"serverUrl": "http://localhost:3667/mcp"
}
}
}
注記： 上記の設定は他のIDE環境にも適用できます。
・保存後、「Manage MCPs」ページに戻り、「Refresh」をクリックします。以下の内容が読み込まれたら、設定が成功したことを示します。
Claude Code
端末で以下のコマンドを使用して設定を行います。
claude mcp add --transport http pixso-desktop
手順3: クライアントで対話する
MCPクライアントとPixso MCPサーバーが無事接続されると、クライアント内でPixso MCPが使えるようになります。
Pixsoのデザインデータを取得する方法は2つあります：
- リンクをコピーする方法
・Pixsoクライアントでデザインファイルを開きます。
・デザイン内で目的のフレームを選択し、そのリンクをコピーします。
・CursorなどのクライアントIDEで対話画面を開き、コピーしたリンクを貼り付けて、「HTMLコードを生成して」などの指示を出します。
2. フレームを選択
- Pixsoクライアントでデザインファイルを開きます。
- デザインファイルのキャンバス内で、目的のフレームレイヤーを単一選択します。
- クライアントIDE（Cursorなど）の対話モードを開き、会話にフレームリンクを貼り付けて、「HTMLコードを生成して」などの関連指示を出します。
よくある質問
Pixso MCPサーバーはどのような形式のデータを提供していますか？
Pixso MCPサーバーは、LLMがデザインデータを取得・理解するために、以下のツールを提供します：
- getCode: このツールを通じて、デザインに対応するHTMLデータを取得できます。
- getImage: このツールを通じて、デザイン内の画像データを取得できます。
MCPクライアントIDE（Cursorなど）でコードの生成に失敗し、「Pixsoデザインファイルデータを取得できません」と表示される場合は、どうすればよいですか？
コード生成が失敗する原因と対処法は、以下の通りです：
- Pixsoクライアントが未起動または正常に動作していない: Pixsoクライアントを確認し、起動かつ正常に動作していることを保証してください。必要に応じてPixsoクライアントを再起動してください。
- Pixso MCPサーバーまたはクライアントが正常に動作していない: Pixsoクライアント及びクライアントIDE内のMCP関連設定を確認し、MCPが正常に起動かつ接続成功していることを確保してください。
- Pixsoクライアント内でデザインファイルが未打開、または非アクティブなタブで開いている: 使用時は、リンク/選択したフレームが存在するデザインファイルがPixsoクライアントで打開され、かつアクティブなタブ であることを確保してください。
- フレーム選択モード使用時に、キャンバス内で複数のフレームを選択している: 現在、フレーム選択方式はフレームレイヤーの単一選択 のみ対応しています。
- 選択した大規模言語モデルがMCPに対応していない: 一部のモデルはMCPプロトコルに対応または互換性がありません。使用時は、Claudeシリーズ、Qwen3シリーズなど、先進的でMCPプロトコルに対応した大規模言語モデルを選択してください。
生成されたコードの効果が期待通りにならない場合は、どうすればよいですか？
コードの生成効果は、以下の要因を含む（ただしこれらに限定されない）多くの要素に影響されます：
- デザイン内容の複雑さ: デザイン内容が過度に複雑な場合（例：多重マスクが存在する、レイヤー数が多すぎる）、入力内容が大規模言語モデルのコンテキスト処理能力を超え、コンテキストオーバーフローを引き起こし、デザインの再現度が低くなったり、正確な生成が行えなかったりする可能性があります。
- 生成するコードの種類: Pixso MCPサーバーはデザイン内容に対応するHTMLコードデータを大規模言語モデルに送信し、高精度なフロントエンドコードの生成を支援します。ユーザーがHTMLフレームワーク以外のフロントエンドコードの生成を要求した場合、効果が影響を受ける可能性があります。
- 大規模言語モデルの知能レベル: モデルによって知能レベルは異なり、入力内容の意味理解やコード生成能力も大きく異なります。生成効果を向上させるためには、先進的でコード能力が高い大規模言語モデルを選択するようにしてください。
クライアントIDE（VS Codeなど）でMCPの設定入口が見つからない場合は、どうすればよいですか？
クライアントIDE（VS Codeなど）でMCP関連コンテンツが見つからない場合、現在のクライアントバージョンがMCPをサポートしていない可能性が高いです。現在のクライアントバージョンを確認し、MCPをサポートするバージョンに更新されていることを確保してください。
Pixsoデスクトップ版にMCPの入口がない場合は、どうすればよいですか？
Pixsoデスクトップ版でMCP機能のエントリが見つからない場合は、まずPixsoのバージョンを確認してください。Pixso MCPは、Pixsoメインアプリケーションのバージョンが 2.6.7以上 であることを要求します。
Pixsoデスクトップ版にMCPの入口は表示されるのに、使用できない場合は、どうすればよいですか？
Pixsoデスクトップ版でMCPエントリは表示されるものの、クリック後に反応がなく使用できない場合、これは現在のデスクトップ版のバージョンが低すぎることが原因です。Pixsoデスクトップ版を更新し、バージョンが 2.2.0以上 であることを確保してください。
