Cursor Figma MCP 互联网最全安装指南

欢迎大家加 jianzhangg 进群一起讨论 AI。本文涉及的所有文件均在群中。

今天演示如何使用 talk-to-figma 用大白话生成设计稿,本教程目的是提效,能快速从 0 到 1 生成大致的设计稿,后续人工或者 AI 针对细节调整都很方便。我们最开始用的 SVG 设计图,但是对非编程人员,太过复杂不好迭代,样式也不好改。

以下用 Cursor + MCP + Windows 演示。

本文所需的四个文件

  • Cursor 软件。
  • Figma 桌面端软件。
  • Github talk-to-figma 源码,也是 Figma 的插件。
  • Bun 软件,使用 PowerShell 安装。
  • Node 软件,win 可以用 nvm 安装。

安装 Node

nvm 可以方便的切换 Node 版本,比直接在 Node 官网安装更加方便快捷。

打开 nvm-windows ,下载 nvm-setup.exe

注意别点错了,是 Assets 里面的。

安装后关闭所有 PowerShell 再重新打开,依次执行 nvm install 20.19.0nvm use 20.19.0,都安装完成后执行 node -v,出现下图所示的版本号说明安装成功。

安装 Bun

使用 PowerShell 按照 Bun。你可以用快捷键 Win+X,再按 A 。再输入 powershell -c "irm bun.sh/install.ps1|iex"。稍等片刻,直到安装完成。

安装 Figma 客户端

打开 Figma 官网登录自己账号后,点击如图所示的按钮下载。

打开软件后跳转浏览器继续登录自己的 Figma 账号。

安装 Figma 插件

打开cursor-talk-to-figma-mcp的 github 地址,下载文件。

进入解压后的文件夹,在此目录按住 Shift 再右键,打开 PowerShell 执行 bun socket,出现下图情况说明成功。

再打开 Figma 客户端,随便打开或者创建个设计文档,在文档上右键,依次点到 omport plugin from mainfest...

选择解压目录中的 mainfest.json。

这时设计文件就会出现此插件,点击打开。

注意有个 channel lf99dj4w,这是让 Cursor 定位 Figma 涉及文件用的,每次重启 channel 都会变,下面会用到。

Cursor 中安装 MCP

打开设置,依次点击 MCP、Add new....

首次没有文件点击编辑器中的创建文件,把以下内容复制到文件夹中。

json 复制代码
{
    "mcpServers": {
        "TalkToFigma": {
            "command": "cmd /c",
            "args": [
                "npx",
                "cursor-talk-to-figma-mcp@latest"
            ]
        }
    }
}

这是 Windows 的配置,和 Mac 不一样,Mac 用 talk-to-figma github 中的。

保存文件后再次进入设置,如果像我一样这里有个绿色小点,下面有一堆指令,还打开了个 cmd 说明安装成功。

不行就多点几次刷新,重启下 Cursor,还不行进群里问。

打开 Cursor agent,开始聊天,先连上 channel。

用大白话让他随意画几张图,以下是 demo 演示。

手机 App 的也能做。

相关推荐
巴塞罗那的风1 天前
如何手搓一个查询天气的mcp server
python·mcp·roo code
丁劲犇1 天前
基于Qt的MCP LLM代理服务开发实战:从0到1扩展大语言模型
c++·qt·llm·agent·httpserver·mcp
郑知鱼1 天前
【拥抱鸿蒙】Flutter+Cursor轻松打造HarmonyOS应用(二)
flutter·华为·harmonyos·鸿蒙·cursor·移动端·鸿蒙next·ohos
HuggingFace2 天前
参加 Hugging Face 组织的 Gradio & MCP 智能体主题黑客松
gradio·黑客松·智能体·mcp
郑知鱼2 天前
【拥抱鸿蒙】Flutter+Cursor轻松打造HarmonyOS应用(一)
flutter·华为·harmonyos·鸿蒙·cursor·移动端·鸿蒙next·ohos
奔跑的皮皮虾3 天前
cursor 安装 cline 调试 mcp
cursor·mcp
平头某3 天前
如何在 Django 中集成 MCP Server
人工智能·django·mcp
菜鸟分享录4 天前
将MCP(ModelContextProtocol)与Semantic Kernel集成(调用github)
ai·.netcore·semantic kernel·mcp
不老刘5 天前
左手腾讯CodeBuddy 、华为通义灵码,右手微软Copilot,旁边还有个Cursor,程序员幸福指数越来越高了
copilot·cursor·codebuddy
大路oo5 天前
解决 cursor 中不能进入 conda 虚拟环境
windows·经验分享·conda·cursor