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

最新推荐文章于 2025-05-06 18:01:08 发布
最新推荐文章于 2025-05-06 18:01:08 发布
阅读量4.8k 收藏 24
点赞数 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 体验。

MCP 探索：Cursor + Figma-Context-MCP ，让 Cursor 获取 Figma 设计图信息，实现 AI 生成页面的高度还原
简简单单Onlinezuozuo
04-28 229
MCP（Model Context Protocol）是由 Anthropic 公司于 2024 年 11 月推出的一种开放协议。它旨在统一规范大语言模型与外部数据源和工具之间的通信，类似于 AI 世界的“USB-C”接口。MCP 基于客户端-服务器架构，包含宿主程序（Host）、客户端（Client）和服务器（Server）等组件。它通过标准化接口和协议，使大语言模型能够动态访问和集成外部数据源、工具和服务，提升模型的功能性和灵活性。
基于 Playwright MCP 的 AI 自动化测试实战「喂饭教程」
blues_C的博客
04-24 725
传统的自动化测试，高度依赖开发者手动编写和维护脚本，不仅耗时巨大，且脚本脆弱性高，一旦页面结构或元素发生细微变化便可能失效。随着 MCP（Model Context Protocol）协议的出现，大语言模型（LLM）与自动化工具的协同得以实现。现在，我们能够通过自然语言向工具下达指令，让其自动完成复杂的浏览器操作。
前端开发又幸福了，Cursor + Figma MCP 快速还原设计稿
奇舞周刊
03-26 915
使用 Figma MCP 对比之前我直接截图给 AI 进行还原，进一步提升了准确性，原先 claude 是需要识别图片，现在可以直接读取 Figma 的元数据了。我用自己的话理解，简单讲就是一个开放给 AI 应用访问外部某某平台，某某应用的一个接口，AI 可以通过 MCP 来获取到更具体的相关数据。指定要写入的文件，并提出相对应的要求。他支持绑定 MCP 服务，我使用的 0.45 版本，应该此版本以上都支持。最后的成品 下方是设计稿，上方是他一次性就实现的界面。还是很赞的，调整下高度和边距就可以用了。
cursor+MCP+figma实现从设计稿生成代码
最新发布
ljw714的专栏
05-06 983
使用AI编程工具cursor+MCP+figma实现从设计稿直接生成代码
实验 Figma MCP + Cursor 联合工作流
roamingcode的博客
02-22 3634
使用此 Model Context Protocol 服务器授予 Cursor 对 Figma 文件的访问权限。当 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法更能准确地进行代码转化。具体配置方式可直接参考仓库中详细介绍。
使用Cursor+MCP 提高开发效率+避坑指南
分享平时的学习心得和笔记
05-05 903
通过合理利用 Cursor 和 MCP 资源网站，开发者可以在软件开发的完整生命周期中提高效率，优化代码质量。同时，我们需要注意避免过度依赖工具，保持独立思考和提升核心技能。希望本文的技巧和避坑指南能够帮助开发者更好地利用 Cursor 和 MCP 提高开发效率，写出高质量的代码。
使用 Cursor、MCP 和 Figma 实现工程化项目自动化，提升高达 200% 效率
Black_Rock_br的博客
03-26 2702
在 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+MCP，解锁AI更多可能！
atbigapp的博客
03-12 3741
在2023年OpenAI推出GPT function calling时，或许有人会问，它不也能实现类似的功能吗？我们之前讨论的AI Agent不就是用于整合各种服务的吗？那么MCP的出现又是为何？Function Calling、AI Agent与MCP之间到底有何区别？Function Calling是AI模型根据上下文自动调用函数的机制。它充当了AI模型与外部系统之间的桥梁，但不同模型平台的Function Calling实现方式各异，代码集成也各有千秋。
Cursor+MCP，30分钟开发并部署赛博算命网站
qq_40653180的博客
03-02 2069
通过AI快速开发+部署一个“赛博算命”程序
Cursor + MCP 要冲击的不仅是前端，从零基础到精通，收藏这篇就够了！
leah126的博客
03-20 1590
The简单来讲 MCP 是 Anthropic 提出的一个用于标准化应用程序如何向大语言模型提供上下文的开放协议，相当于模型与各种应用程序之间的 USB-CMCP 使用 C/S 模式，它们之间用一种标准的消息格式（基于JSON-RPC）交流MCP Client：嵌入在 AI 应用内（比如 Cursor），负责跟服务器“聊天”，根据用户自然语言，智能发起 MCP 服务调用，获取数据、资源或命令执行MCP Server 器：开发者提供的向模型暴露内部数据、资源、功能的服务。
Cursor+MCP 开发效率提升与避坑指南：一篇让程序员“相见恨晚”的技术指南
分享平时的学习心得和笔记
05-05 810
• 案例：开发电商支付接口时，Cursor自动生成支付宝/微信支付SDK调用代码，并提醒“签名算法需校验时间戳防重放攻击”。今天，我将揭秘两个“外挂级工具”——Cursor编辑器与MCP协议，帮你从需求到维护全流程提效，避开开发路上的“深坑”。Cursor和MCP不是取代程序员的“敌人”，而是放大创造力的“杠杆”。例如，高并发场景下需补充负载均衡方案。• 覆盖率分析：标记未覆盖的代码分支（如异常处理中的冷门路径），减少漏测风险。• 性能优化：识别内存泄漏代码（如未关闭的数据库连接），建议上下文管理器优化。
Flutter 使用 Cursor 和 Figma 快速生成界面代码
会煮咖啡的猫咪
12-30 2226
原文如何在Flutter中利用Cursor和Figma高效生成UI代码本文介绍如何通过Cursor和Figma工具快速生成Flutter界面代码，提升开发效率，适合Flutter开发者和UI设计师阅读。
【Cursor实战】Cursor+Figma MCP通过对话直接生成设计稿
zww学习笔记
04-20 574
Cursor Talk to Figma MCP 实现了 Cursor AI 和 Figma 之间的模型上下文协议（Model Context Protocol，MCP）集成，允许 Cursor 与 Figma 进行通信，以读取设计内容并以编程方式对其进行修改。使用 Cursor Talk to Figma MCP 是可以初步实现在Figma上生成设计稿的，但是目前生成的设计稿还处于初级阶段，UI相对简单，布局上还有很多问题，想要在生产上使用建议再等等。
【Cursor实战】Cursor+Figma MCP UI设计稿一键转前端代码
zww学习笔记
04-20 440
Figma是一款基于浏览器的云原生界面设计工具，支持多人实时协作、矢量图形设计和跨平台使用，广泛应用于网页、移动应用及产品设计团队协作。它以强大的协作性、丰富的插件生态和便捷的使用方式，显著提升设计团队的工作效率和设计质量。
Cursor + MCP +向量知识库，让你的编程效率提升十倍！！！
AI Agent 首席体验官
03-23 1555
在现代软件开发中，团队代码规范、项目特定框架、架构模式和业务领域知识对高效编码至关重要。接入知识库的Cursor能够基于企业内部文档、代码库和经验生成高度契合团队需求的代码，实现真正的"懂你的AI助手"，提升开发效率和代码质量。
Cursor+MCP工具，到底好不好用？
bgeyq的博客
03-14 1593
就目前的情况来看，如果Cursor没有对这些工具进行集成，而且你对这些工具完全不知道如何下手的话，让AI来帮助你是一个很好方式，但如果Cursor已经支持了或者你亲自用起来飞快，那你并不需要它。只要我们愿意，这个世界都可以为我们而设计，这种不依赖身体进化而使用“外挂”加载的方式，就是人的方式！感觉目前的MCP工具更多局限于软件、互联网、移动端、大模型领域，不知道什么时候可以看到端侧模型用MCP协议来控制物联网、机器人，但也可能不会，硬件有自己的技术栈，也许其他协议会取代MCP的地位，主要看历史怎么发展了。
Cursor + MCP + 文档智能体，疯了，太爽了呀！！！
訾博（ZiBo）的博客
03-28 1089
良好的 MCP 可提升模型的准确性和泛化能力，让其在复杂多变的实际场景中更出色地完成任务，从而为用户带来更优质、智能的服务体验。例如，在智能家居场景中，AI智能体可以自动调节室内温度、灯光等设备，根据用户习惯提供个性化服务，为人们的生活和工作带来便利。它能自动用自然语言写代码，从代码库获取答案，参考特定文件文档，还能预测编辑内容。我自己开发了一个工具（可以分享出来，思路很简单，就是调用大模型批量重写），支持对文件批量上传、大文件切割、调取大模型批量清洗、生成清洗后新文件列表、批量下载清洗后的文档。
ImportError: cannot import name 'Protocol' from 'typing' (D:\LenovoSoftstore\Install\Anaconda3\envs\RL\lib\typing.py)
09-01
出现这个错误的原因是在导入seaborn包时，无法从typing模块中导入名为'Protocol'的对象。 解决这个问题的方法有以下几种： 1. 检查你的Python版本是否符合seaborn包的要求，如果不符合，尝试更新Python版本。 2. 检查你的环境中是否安装了typing_extensions包，如果没有安装，可以使用以下命令安装：pip install typing_extensions。 3. 如果你使用的是Python 3.8版本以下的版本，你可以尝试使用typing_extensions包来代替typing模块来解决该问题。 4. 检查你的代码是否正确导入了seaborn包，并且没有其他导入错误。 5. 如果以上方法都无法解决问题，可以尝试在你的代码中使用其他的可替代包或者更新seaborn包的版本来解决该问题。 总结： 出现ImportError: cannot import name 'Protocol' from 'typing'错误的原因可能是由于Python版本不兼容、缺少typing_extensions包或者导入错误等原因造成的。可以根据具体情况尝试上述方法来解决该问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [ImportError: cannot import name ‘Literal‘ from ‘typing‘ (D:\Anaconda\envs\tensorflow\lib\typing....](https://blog.csdn.net/yuhaix/article/details/124528628)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

强化学习曾小健

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

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

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

打赏作者

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

抵扣说明：

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

余额充值