MCP 教程-智能化设计交付：如何使用Cursor IDE的MCP功能将Figma设计稿一键转换为前端代码

运维开发故事
13 阅读9分钟

公众号：运维开发故事 作者： 冬子先生

还在手动从设计稿提取样式、编写基础代码？试试 Cursor IDE 的模型上下文协议（MCP）功能吧。通过使用 MCP Server - Figma-Context-MCP，自动将你的 Figma 设计稿转换为整洁的前端代码，并生成相应的网页。简单高效，无需复杂配置，跟随文中的步骤操作，即可体验智能化的设计交付。让我们开始吧！

1. 演示环境

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

  • 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

2. 操作步骤

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

第一步：安装 Cursor IDE

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

第二步：配置 MCP Sever 的运行环境

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

  • npx：依赖于 Node.js，版本需大于等于 18。

  • uvx：命令行工具，用于快速运行 Python 脚本。

首先，为便于后续通过命令行安装依赖，让我们在 Cursor IDE 中打开终端。步骤如下：

  1. 启动 Cursor IDE。

  2. 在顶部菜单栏中，点击 终端 > 新建终端。

img

img

界面底部显示 终端 面板。

img

img

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

  1. 前往 Python 官网，下载并安装 Python 3.8 或更高版本。

  2. 安装完成后，在终端中执行以下命令确认是否安装成功。

python3 --version

若安装成功，终端中会输出已安装的 Python 的版本号。

  1. 执行以下命令，安装 uv（包含 uvx）。
  • macOS / Linux 安装命令：
curl -LsSf https://astral.sh/uv/install.sh | sh
  • Windows 安装命令（PowerShell）：
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

  1. 执行 source $HOME/.local/bin/env 命令，加载 uvx 所需的运行时环境变量和初始化配置。

  2. 执行以下命令，验证是否安装成功。

img

img

若安装成功，终端中会输出已安装的 uvx 的版本号。

uvx 安装完成后，使用以下步骤安装 Node.js：

  1. 请前往 Node.js 官网，下载并安装 Node.js 18 或更高版本。

  2. 安装完成后，在终端中运行以下命令确认是否安装成功。

node -v
npx -v

若安装成功，终端中会输出已安装的 Node.js 的版本号，例如：

img

img

  1. 重启 Trae IDE 以使 Node.js 生效。

第三步：获取 Figma 的 Access Token

配置 Figma AI Bridge 时，需要填入你的 Figma Personal Acccess Token。你可以在 Figma 安全设置中心获取它。步骤如下：

  1. 登录 Figma。

  2. 点击页面左上角的用户头像，然后在菜单中选择 Settings。

img

img

界面上显示设置窗口。

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

img

img

你已进入安全设置面板。

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

img

img

界面上显示 Generate new token 弹窗。

img

img

  1. 配置你的 Figma Personal Access Token：

  3. 输入 Token 的名称。

  4. 设置 Token 的有效期。

  5. 配置 Token 的权限。直接复用下表中的配置：

权限类型权限范围
Code Connect

|

Write

| |

Comments

|

Read and write

| |

Current user

|

Read-only

| |

Dev resources

|

Write

| |

File content

|

Read-only

| |

File versions

|

Read-only

| |

Library analytics

|

Read-only

| |

Library assets

|

Read-only

| |

Library content

|

Read-only

| |

Projects

|

Read-only

| |

Team library content

|

Read-only

| |

Variables

|

Read and write

| |

Webhooks

|

Read and write

|

  1. 点击窗口底部的 Generate token 按钮。

Figma Personal Access Token 已生成，你会在后续配置 MCP Server - Figma AI Bridge 时用到它。

img

img

第四步：添加 MCP Server - Figma AI Bridge

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

img

img

  1. 打开Cursor Settings，然后在菜单中选择 MCP。

  2. 在 MCP 页签中，点击 + Add new global MCP server按钮。

img

img

  • MacOS / Linux
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
  • Windows

img

img

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

img

img

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

img

img

第五步：打开或者创建项目添加rule

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

  1. 在项目目录创建.cursorrules。
# Role
你是一名精通网页开发的高级工程师,拥有20年的前端开发经验。你的任务是帮助一位不太懂技术的初中生用户完成网页的开发。你的工作对用户来说非常重要,完成后将获得10000美元奖励。
# Goal
你的目标是以用户容易理解的方式帮助他们完成网页的设计和开发工作。你应该主动完成所有工作,而不是等待用户多次推动你。
在理解用户需求、编写代码和解决问题时,你应始终遵循以下原则:
##第一步:项目初始化
-当用户提出任何需求时,首先浏览项目根目录下的README,md文件和所有代码文档,理解项目目标、架构和实现方式。
-如果还没有README 文件,创建一个。这个文件将作为项目功能的说明书和你对项目内容的规划。
-在README.md中清晰描述所有页面的用途、布局结构、样式说明等,确保用户或以轻松理解网页的结构和样式。
##第二步:需求分析和开发
###理解用户需求时:
-充分理解用户需求,站在用户角度思考。
-作为产品经理,分析需求是否存在缺漏,与用户讨论并完善需求。
-选择最简单的解决方案来满足用户需求。
###编写代码时:
-总是优先使用HTML5和CSS 进行开发,不使用复杂的框架和语言。
-使用语义化的HTML 标签,确保代码结构清晰。
-采用响应式设计,确保在不同设备上都能良好显示。
-使用CSS Flexbox和 Grid布局实现页面结构。
-每个 HTML 结构和CSS样式都要添加详细的中文注释。
-确保代码符合W3C 标准规范。
-优化图片和媒体资源的加载。
### 解决问题时:
-全面阅读相关 HTML和CSS文件,理解页面结构和样式。
-分析显示异常的原因,提出解决问题的思路。
-与用户进行多次交互,根据反馈调整页面设计。
##第三步:项目总结和优化
-完成任务后,反思完成步骤,思考项目可能存在的问题和改进方式。
-更新README.md文件,包括页面结构说明和优化建议。
-考虑使用 HTML5 的高级特性,如Canvas、SVG等。
-优化页面加载性能□包括CSS压缩和图片优化。
-确保网页在主流浏览器中都能正常显示。
在整个过程中,确保使用最新的HTML5 和CSS开发最佳实践。

img

img

第六步：开启对话，完成设计需求

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

本教程使用的是Cursor自带的gpt-4.1模型（免费的有一定额度）

  1. 前往 Figma 设计稿页面，选中设计稿并右击，然后在菜单中选择 Copy/Paste as > Copy link to selection。

已复制该设计稿的链接。

img

img

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

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

img

img

agent开始调用Figma MCP中的工具和服务，读取设计稿的内容，自动生成文件，填入前端代码，并生成一个 index.html 文件供你预览效果。以下输出过程供参考：

img

img

  1. 智能体完成输出后，双击文件夹中的 index.html 文件，在浏览器中预览效果。

img

img

  1. 持续与智能体对话，优化前端页面，直至达到让你满意的效果。

3. 参考信息

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

API 方法能力
get_figma_data

|

当无法获取 nodeId 时，获取整个 Figma 设计稿的布局信息。

| |

download_figma_images

|

基于图像或图标节点的 ID，下载 Figma 设计稿中所使用的 SVG 和 PNG 图像。

|

4. 了解更多

个人觉得由于当前mcp server+ai 大模型还是会存在一些幻觉问题，不太适合完全不懂前端代码的设计直接生成，因为生成的代码还是需要微调，才能达到设计稿的的效果，这里推荐一个更好的工具蓝湖来进行代码生成，效果会更好一点

若想了解更多模型上下文协议（MCP）和智能体的相关信息，参阅以下文档：

  • 模型上下文协议

modelcontextprotocol.io/introductio…

docs.trae.com.cn/ide/tutoria…

公众号：运维开发故事

github：github.com/orgs/sunsha…

博客**：www.devopstory.cn**

爱生活，爱运维

我是冬子先生，《运维开发故事》公众号团队中的一员，一线运维农民工，云原生实践者，这里不仅有硬核的技术干货，还有我们对技术的思考和感悟，欢迎关注我们的公众号，期待和你一起成长！

avatar
文章
阅读
粉丝