分享两个 figma mcp 服务，自动设计 UI + 自动生成代码

最近发现两个挺有意思的 Figma MCP 插件，一个能让设计师直接通过写提示词在 Figma 上生成设计稿，另一个则可以根据已有的设计稿自动生成前端代码。这俩工具组合起来，可以显著缩短从设计到开发的流转周期。下面直接进入正题，详细讲讲它们该怎么配置和使用。

cursor-talk-to-figma-mcp 使用教程

这款插件的核心价值在于，你可以在 Cursor 或 VS Code 这类编辑器里，通过自然语言直接操控 Figma 创建元素、调整布局，省去了手动拖拽组件的大量重复劳动。能做什么？说白了就是，你对 AI 描述一下想要的设计，它直接在图里给你画出来。

不过，要让它跑起来，得先做几个准备工作。

安装 bun

首先需要安装 bun 这个运行环境。在终端执行一行命令即可：

curl -fsSL https://bun.sh/install | bash

安装 talk-to-figma-mcp 服务

以 VS Code 的 Cline 插件为例，先打开 Cline，找到 MCP 配置入口。路径是：点击 MCP 图标 → Configure MCP Servers。然后在配置文件中添加如下内容：

"TalkToFigma": {
    "command": "bunx",
    "args": ["cursor-talk-to-figma-mcp@latest"]
}

接下来将对应项目克隆到本地，GitHub 地址为：https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

在项目目录下执行启动命令：

bun socket

如果一切顺利，你会看到 Cline 中 TalkToFigma 显示绿灯——这就是配置成功的标志。

下载 Figma 应用程序

值得一提的是，网页版 Figma 暂时不支持 MCP，所以这一步必须使用桌面版。下载地址：https://www.figma.com/downloads/

配置 Figma

在 Figma 桌面版中，进入插件管理。需要导入项目中的 `cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json` 文件。导入后选择名为 "Cursor MCP Plugin" 的插件并启用它。

配置成功后回到 Cline，尝试与 Figma 建立连接。如果操作无误，连接会成功建立。

连接成功后，就可以测试一下效果了。比如尝试设计一个移动端的登录页面，直接让 ChatGPT 写段提示词，复制到 Cline 中运行。

实际跑下来的结果，坦白讲，效果平平。当时用的是 DeepSeek-0324 模型，生成的设计稿确实比较粗糙。随后换成 Cursor 再试了一次，效果稍好一些，但离专业设计师的水准还有很大差距。从功能定位来看，用 AI 出原型图是目前比较靠谱的用法。

Figma-Context-MCP 使用教程

如果说上一个插件是“从文本到设计”，那么这个插件做的就是“从设计到代码”。它能读取 Figma 设计稿中的图层信息和样式属性，然后让 AI 根据这些信息生成前端代码。

仓库地址：https://github.com/GLips/Figma-Context-MCP

还是以 Cline 为例，先在 MCP 服务中添加如下配置：

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

配置中的 `YOUR-KEY` 需要替换成你在 Figma 生成的 API Token。生成路径是：个人头像 → Settings → Security → Generate new token。将得到的 Token 复制并替换进去。

配置完成后，看到绿灯即为成功。这里直接复用上一步生成的设计稿，选中页面后，在 Cline 中输入提示词：

https://www.figma.com/design/UzioBfkovMOtuNapyJ2Ubx/Untitled?node-id=2002-2&t=Jytp2VedmvusMQjS-4 
按照这个设计稿实现 login.html

从实际使用的体验来看，这种结构简单的页面，生成效果相当可以。但换成一个真实项目的复杂设计稿去实现代码，情况就不太理想了。这反映出目前 AI 在还原度要求高、交互复杂的场景下仍有力有不逮之处。

所以短期内，AI 更适合用于对复杂度、还原度要求不高的页面或组件，比如登录页、个人中心、数据卡片这类标准化模块。随着技术迭代和模型能力的提升，它的上限还会被不断推高。