使用cursor-talk-to-figma-mcp 生成设计稿

1、前言

cursor-talk-to-figma-mcp 是一个集成 Cursor AI 和 Figma 的工具，主要作用如下：

1. 实现 Model Context Protocol (MCP) 集成，让 Cursor AI 能够与 Figma 进行通信
2. 允许 Cursor AI 读取 Figma 设计并通过代码方式修改它们
3. 支持丰富的设计操作功能：

• 获取文档和选择信息
• 创建设计元素（矩形、框架、文本等）
• 修改样式（填充颜色、描边、圆角等）
• 管理布局（移动、调整大小、克隆、删除节点）
• 处理组件和样式
• 导出节点为图像

通过这个工具，开发者可以让 AI 直接与设计工具交互，实现设计-代码之间的自动化流程，比如可以用自然语言描述设计需求，让 AI 直接在 Figma 中实现出来。项目包括三个主要部分：MCP 服务器、Figma 插件和 WebSocket 服务器，三者协同工作使 Cursor AI 能够控制 Figma。

2、部署步骤

Cursor Talk to Figma MCP 安装步骤总结

1. 获取项目代码

• GitHub搜索并下载”cursor talk to figma mcp”项目

1. 安装环境

• 安装Bun运行时：curl -fsSL https://bun.sh/install | bash

1. 配置项目

• 进入项目目录：cd [项目路径]
• 安装MCP到Cursor：bun setup
• 启动WebSocket服务器：bun socket

1. Cursor配置

• 打开Cursor设置
• 添加MCP全局服务器
• 配置服务器地址

1. Figma插件安装

• 在Figma中导入插件（菜单→插件→开发→导入插件）
• 选择项目中的插件文件
• 运行插件并获取Channel代码

1. 连接Cursor与Figma

• 在Cursor对话框输入”talk to figma”
• 输入Figma插件提供的Channel代码完成连接

完成上述步骤后，就可以使用AI通过Cursor直接操控Figma创建设计原型了。