Cursor+MCP To figma（cursor中使用figma的mcp服务快速还原页面）

一、准备工作

1、Figma账号：前往Figma官网自行注册；

2、本地Curosr应用安装

3、Figma-MCP服务

二、快速开始

1、获取Figma的用户token

    进入figma官网并完成登录，然后在左上角点击个人信息中的setting按钮进入设置页面；

    然后在设置页面选择security标签并在下面找到Generate new token；

    点击创建一条新的token

    完成创建之后复制token内容并保存。

2、直接访问网址https://mcp.so/server/f2c-mcp-server/f2c-ai复制下面的代码

3、在cursor中添加MCP服务，把上面复制到的MCP服务代码粘贴到cursor，然后替换代码中的personalToken为我们保存的Figma用户token保存即可

三、实际应用

1、打开figma找到需要开发的项目页面，选中页面并复制页面链接

2、页面链接粘贴到cursor聊天框内，并要求在项目内还原页面（如果是vue/uni-app项目的话先创建项目）

3、查看效果

至此，我们就成功的配置了Figma的MCP服务，通过这个服务加上cursor的AI能力可以实现简单页面的代码生成，并且能够自己抓取到设计图上的切图并保存到项目的资源文件夹内。但是缺点是只能基于Figma来完成，并且对于设计图规范要求较高。