Pixso IDE 插件
在 Cursor、Trae、CodeBuddy 等 AI IDE 中安装 Pixso 插件后，可将 Pixso 画布直接插入 IDE，无需在设计工具与编辑器之间来回切换窗口；同时 AI 可通过 MCP 直接操作画布，在同一对话中完成「需求 → 设计稿 → 前端代码」，作业更连贯。
适用范围
目前插件默认为 Pixso 公网 使用地址。私有化用户配置详情请查看私有化配置版块。
能做什么
Pixso IDE 插件提供与 本地 MCP 同一套工具能力：本地 MCP 能做的（如设计转代码、代码转设计、读写样式 / 变量、编辑画布、截图校验等），通过 IDE 插件同样可以完成。工具清单见 工具与指令。
除此之外，插件还能将 Pixso 画布直接插入 IDE，边看稿边对话、边改设计，无需在 Pixso 客户端与 IDE 之间来回切换窗口。
安装与使用
第 1 步：安装插件
方式一：扩展市场安装
在 IDE 中打开扩展面板，搜索 Pixso，点击安装。如果搜索不到 Pixso 插件，请使用方式二安装。
方式二：从 VSIX 安装
- 从 Open VSX 下载 Pixso 插件的
.vsix文件
- 打开 IDE 扩展面板，选择 从 VSIX 安装
- 上传
.vsix文件完成安装
第 2 步：登录授权
- 点击 IDE 侧边栏中的 Pixso 插件图标
- 点击 登录
- 在 IDE 内完成 Pixso 账号登录
登录成功后即可在插件面板中继续操作。
第 3 步：选定目标文件
在插件面板中选择要生成 / 修改设计稿的 Pixso 文件。之后 AI 的所有操作都会落到该文件画布上。
第 4 步：在 IDE 中配置 Pixso MCP
若你已经按 本地 MCP 完成配置，无需再次配置，可直接进入下一步。
尚未配置时，在 IDE 的 MCP 设置中添加 Pixso MCP。以 Cursor 为例：
json
{
"mcpServers": {
"Pixso MCP": {
"url": "http://127.0.0.1:3667/mcp",
"headers": {}
}
}
}注意
- IDE 插件的 MCP 服务地址始终为
3667（http://127.0.0.1:3667/mcp）。 - 当 IDE 插件 与 Pixso 桌面客户端 同时打开时，客户端侧的 MCP 地址会自动递增为
3668（或其他可用端口）。请以客户端实际显示的地址为准，并同步更新 IDE 中的 MCP 配置。 - 若要彻底关闭 IDE 插件占用的服务端口：先在扩展页 卸载 Pixso 插件，再点击 重新启动扩展。
卸载 Pixso 插件：
卸载后点击 重新启动扩展：
第 5 步：对话生成
在 AI 对话框中直接描述需求。AI 会通过 Pixso MCP 在目标文件画布上创建页面结构、生成组件、设置布局与视觉样式。
典型场景示例：
text
使用当前 Pixso 文件中的设计系统（样式、变量、组件），生成一套极简智能家居 App。
暖中性色、米色奶油背景、清晰层级、优先复用已有组件。
相关文档
私有化配置
私有化用户需先将插件的服务地址改为实际的私有化内网地址，再重新安装插件使配置生效。
第 1 步：配置私有化地址
- 打开 IDE 命令面板，搜索并选择 首选项：打开用户设置 (JSON)。
- 在用户设置 JSON 文件中添加或修改
pixso.pixsoUrl，将值替换为实际的私有化内网地址：
json
{
"pixso.pixsoUrl": "https://你的私有化内网地址/"
}
第 2 步：重新安装插件
- 在扩展页面卸载 Pixso 插件。
- 卸载完成后，点击 重新启动扩展。
- 扩展重新启动后，再次点击 安装，即可开始插件使用。
