使用Cusor 生成 Figma UI 设计稿

一、开发环境

系统:MacOS

软件版本

Figma(网页或APP版)

注:最好是app版,网页版figma 没有选项 import from manifest

app下载地址:Figma Downloads | Web Design App for Desktops & Mobile

Cursor 0.47.x 及以上

cursor下载地址:Cursor - The AI Code Editor

其他工具:Bun(将自动安装)

二、操作流程

1.下载cursor-talk-to-figma-mcp项目

地址:https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

2.使用cursor打开项目

3.在控制台(项目目录下)安装Bun运行环境:

curl -fsSL https://bun.sh/install | bash

4.配置项目环境:

bun setup

5.启动WebSocket服务:

bun socket

6.启动MCP服务

1.bunx cursor-talk-to-figma-mcp

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

如果不成功可能有些工具没有安装,如:node、npm、

安装typescript依赖:npm install --save-dev typescript @types/node

7.安装figma plugin

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

2、打开Plugins & widgets菜单

3、选择import from manifest选项:

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

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

8.使用Channel编码建立与Figma的连接:

注:直接在 cursor chat 中选 agent 模式,直接告诉 ai 让其和 channel 进行对接,文中有提示词,换成你的 channel 编码即可

9.在聊天界面输入自己的需求就能自动生成UI设计稿了

参考连接:Cusor 使用对话直接生成 Figma UI 设计稿

相关推荐
大千UI工场1 小时前
是时候重启了:AIGC将如何重构UI设计师的学习路径与知识体系?
ui·重构·aigc
安娜的信息安全说1 小时前
Ollama 使用详解:本地部署大语言模型的指南
人工智能·ai·语言模型·ollama
我命由我123455 小时前
Photoshop - Photoshop 工具栏(2)矩形框选工具
经验分享·笔记·学习·ui·photoshop·ps·美工
开心-开心急了12 小时前
主窗口(QMainWindow)如何放入文本编辑器(QPlainTextEdit)等继承自QWidget的对象--(重构版)
python·ui·pyqt
懒惰蜗牛13 小时前
鸿蒙开发3--UI布局(玩转鸿蒙的Row、Column与Stack容器)
ui·华为·harmonyos·鸿蒙·鸿蒙系统
我命由我1234516 小时前
Photoshop - Photoshop 工具库
笔记·学习·ui·职场和发展·职场·photoshop·ps
兰亭妙微19 小时前
兰亭妙微桌面端界面设计优化方案:避免QT开发中的“老旧感”
开发语言·qt·ui·用户体验设计公司·ui设计公司
OopsOutOfMemory1 天前
LangChain源码分析(十三)- 运行时与监控
ai·langchain·aigc·ai编程·ai应用
我命由我123451 天前
Photoshop - Photoshop 工具栏(1)移动工具
笔记·学习·ui·职场和发展·求职招聘·职场发展·photoshop
CoderJia程序员甲1 天前
GitHub 热榜项目 - 日榜(2025-10-03)
ai·开源·大模型·github·ai教程