cursor接上figma mcp ，图形图像模式傻瓜式教学（包教包会版）

工边页字2026-03-25 9:50

前言

包教包会！

其实这个技术出来有段时间了，但是感觉推广度不够，我看在很多程序员里还是在手工写css和样式。如果你用的是figma的话，今天教给大家一个ai 几乎95%设计稿还原的方法。

为了照顾萌新同学，本文全程用图形图像来进行配置教程

开始！！！

第一步：创建figma token

然后点击 Generate，创建成功

再次强调，key一定要复制好，只有一次机会

第二步：配置cursor的figma mcp

按 Cmd + Shift + P，输入 MCP，选择「Open MCP setting」。如下

点击新增以后你就会弹出一个 mcp.json文件

把这段配置复制进去，配置我写在下面，注意token替换下

json 复制代码

{
    "mcpServers": {
        "Framelink Figma MCP": {
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp",
                "--figma-api-key=你的figma token",
                "--stdio"
            ]
        }
    }
}

第三步：尝试让cursor帮你做

先去你的figma项目里复制一个url过来，如下

然后回到cursor,如果你是免费用户 （没有购买cursor的情况下），模型记得选 "auto"

然后直接把url复制进对话会进行对话就好

最后我们看看还原度

有条件的不要使用免费模型，auto模型有时候和弱智有的一拼

最后

如果对你有用的话

点赞收藏吃灰去呀~