Figma-Context-MCP：将 Figma 设计稿"一键转代码"的神奇桥梁

Figma + Cursor 联动手绘

Framelink MCP for Figma 让 AI 编程工具直接读懂你的 Figma 设计稿——不是截图，而是结构化的布局、样式、文本数据，从此告别"AI 生成 UI 和设计稿对不上"的世纪难题。

一、AI 生成 UI 为什么不准确？问题的根源

用过 AI 辅助编程的开发者大概都有这样的经历：让 AI 根据 Figma 截图生成代码，结果出来的布局偏了、颜色不对、字体大小差了一截。这不是 AI 不够聪明，而是因为截图丢失了太多关键信息——padding 具体是多少像素？flex 的 justify-content 用的是哪个值？按钮的圆角是 8px 还是 12px？

截图本质上是给 AI 喂了一张"美颜照"，而不是原始数据。 设计师在 Figma 里精确调整的参数，全部在截图环节丢失了。AI 只能靠"猜"，猜得准不准全凭运气。

二、Figma-Context-MCP 是什么？它的工作原理

Figma-Context-MCP 是一个基于 Model Context Protocol（MCP） 的中间件服务。它扮演了 AI 编程工具（如 Cursor）与 Figma 设计工具之间的"翻译官"角色：

设计师在 Figma 中完成 UI 设计，获取设计稿的分享链接
开发者将 Figma 链接粘贴到 Cursor 的 AI 对话窗口
Figma-Context-MCP 自动调用 Figma REST API，抓取该设计稿的完整结构数据（节点树、样式、布局关系）
MCP 服务对原始 Figma API 响应进行"简化翻译"——剔除大量冗余元数据，只保留对代码生成最有价值的布局和样式信息
Cursor 收到精炼后的设计上下文，据此生成精确匹配设计稿的代码

整个过程对开发者透明——你只需要粘贴链接、提出需求，剩下的全交给 MCP。作者还做了一个 YouTube 演示视频，展示了用 Cursor + Figma-Context-MCP 从零实现一个完整登录页面的全过程，从粘贴链接到代码生成不到 30 秒。

三、核心技术架构：Extractor + Transformer 双层设计

代码仓库采用清晰的模块化架构，核心在 src/ 目录下：

模块	职责
`extractors/`	负责从 Figma API 原始 JSON 中提取节点数据，支持 layout/text/visuals/component 等多种提取策略
`transformers/`	将提取出的节点翻译成对 AI 更友好的格式，包含 layout（布局）、style（样式）、text（文本）、effects（特效）、component（组件）五个维度
`services/figma.ts`	与 Figma REST API 交互，封装认证和请求逻辑
`server.ts`	MCP 服务端，支持 stdio（直接注入 AI 工具）和 HTTP（远程调用）两种通信模式

这种 Extractor + Transformer 双层设计是该项目的精髓——不是简单转发 Figma API 响应，而是经过"智能压缩"后再输出给 AI，大幅提升了 AI 对设计意图的理解准确度。

四、技术栈：纯 TypeScript，无 AI 模型

这是一个纯 TypeScript 工程，完全不涉及任何本地 AI 模型或机器学习推理：

MCP SDK (@modelcontextprotocol/sdk)：实现 MCP 协议服务端
Figma API (@figma/rest-api-spec)：官方类型化的 Figma REST API 客户端
图像处理 (@jimp/*)：处理 Figma 导出的图片，生成缩略图
Web 框架：express 提供 HTTP 服务端，undici 做高性能 HTTP 请求
工具库：zod 做运行时类型校验，remeda 做函数式数据处理
构建工具：tsup 打包，TypeScript 严格类型检查

代码使用 vitest 做单元测试，CI 配置了 ESLint + Prettier + Lefthook，保证代码风格一致性。整体代码质量评分高，文档完整度极高（README、CLAUDE、ROADMAP、CHANGELOG 面面俱到）。

五、快速上手：5 分钟接入 Cursor

安装只需一行命令：

npm install -g figma-developer-mcp
# 或
pnpm add -g figma-developer-mcp

然后在 Cursor 的 MCP 配置文件（通常是 ~/.cursor/mcp.json）中添加：

{
  "mcpServers": {
    "figma": {
      "command": "figma-developer-mcp",
      "env": {
        "FIGMA_ACCESS_TOKEN": "你的Figma个人访问令牌"
      }
    }
  }
}

需要先去 Figma 开发者后台生成一个个人访问令牌。配置完成后，在 Cursor 对话框中粘贴 Figma 设计链接，直接说"帮我用这个设计稿写一个 React 组件"，即可获得精确还原的代码。

六、局限性与挑战

这个工具并非万能，存在几个需要注意的局限：

需要 Figma API Token：Token 需要手动申请，且具有读取你所有 Figma 文件的权限，存在一定的隐私风险（作者收集了匿名的 PostHog 遥测数据）
复杂交互动效难以还原：Figma 中的微交互、动画曲线等效果，在转换为代码时只能部分还原，需要开发者手动调整
仅支持 Figma：不支持 Sketch、Adobe XD 等其他设计工具，是单一生态绑定
AI 模型质量依赖：最终生成代码的质量还取决于 Cursor 所用底层模型的代码能力，MCP 只负责传递数据，不对代码正确性负责

七、行业意义：AI 前端开发的"最后一公里"

Figma-Context-MCP 的出现，折射出 AI 前端开发领域的一个大趋势：从"AI 猜设计"到"AI 读设计"的范式转变。过去一年多，各种 AI UI 生成工具（如 v0.dev、Claude Artifacts）都是靠上传截图让 AI"看图说话"，而 Figma-Context-MCP 证明了直接对接设计工具 API 可以获得远超截图的数据保真度。

这个项目目前 14884 GitHub Stars，在 MCP Server 类项目中属于头部梯队。随着 Claude Code、Cursor 等 AI 编程工具的普及，预计这类设计稿到 AI 代码的中间件会越来越多，形成 AI 前端开发生态的重要基础设施层。

如果你在用 Cursor 或其他支持 MCP 的 AI 编程工具，不妨现在就试试——从 Figma 设计稿到可运行代码，真的可以一键完成。

Figma-Context-MCP：将 Figma 设计稿"一键转代码"的神奇桥梁

Figma + Cursor 联动手绘

一、AI 生成 UI 为什么不准确？问题的根源

二、Figma-Context-MCP 是什么？它的工作原理

Figma-Context-MCP 是一个基于 Model Context Protocol（MCP） 的中间件服务。它扮演了 AI 编程工具（如 Cursor）与 Figma 设计工具之间的"翻译官"角色：

设计师在 Figma 中完成 UI 设计，获取设计稿的分享链接
开发者将 Figma 链接粘贴到 Cursor 的 AI 对话窗口
Figma-Context-MCP 自动调用 Figma REST API，抓取该设计稿的完整结构数据（节点树、样式、布局关系）
MCP 服务对原始 Figma API 响应进行"简化翻译"——剔除大量冗余元数据，只保留对代码生成最有价值的布局和样式信息
Cursor 收到精炼后的设计上下文，据此生成精确匹配设计稿的代码

三、核心技术架构：Extractor + Transformer 双层设计

代码仓库采用清晰的模块化架构，核心在 src/ 目录下：

模块	职责
`extractors/`	负责从 Figma API 原始 JSON 中提取节点数据，支持 layout/text/visuals/component 等多种提取策略
`transformers/`	将提取出的节点翻译成对 AI 更友好的格式，包含 layout（布局）、style（样式）、text（文本）、effects（特效）、component（组件）五个维度
`services/figma.ts`	与 Figma REST API 交互，封装认证和请求逻辑
`server.ts`	MCP 服务端，支持 stdio（直接注入 AI 工具）和 HTTP（远程调用）两种通信模式

四、技术栈：纯 TypeScript，无 AI 模型

这是一个纯 TypeScript 工程，完全不涉及任何本地 AI 模型或机器学习推理：

MCP SDK (@modelcontextprotocol/sdk)：实现 MCP 协议服务端
Figma API (@figma/rest-api-spec)：官方类型化的 Figma REST API 客户端
图像处理 (@jimp/*)：处理 Figma 导出的图片，生成缩略图
Web 框架：express 提供 HTTP 服务端，undici 做高性能 HTTP 请求
工具库：zod 做运行时类型校验，remeda 做函数式数据处理
构建工具：tsup 打包，TypeScript 严格类型检查

五、快速上手：5 分钟接入 Cursor

安装只需一行命令：

npm install -g figma-developer-mcp
# 或
pnpm add -g figma-developer-mcp

然后在 Cursor 的 MCP 配置文件（通常是 ~/.cursor/mcp.json）中添加：

{
  "mcpServers": {
    "figma": {
      "command": "figma-developer-mcp",
      "env": {
        "FIGMA_ACCESS_TOKEN": "你的Figma个人访问令牌"
      }
    }
  }
}

六、局限性与挑战

这个工具并非万能，存在几个需要注意的局限：

需要 Figma API Token：Token 需要手动申请，且具有读取你所有 Figma 文件的权限，存在一定的隐私风险（作者收集了匿名的 PostHog 遥测数据）
复杂交互动效难以还原：Figma 中的微交互、动画曲线等效果，在转换为代码时只能部分还原，需要开发者手动调整
仅支持 Figma：不支持 Sketch、Adobe XD 等其他设计工具，是单一生态绑定
AI 模型质量依赖：最终生成代码的质量还取决于 Cursor 所用底层模型的代码能力，MCP 只负责传递数据，不对代码正确性负责

七、行业意义：AI 前端开发的"最后一公里"

如果你在用 Cursor 或其他支持 MCP 的 AI 编程工具，不妨现在就试试——从 Figma 设计稿到可运行代码，真的可以一键完成。