使用Cursor将Figma设计稿转换为前端代码

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

本教程中使用的系统环境如下：

Cursor版本：0.50.6 老版本可能不支持mcp功能（也可以选择使用cursorTrae IDE 工具）
macOS 版本：14.7 （windows也可以）
Node.js 版本：20.19.1
npx 版本：10.9.2
Python 版本：3.13.3
uvx 版本：0.6.16

使用IDE工具创建项目然后添加 MCP Server - Figma-Context-MCP，配置.cursorrules，复制figma中设计稿的url地址，然后跟模型对话自动生成前端页面。

Cursor IDE 与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Cursor 开发项目时，你可以与 AI 灵活协作，提升开发效率。前往 Cursor官网，下载 Cursor IDE 的安装包，然后将其安装至你的计算机。

这里如果使用sse模式的mcp server则可以不安装运行环境，魔塔社区的ModelScope MCP 广场有大量的mcp server可以选择使用，modelscope.cn/mcp，本文使用stdio模式，为了正常启动本地的 MCP Server，你需要安装以下依赖：

npx：依赖于 Node.js，版本需大于等于 18。
uvx：命令行工具，用于快速运行 Python 脚本。

首先，为便于后续通过命令行安装依赖，让我们在 Cursor IDE 中打开终端。启动 Cursor IDE，然后在顶部菜单栏中，点击终端 > 新建终端。

打开终端后，使用以下步骤安装 uvx：

前往 Python 官网，下载并安装 Python 3.8 或更高版本。
安装完成后，在终端中执行以下命令确认是否安装成功。

若安装成功，终端中会输出已安装的 Python 的版本号。执行以下命令安装 uv（包含 uvx）， macOS / Linux 安装命令如下：

执行 source $HOME/.local/bin/env 命令，加载 uvx 所需的运行时环境变量和初始化配置。然后执行“uvx -version”命令验证是否安装成功。若安装成功，终端中会输出已安装的 uvx 的版本号。uvx 安装完成后，请前往 Node.js 官网，下载并安装 Node.js 18 或更高版本。

配置 Figma AI Bridge 时，需要填入Figma Personal Acccess Token。可以在 Figma 安全设置中心获取它。登录 Figma，点击页面左上角的用户头像，然后在菜单中选择 Settings。

在窗口的顶部菜单中，选择 Security。

移动至 Personal access tokens 部分，然后点击 Generate new token 按钮。

然后输入 Token 的名称、设置 Token 的有效期、配置 Token 的权限等来配置Figma Personal Access Token：

打开 Cursor IDE，Preference中打开Cursor Settings。

打开Cursor Settings，然后在菜单中选择 MCP。在 MCP 页签中，点击 + Add new global MCP server按钮，添加如下内容：

等待安装完成之后变绿就代表可以使用了。

点击Features，勾选Enable auto-run mode，则可以在ai对话的时候让agent使用mcp中的tools。

为了该项目按照规定的开发场景的编程助手。可以创建自定义.cursorrules，通过灵活配置提示词和工具集，使其更高效地帮你完成复杂任务。比如，在项目目录创建.cursorrules，然后添加如下的提示词：

配置完成之后，Cursor IDE 会将你引导至 AI 对话框，并默认选用你可以与该智能体对话，输入 Figma 设计稿的地址，然后描述你的需求，让智能体创建相应的前端页面。

本教程使用的是Cursor自带的gpt-4.1模型（免费的有一定额度）。前往 Figma 设计稿页面，选中设计稿并右击，然后在菜单中选择 Copy/Paste as > Copy link to selection。

在 AI 对话输入框中，粘贴所复制的设计稿的链接。

在设计稿链接的标签后输入你的需求并发送。例如：“请严格按照我提供的 Figma 链接内容生成 HTML 前端页面。UI 要严格还原设计稿，需要实现响应式设计”。

Agent开始调用Figma MCP中的工具和服务，读取设计稿的内容，自动生成文件，填入前端代码，并生成一个 index.html 文件供你预览效果。智能体完成输出后，双击文件夹中的 index.html 文件，在浏览器中预览效果。

Figma-Context-MCP这个mcp server是github上开源的，主要的tools能力如下：

get_figma_data：当无法获取 nodeId 时，获取整个 Figma 设计稿的布局信息。
download_figma_images：基于图像或图标节点的 ID，下载 Figma 设计稿中所使用的 SVG 和 PNG 图像。

使用Cursor将Figma设计稿转换为前端代码

相关推荐