使用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 设计稿

相关推荐
pythonqiang91 小时前
Axure下载安装教程(附安装包)Axure RP 11 超详细下载安装教程
其他·ui·axure·photoshop
我不是程序猿儿3 小时前
【C#】观察者模式 + UI 线程调度、委托讲解
观察者模式·ui·c#
今天也要学习吖4 小时前
Azure TTS Importer:一键导入,将微软TTS语音接入你的阅读软件!
人工智能·学习·microsoft·ai·大模型·aigc·azure
Kingsdesigner6 小时前
我用Photoshop Firefly+Blender,拯救被环境毁掉的人像大片
图像处理·ui·adobe·社交电子·blender·传媒·photoshop
xiangzhihong817 小时前
Figma 开源替代品 Penpot 安装与使用
开源·figma
板板正19 小时前
SpringAI——向量存储(vector store)
java·spring boot·ai
即兴小索奇19 小时前
【无标题】
人工智能·ai·商业·ai商业洞察·即兴小索奇
AlfredZhao21 小时前
手把手教你打造一个更懂你的AI翻译助手!
ai·agent·翻译·智能体·translation
TDengine (老段)21 小时前
TDengine IDMP 最佳实践
大数据·数据库·物联网·ai·时序数据库·tdengine·涛思数据
星域智链1 天前
车载 GPS 与手机导航的终极对决:谁在复杂路况下更胜一筹?
大数据·科技·ai