Cursor+MCP+Figma，自动完成工程化项目，效率直接提升200%（手把手教程）

最新推荐文章于 2025-04-20 19:46:16 发布
最新推荐文章于 2025-04-20 19:46:16 发布
阅读量3.9k 收藏 21
点赞数 19
文章标签： figma
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_37574187/article/details/146319210
版权

Cursor+MCP+Figma，自动完成工程化项目，效率直接提升200%（手把手教程）

原创 卫星的AI工坊 卫星的AI工坊 2025年03月10日 03:01 江西

今天给大家分享下，Cursor+MCP+Figma，让工程项目自动化生成，效率直接提升200%～

一、准备动作

1、Cursor下载安卓

1）访问官方网站

打开您的网络浏览器，访问 Cursor 的官方网站：https://www.cursor.com/cn

2）开始下载:

  • 点击"Download for free"

  • 根据您的浏览器设置，会自动开始下载

图片

3）等待下载完成

注意这里下载的不是软件，是安装包，安装包不大，因此下载很快

4）安装过程

Windows:

  1. 找到下载的安装文件（通常是 .exe 格式）

  2. 双击安装文件启动安装向导

  3. 按照屏幕上的指示进行操作，选择安装位置和其他选项

  4. 点击"安装"并等待过程完成

  5. 安装完成后，点击"完成"

MacOS**:**

  1. 找到下载的 .zip 文件

  2. 双击打开 .zip 文件，解压缩文件

  3. 双击打开解压后的文件，此时会真正下载cursor软件

  4. 在 Applications 文件夹中找到 Cursor 并双击打开

  5. 如果出现安全警告，请在"系统偏好设置" > "安全性与隐私"中允许打开

Linux:

  1. 下载 .AppImage 文件

  2. 打开终端，进入下载目录

  3. 使用以下命令给文件添加执行权限：

  4. 双击文件或在终端中运行它来启动 Cursor

chmod +x Cursor-x.x.x.AppImage

2、获取 Figma Key

1）访问官网：https://www.figma.com，注册并登录

2）进入个人空间

图片

3）点击用户名，点击 Settings

图片

4）点击 Security 页签，找到 new token，点击进入填写信息，保存即可得到 token，复制备用。

图片

二、本地运行Figma-MCP

1、github下载

地址：https://github.com/GLips/Figma-Context-MCP

图片

2、进入工程目录，找到隐藏的文件.env.example ，然后分支命名 .env，将自己的 key放到文件总

3、执行 npm run dev 命令，此时 figma MCP Server 运行到了 本地 3333端口

图片

三、Cursor配置

1、打开 Cursor Settings

2、Add new MCP

填入http://localhost:3333/sse

3、成功添加之后就可以看到 mcp server 提供的 tools

图片

四、生成 Figma UI 的 link

复制 figma UI 具体页面的 link

图片

五、Cursor 调用 Figma-MCP

在 Cursor 对话框中输入分享的Figma项目链接，发送后会发现它自动调用了 MCP tool：et_gigma_data 方法。

图片

Cursor 会自动调用 MCP 服务的 Tools 获取 figma 的 UI 信息。

那么接下来就可以根据让他读取图片内容，进行网站开发了。

当然下面给大家一些 Cursor 开发过程中的最佳实践。

六、最佳实践建议

  1. 工程项目提前通过 cli 脚手架创建好，避免浪费Cursor 的使用次数

  2. 在工程目录中创建好基本的项目说明、需求文档、描述使用的技术栈、UI 组件库以便模型可以更好的理解

  3. 定义 Cursor 的 rule：能一定程度减少模型的幻觉

你是一名资深的软件工程师，专注于构建高度可扩展和可维护的系统。

# 指南
- 当文件变得太长时，将其拆分成更小的文件。
- 当函数变得太长时，将其拆分成更小的函数。
- 编写代码后，深入思考代码的可扩展性和可维护性。

撰写1-2 段关于代码变更的分析，并根据你的反思——提出潜在的改进建议或下一步的操作。

# 规划
当被要求进入**“规划模式（Planner Mode）”**时，请深入思考所提出的更改请求，并分析现有代码，以绘制出所需变更的完整范围。
在提出计划之前，基于你的发现提出 4-6 个澄清问题。
问题得到解答后，制定一个详细的行动计划，并寻求对该计划的批准。
一旦获得批准，按步骤实施该计划中的所有内容。

在完成每个阶段/步骤后，说明已完成的工作以及接下来的步骤和剩余的阶段。

# 调试
当被要求进入**“调试模式（Debugger Mode）”**时，请按照以下步骤操作：

思考 5-7 个可能导致问题的来源。
缩小范围到 1-2 个最可能的原因。
添加额外的日志，以验证你的假设，并在应用程序控制流中跟踪数据结构的变化，然后再进行实际的代码修复。

使用 getConsoleLogs、getConsoleErrors、getNetworkLogs 和 getNetworkErrors 工具，获取任何新添加的浏览器日志。

获取服务器日志（如果可以访问）。否则，请让我将其复制/粘贴到聊天中。

深入思考问题的根源，并提供全面的分析报告。

如果问题仍然存在或根源尚不明确，建议添加其他日志。

修复问题后，申请删除之前添加的调试日志的权限。

# 处理 PRD（产品需求文档）
如果提供了 Markdown 格式的文件，请将其作为参考，以了解如何组织代码。
不要直接修改 PRD 文件（除非明确要求）。
仅将它们用作示例或参考，以了解如何编写代码。

# 与 GitHub 交互
当被要求提交 PR（Pull Request）时：
使用 GitHub CLI。

假设我已经正确地进行了身份验证。

当被要求创建 PR 时，请按照以下步骤：
1. git status               # 检查是否有更改需要提交
2. git add .                # 将所有更改添加到暂存区（如有需要）
3. git commit -m "你的提交信息"    # 提交更改（如有需要）
4. git push                 # 推送更改到远程仓库（如有需要）
5. git branch               # 检查当前分支
6. git log main..[当前分支]     # 查看当前分支相对于 main 分支的差异
7. git diff --name-status main  # 检查哪些文件发生了更改
8. gh pr create --title "标题..." --body "示例内容..."  # 创建 PR

创建 commit 时：
检查所有已更改的文件，使用 git status 确认。

创建简洁的 commit 信息，描述所做的更改。

对于较小的更改，可以将所有内容放在一个 commit 中。

编写 PR 消息时：
不要使用多行，只写一条简洁的单行消息。

Always respond in 中文

总的来说，MCP 的出现就像是给 AI 装上了一个"万能适配器"，让它能够更好地理解和使用各种工具，从而真正融入到我们的日常工作中，带来更实用和个性化的 AI 体验。

实验 Figma MCP + Cursor 联合工作流
roamingcode的博客
02-22 3498
使用此 Model Context Protocol 服务器授予 Cursor 对 Figma 文件的访问权限。当 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法更能准确地进行代码转化。具体配置方式可直接参考仓库中详细介绍。
Cursor配置MCP Server
热门推荐
星痕の博客
02-28 1万+
在smithery上选择一个server，在installation里选择cursor，复制安装命令，将该命令，复制到cursor配置页面的command为止，type选择command即可。的那个公司） 推出的开放标准协议，它为开发者提供了一个强大的工具，能够在数据源和 AI 驱动工具之间建立安全的双向连接。，这个平台收录了很多MCP Server，提供多种MCP Client的配置命令，可以直接复制。官网上，点击某个server地址后，也可以查找到类似的命令，复制即可。
Flutter 使用 Cursor 和 Figma 快速生成界面代码
会煮咖啡的猫咪
12-30 2063
原文如何在Flutter中利用Cursor和Figma高效生成UI代码本文介绍如何通过Cursor和Figma工具快速生成Flutter界面代码，提升开发效率，适合Flutter开发者和UI设计师阅读。
使用 Cursor、MCP 和 Figma 实现工程化项目自动化，提升高达 200% 效率
Black_Rock_br的博客
03-26 2465
在 Cursor 对话框中输入分享的Figma项目链接，发送后会发现它自动调用了 MCP tool：et_gigma_data 方法。2.4点击 Security 页签，找到 new token，点击进入填写信息，保存即可得到 token，复制备用。打开您的网络浏览器，访问 Cursor 的官方网站：https://www.cursor.com/cn。地址：https://github.com/GLips/Figma-Context-MCP。注意这里下载的不是软件，是安装包，安装包不大，因此下载很快。
【Cursor实战】Cursor+Figma MCP通过对话直接生成设计稿
最新发布
zww学习笔记
04-20 235
Cursor Talk to Figma MCP 实现了 Cursor AI 和 Figma 之间的模型上下文协议（Model Context Protocol，MCP）集成，允许 Cursor 与 Figma 进行通信，以读取设计内容并以编程方式对其进行修改。使用 Cursor Talk to Figma MCP 是可以初步实现在Figma上生成设计稿的，但是目前生成的设计稿还处于初级阶段，UI相对简单，布局上还有很多问题，想要在生产上使用建议再等等。
Cursor+MCP，解锁AI更多可能！
atbigapp的博客
03-12 2820
在2023年OpenAI推出GPT function calling时，或许有人会问，它不也能实现类似的功能吗？我们之前讨论的AI Agent不就是用于整合各种服务的吗？那么MCP的出现又是为何？Function Calling、AI Agent与MCP之间到底有何区别？Function Calling是AI模型根据上下文自动调用函数的机制。它充当了AI模型与外部系统之间的桥梁，但不同模型平台的Function Calling实现方式各异，代码集成也各有千秋。
Cursor + MCP————AI编程的强大之处！
m0_50882269的博客
04-15 1895
需要注意的是，低版本的 Cursor 是可以支持 MCP 服务 的，我使用的版本是 0.48.7。总结一下，我们介绍了两种设置 MCP 的方法：第一种是让 AI 自动帮助我们生成配置文件，第二种是利用 GitHub 上的示例手动粘贴配置。这样，无论是在 Cursor 还是 Cline，file system 这个 MCP Server 都可以顺利使用，两个工具之间的配置是可以互通的。如果打开了一个新的空白 命令行窗口，请不要关闭，不用理会，只需保证 MCP Server 为 绿色 即可。
Cursor+MCP，30分钟开发并部署赛博算命网站
qq_40653180的博客
03-02 1981
通过AI快速开发+部署一个“赛博算命”程序
Cursor + MCP 要冲击的不仅是前端，从零基础到精通，收藏这篇就够了！
leah126的博客
03-20 1510
The简单来讲 MCP 是 Anthropic 提出的一个用于标准化应用程序如何向大语言模型提供上下文的开放协议，相当于模型与各种应用程序之间的 USB-CMCP 使用 C/S 模式，它们之间用一种标准的消息格式（基于JSON-RPC）交流MCP Client：嵌入在 AI 应用内（比如 Cursor），负责跟服务器“聊天”，根据用户自然语言，智能发起 MCP 服务调用，获取数据、资源或命令执行MCP Server 器：开发者提供的向模型暴露内部数据、资源、功能的服务。
MCP4921+TL072+SD卡组成的proteus仿真工程100%可以仿真跑起来.zip
12-14
在电子工程领域中，MCP4921是一款单通道、12位电压输出的数字模拟转换器（DAC），常用于需要精确模拟电压控制的应用中。TL072是一款双运算放大器，具有广泛的电源电压范围和很高的转换速率，广泛应用于信号放大、...
非常好的ATMEGA328P+MCP23008+其它外围电路组成的IO扩展电路proteus仿真工程100%可以仿真跑起来.zip
12-14
当ATMEGA328P的I/O端口不足以满足项目需求时，可以通过连接MCP23008来增加可用的I/O端口数量。此外，仿真工程可能还包括了其他外围电路，如电源管理、信号调节、通信接口等，这些外围电路是实现一个完整电子系统不可...
STM32F+mcp2515 SPI转CAN通讯
07-12
4. **CAN通信协议**：CAN是一种多主站总线协议，适用于汽车电子、工业自动化等领域。CAN帧结构包括仲裁字段、控制字段、数据字段和CRC校验字段。MCP2515支持CAN2.0A和CAN2.0B标准，最高波特率可达1Mbps。 5. **配置...
MCP4921+TL072+SD卡组成的音乐播放电路proteus仿真工程100%可以仿真跑起来.zip
12-14
该文件为一个Proteus仿真工程文件，工程主要涉及MCP4921数字电位器、TL072双运算放大器以及SD卡等元件，共同组成了一个音乐播放电路。Proteus是一款功能强大的电子电路仿真软件，广泛应用于电子工程师和教育领域，...
使用cursor进行原型图设计
HuDie340的博客
04-16 591
用index.html作为主入口，不直接写入所有界面的代码，这里我们使用iframe的方式来嵌套其他页面，并将所有页面直接展示到index页面上。请使用HTML+Tailwind CSS来生成所有的原型图界面，可以使用FontAwesome来美化界面，接近真实的网页效果。尽可能使用Tailwind CSS样式，如果需要自定义的话，请用独立的css文件，然后引入到html代码中来。请根据功能拆分代码文件，保持结构清晰，每个功能界面需要一个独立的HTML文件，比如。1.下载cursor。
Cursor+MCP工具，到底好不好用？
bgeyq的博客
03-14 1547
就目前的情况来看，如果Cursor没有对这些工具进行集成，而且你对这些工具完全不知道如何下手的话，让AI来帮助你是一个很好方式，但如果Cursor已经支持了或者你亲自用起来飞快，那你并不需要它。只要我们愿意，这个世界都可以为我们而设计，这种不依赖身体进化而使用“外挂”加载的方式，就是人的方式！感觉目前的MCP工具更多局限于软件、互联网、移动端、大模型领域，不知道什么时候可以看到端侧模型用MCP协议来控制物联网、机器人，但也可能不会，硬件有自己的技术栈，也许其他协议会取代MCP的地位，主要看历史怎么发展了。
用 Cursor AI 写 flutter 直接喂设计图就行
会煮咖啡的猫咪
02-19 1024
原文在上一篇文章《Flutter 使用 Cursor 和 Figma 快速生成界面代码》中，有同学提到他直接使用了设计稿的图片进行生成。我试了一下，效果确实很好。因此，我整理了一些文档，希望对大家有所帮助。下图展示了我没有手动编写任何代码实现的消息首页，支持上下滑动刷新数据。
Cursor + MCP +向量知识库，让你的编程效率提升十倍！！！
AI Agent 首席体验官
03-23 1384
在现代软件开发中，团队代码规范、项目特定框架、架构模式和业务领域知识对高效编码至关重要。接入知识库的Cursor能够基于企业内部文档、代码库和经验生成高度契合团队需求的代码，实现真正的"懂你的AI助手"，提升开发效率和代码质量。
figma自动生成前端代码
02-12
### 将Figma设计文件自动生成为前端代码 #### 工具介绍 ScriptEcho等AI代码生成器具备高效的设计稿到代码转换能力[^1]。这类工具允许用户上传设计稿（例如Figma、Sketch 文件），并能自动生成对应的HTML、CSS 和 JavaScript 代码。 #### 使用方法 为了实现从Figma 设计到前端代码的自动化转换，以下是具体操作指南： - **准备阶段** - 确保拥有最新版本的Figma项目文件。 - **选择合适的工具** - ScriptEcho这样的AI代码生成平台支持多种输入格式，包括但不限于Figma文件。通过该类平台，用户可以轻松地将复杂的设计转化为实际可用的前端代码片段。 - **执行转换过程** ```python import requests url = "https://api.scriptecho.com/convert" files = {'file': open('design.fig', 'rb')} response = requests.post(url, files=files) with open('output.zip', 'wb') as f: f.write(response.content) ``` 此Python脚本展示了如何调用API接口来提交Figma文件进行处理，并接收返回的结果压缩包。请注意，在真实环境中应当替换`url`变量中的地址以及调整参数配置以匹配所选服务商的具体要求。 - **优化与定制化** 这些工具不仅限于基础代码生成功能；它们还提供了主题式生成选项，使用户可以根据需求挑选不同风格的组件样式，并确保最终产出物兼容主流前端框架（如 React、Vue 或 Angular）。 此外，考虑到Tailwind CSS 可以与Figma 集成的特点[^2]，如果倾向于采用此类实用程序优先级高的CSS框架，则可以在整个流程中加入更多灵活性和响应式的特性设置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

强化学习曾小健

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值