您的位置: 首页> Cursor> Cursor Figma MCP: 从设计稿到自动代码实现（DTC）

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

时间：2025-09-06 16:00:03 来源：互联网

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

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

Framelink Figma MCP

基础配置流程：

1. 配置figmalink figma mcp
获取figma-api-key

打开figma 网页端头像——settings

security——Generate new token

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

复制生成后的key

cursor mcp添加
<!-- mac -->
"Framelink Figma MCP": {
  "command": "npx",
  "args": [
    "-y",
    "figma-developer-mcp",
    "--figma-api-key=figd_.......R_", // 替换自己的figma api key
    "--stdio"
  ]
},

<!-- windows -->
"Framelink Figma MCP": {
  "command": "cmd",
  "args": ["/c", "npx", "-y", "figma-developer-mcp", 
    "--figma-api-key=YOUR-KEY", // 替换自己的figma api key
    "--stdio"
  ]
}
2. 配置playwright-mcp(浏览器工具mcp）

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

"playwright-mcp": {
  "command": "npx",
  "args": [
  "-y",
  "@smithery/cli@latest",
  "run",
  "@microsoft/playwright-mcp",
  "--key",
  "41f1cc55-8403-4922-8dd0-a57f9ef9b915"
 ]
},

mcp正常接通效果

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

4. 开通figma账号添加figma设计稿（UI同学共享）
5. 复制figma 设计稿单个页面的地址

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

测试案例1（html环境）

初版提示词：
@https://www.f**i*gma.com/design/kebVRs8Sky5Jga6mCY24rq/202....
使用原生html+css完成该页面设计稿开发，设计稿宽度按照375px比例开发；
@创建好的空白页面
执行过程

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

要求cursor更具设计稿对照浏览器中已经完成的版本继续优化
重新预览设计稿优化页面：@https://www.*f*igm*a.com/design/....省略
在浏览器中预览当前页面对比：http://*localhos**t:8080/#/figma-test-page
(或者直接说明哪些位置缺失和不足)

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

测试案例2（vue环境）

提示词记录：
@https://www.**fi*gma.com/design/kebVRs8Sky5Jga6mCY24rq/20270。。。。。。。。
@cooperation-assessment.vue 在这个页面完成ui稿开发，宽度比例1080px;
UI设计稿——输出效果
测试案例2（vue)

使用 promptpilot 优化提示词：

输出结果反而更差了

你的任务是使用figma mcp访问figma设计稿文件，完成页面开发。具体要求是在指定目录下创建新页面并配置路由，在此页面进行开发，设计稿宽度为1080px。
指定目录：
<指定目录>
@figma-test-page/ 
</指定目录>
figma设计稿文件链接：
<figma设计稿文件链接>
@https://www.f*ig*m*a.com/design/kebVRs8Sky5Jga6mCY24rq/20270717-
</figma设计稿文件链接>
请按照以下步骤完成任务：
1. 使用figma mcp工具，通过提供的figma设计稿文件链接访问设计稿文件。
2. 在指定目录下创建新页面，并进行路由配置。
3. 根据设计稿进行页面开发，确保页面宽度为1080px。
在开发过程中，请详细记录每一步操作，并在<开发过程>标签内输出。完成开发后，在<开发结果>标签内简要说明页面开发是否成功以及页面的主要情况。
<开发过程>
[在此记录开发过程的详细步骤]
</开发过程>
<开发结果>
[在此说明开发结果]
</开发结果>

Figma MCP（官方）

配置流程

参考文档：

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

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

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

服务器在本地运行http://127.0.***0.1:3845/mcp。请将此地址保存起来，以便在下一步中用于配置文件。
第 2 步：设置您的 MCP 客户端
"Figma": { "url": "http://127.**0*.0.1:3845/mcp" }
步骤 3：提示您的 MCP 客户端

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

选择设计稿模块或页面
  1. 使用桌面应用程序在 Figma 内选择一个框架或图层。
  2. 提示您的客户帮助您实施当前的选择。
Take the selected frame in Figma and
convert it to a website layout using
HTML and tailwind CSS.
Use the layer names in the grid to
structure the grid items.
复制设计稿模块或页面链接
  1. 将链接复制到 Figma 中的框架或图层。
  2. 提示您的客户帮助您在所选的 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输出时有切图

疑问点

总结

调用figma mcp 完成当前选中的设计稿代码实现，
到当前页面：@FigmaTest.jsx
使用React+tailwind
ui稿宽度尺寸：750px
获取ui稿切图到本地并直接引用

扩展

上一篇：Trae vs Cursor：深度体验 Trae 一个月后，我的真实感受 下一篇：Cursor入门级教程，下载、安装、AI核心功能简介

相关文章

相关应用

最近更新