2026年Cursor Figma MCP：从设计稿到自动代码实现（DTC）

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

本文实测了两种主流figma mcp，梳理了使用教程和经验总结，应用于前端团队figma DTC 流程；目前已经有较好的实践效果。因社区很少有figma mcp深度使用相关文章，所以发布当前文档作为figma DTC流程的实践分享，欢迎各位掘友交流分享自己的使用经验和idea。

基础配置流程：

1. 配置figmalink figma mcp

获取figma-api-key

打开figma 网页端头像——settings

security——Generate new token

添加以下配置，读写权限添加

复制生成后的key

cursor mcp添加

2. 配置playwright-mcp(浏览器工具mcp）

用于前端开发过程中，agent自动访问浏览器页面，自行检查报错和页面实现效果；

mcp正常接通效果

3. cursor 开启mcp 和 mode 自动运行

4. 开通figma账号添加figma设计稿（UI同学共享）

5. 复制figma 设计稿单个页面的地址

6. 提交给cursor+提示词要求cursor开发

测试案例1（html环境）

初版提示词：

执行过程

注意：执行过程中间可能遇到切图过程长时间无响应，需要手动断开，重新发送“继续执行” 继续处理任务。

要求cursor更具设计稿对照浏览器中已经完成的版本继续优化

UI设计稿效果——初版输出效果——要求调用浏览器MCP对照优化后效果

问题记录

figma mcp 切图过程异常，长时间没有相应（稳定性问题）
截图解析准确率不稳定

测试案例2（vue环境）

提示词记录：

UI设计稿——输出效果

测试案例2（vue)

使用 promptpilot 优化提示词：

输出结果反而更差了

配置流程

参考文档：

help.figma.com/hc/en-us/ar…

步骤一：启动MCP服务器

打开Figma 桌面应用程序并确保已更新到最新版本。
创建或打开 Figma 设计文件。
在左上角，打开 Figma 菜单。
在“首选项”下，选择 “启用开发模式 MCP 服务器” 。

您应该在屏幕底部看到一条确认消息，告知您服务器已启用并正在运行。

第 2 步：设置您的 MCP 客户端

步骤 3：提示您的 MCP 客户端

有两种方法可以向你的 AI 客户端提供 Figma 设计上下文：

选择设计稿模块或页面

使用桌面应用程序在 Figma 内选择一个框架或图层。
提示您的客户帮助您实施当前的选择。

复制设计稿模块或页面链接

将链接复制到 Figma 中的框架或图层。
提示您的客户帮助您在所选的 URL 上实现设计。

案例测试

选中设计稿测试（Figma MCP)

初始提示词

发现以下问题，提示词提示具体优化项，要求cursor继续优化；

但是发现icon切图依然没有成功导入

查看文档发现，官方的get_image仅限于自动截图辅助设计稿开发效果。并没有frame link Figma MCP的切图能力；

对比Framelink Figma MCP发现，官方的Figma MCP 没有切图的能力，UI是实现上通过自行使用get_image截取设计稿视图，可以修复一些设计稿结构顺序错误的细节问题。字体大小，间距等，要比非官方版更准确。

设计稿效果——FrameLink MCP 效果——官方MCP输出效果

切换gpt5模型测试（figma mcp)

生成质量很差，有报错未主动解决。gpt5输出过程中断多次

测试React+TailWind输出效果

因为figma get_code官方默认输出的代码就是React+tailwind

总体效果较好，React+ tailwind输出时有切图

使用不同代码框架输出效果不同？比如vue项目和React对比；html+css, html tailwind css对比。（React tailwind效果更好，自动切图正常）
不同提示词调优效果（目前简单提示词反而效果更好）
如何调整figma图层更有利于输出效果（需要结构清晰的设计稿文件目录层级）
切换不同的模型对输出效果对比（Claude4效果最好）
截图提供预览效果辅助是否可以提升效果（输出效果不稳定）

提示词要点
- 精简的提示词比结构化复杂的提示词表现更优
- 提示词做好基本的说明：
  - 要求输出代码技术栈：React+tailwindcss
  - 要求写到制定文档：@index.vue
  - 说明UI稿尺寸比例：UI稿宽度尺寸750px
figma MCP选择：
- Framelink Figma MCP:
  - 可以自动切图并插入项目（有时不稳定）
  - 不需要下载figma桌面端，通过token链接
  - 仅能通过复制figma ui链接到cursor交互
  - 输出UI细节准确度不足，需要微调的细节更多
- Figma MCP（官方）
  - 只有输出React+tailwindcss才有切图导出
  - 需要下载figma桌面端链接
  - 可以通过复制figma ui链接和选中桌面端UI交互
  - UI细节还原更准确，需要微调的细节更少
- 如果当前ui稿有大量icon切图：建议使用Framelink Figma MCP
- 如果当前ui稿复杂度较高: 建议使用官方Figma MCP
使用步骤：
- 先检查设计稿结构对结构部不清晰的部分在figma中调整（图层结构，顺序，自动排版等，需要对figma设计工具有所了解）
- 选中或复制整个页面链接到cursor，提示cursor完成页面开发
- 优化方式1：对不符合UI设计稿的部分在figma选中并告诉cursor完成优化（优化效果最好，精准）
- 优化方式2：提示词描述问题清单让cursor统一优化（可同时对多个问题进行优化，但输出效果不稳定）
- 优化方式3：开启浏览器MCP要求cursor访问开发后的页面与UI设计稿自行对比，自行优化（有一定效果，但输出不稳定）
- 最后：手动优化细节，完成最终页面开发
提示词案例

cursor生成figma设计稿：cursor-talk-to-figma-mcp

- cursor 按照mcp
- figma 添加 cursor talk to figma mcp plugin
- 插件开启 uselocallhost

2026年Cursor Figma MCP： 从设计稿到自动代码实现（DTC）