设计师的代码革命：Figma MCP 与 Cursor 的协同工作流

这篇文章使用 AI 生成，我让 NotebookLM 帮我从过去一年的日记里挑出最优价值的，并整理成文章

引用的日记：

20250307 Figma MCP 研究.md

20250310 一个 python 脚本完成 ComfyUI 配置.md

20250929 排版研究与工具配置 Typography Cursor Xcode Figma.md

20251128 iCloud 功能开发与 AI 视觉能力工作总结.md

在过去的一年里，我一直在思考如何打通设计到开发的“最后一公里”。从在 Saas 平台搭建设计系统，到独立开发漫画阅读 APP，我深刻体会到：一致性强、复用程度高、与开发高度协同是产品快速迭代的基础。

随着 Claude 推出的 MCP (Model Context Protocol) 协议，以及 Cursor 等 AI 编辑器的兴起，我发现一种全新的“Vibe Coding”工作流正在形成：通过 AI 协议连接设计稿元数据，直接生成高质量的生产级代码。

以下是我对这一技术路线的实战研究与思考。

一、 什么是 MCP？给 AI 装上“USB-C”接口

在尝试将设计稿转为代码时，最大的痛点往往是 LLM（大语言模型）无法准确获取设计工具中的上下文。而 MCP 协议正是为了解决这个问题而生。

MCP (Model Context Protocol) 是一个开源标准协议，它规范了应用程序向 LLM 提供上下文的方式。用通俗的话来说，MCP 就像是 AI 应用的 USB-C 接口。就像 USB-C 提供了一种连接设备和各种外设的标准方式一样，MCP 提供了一种连接 AI 模型与不同数据源（如 Figma）和工具的标准方式。

通过这个协议，我们可以搭建一个本地或远程的 Server，动态、持续地向 Client（如 Cursor 或 Claude Desktop）提供设计稿的上下文信息。

二、 实战配置：连接 Figma 与 Cursor

要实现这个工作流，我们需要打通 Server（数据源）和 Client（AI 编辑器）。

1. 搭建 Server

Figma 的 MCP 服务搭建比想象中简单，只需要通过 npx 命令行工具即可启动。我在终端运行了以下命令，通过 API Key 将 Figma 变成了 AI 可读的数据源：

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

2. 配置 Client (Cursor)

在 Cursor 的设置中，找到 MCP Servers 选项并进行配置即可。连接成功后，Cursor 就能直接读取 Figma 文件的图层结构、属性等元数据。虽然目前偶尔会出现断连且无提示的问题，需要手动刷新，但整体链路已经打通。

3. 初步验证

在测试中，我让 Cursor 读取设计稿并还原一个按钮组件。Cursor 成功读取了结构，并通过 CMButton 构造组件完美实现了设计需求，高度和间距都非常准确。虽然在 SF Symbol 的处理上它使用了原字符而非 systemImage，但这证明了核心逻辑的可行性。

三、 挑战与解决方案：结构化 Prompt 的重要性

在深入研究 ComponentSet（组件集） 的代码还原时，我发现单纯依赖 MCP 读取数据并不完美。Figma 设计稿中的属性命名往往与代码实现不一致，甚至有时候 AI 会被 thumbnail_url 等无意义的元数据干扰,。此外，目前的 MCP 协议在获取 Frame 的宽高信息、文本样式等方面还存在缺失,。

为了解决这些问题，我总结了一套 结构化 Prompt 策略，来辅助 AI 更精准地生成代码：

1. 明确目的：告诉 AI 我们要做什么（例如：将组件集转为 SwiftUI 代码）。
2. 清晰化实现结构：与其让 AI 从复杂的 Figma 数据中去“猜”属性，不如在一开始就声明需要实现的组件属性，提升这部分信息的权重。
3. 隔离上下文：明确告知 AI 忽略无关的上下文干扰。
4. 预览辅助：对于 SwiftUI 开发，要求生成 Preview 代码以便即时查看效果。

通过这种方式，我成功实现了从 ComponentSet 到开发组件的近乎完美的转换。

四、 进阶思考：未来的产品开发范式

这项研究不仅仅是为了“偷懒”，而是为了重构产品开发的流程。

在开发我的漫画阅读 APP 时，我深刻体会到 设计与开发完全对齐 的甜头。我在设计 Dialog 控件时，特意在设计稿中命名关键属性，使其与代码中的变量名一致，最终实现了设计稿直接转为高质量代码。而 Figma Connect 技术的出现，更是允许我们将设计组件直接映射到代码仓库的真实组件，让 Dev Mode 显示生产代码而非示例代码。

基于目前的 MCP 研究和 AI Agent 能力，我设想了一个未来的理想开发流：

PRD (需求文档) -> 拆分的设计 -> Figma MCP 获得的 metadata + 结构化的 Prompt -> Coding Agent (Cursor) -> 实际产品

在这个流程中，设计不再只是画图，而是编写“可视化的代码”。设计师需要像做产品一样做设计，建立一致性强、复用度高的控件库，并通过 MCP 协议将这些设计意图无损地传递给 AI。

五、 总结

Figma MCP 与 Cursor 的结合，标志着设计师与工程师的边界正在模糊。通过 Docker 容器化思想封装应用，利用 MCP 标准化上下文，我们正在进入一个 Design2Code 的新阶段。

在这个阶段，好的设计依然是“藏九显一”，但设计稿到代码的转换将不再是繁琐的体力活，而是一场精准的数据流动革命。接下来，我计划进一步研究如何通过 MCP 获取更详细的图层数据，并尝试将其应用到更复杂的页面嵌套逻辑中。