文章

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 start

服务启动成功后,终端将显示如下信息:

服务器启动成功

二、Figma插件配置

1、在Figma中新建一个Drafts文件

2、打开Plugins & widgets菜单

3、选择import from manifest选项:

导入插件

4、选择克隆项目中的manifest.json文件:

选择manifest文件

5、导入后运行插件并记录Channel编码(如图中的"f4hjygha"):

记录Channel编码

三、Cursor配置与使用

1、打开Cursor设置面板,在MCP部分启用服务:

启用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调用过程:

MCP调用过程1

MCP调用过程2

Figma设计稿成果:

设计稿展示1

设计稿展示2

设计稿展示3

设计稿展示4

完整设计稿可查看:Figma社区文件

使用体验与建议

实际体验总结:

  • 提示词质量至关重要:精心优化的提示词能产生更专业的设计结果。非设计专业人士建议提供更详细的设计需求和参考。

  • 设计质量对比:目前生成的UI相对简约,比起HTML方式生成的原型图可能不够精致,但优势在于可直接在Figma中编辑和完善。

  • 技术展望:MCP协议仍处于发展阶段,未来有望生成更高质量的设计稿。

延伸阅读


欢迎关注我的公众号"Eric技术圈",原创技术文章第一时间推送。

License:  CC BY 4.0