AIでPixsoのデザインスタイルを抽出する方法

AIがPixso connectorを使用してデザインファイルをスキャンし、特定のスタイルやノードを特定します。カラーやタイポグラフィの生データを直接取得できるため、手動でコピー＆ペーストする手間がなくなります。デザイントークンを開発環境へ直接マッピングすることが可能です。

1. 01

   スタイルのスキャン

   ファイル内を検索し、定義されているすべてのグローバルな色とタイポグラフィを特定します。

   list_styles
2. 02

   要素の調査

   特定のレイヤーやコンポーネントがどのようにスタイリングされているかをAIが確認します。

   list_nodes
3. 03

   値のマッピング

   見つかったスタイルを、デザインファイル内の特定のノードに紐付けます。

   list_styleslist_nodes
4. 04

   コードの生成

   読み取ったデータに基づき、AIがCSSやJSONオブジェクトを書き出します。

   list_styles

Pixso Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_PmSBqxR7wIu2EpevYxsLDBfk0wUgnnzAEAeh2ToH/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Pixso capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "pixso-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_PmSBqxR7wIu2EpevYxsLDBfk0wUgnnzAEAeh2ToH/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

リンクをクリックしてアカウントを連携してください。ログイン情報は暗号化されて安全に保護されます。連携後はすぐにAIにPixsoファイルの内容について質問できます。

• 01

  AIはPixsoファイル内の色を変更できますか？

  いいえ。AIができるのはスタイルやノードの読み取りのみです。元のデザインファイルを直接書き換えることはできません。

• 02

  AIはファイル内のすべてのレイヤーを確認できますか？

  指示されたノードであれば確認可能です。ただし、プロンプトを通じて要求されたデータのみを処理します。

• 03

  画像の書き出しに使用できますか？

  いいえ。このconnectorは色やタイポグラフィなどのスタイル値の抽出を目的としており、画像アセットの書き出しには対応していません。

• 04

  Pixsoで色を変更したら、コードも自動的に更新されますか？

  いいえ。デザインの変更を反映させるには、再度AIにファイルをスキャンするよう指示する必要があります。

• 05

  AIはPixso内に新しいスタイルを作成できますか？

  いいえ。提供されているツールは、既存のスタイルやノードをリストアップすることのみを可能にします。

• Pixsoについてさらに質問がありますか？ Pixso Connectorの全機能を見る