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

相关推荐
kkai人工智能1 小时前
解决开发者技能差距:AI 在提升效率与技能培养中的作用
开发语言·人工智能·ai·chatgpt·媒体
Hare_bai2 小时前
WPF的基础控件:布局控件(StackPanel & DockPanel)
ui·c#·wpf·交互·xaml·visual studio
benben0443 小时前
Photoshop使用钢笔绘制图形
ui·photoshop
小于小于大橙子5 小时前
强化学习的前世今生(五)— SAC算法
人工智能·算法·ai·自动驾驶·概率论·强化学习
soldierluo6 小时前
window10下docker方式安装dify步骤
ai
Hare_bai6 小时前
WPF的交互核心:命令系统(ICommand)
ui·c#·wpf·交互·xaml
keke108 小时前
WPF【11_11】WPF实战-重构与美化(配置Material UI框架)-示例
ui·重构·wpf
向宇it18 小时前
【unity游戏开发——编辑器扩展】EditorApplication公共类处理编辑器生命周期事件、播放模式控制以及各种编辑器状态查询
开发语言·ui·unity·编辑器·游戏引擎
向宇it18 小时前
【unity游戏开发——编辑器扩展】AssetDatabase公共类在编辑器环境中管理和操作项目中的资源
游戏·ui·unity·编辑器·游戏引擎
benben04419 小时前
Unity3D仿星露谷物语开发55之保存游戏到文件
游戏·ui·unity·游戏引擎