デザインの構造を理解する
構造化されたレイヤーデータを読み取り、ノードやフレームを検索。タスクに必要なデザイン情報を確認できます。
デザインデータの取得についてRemote MCP · クラウド経由で接続
AIアシスタントにPixsoのレイヤーリンクを渡すだけ。デスクトップアプリを開いたままにせず、デザインの読み取り、指定範囲の編集、コードへの変換を進められます。
英語のドキュメント
いつものAI作業環境
使い慣れたツールでタスクを伝える
https://pixso.net/mcpクラウド接続 · 認可されたアクセスPixsoのデザインファイル
実際のデザイン情報に基づいて作業
Streamable HTTPに対応したMCPクライアントから接続できます。利用できるツールは、シートの種類とファイルの権限によって異なります。
デザインの理解から、具体的な操作へ
構造、コンポーネント、スタイル、フィードバックをAIとのやり取りに取り込みます。アシスタントはデザインの指定した部分を操作し、その結果を提示できます。
構造化されたレイヤーデータを読み取り、ノードやフレームを検索。タスクに必要なデザイン情報を確認できます。
デザインデータの取得について指定した範囲でノードを作成・編集できます。余白の変更や複数のプロパティの更新を、デザインファイルに直接反映します。
デザイン編集についてデザインからフロントエンドのコードを生成。HTMLやWebプロジェクトのZIPファイルを、編集可能なPixsoのデザインに変換することもできます。
双方向のワークフローを見る再利用可能なコンポーネント、スタイル、変数を読み取ります。チームの既存ルールを確認しながら、スタイルや変数を更新できます。
コンポーネントとスタイルについて対象範囲のスクリーンショットを取得し、プロパティを確認。変更後の配置、入れ子、レイアウト構造をチェックできます。
レイアウトの確認についてPNG、JPEG、SVG、PDF、WebPなどの形式でアセットを書き出せます。コメントスレッドを読み取り、レビューの内容を踏まえて作業できます。
アセットの書き出しについてREMOTE MCP
AIツールを接続し、レイヤーリンクをコピーして、タスクを伝えます。Remote MCPでは、デスクトップアプリやデザインのタブを開いたままにする必要はありません。
https://pixso.net/mcpクライアントのMCP設定にサーバーURLを追加し、OAuth 2.1による認可を完了します。ドキュメントの手順に従って、パーソナルアクセストークンを使うこともできます。
Pixsoで対象のフレームまたはレイヤーを選択し、Copy linkを使います。リンク内のitem-idが、アシスタントの作業対象となるデザインの範囲を示します。
リンクのコピー方法を見るファイル共有リンクやページリンクではなく、レイヤーリンクを使ってください。
リンク、達成したいこと、変更してよい範囲をAIアシスタントに伝えます。まず構造を読み取り、その後にコードの生成や対象デザインの編集を進めます。
接続ガイドを読む読み取りには閲覧権限が必要です。変更するには編集権限も必要です。
具体的なタスクから始める
レイヤーリンクで対象のデザインを指定し、プロンプトで何をしてほしいかを伝えます。
まず構造を把握するこのレイヤーリンクを読み取り、ページのセクション、コンポーネント、主な変数を整理してください。まだデザインは変更しないでください。
次に変更を加えるこのレイヤーリンクにあるカードグループの間隔を24pxにしてください。テキストとコンポーネントの関係は変えず、変更後にスクリーンショットを撮って、結果を確認できるようにしてください。
デザイン ↔ コード
デザインを出発点に実装を進めたり、Webページを編集可能なキャンバスに戻したり。次の検討や修正に、双方の成果を活かせます。
デザインからコードへ
design_to_codeでHTML、React、Vue、ArkUI、Flutterのコードを生成できます。その後、レスポンシブレイアウト、CSS変数、Tailwindへの変換、コードの整理、プロジェクトのデザインシステムに合わせた調整などを選べます。
デザインからコードへの変換についてデザインからコードへの変換には、エンタープライズのFull-functionまたはDeveloperシートと、エンタープライズスペース内のファイルが必要です。
コードからデザインへ
code_to_designでHTMLやWebプロジェクトのZIPファイルを、編集可能なPixsoのデザインに変換できます。レイアウトを確認し、スタイルを調整して、次のバージョンをチームで検討できます。
コードからデザインへの変換について変換はタスクとして実行されます。その後のデザインとプロジェクトコードの変更が、自動でリアルタイム同期されるわけではありません。
接続方式を選ぶ
レイヤーリンクを使うタスクにはクラウド接続を。デスクトップアプリで開いているファイルや選択範囲を対象に作業する場合は、Local MCPを選べます。
アクセスの認可とレイヤーリンクを使い、Pixsoのクラウドサービス経由で接続します。
起動中のPixsoデスクトップアプリに接続し、アクティブなファイルを操作します。
対象レイヤーを正しく指定
作業したいフレームやレイヤーのリンクをコピーします。これにより、読み取り、編集、コード生成の対象をアシスタントに正確に指定できます。
レイヤーリンクの取得手順を見るSkillsは、エージェントがデザインのタスクを整理し、ツールを選ぶ手助けをします。MCPはファイルとの接続を担います。利用するエージェントとPixsoのバージョンに合った公式の導入手順をご確認ください。
Pixso Skillsを見る
いいえ。リモートサービスはクラウドで動作します。認可が完了していれば、有効なレイヤーリンクを使って操作でき、Pixso Webやデスクトップアプリを開いたままにする必要はありません。ただし、ネットワーク接続と有効な認可は必要です。
MCPの利用にはFull-functionまたはDeveloperシートが必要です。デザインからコードへの変換には、これらのいずれかのエンタープライズシートと、エンタープライズスペース内のファイルが必要です。読み取りには閲覧権限が、デザインの変更には編集権限も必要です。
すべてのツールを見るRemote MCPのサーバーURLは共通ですが、設定手順はクライアントごとに異なります。設定項目も異なるため、別のエディターの設定をそのままコピーせず、リンク先の開発者ガイドで該当する手順をご確認ください。
接続を設定するアカウントにファイルの閲覧権限があることと、レイヤーリンクに正しいitem-idが含まれていることを確認してください。page-idや通常の共有リンクでは対象レイヤーを指定できません。セッションの有効期限が切れている場合は、再度認可してください。Local MCPでは、デスクトップアプリとアクティブなファイルも確認します。
はい。現在のRemote MCPは、デザインの編集、スタイルや変数の更新、プロパティの変更に対応しています。対象レイヤーと変更範囲を指定し、編集権限のあるファイルを使ってください。変更後はスクリーンショットやレイアウトチェックで結果を確認できます。
プライベート環境でRemote MCPを有効にする前に、担当のアカウントマネージャーにお問い合わせください。パブリッククラウドのURLではなく、ご利用の環境専用のサーバーアドレスと接続設定を使います。