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

相关推荐
AI360labs_atyun5 小时前
腾讯推出电子牛马Marvis,好用吗?
人工智能·科技·ai
Front思6 小时前
AI前端工程师需要具备能力+
前端·人工智能·ai
ZC跨境爬虫8 小时前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
Smartdaili China9 小时前
OpenClaw赋能AI智能体:实时联网与网页抓取
人工智能·爬虫·ai·爬取·openclaw·open claw
运维栈记9 小时前
API Error: 400 Request body format invalid
linux·ai
实在智能RPA9 小时前
AI Agent在制造业预测性维护上的算法精度怎样验证?深度拆解2026工业智能体实测表现
人工智能·ai
我是大AI9 小时前
搜极星 GEO:让 AI 精准推荐,品牌不再隐形
大数据·人工智能·ai
Agent手记10 小时前
电信运营商如何用AI实现携号转网自动处理?基于实在Agent的业务自动化落地与TARS大模型解析方案
运维·人工智能·ai·自动化
实在智能RPA11 小时前
AI Agent是否能处理医药研发数据中多种格式的文档?深度解析2026年智能体在生物医药领域的应用边界
人工智能·ai
创世宇图11 小时前
Claude Opus 4.8 深度实测:动态多 Agent 协同、Effort Control 与幻觉抑制的工程化解析
ai·llm·agent·claude·ai工程化