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

相关推荐
番茄不是西红柿kk2 小时前
什么是Token?
人工智能·ai·chatgpt·agent·token·codex·deepseek
乐之者v4 小时前
AI人工智能--DeepSeek Harness 选择哪种模式?
人工智能·ai
NPE~4 小时前
[图挖掘]GCN模型训练——从0到1
人工智能·ai·数据挖掘·教程·风控·图挖掘
盛夏绽放5 小时前
Proxy与Reflect详解(二):进阶篇——手写Vue3响应式系统
ui·vue3·proxy
xqqxqxxq5 小时前
AI Agent学习:打通真实世界:Agent 工具分类与设计原则(李博杰《深入理解 AI Agent》4.1 4.2观后总结)
学习·ai
造火箭5 小时前
Android UI自动化测试可行性评估SKILL
android·功能测试·ui
GISer_Jing7 小时前
全栈AI实战:基于 TypeScript + LangChain + MCP 的企业级智能研发助手
前端·后端·ai·langchain·前端框架
VIP_CQCRE7 小时前
Ace Data Cloud 两条变现路径:推广平台,还是做自己的白标 AI 平台?
ai·aigc·api·开发者·云服务
love530love7 小时前
虚拟显示驱动导致 Photoshop / Camera Raw 卡死?OrayIddDriver 的锅
运维·人工智能·ui·photoshop·orayidddriver·hags 调度
Ai-_Man7 小时前
豆包智能体把对话批量导出为Word或PDF的正确顺序
人工智能·ai·小程序·pdf·word