Cursor 接入 Figma MCP 实战经验贴Windows版

Cursor 接入 Figma MCP 实战经验贴Windows版

今天把 Cursor + Figma MCP 跑通了,目标是让 Cursor 直接读取 Figma 设计稿,用来辅助生成 PRD、页面结构说明、字段梳理等内容。

中间踩了几脚坑,结论先放前面:

一、先说结论

如果你是 Windows + Cursor + 想读取 Figma 设计稿,优先推荐这一套:

Figma MCP 方案:GLips/Figma-Context-MCP

实际调用包:figma-developer-mcp

接入方式:Cursor 的 Tools & MCP 配置

依赖:Node.js / npm / npx

鉴权方式:Figma Personal Access Token

二、正式接入步骤

1.下载安装cursor

下载地址:https://cursor.com/cn/download。这一步比较简单,都使用默认设置就行

安装成功启动后就是这样一个页面:

PS:界面设置为中文的方式(不能全中文,最多设置部分中文)

按CTRL+shift+X,唤起操作侧面板,然后按下图操作。下载语言插件后会提示重启软件。

你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

2.安装 Node.js

下载地址:https://nodejs.org/。注意要选择下载 LTS 版本、 .msi 安装包。

双击打开msi文件,安装时建议这样选(一般不用改任何高级选项)

  • Next
  • 勾选 I accept the terms...
  • Next
  • 安装路径默认即可
  • Next
  • Next
  • Install

安装完成后关闭所有终端窗口、关闭 Cursor;

cmd打开终端窗口,然后依次执行下面三条命令,如果都有返回版本号就是成功了:

powershell 复制代码
node -v
npm -v
npx -v

3.生成 Figma Token

先在 Figma 里生成 Personal Access Token,让 MCP 有权限访问 Figma 文件数据

注意:1.Figma需要是develper或者full席位才支持;2.token 要保管好,别随手贴群里,别直接发给别人!!

打开桌面端figma,从头像点击settings→找到security→下滑找到generate new token→勾选各类读取权限并保存→copy token



4.再Cursor 配置 MCP

打开settings,找到 Tools & MCPs,添加MCP Sever

把下面内容加到 Cursor 的 Tools & MCP 配置里,把 YOUR_FIGMA_TOKEN 替换成自己的 token:

复制代码
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_FIGMA_TOKEN",
        "--stdio"
      ]
    }
  }
}

保存后看到有个绿色点就是成功了

三、接通后的推荐使用方式

不要一上来就让 Cursor "根据 Figma 输出一份完美 PRD"。先做低风险测试。

推荐先让它做这个:

读取这个 Figma 链接,输出页面结构、模块划分、按钮、表单字段、状态信息,不要生成代码。

如果这一步能正常输出,说明:MCP 通了、token 有效、Cursor 能拿到 Figma 数据

再进一步让它做:

基于这个 Figma 页面输出一份完整 PRD,包含:背景、目标、用户、页面结构、字段说明、交互规则、状态流转、异常处理、埋点建议、验收标准。

这样排错成本更低,不至于一失败就完全不知道是哪一层炸了。

相关推荐
xiaoshuaishuai82 小时前
C# 实现Workstation相关功能
开发语言·windows·c#
水饺编程2 小时前
第5章,[标签 Win32] :GDI 的基本图形
c语言·c++·windows·visual studio
水饺编程2 小时前
第5章,[标签 Win32] :GDI 的其他方面的分类
c语言·c++·windows·visual studio
Ww.xh2 小时前
Windows+Ubuntu混合开发OpenHarmony指南
windows·ubuntu·harmonyos
玖釉-2 小时前
架构师视角:从 NVVK_CHECK 洞悉 Vulkan 渲染引擎的防御性编程哲学
c++·windows·图形渲染
亚空间仓鼠2 小时前
Python学习日志(二):基础语法
windows·python·学习
java叶新东老师2 小时前
解决jetbrains idea 自带终端无法加载windows系统环境变量
java·windows·intellij-idea
charlie1145141913 小时前
通用GUI编程技术——图形渲染实战(三十)——Direct2D几何体系统:从路径到命中测试
开发语言·c++·windows·信息可视化·c·图形渲染·win32
顾喵3 小时前
SRIO通信总线
linux·windows·microsoft