最近用了一些 AI 办公和编程工具，发现 AI 已经不只是帮忙写文案、整理资料，它正慢慢渗透到设计和开发的具体环节里。比如最近的千问办公，虽然它擅长的是PPT、文档、网站，但我发现也可以用它做设计，能直接调用 Pixso，
输入需求就在设计画布里生成 UI 设计稿
，也支持继续修改页面细节；设计完成之后，还能顺便读取设计文件并生成可用的代码。
在千问办公工作台连接器里搜 Pixso，就能直接用上它的 UI 设计生成功能，不用事先折腾一堆配置文件。对不熟悉 MCP 的设计师而言，上手不难。
使用时也不用把提示词写得特别复杂，把项目类型、目标用户、页面内容和视觉要求讲清楚就行。比如：
“用 Pixso 生成一个面向连锁零售门店的经营数据看板，包含销售趋势、门店排行、库存预警和待办事项，桌面端尺寸，整体简洁专业，重要预警使用橙色和红色区分。”
AI就会打开你的设计画布，
按照你给的描述生成一版 UI 设计稿
。如果第一版不满意，也不用整个推倒重来，可以继续提具体的修改意见，比如缩小顶部导航、提高数据区域的信息密度、把门店排行改成表格，或者增加筛选条件和空状态。
这比只生成一张界面图要实用得多。有些工具生成的 UI 界面只能拿来参考，但在设计工具里生成的页面，
还能继续编辑、调整结构、补充交互
。设计师可以先让 AI 搞定最花时间的初版，然后把精力集中到信息层级、业务逻辑和细节体验上。
要是团队已经在 Pixso 里沉淀了组件、样式和设计规范，还可以让
AI 基于这些现成的规范来生成页面
。这样生成的页面就不只是表面像产品，还能更贴近团队实际使用的组件、颜色和规范，后续改起来和团队协作也会顺不少。
生成设计稿只完成了一半，关键还得看
AI 能不能准确理解设计文件
。
传统做法里，设计稿转代码很难把图层关系、容器结构、间距、资源和组件信息完整表达出来。页面一旦复杂一点，生成出来的东西就容易有布局偏差，开发还得花时间重新拆解结构。
Pixso MCP 的作用，就是
在 Pixso 和 AI Agent 之间搭一条标准通道
。它能把设计稿里的节点、布局、资源这些信息，提供给支持 MCP 的工具。AI 拿到的就不再是一张图片了，而是更接近设计文件本身的结构化数据。
所以这套机制既能用来生成和修改设计，也能用来读取设计并生成代码。设计师除了在千问办公里生成代码，也可以在
Cursor、VS Code、Codex、CodeBuddy、Trae
等支持 MCP 的 IDE 中连接 Pixso MCP，根据选中的图层生成代码。
但要说明一下，AI 生成代码不等于项目就不用开发和验收了。接口逻辑、响应式适配、组件复用、状态管理，还有无障碍体验，这些还是得靠工程师来把控。不过，它能省掉不少重复搭页面和手动对样式的时间，让开发能更快拿到一个可以继续调试的基础版本。
在千问办公里直接用 Pixso，搜索一下就能找到。但要在其他 IDE 或 Agent 工具里读取设计稿，就需要先配置 MCP。
不同工具的入口位置不太一样，但整体思路差不多
。
比如用 CodeBuddy，先安装并登录 Pixso 客户端（版本需 2.2.0 以上）。然后打开一个设计文件，在左上角就能看到MCP开关按钮。
接着打开 CodeBuddy，在侧边栏对话面板的右上角点进设置，切到 MCP 标签页，点“添加 MCP”，填入下面的配置：
保存后，如果 MCP 服务变绿，一般就连上了。用的时候，可以在 Pixso 客户端里选中要开发的容器，复制容器链接，然后贴到 CodeBuddy 对话框里，让它生成前端代码。或者保持目标设计文件处于激活状态，直接选中容器后给 Agent 下指令。
注意，图层链接不是普通分享链接，其中的 item-id 是用来定位具体图层的。另外，本地 MCP 运行期间，Pixso 客户端得保持打开，对应的设计文件也要处在激活页签。
Cursor、VS Code、Codex、Trae
这些工具同样可以连 Pixso MCP
，就是配置入口和字段格式有点不一样。比如 VS Code 用的是 servers 字段，Cursor 和 CodeBuddy 常见配置则用 mcpServers，按 Pixso 开发者文档里对应工具来配就行。
我觉得这套组合真正有价值的地方，在于把需求、设计和开发串起来了。产品经理或设计师可以在千问办公里描述需求，调用 Pixso AI 生成初版 UI 设计稿和代码。而这套流程并不会取代设计师，也不会让开发变成一键搞定。它更像是把那些重复、机械的环节交给 AI，比如快速搭出第一版、调整常规布局、读取设计属性、生成基础代码。设计师还是得判断页面好不好用，开发也得保证代码质量，但两边都能少做一些重复劳动。
对于经常做中后台、活动页、官网模块或产品原型的团队来说，这已经不只是一个新鲜功能，而是可以落地到日常项目里的工作方式。
