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

相关推荐
AAA小肥杨10 小时前
探索K8s与AI的结合:PyTorch训练任务在k8s上调度实践
人工智能·pytorch·docker·ai·云原生·kubernetes
FIT2CLOUD飞致云16 小时前
支持CAS身份认证,支持接入Oracle11数据源,SQLBot开源智能问数系统v1.3.0版本发布
ai·数据分析·开源·智能问数·sqlbot
三条猫1 天前
AI 大模型如何给 CAD 3D 模型“建立语义”?
人工智能·机器学习·3d·ai·大模型·cad
Dr.勿忘1 天前
Unity一分钟思路---UI任务条:宝箱位置如何准确卡在百分比位置上
ui·unity·游戏程序·屏幕适配
Destiny_where1 天前
Agent平台-RAGFlow(2)-源码安装
python·ai
这儿有一堆花1 天前
使用 Whisper 转写语音的完整教学
人工智能·ai·whisper
zhojiew1 天前
在ec2上部署indexTTS和尝试部署sparkTTS模型
ai
百度智能云技术站2 天前
百度智能云 X 十字路口 | 对谈王雁鹏:亲述从大数据时代到 3 万卡集群的中国算力演进史
ai·云计算
覆东流2 天前
Photoshop图形工具组与图层样式
ui·photoshop
容沁风2 天前
Chartjs画二氧化碳浓度曲线
ai·esp32·micropython·二氧化碳传感器