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

今天给大家介绍两个 figma MCP插件

• • cursor-talk-to-figma-mcp，直接写提示词就可以在 figma上生成设计稿
• • Figma-Context-MCP, 可以根据设计稿生成前端代码

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

安装 bun

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

安装 talk-to-figma-mcp 服务

打开 vscode中的 cline，点击 mcp -> Configure MCP Servers，增加如下 mcp配置内容

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

将项目 clone到本地，github地址：https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

执行启动命令

bun socket

看到 TalkToFigma显示绿灯就表示配置成功了

下载 figma 应用程序

因为网页版不支持 mcp，所以要使用桌面版，下载地址：https://www.figma.com/downloads/

配置 figma

按照下图所示进行操作

选择 cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json文件

然后选择第一个 Cursor MCP Plugin，配置成功后可以看到如下结果

开始使用

在 cline中尝试与 figma进行连接

如果操作都没有问题的话，就可以成功连接到 figma了

接下来我们尝试来设计一个移动端的登录页面，让 chatgpt给出一段提示词

复制提示词到 cline中，运行，等待操作完成后，就可以得到一个登录页面了

但是这个效果说实话很一般，我使用的是 DeepSeek-0324模型

然后同样的步骤使用 cursor 再试试看，生成的设计稿如下

这个效果比 deepseek-0324稍好一些，但是也是达不到设计师的水准，但是用来出原型图目前应该还是一个比较不错的选择。

Figma-Context-MCP 使用教程

仓库地址：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"]
    }
}
}

然后到 figma网站中点击个人头像 -> Settings -> Security -> Generate new token，复制 token设置好 mcp服务中的 api-key就行了

这里我们直接使用上一步生成出来的设计稿，选中页面，按照上图进行操作，然后扔到 cline中，提示词

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

不得不说，这种简单的页面，实现的效果还是很好的。

我也使用过真实的项目设计稿来通过 mcp实现代码，但是效果上就没有这么理想了。

所以短期内，AI还是只能辅助做一些复杂度、还原度要求不高的设计，但是相信随着技术发展，未来的能力会越来越强大。