Cursor Talk To Figma MCP开发环境搭建：Windows与WSL配置

【免费下载链接】cursor-talk-to-figma-mcp Cursor Talk To Figma MCP 【免费下载链接】cursor-talk-to-figma-mcp 项目地址: https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp

引言：跨平台开发的痛点与解决方案

你是否在Windows系统下搭建Figma与Cursor的AI协作环境时遇到过各种兼容性问题？WSL（Windows Subsystem for Linux）的出现为这一问题提供了完美解决方案。本文将详细介绍如何在Windows与WSL环境下搭建Cursor Talk To Figma MCP（Model Context Protocol，模型上下文协议）开发环境，让你轻松实现AI驱动的设计自动化工作流。

读完本文后，你将能够：

  • 在Windows系统中正确配置WSL开发环境
  • 解决跨平台路径与网络通信问题
  • 完成MCP服务器、WebSocket服务和Figma插件的安装与配置
  • 运行并测试完整的AI-Figma协作流程
  • 解决常见的环境搭建故障

环境准备：系统要求与依赖项

系统要求

环境 最低配置 推荐配置
Windows Windows 10 2004或更高版本 Windows 11专业版
WSL WSL 2 WSL 2 Ubuntu 22.04 LTS
硬件 4核CPU，8GB内存，50GB空闲空间 8核CPU，16GB内存，100GB SSD
网络 稳定互联网连接 千兆网络

必要依赖工具

工具 版本要求 作用
Node.js v18.0.0+ JavaScript运行时环境
Bun v1.0.0+ 快速的JavaScript运行时和包管理器
Git v2.30.0+ 版本控制系统
TypeScript v5.0.0+ TypeScript编译器
Figma桌面版 最新版 UI设计工具
Cursor 最新版 AI代码编辑器

WSL环境配置：从启用到优化

启用WSL功能

  1. 以管理员身份打开PowerShell
  2. 执行以下命令启用WSL和虚拟机平台功能：
wsl --install
  1. 系统会自动安装WSL 2和Ubuntu发行版
  2. 安装完成后重启电脑

注意：如果你的系统不支持wsl --install命令（Windows 10版本低于2004），需要手动启用WSL功能：

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

然后下载并安装WSL 2 Linux内核更新包

安装与配置Ubuntu

  1. 从Microsoft Store安装Ubuntu 22.04 LTS
  2. 首次启动Ubuntu，设置用户名和密码
  3. 更新系统包：
sudo apt update && sudo apt upgrade -y
  1. 安装必要的系统工具：
sudo apt install -y build-essential libssl-dev libffi-dev python3-dev

配置WSL与Windows文件系统互通

WSL可以通过/mnt/<盘符>/路径访问Windows文件系统，例如：

# 访问Windows的C盘用户目录
cd /mnt/c/Users/<你的用户名>/

为了方便开发，建议将项目克隆到WSL文件系统中（如~/projects/目录），以获得更好的性能。

配置Git与SSH（可选）

# 安装Git
sudo apt install -y git

# 配置Git用户名和邮箱
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

# 生成SSH密钥（如果需要通过SSH克隆仓库）
ssh-keygen -t ed25519 -C "你的邮箱"

项目获取与基础依赖安装

克隆项目仓库

# 创建项目目录
mkdir -p ~/projects && cd ~/projects

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp.git

# 进入项目目录
cd cursor-talk-to-figma-mcp

安装Bun运行时

Bun是项目推荐的JavaScript运行时，安装命令如下：

# 在WSL中安装Bun
curl -fsSL https://bun.sh/install | bash

# 将Bun添加到环境变量
source ~/.bashrc

注意：在Windows PowerShell中安装Bun的命令为：

powershell -c "irm bun.sh/install.ps1|iex"

验证Bun安装是否成功：

bun --version

应输出类似1.0.0的版本号。

安装项目依赖

# 安装根目录依赖
bun install

# 安装子项目依赖
cd src/talk_to_figma_mcp && bun install && cd ../..

核心组件配置：MCP服务器与WebSocket服务

项目结构解析

cursor-talk-to-figma-mcp/
├── Dockerfile           # Docker配置文件
├── package.json         # 项目依赖配置
├── src/
│   ├── socket.ts        # WebSocket服务器实现
│   └── talk_to_figma_mcp/
│       ├── server.ts    # MCP服务器主文件
│       └── package.json # 子项目依赖配置
└── scripts/
    └── setup.sh         # 项目设置脚本

WebSocket服务器配置（WSL环境关键步骤）

  1. 编辑WebSocket服务器源代码：
nano src/socket.ts
  1. 找到并取消注释以下行以允许外部连接：
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
  1. 保存并退出编辑器（Ctrl+O, Enter, Ctrl+X）

为什么需要此步骤？WSL默认绑定到localhost（127.0.0.1），只允许WSL内部访问。设置hostname: "0.0.0.0"后，WebSocket服务将绑定到所有网络接口，使Windows主机和Figma插件能够连接。

MCP服务器配置

  1. 运行项目设置脚本：
bun run setup
  1. 将MCP服务器添加到Cursor配置中：
# 创建Cursor MCP配置目录
mkdir -p ~/.cursor

# 编辑MCP配置文件
nano ~/.cursor/mcp.json
  1. 添加以下配置内容：
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Windows与WSL网络互通配置

网络架构解析

mermaid

获取WSL IP地址

在WSL终端中执行：

ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}/\d+' | cut -d/ -f1

输出类似172.28.123.45的IP地址，记录此地址。

防火墙配置（如果需要）

如果Figma插件无法连接到WSL中的WebSocket服务，可能需要配置防火墙规则：

# 在Windows PowerShell中执行
New-NetFirewallRule -DisplayName "Allow WSL WebSocket" -Direction Inbound -LocalPort 3055 -Protocol TCP -Action Allow

Figma插件安装与配置

本地插件安装

  1. 打开Figma桌面应用

  2. 点击顶部菜单：Plugins > Development > New Plugin

  3. 选择Link existing plugin选项

  4. 导航到项目中的插件清单文件：

    在WSL中的路径类似：~/projects/cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json

    对应的Windows路径类似：\\wsl$\Ubuntu\home\<你的用户名>\projects\cursor-talk-to-figma-mcp\src\cursor_mcp_plugin\manifest.json

  5. 点击"Select"完成插件链接

插件连接到WebSocket服务

  1. 在Figma中，打开任意设计文件
  2. 运行插件：Plugins > Development > Cursor MCP Plugin
  3. 在插件界面中，输入WebSocket连接信息：
    • 服务器地址：WSL的IP地址（如172.28.123.45）
    • 端口：3055
    • 频道名称：任意名称（如figma-ai-channel）
  4. 点击"Connect"按钮连接到WebSocket服务

服务启动与验证

启动WebSocket服务器

# 在WSL终端中
cd ~/projects/cursor-talk-to-figma-mcp
bun run socket

成功启动后，应看到类似输出：WebSocket server running on port 3055

启动MCP服务器

# 在新的WSL终端中
cd ~/projects/cursor-talk-to-figma-mcp
bun start

成功启动后，应看到MCP服务器初始化信息。

验证服务连接

  1. 在Cursor中，打开命令面板（Ctrl+Shift+P或Cmd+Shift+P）
  2. 输入并选择MCP: List Available Tools
  3. 如果配置成功，应看到一系列Figma相关工具，如get_document_info、create_rectangle等

完整工作流测试：AI驱动的设计自动化

测试场景：批量文本替换

  1. 在Figma中创建一个包含多个文本元素的设计
  2. 在Cursor中打开命令面板
  3. 选择MCP: TalkToFigma: scan_text_nodes工具
  4. 等待扫描完成后，使用set_multiple_text_contents工具批量替换文本内容
  5. 观察Figma中的文本是否按指令更新

测试场景：创建基本设计元素

在Cursor中输入以下MCP指令：

使用create_frame创建一个200x300的框架，位置在(100, 100)
然后在框架内使用create_text创建文本"Hello AI"，大小16
最后使用set_fill_color将框架背景设为蓝色

检查Figma中是否按指令创建了相应元素。

常见问题解决与优化建议

连接问题排查流程

mermaid

性能优化建议

  1. 启用WSL的系统资源限制（可选）：
# 在Windows用户目录创建.wslconfig文件
notepad $env:USERPROFILE\.wslconfig

添加以下内容：

[wsl2]
memory=8GB   # 分配8GB内存给WSL
processors=4 # 分配4个CPU核心给WSL
  1. 使用WSL中的项目文件而非Windows文件系统，以获得更好的性能
  2. 定期清理node_modules缓存：
bun clean cache

常见错误及解决方法

错误信息 可能原因 解决方法
Error: connect ECONNREFUSED WebSocket服务未运行或IP/端口错误 确保bun run socket正在运行，并使用正确的WSL IP
Plugin not found Figma插件未正确链接 重新链接插件manifest.json文件
MCP tools not available MCP服务器未正确配置 检查~/.cursor/mcp.json配置
Bun: command not found Bun未安装或未添加到PATH 重新安装Bun并确保~/.bashrc中包含Bun路径

项目构建与开发

构建项目

# 构建项目
bun run build

# 开发模式（自动重新构建）
bun run dev

修改与扩展

如果需要修改源代码并测试：

# 修改代码后重新构建
bun run build

# 重启服务
bun run socket
# 在新终端中
bun start

总结与后续步骤

回顾关键配置步骤

  1. 安装WSL和Ubuntu
  2. 安装Bun和项目依赖
  3. 配置WebSocket服务以允许跨平台连接
  4. 设置MCP服务器和Cursor集成
  5. 安装并配置Figma插件
  6. 验证服务连接和功能

高级应用场景

  1. 设计系统自动化：使用MCP工具批量更新组件库
  2. 内容驱动设计：从API获取内容并自动更新Figma设计
  3. 设计反馈收集：将Figma评论自动转换为任务
  4. 多文件设计同步：保持不同Figma文件中的组件同步

保持更新

# 拉取最新代码
git pull

# 更新依赖
bun install

# 重新构建
bun run build

通过以上步骤，你已经成功在Windows与WSL环境下搭建了Cursor Talk To Figma MCP开发环境。这个强大的工具组合将为你带来AI驱动的设计自动化能力，大幅提升设计与开发效率。

如果你在使用过程中遇到任何问题，欢迎查看项目的README文档或提交issue获取帮助。

祝你的AI设计之旅愉快！

【免费下载链接】cursor-talk-to-figma-mcp Cursor Talk To Figma MCP 【免费下载链接】cursor-talk-to-figma-mcp 项目地址: https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp

Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

DeepSeek 长上下文管理：从截断到会话外存的工程取舍

avatar DeepSeek技术社区
cover

DeepSeek-V4 推理服务冷启动优化：mmap 与极速冷启的工程实践

avatar DeepSeek技术社区
cover

多租户LLM推理网关：配额熔断与密钥管理的工程陷阱

avatar DeepSeek技术社区