Pixso 上架 WorkBuddy，设计与代码在对话中转换

11 月 4 日，Pixso 宣布正式上架 WorkBuddy 连接器。完成连接后，用户可以在 WorkBuddy 的对话中调用 Pixso MCP，读取和修改设计文件、生成页面、将设计稿转换为代码，也可以把页面 HTML 导回 Pixso 继续编辑。

以「毛球日记」宠物美容预约小程序为例，这次演示完成了创建设计、生成代码和回导设计稿的过程。三个环节可以在同一段对话中推进；回导后的设计与代码不会自动持续同步，后续修改仍需要按需再次转换。

在 WorkBuddy 中调用 Pixso 创建页面

已连接 Pixso 的用户可以直接开始；首次使用的连接方法见下文。将可编辑的 Pixso 文件链接发给 WorkBuddy，并说明页面要求。这次对话中的需求是：

读取一下这个文件，并调用 Pixso MCP，制作「毛球日记」宠物美容预约小程序的三个页面：首页、预约页、预约成功页。每页 390×844，采用暖白底和草绿色主色。

WorkBuddy 完成后，列出了三个页面的节点与内容，并返回页面截图供核对。对话中可以查看任务完成情况，右侧则能预览生成的页面。

打开 Pixso，生成的页面已经出现在同一份文件中，文字、图层与样式都可以继续编辑。

把设计稿转换为代码

接着，在同一段对话里提出要求：

将上面的设计稿转为代码。

这一步可以要求 WorkBuddy 输出静态 HTML、微信小程序、Vue 3 和 React 四套代码，也可以只选择项目需要的格式。

WorkBuddy 基于读取的设计和 Pixso D2C 转换结果，整理所选格式的代码。生成后，可以继续让 WorkBuddy 调整样式与布局，再接入项目所需的业务服务，并检查页面效果。

将页面 HTML 导回 Pixso

继续通过对话将代码转换回设计稿。换成自己的项目时，可以把范围说明得更明确：

将刚才整理好的页面 HTML 导回同一份 Pixso 文件，新建独立画板，保留原稿。完成后检查页面尺寸、文案和布局，并输出截图。

这次演示选用静态 HTML 版回导。WorkBuddy 整理页面样式后，调用 Pixso 代码转设计能力，在同一文件中新增独立画板，便于与原稿对照。

回导后，可以在 Pixso 中对照原稿检查字体、资源和布局，再继续修改。后续变更需要按需再次转换，设计与代码不会自动持续同步。

查看设计、整理评审与批量修改，也能通过对话完成

除了代码转换，日常查看设计、评审和修改页面，也可以通过 WorkBuddy 调用 Pixso 完成。

读取画板与图层，先了解设计

让 WorkBuddy 查找指定页面或图层，读取结构与属性。例如：“找到预约页的确认按钮，整理它的尺寸、颜色和文字样式，先不要修改。”

读取组件、样式与变量，核对设计规范

可以读取组件、共享样式和设计变量，核对页面是否沿用团队规范；有编辑权限时，也能创建或管理样式与变量。例如：“按照现有页面的颜色、文字样式和组件规则，补充一个服务评价模块。”

检查布局，再批量调整设计

可以检查重叠、溢出和裁切等潜在问题，或批量调整指定范围的属性。例如：“检查这三个页面的布局，将主按钮统一为品牌色，保留其他区域，修改后截图确认。”

读取评论，整理待跟进的问题

评审意见留在 Pixso 文件中时，可以让 WorkBuddy 读取评论并汇总反馈。例如：“读取预约页的评论，按页面位置整理修改事项。”

截图对比，导出开发需要的素材

可以截取画板核对修改效果，也可以导出 PNG、SVG、WebP 等素材。例如：“将这个图标导出为 SVG，将预约页按 2 倍倍率导出为 PNG。”

在 WorkBuddy 中连接 Pixso

在自己的文件中开始使用前，可以先完成以下三步连接。

第一步：找到 Pixso

打开 WorkBuddy，进入左侧「专家·技能·连接器」，切换到「连接器」页签，在右上角搜索框输入「Pixso」。

第二步：点击连接

点击 Pixso 卡片上的「+」，在弹出的介绍窗口中点击「连接」。

第三步：完成授权

在授权访问请求页面核对应用信息，确认后完成授权，再返回 WorkBuddy。

通过 Remote MCP 接入时，无需下载 Pixso 客户端，执行任务时也无需持续打开 Pixso 客户端或网页。

连接后的第一个任务，可以按“图层链接 + 明确目标 + 操作范围”来描述。在 Pixso 中选中目标画板、容器或图层，复制包含 item-id 的链接；告诉 WorkBuddy 要读取、修改、检查还是生成代码，同时说明需要保留哪些内容。

还可以先安装 Pixso 官方的 5 个技能，再按任务类型调用对应技能。安装提示词如下：

帮我装下这个仓库里的 Pixso 技能：https://github.com/PixsoLtd/pixso-ai-integration

在常用的 AI 工具中连接 Pixso

Pixso MCP 也已上架千问办公、Qoder CN 和百度搭子。此外，QoderWork、Claude Code、Codex / ChatGPT、Cursor、VS Code、Kiro 也可以连接 Pixso MCP。

在 WorkBuddy 的连接器中搜索 Pixso，完成授权后，即可结合自己的设计文件开始使用。完整能力与使用条件，可查看 Pixso MCP 工具与指令。