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

相关推荐
userkang2 小时前
消失的前后端,崛起的智能体
前端·人工智能·后端·ai·硬件工程
孔令飞3 小时前
使用 Go 与 Redis Streams 构建可靠的事件驱动系统
redis·ai·云原生·golang·kubernetes
Funny_AI_LAB4 小时前
大模型图像编辑那家强?
图像处理·计算机视觉·ai·语言模型
OJAC近屿智能7 小时前
新增29个专业,科技成为未来主赛道!
人工智能·科技·ai·机器人·aigc·近屿智能
GPUStack10 小时前
GPUStack v0.5:模型Catalog、图生图功能上线,多维优化全面提升产品能力与使用体验
ai·大模型·llm·genai·gpu集群
乌旭16 小时前
量子计算与GPU的异构加速:基于CUDA Quantum的混合编程实践
人工智能·pytorch·分布式·深度学习·ai·gpu算力·量子计算
ʚʕ̯•͡˔•̯᷅ʔɞ LeeKuma18 小时前
探索具身智能协作机器人:技术、应用与未来
ai·协作机器人·具身智能机器人
AI蜗牛车1 天前
【LLM+Code】Windsurf Agent 模式Prompt&Tools详细解读
ai·大模型·llm·agent
chegan1 天前
用c#从头写一个AI agent,实现企业内部自然语言数据统计分析(二)-数据结构和代码分析方法
ai·c#·agent