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

相关推荐
speedoooo1 天前
在现有App里嵌入一个AI协作者
前端·ui·小程序·前端框架·web app
霍格沃兹测试学院-小舟畅学1 天前
Playwright MCP在UI自动化测试中的定位与思考
ui
哥布林学者1 天前
吴恩达深度学习课程四:计算机视觉 第二周:经典网络结构 (三)1×1卷积与Inception网络
深度学习·ai
Just_Paranoid1 天前
【Android UI】Android 颜色的表示和获取使用指南
android·ui·theme·color·attr·colorstatelist
丹宇码农1 天前
Index-TTS2 从零到一:完整安装与核心使用教程
人工智能·ai·tts
恶猫1 天前
SEELEN UI 桌面自定义工具 v2.3 介绍及安装教程, 深度美化win10/11,装机必备!!
ui·win11·win10·系统优化·桌面·桌面美化·桌面自定义
undsky_1 天前
【RuoYi-SpringBoot3-Pro】:接入 AI 对话能力
人工智能·spring boot·后端·ai·ruoyi
HalvmånEver1 天前
AI 工具实战测评:从技术性能到场景落地的全方位解析
人工智能·ai
speedoooo1 天前
未来的App不再需要菜单栏?
前端·ui·容器·小程序·web app
weixin_446260851 天前
shadcn/ui - 打造个性化组件库的利器
ui