通过 MCP 架起 LLM 与设计系统的桥梁：实现社区 Figma MCP 服务器用于生成式设计
Source: Dev.to
Model Context Protocol (MCP)
模型上下文协议（MCP） 是一种开放标准的通信协议，为 AI 模型提供了一种结构化且安全的方式来与外部工具和数据集交互。传统上，智能体的知识局限于其训练数据；MCP 通过为 服务器（提供特定功能或 工具）与客户端（LLM）之间定义标准，打破了这种信息孤岛。在现代软件开发中，这使得工程师或设计师能够将 AI 智能体作为协作伙伴，进行代码库检查、数据库查询，或——如本文所探讨的——实时操作设计文件。
桥接鸿沟：从只读到生成式设计
大多数专业设计工具都优先考虑安全性和稳定性，这往往导致 API 受到严格限制。例如，Figma 提供了功能强大的 REST API，但它主要是 只读 的。MCP 服务器可以轻松获取帧或图层的属性，却无法通过简单的 HTTP 请求移动按钮或更改十六进制颜色代码。以编程方式修改 Figma 文档的唯一途径是使用其 插件 API，该 API 直接在用户的浏览器环境中运行。
社区 Figma MCP 服务器 通过超越单纯的 API 包装器来解决这个问题。它认识到，LLM 与 Figma 内部文档对象模型（DOM）之间的直接连接需要一个活动的执行上下文。通过利用插件 API，服务器能够访问 Figma 完整的编辑功能——包括 Auto Layout、组件属性和坐标系统——从而让 AI 代理像人类设计师一样工作，依据文本提示发出创建复杂 UI 结构（例如登录表单或导航栏）的指令1。
生成式反馈循环
实现生成式设计工具不仅仅是“绘制”形状；它需要对设计最佳实践的理解。此 MCP 实现的关键方面是使用结构化的 memory 文件或系统提示来指导代理的行为。如果没有具体约束，代理可能会在相同的 (0,0) 坐标上重叠元素。通过提供上下文感知的环境，可以指示代理：
- 使用 Auto Layout 为所有新帧，以确保响应式布局。
- 在专用的 “Components” 页面上组织组件。
- 根据现有设计系统应用一致的间距和对齐。
这将 LLM 从简单的脚本执行器转变为能够理解意图的设计助理。如果用户对布局不满意，只需提示代理“将这些按钮左对齐”或“交换主要和次要操作”。MCP 服务器随后会将这些高层意图转换为一系列工具调用，实时修改 Figma 文档。
幕后揭秘：WebSocket 架构与工具接线
Community Figma MCP 服务器的架构旨在绕过 Figma 插件的沙箱限制。由于插件无法充当独立服务器，采用了三层系统：
- MCP 服务器 – AI 代理（例如 Claude 或 Opus）的入口点。它公开一组 23+ 工具，定义诸如
createRect、setPadding或addComponentInstance等操作。 - WebSocket 服务器 – 充当消息代理，保持 MCP 服务器与活动的 Figma 插件之间的持久连接。
- Figma 插件 – 在 Figma 客户端内部运行，监听通过 WebSocket 发送的消息，使用 Plugin API 执行请求的设计更改，并将确认或结果通过链路返回。
当代理发起工具请求时，MCP 服务器会将调用放入队列——这对于管理设计更新的异步特性至关重要。插件完成任务后，会将更新后的上下文返回给 WebSocket 服务器，随后该服务器在 MCP 环境中解析原始工具调用。这样可以确保代理在做出下一个设计决策之前，始终拥有文档状态的准确“视图”1。
// Conceptual example of a tool call handling design logic
async function handleCreateComponent(name: string, properties: any) {
const message = {
type: 'EXECUTE_ACTION',
action: 'CREATE_COMPONENT',
payload: { name, properties }
};
// Send the message through the WebSocket bridge
websocket.send(JSON.stringify(message));
// Wait for the plugin to confirm execution
return await waitForPluginResponse();
}我的想法
社区 Figma MCP 服务器代表了 AI‑辅助 与 AI‑自动化 工作流演进中的关键时刻。虽然 Figma 自己的 “Make Design” 功能提供一次性生成，但 MCP 方法实现了迭代式、对话式编辑——这对缺乏深厚设计经验但需要快速搭建功能原型的开发者尤为有价值。
然而，它也存在固有的局限性：
- 对自定义 WebSocket 桥接的依赖增加了部署复杂度；用户必须同时运行 MCP 服务器 以及 本地插件。
- LLM 在像素级完美布局所需的空间推理方面仍偶尔会出现困难，除非提供非常详细的提示或额外约束。
总体而言，社区 Figma MCP 服务器推动了 AI 驱动设计工具的边界，开启了更流畅、协作的设计体验之门。
“随着协议的成熟，我预计我们将看到更紧密的集成，使这些 ‘桥接’ 架构对最终用户更加透明，可能通过设计平台对双向 API 访问的官方支持来实现。”
致谢
我要感谢 Anton Tishchenko，EXDST 的首席技术官，他在 MCP 开发者峰会 主办的 Community Figma MCP Server 演讲中，对本实现进行了详细的讲解。
他对 Figma 环境所需的架构变通方案的洞见对社区帮助极大。也要感谢更广泛的 MCP 与 AI 研究社区，正是他们不断推动工具使用标准的边界。