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

相关推荐
刘 怼怼4 小时前
Element UI 表格中实现搜索关键字高亮的
vue.js·ui·elementui
19897 小时前
【Dify精讲】第14章:部署架构与DevOps实践
运维·人工智能·python·ai·架构·flask·devops
Code_流苏9 小时前
吴恩达:从斯坦福到 Coursera,他的深度学习布道之路
人工智能·深度学习·机器学习·ai·coursera·吴恩达
Rolei_zl15 小时前
质量小议55 - 搜索引擎与AI
ai·质量
lgbisha17 小时前
华为云Flexus+DeepSeek征文|体验华为云ModelArts快速搭建Dify-LLM应用开发平台并创建天气预报大模型
人工智能·ai·语言模型·自然语言处理·华为云
大模型学习原理1 天前
不同AI架构如何选择?单Agent+MCP“与“多Agent“架构对比分析!
人工智能·ai·语言模型·架构·大模型·agent·ai大模型
Apipost的同学们1 天前
高效调试 AI 大模型 API:用 Apipost 实现 SSE 流式解析与可视化
ai·大模型·apipost功能介绍·apipost sse·api开发最佳实践
爱刘温柔的小猪1 天前
FastMCP框架进行MCP开发:(二)图书馆座位查询与预约MCP-Server
ai·mcp
在未来等你1 天前
Java企业技术趋势分析:AI驱动下的Spring AI、LangChain4j与RAG系统架构
java·spring·ai·编程·技术
~蓝桉1 天前
智能群跃小助手发布说明
ai