QBIC

用嘴做设计：QBIC 如何让 AI 代理"操控"Figma

场景切入

想象这样一个画面：设计师张明坐在工位上，手里端着一杯咖啡，对着 Cursor IDE 敲下一行字：「把这个首页改造成三段式布局：顶部大 Banner，中间三个功能卡片，底部联系表单。」三秒钟后，Figma 里已经出现了一个完整的页面结构——矩形、文本、卡片、间距全部就位。

这不是科幻，而是 QBIC 正在做的事。

---

背景故事：为什么需要"对话式设计"？

传统的 Figma 协作流程中，设计师与开发者的沟通往往存在一个"翻译损耗"：设计师用视觉语言表达想法，开发者用代码语言实现，中间的来回沟通耗时巨大。当 AI 助手（如 Cursor、Copilot）开始接管代码编写工作后，一个新的瓶颈出现了——AI 不知道设计师想怎么改，它需要"看见"Figma 里到底有什么。

QBIC 的作者们意识到这个问题，尝试用 Model Context Protocol（MCP）作为桥梁：让 AI 代理通过标准化的协议直接读取和操控 Figma 的设计元素，实现「说一句话，Figma 动一下」的体验。

---

技术原理解析

MCP：让 AI 代理"说同一种语言"

QBIC 的核心依赖是 Model Context Protocol（MCP），这是 Anthropic 主导推出的开放协议，旨在为 AI 模型提供标准化的工具调用接口。

传统 AI 调用工具需要为每个工具单独写集成代码，而 MCP 实现了「一次实现，处处调用」：QBIC MCP 服务器实现了一套工具 schema，Cursor 的 AI 引擎通过 MCP 协议直接调用，无需额外配置。

三层架构

QBIC 的代码组织分为三层：

• MCP Server（src/qbic_mcp/server.ts）：核心服务器，基于 @modelcontextprotocol/sdk 实现，通过 StdioServerTransport 以标准 I/O 方式与 AI 客户端通信。接收 MCP 命令后，通过 WebSocket 转发给 Figma 插件。
• WebSocket Message Hub（src/socket.ts）：实时消息枢纽，建立 MCP 服务器与 Figma 插件之间的双向通信通道，支持命令分发和进度回传。
• Cursor Figma MCP Plugin（src/cursor_mcp_plugin/）：运行在 Figma 沙箱中的插件，接收来自 Hub 的命令，调用 Figma Open Plugin API 执行实际 DOM 操作。

核心工具集

QBIC 暴露了 30+ MCP 工具，覆盖以下类别：

类别	代表工具	功能
结构读取	get_document_info、get_node_info	获取文档结构、节点详情
选择器	get_selection、read_my_design	获取当前选中、读取设计详情
创建	create_rectangle、create_text、create_frame	创建设计元素
编辑	set_text_content、set_multiple_text_contents	批量修改文本内容
注释	get_annotations、set_annotation	管理设计注释
连接	get_reactions、create_connections	FigJam 连接线操作
样式	get_styles、apply_variable	样式与变量应用

---

实际使用流程

环境准备

QBIC 要求本地开发环境安装 Bun（推荐 v1.2+）作为运行时。安装完成后，只需运行 bun setup 即可完成所有配置——脚本会自动将 QBIC 注册到 Cursor 的 MCP 配置文件中。

典型工作流

一个完整的「AI 驱动 Figma 设计」流程如下：

1. 启动 WebSocket Hub：bun socket 在后台运行，建立消息转发通道
2. 启动 MCP 服务器：bunx qbic-mcp 启动 QBIC 服务，等待来自 Cursor 的命令
3. 打开 Figma 插件模式：在 Figma 桌面客户端中加载 src/cursor_mcp_plugin/manifest.json，插件连接 Hub
4. 在 Cursor 中对话：输入自然语言指令，Cursor AI 解析后发送 MCP 命令
5. Figma 实时响应：插件接收命令，执行操作，回传结果

---

技术亮点与局限

亮点

• 协议先行：基于 MCP 标准，理论上可接入任何兼容 MCP 的 AI 客户端（不限于 Cursor）
• 实时反馈：CommandProgressUpdate 机制支持命令进度实时回传，包括 chunk 分片处理信息
• 批量操作：set_multiple_text_contents 支持一次性修改多个节点，适合批量替换占位符文案
• 部署友好：提供了官方 Dockerfile，基于 oven/bun:latest 镜像，一键构建运行

局限

• 当前仅支持 Figma：架构上支持多工具扩展，但实际只实现了 Figma 插件，生态尚处早期
• 需要 Figma 桌面客户端：插件模式依赖 Figma 桌面版，无法纯云端使用
• 工具数量少：51 star 对应的是一个小众项目，代码量和社区贡献都有限，稳定性存疑
• WebSocket 路由依赖：Hub 宕机则整个链路中断，缺少重连和降级机制
• TypeScript 类型定义部分硬编码：如 ComponentOverride、getInstanceOverridesResult 等接口与实现耦合

---

行业意义

QBIC 代表了 AI 驱动的「对话式设计」这一新范式。虽然当前功能有限，但它验证了 MCP 协议在创意工具领域的可行性——AI 不再只是写代码的工具，而是可以直接参与设计创作的协作者。

随着 MCP 生态的扩展，未来可能出现类似的工具集来控制 Adobe 全家桶、Blender、DaVinci Resolve 等创意软件，形成「一个 AI 代理操控所有创意工具」的工作流。QBIC 的价值在于它踩在了这个趋势的最前沿。

---

快速上手建议

对于希望尝试 QBIC 的开发者，建议从以下路径入手：

1. 阅读 src/qbic_mcp/server.ts，理解 MCP 工具注册和命令转发机制
2. 参考 src/cursor_mcp_plugin/ 中的 Figma 插件实现，尝试添加新的工具（如获取颜色样式）
3. 如果对 MCP 协议感兴趣，可阅读 @modelcontextprotocol/sdk 源码，了解 prompt 模板和资源定义的用法