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

咚咚咚ddd2025-08-12 15:58

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

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

基础配置流程：

获取figma-api-key

打开figma 网页端头像------settings

security------Generate new token

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

复制生成后的key

cursor mcp添加
json 复制代码 
<!-- 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自动访问浏览器页面，自行检查报错和页面实现效果；

json 复制代码 
"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环境）

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

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

要求cursor更具设计稿对照浏览器中已经完成的版本继续优化
md 复制代码 
重新预览设计稿优化页面：@https://www.figma.com/design/....省略
在浏览器中预览当前页面对比：http://localhost:8080/#/figma-test-page
(或者直接说明哪些位置缺失和不足)
UI设计稿效果------初版输出效果------要求调用浏览器MCP对照优化后效果
问题记录
  • figma mcp 切图过程异常，长时间没有相应（稳定性问题）
  • 截图解析准确率不稳定

测试案例2（vue环境）

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

使用 promptpilot 优化提示词：

输出结果反而更差了

md 复制代码 
你的任务是使用figma mcp访问figma设计稿文件，完成页面开发。具体要求是在指定目录下创建新页面并配置路由，在此页面进行开发，设计稿宽度为1080px。
指定目录：
<指定目录>
@figma-test-page/ 
</指定目录>
figma设计稿文件链接：
<figma设计稿文件链接>
@https://www.figma.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 服务器" 。

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

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

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

选择设计稿模块或页面
  1. 使用桌面应用程序在 Figma 内选择一个框架或图层。
  2. 提示您的客户帮助您实施当前的选择。
md 复制代码 
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输出时有切图

疑问点

  • 使用不同代码框架输出效果不同？比如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设计稿自行对比，自行优化（有一定效果，但输出不稳定）
    • 最后：手动优化细节，完成最终页面开发

  • 提示词案例

md 复制代码 
调用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
相关推荐
Sword994 分钟前
🎮 AI编程新时代：Trae×Three.js打造沉浸式3D魔方游戏
前端·ai编程·trae
hongweihao41 分钟前
Cursor 不讲武德，我反手开通了Claude max试试能不能用 Claude code 代替它
ai编程·claude
LEAFF42 分钟前
手把手教你使用Coze开发一个AI翻译应用
agent·ai编程·coze
CoderLiu1 小时前
AI提示词工程优化指南：8个技巧，释放大语言模型的全部潜力
前端·人工智能·ai编程
量子位2 小时前
拿下3D生成行业新标杆！昆仑万维Matrix-3D新模型鲨疯了，一张图建模游戏场景
ai编程
量子位2 小时前
GitHub独立时代落幕！CEO离职创业，微软全面接管
github·ai编程
量子位2 小时前
黄仁勋子女成长路径曝光：一个学烘焙一个开酒吧，从基层做到英伟达高管
ai编程·nvidia
VUE2 小时前
借助ai半小时设计出来一款获取图片自动填充路径的mcp插件
前端·javascript·mcp
一只爱撸猫的程序猿3 小时前
创建一个使用Spring AI框架构建RAG（Retrieval-Augmented Generation）系统的案例
spring boot·aigc·ai编程
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02UV安装并设置国内源03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04[已解决]VSCode右键菜单消失恢复052025最新国内服务器可用docker源仓库地址大全（2025年8月更新）06🚀Cursor CLI+GPT-5保姆级教程+编程能力测评！Cursor CLI零成本免费使用GPT-5！Claude Code的劲敌来了！从安装到实战演示07GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】08KGG转MP3工具|非KGM文件|解密音频09Cursor 终端“卡死/无响应”问题的解法10OpenAI重返开源！GPT-OSS本地部署完全指南