我要投稿

Cursor+Figma MCP 设计稿还原如此简单

发布日期：2025-04-12 04:50:34 浏览次数： 1562 作者：十月指南

Anthropic 于 2024 年 11 月推出了模型上下文协议（Model Context Protocol，简称 MCP），MCP 的诞生，犹如在 AI 世界架起了一座四通八达的立交桥。它正在重塑 AI 应用的开发范式。它不仅是简单的接口规范，更是打通数据孤岛、连接智能工具的系统。MCP 正在为 AI 应用构建起统一的连接标准，让模型能够实时获取上下文、调用工具、执行操作，真正实现"知行合一"。今天我将用 Figma MCP Server + Cursor 实现 Figma 设计稿到代码的转换，带大家看看 MCP 的魔力。

什么是MCP

MCP 的设计目的是标准化 AI 应用程序与数据源和工具的连接方式，特别针对大语言模型（LLM）。它被比喻为 AI 应用的 USB 接口，提供了一个通用的接口，使 AI 模型能够访问实时上下文和执行操作。这种标准化方法可以打破数据孤岛，简化集成，从而提高 AI 响应的相关性和质量。总而言之有了 MCP，大模型的能力进一步增强。

MCP 官网：https://modelcontextprotocol.io/introduction

MCP 架构

MCP 支持情况

Anthropic

MCP 由 Anthropic 于2024年11月推出，旨在解决AI模型与外部数据源和工具集成中的挑战。Anthropic 是一家美国人工智能（AI）初创公司，成立于 2021 年，专注于 AI 安全和研究，其使命是构建可靠、可解释和可控的 AI 系统。该公司由前 OpenAI 成员创立。Anthropic 的核心产品是 Claude 系列大型语言模型，最新版本为 Claude 3.7 Sonnet。

Cursor

Cursor 是一款基于 AI 的智能编程工具，旨在通过自然语言交互和自动化代码生成提升开发效率。它集成了强大的大语言模型（如 GPT-4、Claude 3.7 Max 等），支持代码补全、重构、调试等功能。

可以将 MCP 视为 Cursor 的插件系统——它通过标准化接口连接各种数据源和工具，从而扩展 Agent 的能力。

VS Code

VS Code 不多介绍了，前端最流行的 IDE。

在 VS Code 预览版中，MCP 支持增强了 GitHub Copilot 的 Agent 模式，允许您将任何兼容 MCP 的服务器连接到 Agent 模式工作流中。

Open AI

大家喜爱MCP，我们很高兴能为旗下所有产品添加相关支持。今天我们已经在 Agent SDK 中支持 MCP，对 ChatGPT 桌面应用以及 Responses API 的支持也将很快推出。

MCP Servers 集合

https://github.com/punkpeye/awesome-mcp-servers

Figma-Context-MCP

我们使用此项目 https://github.com/GLips/Figma-Context-MCP 作为 Figma MCP Server，具体用法下面会提到。

申请 Figma Key

在使用 Figma MCP Server 之前，需要申请一下 Figma 的 API Key。

点击 Figma 头像打开 Settings

切换到 Security

创建 Personal access token

点击 Generate token 之后就会看到我们的 API Key，我们把 API Key 保存好接下来使用。

Figma 转代码

接下来我们就把 Figma MCP Server 集成到 Cursor 中试一下真实效果，

下载Cursor

如果没有下载 Cursor 需要先下载：https://www.cursor.com/cn

设置 MCP Server

如果是 macOS 系统选择 Cursor-Preferences-Cursor Settings

打开设置后点击 MCP

然后再点击 Add new global MCP server 按钮，添加如下代码（"YOUR-KEY" 需要替换成在 Figma 申请的 API Key）：

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

然后发现状态变成 Enabled 表示此 MCP Server 可以正常使用了。

其他操作系统的配置方法可以参考 https://github.com/GLips/Figma-Context-MCP

通过上图可以看到 Figma MCP 提供了两个工具：get_figma_data 和 download_figma_images。

复制 Figma 画板

在 Figma 社区里有很多设计好的设计稿，我找了一个待办清单设计稿（https://www.figma.com/community/file/1403205206703293190）如下图：

选中画板，右键 Copy/Paste as-Copy link to selection。

然后将复制好的链接粘贴到 Cursor 的对话框中。这里我选择的是 Agent 模式，模型选择的是 claude-3.7-sonnet。

将 Figma 链接粘贴到 Cursor 中后，Cursor 会自动分析项目所采用的技术栈，然后根据相应的技术栈编写代码：

让我们查看package.json文件，了解项目使用的库和依赖：

获取 Figma 数据，项目开始时首先调用的 get_figma_data 分析 Figma 画板内容，我们需要手动点击 Run tool 以保证继续执行。

除此之外还下载了需要用的图标。

同样需要我们手动点击 Run tool。

之后就是 Cursor 自动完成 Figma 到代码的转换。

Cursor 生成完代码后需要我们手动点击一下 Accept，代码就会添加到项目的目录中。

最后完成开发，我们看下效果：

效果演示

下面就是 Cursor 基于我们的设计稿还原的代码，可以看到左侧的导航栏以及每一个待办列表基本上都还原了设计稿，只是项目概览部分由于没有告诉 Cursor 使用图标库还原度差一些，不过这已经极大提高了前端的开发效率。

代码展示

最后我们简单看下代码质量，代码目录结构如下：

我们看下 Sidebar.js 的实际代码：

import React from 'react';

export default function Sidebar() {
  return (
    <div className="bg-[#F5F4FD] w-64 min-h-screen px-4 py-8 border-r border-gray-200">
    {/* 工作区信息 */}
    <div className="flex items-center mb-6">
    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#221ECA] to-[#6461DA] flex items-center justify-center text-white font-bold">
    K
    </div>
    <span className="ml-2 text-[#434657] font-medium">KDesign 工作区</span>
    </div>

  {/* 收藏夹 */}
<div className="mb-6">
    <div className="flex items-center text-xs text-[#A7ABC3] uppercase font-medium mb-1">
    <span>收藏夹</span>
    <img src="/images/todo/arrow-down.svg" alt="展开" className="w-4 h-4 ml-1" />
    </div>

    <div className="mt-2">
    <div className="flex items-center pl-2 py-2 bg-[#D5D4F5] rounded-r-full">
    <span className="text-[#434657] font-medium">? 我的任务</span>
    </div>

    <div className="flex items-center pl-2 py-2">
    <span className="text-[#434657]">? 终极目标</span>
    </div>
    </div>
    </div>

  {/* 我的仪表板 */}
<div className="mb-6">
    <div className="flex items-center text-xs text-[#A7ABC3] uppercase font-medium mb-1">
    <span>我的仪表板</span>
    <img src="/images/todo/arrow-down.svg" alt="展开" className="w-4 h-4 ml-1" />
    </div>

    <div className="mt-2">
    <div className="flex items-center pl-2 py-2">
    <span className="text-[#434657]">✅ 月度OKRs</span>
    </div>

    <div className="flex items-center pl-2 py-2">
    <span className="text-[#434657]">? 产品驱动因素</span>
    </div>

    <div className="flex items-center pl-2 py-2">
    <span className="text-[#434657]">✏️ 设计团队OKRs</span>
    </div>
    </div>
    </div>

  {/* 新建仪表板 */}
<div className="flex items-center pl-2 py-2 mb-6">
    <img src="/images/todo/add-icon.svg" alt="添加" className="w-5 h-5" />
    <span className="text-[#82869E] ml-2">新建仪表板</span>
    </div>

  {/* 分隔线 */}
<div className="border-b border-gray-200 my-6"></div>

  {/* 设置菜单 */}
<div className="mt-6">
    <div className="flex items-center pl-2 py-2">
          <img src="/images/todo/setting-icon.svg" alt="设置" className="w-5 h-5" />
          <span className="text-[#82869E] ml-2">布局配置</span>
        </div>
        
        <div className="flex items-center pl-2 py-2">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-[#82869E]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
          </svg>
          <span className="text-[#82869E] ml-2">所有仪表板</span>
        </div>
      </div>
    </div>
  );
}

效果非常不错，因为我的项目本身使用的 Tailwind CSS，Cursor 也自动使用的 Tailwind CSS，并且注释也比较完善，对我来说还原度很好。

总结

本文通过 Figma 设计稿转代码的完整实践，我们看到了 MCP 带来的变革力量。将设计工具、开发环境与大模型深度整合的体验。从设计稿到可运行代码的转化时间大大缩短，自动生成的代码具备生产可用性，MCP 协议打通 Figma-Cursor 的通道，构建起智能开发工作流。这仅仅是 MCP 潜力的冰山一角。随着更多工具接入这个协议生态，我们将迎来真正的智能开发时代，每个开发者都将获得超乎想象的赋能。