Figma 设计稿一键变网页？教你用 Cursor AI 和 MCP 协议，轻松将设计转化为代码

你是否曾经对着精美的 Figma 设计稿发愁，思考如何高效地将其转化为真实的前端代码？现在，借助 AI 的力量，这个过程可以变得前所未有的简单。本文将为你详细介绍如何使用 Figma 设计工具，结合强大的 AI 代码编辑器 Cursor，通过 MCP 服务，实现从设计稿到 HTML 网页的快速转换。下面是我设计的一套利用AI改写文章进行wordpress发布的系统，只用不到半小时就生成了比较满意的版本。

什么是 MCP 服务，它如何成为 Figma 和 Cursor 之间的桥梁？

在开始实战之前，我们首先需要理解一个核心概念：MCP 服务。

MCP，全称为 模型上下文协议（Model Context Protocol），是最近越来越火的一项技术。你可以把它理解成一个专门为 AI 大模型 设计的“数据通道”。过去我们常用 API 来让不同的软件进行数据交换，而 MCP 则专注于让 AI 模型能够直接“读懂”并使用来自其他应用（比如 Figma）的上下文数据。

简单来说，通过 MCP，Cursor 里的 AI 就能直接访问并理解你提供的 Figma 设计稿的布局、颜色、元素等信息，从而知道该如何为你编写代码。这正是我们能实现设计稿一键转换的关键所在。

如何配置 Figma 与 Cursor，实现设计稿到代码的“魔法”？

接下来，我们将进入详细的实战教程。请一步步跟着操作，整个配置过程非常简单。

第一步：获取 Figma 的“通行证”——生成个人访问令牌 (Token)

为了让 Cursor 有权限访问你的 Figma 数据，你需要先在 Figma 中创建一个个人访问令牌（Personal Access Token）。

1. 打开 Figma 网页版：登录你的 Figma 账户。
2. 进入设置：点击左上角你的头像或名字，在下拉菜单中选择 Settings。
3. 找到安全选项：在设置页面中，找到顶部的 Security 标签并点击。
4. 创建新令牌：向下滚动页面，找到 Personal access tokens 区域，点击 Create a new token。
5. 配置令牌：
   • Token name：给你的令牌起一个容易识别的名字，例如 Cursor_Token。
   • Expiration：设置令牌的过期时间，为了方便可以选 No expiration（永不过期）。
   • Scopes：选择令牌的权限。你可以根据下图中的勾选项进行选择，确保 File content 是勾选的，这样 AI 才能读取文件内容。
   • 点击 Create token 按钮。
6. 复制并保存令牌：Figma 会生成一长串字符，这就是你的令牌。请注意，这个令牌只会显示一次！ 一定要立即复制它，并保存在一个安全的地方（比如备忘录），我们马上会用到。

第二步：在 Cursor 中搭建通信服务——配置 MCP 服务器

获取令牌后，我们需要在 Cursor 中配置 MCP 服务，告诉它如何连接到 Figma。

1. 获取 MCP 代码：打开浏览器，访问 Figma Context MCP 的 GitHub 开源代码链接。你可以在页面中找到并点击中文文档链接，方便阅读。

2. 复制关键代码：在中文文档页面向下滑动，找到并复制下图所示的代码片段。

   {
   "name": "Figma",
   "url": "https://figma-proxy.cursor.sh/nodes",
   "headers": {
   "Content-Type": "application/json",
   "Authorization": "Bearer your_key"
   },
   "body": {
   "ids": "{{IDS}}",
   "file_key": "{{FILE_KEY}}"
   }
   }

3. 打开 Cursor 设置：启动 Cursor 编辑器，点击右上角的齿轮图标，选择 Cursor Settings。

4. 创建 MCP 服务器：在设置中找到 MCP 选项，点击 Create a new MCP Server。

5. 粘贴并修改代码：

   • 将刚刚复制的代码片段粘贴到输入框中。
   • 找到代码中的 your_key 这个占位符。
   • 将它替换成你第一步从 Figma 复制的那个个人访问令牌（Token）。

6. 保存并检查状态：保存设置。此时，你应该能在 MCP 服务列表中看到你刚创建的 Figma 服务，并且它旁边有一个小绿点，这表示 MCP 服务已经配置成功并生效了！

第三步：优化 Cursor 设置与项目准备

为了让 AI 运行得更顺畅，我们还需要进行一些简单的准备工作。

1. 开启自动运行模式：在 Cursor 的设置中，找到 Features -> Chat，勾选 Enable Auto-run Mode 选项。这个选项默认可能没打开，开启后能让 AI 更好地自动化执行任务。
2. 创建项目规则文件：
   • 在 Cursor 中新建一个项目文件夹。
   • 在文件夹根目录下，新建一个文件，文件名必须是 .cursor-rules (注意，文件名前面有一个点)。
   • 将你准备好的项目规则（prompt）粘贴到这个文件中并保存。这些规则可以指导 AI 如何更好地为你生成代码，例如规定代码风格、使用的技术栈等。

第四步：见证奇迹的时刻——从 Figma 链接到生成完整代码

所有准备工作就绪，现在开始施展“魔法”！

1. 复制 Figma 设计稿链接：回到你的 Figma 设计稿，选中你想要转换成代码的那个具体画板（Frame）。
2. 右键点击该画板，在菜单中选择 Copy/Paste as -> Copy link to selection。
3. 向 Cursor 发出指令：
   • 回到 Cursor 编辑器，打开聊天窗口。
   • 将刚刚复制的 Figma 链接直接粘贴进去。
   • 紧接着输入你的指令，例如：“请根据这个 Figma 设计稿，帮我生成完整的 HTML、CSS 和 JavaScript 代码。”
   • 确保聊天模式选择了 Agent 模式，这会让 AI 拥有更强的规划和执行能力。
4. 发送并等待：发送你的指令。你会看到 Cursor 开始调用 MCP 服务读取 Figma 数据，并自动分析、规划、生成文件和代码。整个过程大约需要一分多钟，你只需要静静等待即可。

第五步：人工干预与优化——处理图片等细节问题

AI 生成代码后，通常还需要我们进行一些微调。

1. 预览效果：当代码生成完毕后，在浏览器中打开 HTML 文件进行预览。你会发现，整体布局和样式还原度非常高，甚至一些按钮的交互效果都实现了。
2. 处理缺失的图片：一个常见的问题是，AI 无法自动从 Figma 中导出并保存图片。这是因为 MCP 服务主要读取的是设计稿的结构和样式数据，而不是图片资源本身。
3. 手动导出并添加图片：
   • 回到 Figma，手动将设计稿中的图片导出为 .png 或 .jpg 格式，并保存到你的项目文件夹中。
   • 回到 Cursor，将这张图片文件拖拽到聊天窗口中，并对 AI 说：“这是刚才缺失的图片，请更新代码，把它添加到正确的位置。”
4. 再次预览：Cursor 会很快为你更新代码。刷新网页，你会看到图片已经完美地显示出来了，整个页面的还原度更高了。