Cursor 使用对话的方式直接生成 Figma 设计稿
Eric探索通过 MCP 协议实现 Cursor 对话直出 Figma 设计文件，支持自动排版、图层规范化与高质量设计交付。
本文介绍如何通过MCP协议实现Cursor与Figma的直接对话，让AI自动生成高质量设计文件。相比之前使用HTML格式生成原型图，这种方式能够直接在Figma中创建可编辑的专业设计稿。
环境准备
- 系统要求：MacOS
- 软件版本：
- Figma（APP版）
- Cursor 0.47.x 及以上
- 其他工具：Bun（将自动安装）
操作流程
一、配置MCP服务器
执行以下命令来设置服务器环境：
# 克隆项目仓库
git clone git@github.com:sonnylazuardi/cursor-talk-to-figma-mcp.git
# 进入项目目录
cd cursor-talk-to-figma-mcp
# 使用Cursor打开项目
cursor .
# 安装Bun运行环境
curl -fsSL https://bun.sh/install | bash
# 配置项目环境
bun setup
# 启动WebSocket服务
bun socket服务启动成功后，终端将显示如下信息：
二、Figma插件配置
1、在Figma中新建一个Drafts文件
2、打开Plugins & widgets菜单
3、选择import from manifest选项：
4、选择克隆项目中的manifest.json文件：
5、导入后运行插件并记录Channel编码（如图中的"f4hjygha"）：
三、Cursor配置与使用
1、打开Cursor设置面板，在MCP部分启用服务：
2、使用Channel编码建立与Figma的连接：
3、使用以下提示词模板（可根据需求调整）：
你是一名资深UI/UX设计专家，拥有丰富的健身应用设计经验，精通苹果人机界面设计指南。你的任务是帮助一位初中生用户完成一个"健身普拉提"iOS App的原型设计。
请按照以下要求输出一套完整的高质量APP原型图：
1. 设计目标
- 创建符合苹果人机界面指南(Human Interface Guidelines)的iOS原生风格设计
- 面向普拉提健身初学者到中级用户，设计简洁直观的界面
- 确保原型图能直观展示APP的功能流程和用户体验
2. 用户需求分析
- 明确目标用户群体：希望通过普拉提改善姿势、增强核心力量的用户
- 用户痛点：缺乏专业指导、不知如何正确练习、难以坚持训练计划
- 用户期望：直观的动作演示、个性化训练计划、进度追踪和成就激励
3. 功能规划
- 主页：提供快速访问训练、进度和个人资料的入口
- 训练库：分级别展示普拉提动作，配有详细视频指导
- 训练计划：提供个性化训练计划和每日推荐
- 进度追踪：记录训练历史和身体变化
- 社区功能：分享成就、获取激励
- 设置：个人信息管理、通知设置等
4. 设计规范
- 使用最新的iOS设计元素和交互模式
- 遵循iPhone 16 Pro尺寸规格(宽度393px)
- 采用明亮、活力的配色方案，符合健身应用氛围
- 重视无障碍设计，确保文字对比度和交互区域大小合适
- 使用简洁清晰的图标和插图风格
5. 原型图呈现要求
- 使用Figma创建所有设计稿
- 为每个功能设计一个到两个屏幕，如：登录/注册、主页、训练库、进度追踪、社区功能、设置
- 每行最多排列三个屏幕，之后换行继续展示
- 为每个屏幕添加设备边框和阴影，不要遮住屏幕内的内容
- 为每个屏幕添加简短说明，解释其功能和设计考虑
请首先展示APP的信息架构和用户流程图，然后按照关键用户旅程逐一呈现高保真原型屏幕，最后提供设计规范概述。注意：设计生成过程约需5-10分钟，期间可以先做其他事情。
4、设计生成后，可以通过多模态功能（截图+文字描述）让Claude 3.7进行调整优化。
效果展示
Cursor执行MCP调用过程：
Figma设计稿成果：
完整设计稿可查看：Figma社区文件
使用体验与建议
实际体验总结：
- 提示词质量至关重要：精心优化的提示词能产生更专业的设计结果。非设计专业人士建议提供更详细的设计需求和参考。
- 设计质量对比：目前生成的UI相对简约，比起HTML方式生成的原型图可能不够精致，但优势在于可直接在Figma中编辑和完善。
- 技术展望：MCP协议仍处于发展阶段，未来有望生成更高质量的设计稿。
延伸阅读
- Cursor与Git协同工作指南
- Cursor AI提示词编写技巧总结
- Cursor必学的AI交互快捷键
- Cursor中Claude 3.7 vs 3.5前端开发对比
- Cursor Rules最佳实践总结
- 从0到1：完全用Cursor开发Web应用的真实体验
- 零基础3步生成专业原型图！Cursor+Claude3.7教程
- 零基础入门：5步掌握Cursor AI编辑器基础操作
原型设计与架构图表专题推荐
如果你对使用 Cursor 高效生成原型图、设计稿与架构图感兴趣，推荐阅读：
- 零基础 3 步生成专业原型图！Cursor + Claude 3.7 保姆级教程（附模板）
- Cursor + PlantUML：告别手写 SQL 的高效工作流
- Cursor 结合 PlantUML 绘制架构图实践
- 用 Cursor 一步搞定 UI 原型图：有交互、可扩展、易维护（附教程）
👉 查阅更多实战技巧，欢迎访问 Cursor 专栏完整目录。
