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

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对照优化后效果

问题记录

figma 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服务器

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

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

服务器在本地运行http://127.0.***0.1:3845/mcp。请将此地址保存起来，以便在下一步中用于配置文件。

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

"Figma": { "url": "http://127.**0*.0.1:3845/mcp" }

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

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

选择设计稿模块或页面

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

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.

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

将链接复制到 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设计稿自行对比，自行优化（有一定效果，但输出不稳定）
- 最后：手动优化细节，完成最终页面开发
提示词案例

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

扩展

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

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

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