最近用 WorkBuddy 处理开发任务的人多起来了，分析需求、拆页面、写代码，它都能做，布局和视觉建议也能给。不过 UI 设计这一块，设计师要的是一份能继续改图层、组件、文字和样式的稿子。不然页面能跑，评审、改版、交付还是会卡住。
WorkBuddy 能不能真参与 UI 设计？
能，前提是它能操作设计画布。Figma 之外，国内团队用 Pixso 的不少。下面就讲怎么
把 WorkBuddy 接到 Pixso AI 的 MCP 和 Skill 上
。
WorkBuddy 管理解任务、推进步骤；Pixso MCP 把画布、组件、样式、变量这些上下文送过来；Pixso Skill 管 Agent 怎么读、怎么建、怎么改。后面用“会员中心首页”走一遍，看看这套组合能做什么，哪些地方还得设计师拍板。
让 AI 单独做 UI，它不知道页面给谁用，也不知道要复用哪套组件。比如说：“帮我设计一个简洁、高级的会员中心页面。”“高级”具体指什么？大留白、强对比，还是克制的企业产品风？它猜不出来。团队正在用的设计规范，它也看不到。按钮多高、品牌色是什么、字体层级怎么排、卡片圆角用多少，只能重新猜。设计师拿到结果还得再整理。但
接上了 Pixso MCP 后，就会顺畅很多
。
MCP 的作用是把 WorkBuddy 和 Pixso 连起来。
当前画布、选中图层、组件、变量、样式
，这些信息可以交给 Agent。账号有编辑权限的话，Agent 也能把结果写回 Pixso。
Skill 不管连接，更像一套做事方法。比如“设计会员中心首页”这个任务，Skill 会让 Agent 先读设计上下文，再选工具，然后才创建或修改图层。
这样的组合就是 WorkBuddy 管需求推进，Pixso MCP 管连接设计文件，Pixso Skill 管设计任务怎么做。
开始前，先在 Pixso 新建一个测试文件。别拿正式项目试写入。
本地 MCP 的用法
：安装并登录支持该能力的 Pixso 客户端，打开目标设计文件，让对应页签保持激活。开启 MCP 服务后，客户端会显示本地地址，常见是：http://127.0.0.1:3667/mcp。端口可能因本机环境变化，别照抄，以客户端实际显示为准。
接着去 WorkBuddy 的设置或工具管理区，找 MCP、外部工具这类入口，新增一个 HTTP 服务。不同版本菜单名可能不一样，配置结构大致是：
"url": "http://127.0.0.1:3667/mcp",
远程 MCP 则要填官方页面给的远程地址，按提示做 OAuth 或访问令牌授权。远程模式不要求本机一直开着 Pixso。给设计链接时，最好带上具体图层的 item-id。只给页面 ID，Agent 未必找得到要操作的图层。
连接完先别生成页面。让 WorkBuddy 做一次只读检查：
请检查 Pixso MCP 是否可用，只读取当前文件、当前页面和选中节点的基本信息。
先不要创建图层，也不要修改已有设计。
确认读到的文件和选区正确，再装 Pixso 官方 AI Skill。相关能力一般有设计编辑、读取 DSL、设计转代码、代码转设计、组件配置等。
Skill 名称可能随版本调整，以 Pixso 官方仓库和文档为准
。
要注意，MCP 显示已连接，不代表 Skill 生效。如果 WorkBuddy 能看到画布，却不会按设计任务选工具，先看 Skill 装没装好，新会话有没有加载。而且账号席位和文件权限也会影响结果，读文件至少要有查看权限，改设计要有编辑权限。部分设计转代码能力还受企业空间和席位类型限制。连接正常却执行不了，先查这些。
连接好后，可以描述任务。参考下面这种提示词，更容易拿到能继续用的结果：
请在 Pixso 当前文件中设计一个会员中心首页。页面用于桌面端 SaaS 产品，核心用户是已经购买基础会员、可能继续升级的个人用户。
优先复用当前文件已有的 Button、Card、Tag 组件，沿用现有颜色变量、文字样式、间距和圆角规范。先读取当前画布、组件和变量，输出页面结构、准备复用的组件以及需要确认的问题。暂时不要写回画布。
我建议把先分析和再生成拆开
。Agent 一旦误解页面用途，直接写入容易批量产生不合适的图层。先看结构方案，改起来便宜很多。
比如 WorkBuddy 可能会问：套餐对比放首屏，还是弹窗打开？会员等级卡片要不要展示续费日期？移动端保留完整权益表格吗？这些不只是视觉风格，还影响页面结构，属于产品决定。
可以开始生成。只在当前页面新建一个名为“会员中心首页”的顶层 Frame，不要修改已有组件、变量和其他页面。优先创建已有组件的实例，不要重新画一套外观相似的按钮和卡片。完成后列出新建的图层、使用的组件，以及仍需人工确认的内容。
通过 Pixso MCP 写入的结果，应该是
能选中、能继续修改的图层
。设计师可以改文案、换组件、调间距，也能把其中一部分整理成新组件。生成完先做视觉检查，不用马上继续改：
发现问题后，
指令尽量落到具体对象
。比如：保持会员卡片尺寸不变，将会员等级和有效期拉开层级；主按钮继续使用现有组件，只调整卡片内部间距。这一步，设计师要做出判断，首屏要不要出现套餐价格？权益太多怎么收起？升级按钮会不会抢走当前会员信息的注意力？这些不能只靠 Agent 自动决定。
这套组合真正有用的地方，不只是页面出得快，更在于设计能继续往下走。
标题、卡片、按钮、列表还是设计对象，
后续能在 Pixso 里改
，不用围着一张图片重新描。它还能使用现有设计系统。文件里的组件、变量、样式整理得越清楚，WorkBuddy 越有机会复用，页面之间的风格也更不容易跑偏。另外，设计和代码也能接起来。设计确认后，可以让 WorkBuddy 读取选中的 Frame，整理组件树、样式变量和资源，再按项目技术栈生成
HTML、React、Vue、ArkUI 或 Flutter
等代码。
请读取当前选中的会员中心首页，先输出组件树、可复用组件、颜色变量、字号和间距。然后根据确认后的结构生成 React + TypeScript 代码。复用项目现有 Button 和 Card，不新增第三方依赖，不修改路由、接口和权限逻辑。请同时列出设计稿没有表达的加载态、错误态和响应式规则。
已有网页也可以反向进入设计流程。通过代码转设计能力，可以把 HTML 或网页项目转换成 Pixso 中可编辑的节点，方便设计师整理旧页面、补规范或尝试改版。但字体、图片、绝对定位和响应式布局仍然要人工检查。
WorkBuddy + Pixso AI 更合适的用法，是
让 WorkBuddy 先读需求和设计上下文，再用 Pixso MCP 操作真实画布，按 Skill 给出的步骤生成可编辑设计
。
它不适合替设计师决定复杂业务规则，也
不能跳过评审、无障碍检查、响应式验证和代码测试
。画布里没写清楚的权限、接口和状态，Agent 不会自动获得正确答案。
第一次尝试，从登录页、会员卡片、设置页这类边界明确的页面开始就够了。让 WorkBuddy 先读后写，先生成一个区块，再检查图层和组件是否真的可用。跑通这一小段，再把它接进完整项目。
这可能也是 AI 参与 UI 设计更实际的一种方式：不要只生成一个“看起来像设计”的结果，最好进入设计文件，留下能改、能评审、也能继续交付的产物。
