Remote MCP · クラウド経由で接続

Pixso MCPデザインをAIにつなぐ

AIアシスタントにPixsoのレイヤーリンクを渡すだけ。デスクトップアプリを開いたままにせず、デザインの読み取り、指定範囲の編集、コードへの変換を進められます。

英語のドキュメント

OAuth 2.1による認可デザインの読み取り・編集デザイン ↔ コード

いつものAI作業環境

CodexClaude CodeCursorVS Code

使い慣れたツールでタスクを伝える

Pixso Remote MCPhttps://pixso.net/mcpクラウド接続 · 認可されたアクセス

Pixsoのデザインファイル

レイヤーとレイアウトコンポーネントと変数スタイルとアセット

実際のデザイン情報に基づいて作業

Streamable HTTPに対応したMCPクライアントから接続できます。利用できるツールは、シートの種類とファイルの権限によって異なります。

デザインの理解から、具体的な操作へ

スクリーンショットだけでは伝わらない情報もAIへ

構造、コンポーネント、スタイル、フィードバックをAIとのやり取りに取り込みます。アシスタントはデザインの指定した部分を操作し、その結果を提示できます。

デザインの構造を理解する

構造化されたレイヤーデータを読み取り、ノードやフレームを検索。タスクに必要なデザイン情報を確認できます。

デザインデータの取得について

デザインを作成・更新する

指定した範囲でノードを作成・編集できます。余白の変更や複数のプロパティの更新を、デザインファイルに直接反映します。

デザイン編集について

デザインとコードを相互に変換する

デザインからフロントエンドのコードを生成。HTMLやWebプロジェクトのZIPファイルを、編集可能なPixsoのデザインに変換することもできます。

双方向のワークフローを見る

デザインシステムを活用する

再利用可能なコンポーネント、スタイル、変数を読み取ります。チームの既存ルールを確認しながら、スタイルや変数を更新できます。

コンポーネントとスタイルについて

変更結果を目で確認する

対象範囲のスクリーンショットを取得し、プロパティを確認。変更後の配置、入れ子、レイアウト構造をチェックできます。

レイアウトの確認について

アセットとフィードバックを作業に活かす

PNG、JPEG、SVG、PDF、WebPなどの形式でアセットを書き出せます。コメントスレッドを読み取り、レビューの内容を踏まえて作業できます。

アセットの書き出しについて

REMOTE MCP

1つのURLで、3ステップの接続。

AIツールを接続し、レイヤーリンクをコピーして、タスクを伝えます。Remote MCPでは、デスクトップアプリやデザインのタブを開いたままにする必要はありません。

Remote MCPサーバーURLhttps://pixso.net/mcp
  1. 01

    サーバーを追加し、アクセスを認可する

    クライアントのMCP設定にサーバーURLを追加し、OAuth 2.1による認可を完了します。ドキュメントの手順に従って、パーソナルアクセストークンを使うこともできます。

  2. 02

    対象レイヤーのリンクをコピーする

    Pixsoで対象のフレームまたはレイヤーを選択し、Copy linkを使います。リンク内のitem-idが、アシスタントの作業対象となるデザインの範囲を示します。

    リンクのコピー方法を見る

    ファイル共有リンクやページリンクではなく、レイヤーリンクを使ってください。

  3. 03

    タスクと変更範囲を伝える

    リンク、達成したいこと、変更してよい範囲をAIアシスタントに伝えます。まず構造を読み取り、その後にコードの生成や対象デザインの編集を進めます。

    接続ガイドを読む

    読み取りには閲覧権限が必要です。変更するには編集権限も必要です。

具体的なタスクから始める

1つの画面、1組のコンポーネント、1つの変更に絞る

レイヤーリンクで対象のデザインを指定し、プロンプトで何をしてほしいかを伝えます。

まず構造を把握するこのレイヤーリンクを読み取り、ページのセクション、コンポーネント、主な変数を整理してください。まだデザインは変更しないでください。
次に変更を加えるこのレイヤーリンクにあるカードグループの間隔を24pxにしてください。テキストとコンポーネントの関係は変えず、変更後にスクリーンショットを撮って、結果を確認できるようにしてください。

デザイン ↔ コード

デザインと実装をつなぐ

デザインを出発点に実装を進めたり、Webページを編集可能なキャンバスに戻したり。次の検討や修正に、双方の成果を活かせます。

Pixsoのデザイン<React />

デザインからコードへ

デザインの構造をもとに実装する

design_to_codeでHTML、React、Vue、ArkUI、Flutterのコードを生成できます。その後、レスポンシブレイアウト、CSS変数、Tailwindへの変換、コードの整理、プロジェクトのデザインシステムに合わせた調整などを選べます。

デザインからコードへの変換について

デザインからコードへの変換には、エンタープライズのFull-functionまたはDeveloperシートと、エンタープライズスペース内のファイルが必要です。

<HTML />編集可能なデザイン

コードからデザインへ

Webのコードをキャンバスに戻す

code_to_designでHTMLやWebプロジェクトのZIPファイルを、編集可能なPixsoのデザインに変換できます。レイアウトを確認し、スタイルを調整して、次のバージョンをチームで検討できます。

コードからデザインへの変換について

変換はタスクとして実行されます。その後のデザインとプロジェクトコードの変更が、自動でリアルタイム同期されるわけではありません。

接続方式を選ぶ

まずはRemote MCPから

レイヤーリンクを使うタスクにはクラウド接続を。デスクトップアプリで開いているファイルや選択範囲を対象に作業する場合は、Local MCPを選べます。

デスクトップでの作業に

Local MCP

起動中のPixsoデスクトップアプリに接続し、アクティブなファイルを操作します。

  • デスクトップアプリとMCPサービスの起動が必要
  • 対象のデザインファイルをアクティブなタブで開く
  • 一部のツールはLocal MCPでのみ利用可能
Local MCPを設定

対象レイヤーを正しく指定

操作したいデザインを、アシスタントに正確に伝える

作業したいフレームやレイヤーのリンクをコピーします。これにより、読み取り、編集、コード生成の対象をアシスタントに正確に指定できます。

レイヤーリンクの取得手順を見る
Pixso Skillsでタスクの進め方を補う

Skillsは、エージェントがデザインのタスクを整理し、ツールを選ぶ手助けをします。MCPはファイルとの接続を担います。利用するエージェントとPixsoのバージョンに合った公式の導入手順をご確認ください。

Pixso Skillsを見る
選択したレイヤーのCopy link操作を表示したPixsoのデザインエディター
対象レイヤーのリンクをコピーすると、アシスタントに参照するデザインを具体的に指定できます。

よくある質問

接続する前に

開発者ドキュメント
Remote MCPにPixsoのデスクトップアプリは必要ですか?

いいえ。リモートサービスはクラウドで動作します。認可が完了していれば、有効なレイヤーリンクを使って操作でき、Pixso Webやデスクトップアプリを開いたままにする必要はありません。ただし、ネットワーク接続と有効な認可は必要です。

どのシートとファイル権限が必要ですか?

MCPの利用にはFull-functionまたはDeveloperシートが必要です。デザインからコードへの変換には、これらのいずれかのエンタープライズシートと、エンタープライズスペース内のファイルが必要です。読み取りには閲覧権限が、デザインの変更には編集権限も必要です。

すべてのツールを見る
Cursor、Claude Code、VS Code、Codexとはどう接続しますか?

Remote MCPのサーバーURLは共通ですが、設定手順はクライアントごとに異なります。設定項目も異なるため、別のエディターの設定をそのままコピーせず、リンク先の開発者ガイドで該当する手順をご確認ください。

接続を設定する
接続できたのにデザインにアクセスできないのはなぜですか?

アカウントにファイルの閲覧権限があることと、レイヤーリンクに正しいitem-idが含まれていることを確認してください。page-idや通常の共有リンクでは対象レイヤーを指定できません。セッションの有効期限が切れている場合は、再度認可してください。Local MCPでは、デスクトップアプリとアクティブなファイルも確認します。

AIはデザインを読み取るだけでなく、編集もできますか?

はい。現在のRemote MCPは、デザインの編集、スタイルや変数の更新、プロパティの変更に対応しています。対象レイヤーと変更範囲を指定し、編集権限のあるファイルを使ってください。変更後はスクリーンショットやレイアウトチェックで結果を確認できます。

プライベート環境でもRemote MCPを使えますか?

プライベート環境でRemote MCPを有効にする前に、担当のアカウントマネージャーにお問い合わせください。パブリッククラウドのURLではなく、ご利用の環境専用のサーバーアドレスと接続設定を使います。