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

相关推荐
运器12310 小时前
【一起来学AI大模型】PyTorch DataLoader 实战指南
大数据·人工智能·pytorch·python·深度学习·ai·ai编程
共享ui设计和前端开发人才17 小时前
UI前端与数字孪生结合案例分享:智慧城市的智慧能源管理系统
前端·ui·智慧城市
小眼睛FPGA1 天前
【RK3568+PG2L50H开发板实验例程】FPGA部分 | DDR3 读写实验例程
科技·嵌入式硬件·ai·fpga开发·fpga
甜甜不吃芥末1 天前
Windows 应用程序的 UI 框架:WPF、WinUI 3 和 UWP的差异区别
windows·ui·wpf
豌豆花下猫1 天前
Python 潮流周刊#110:JIT 编译器两年回顾,AI 智能体工具大爆发(摘要)
后端·python·ai
共享ui设计和前端开发人才1 天前
UI前端大数据可视化实战技巧:如何利用数据故事化提升用户参与度?
ui
蒙小萌19931 天前
苹果UI 设计
macos·ui·cocoa
Baihai IDP1 天前
AI 系统架构的演进:LLM → RAG → AI Workflow → AI Agent
人工智能·ai·系统架构·llm·agent·rag·白海科技
Apipost的同学们2 天前
AI时代的接口自动化优化实践:如何突破Postman的局限性
后端·ai·架构·postman·自定义函数·apipost·api+ai
界面开发小八哥2 天前
界面组件DevExpress WPF中文教程:Grid - 如何检查节点?
ui·.net·wpf·界面控件·devexpress·ui开发