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

最新推荐文章于 2025-05-06 18:01:08 发布

强化学习曾小健

最新推荐文章于 2025-05-06 18:01:08 发布

阅读量3k

点赞数 35

文章标签： figma

本文链接：https://blog.csdn.net/sinat_37574187/article/details/146315454

版权

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:

找到下载的安装文件（通常是 .exe 格式）
双击安装文件启动安装向导
按照屏幕上的指示进行操作，选择安装位置和其他选项
点击"安装"并等待过程完成
安装完成后，点击"完成"

MacOS**:**

找到下载的 .zip 文件
双击打开 .zip 文件，解压缩文件
双击打开解压后的文件，此时会真正下载cursor软件
在 Applications 文件夹中找到 Cursor 并双击打开
如果出现安全警告，请在"系统偏好设置" > "安全性与隐私"中允许打开

Linux:

下载 .AppImage 文件
打开终端，进入下载目录
使用以下命令给文件添加执行权限：
双击文件或在终端中运行它来启动 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 开发过程中的最佳实践。

六、最佳实践建议

工程项目提前通过 cli 脚手架创建好，避免浪费Cursor 的使用次数
在工程目录中创建好基本的项目说明、需求文档、描述使用的技术栈、UI 组件库以便模型可以更好的理解
定义 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 体验。