使用Figma MCP生成UI搞，并根据UI稿生成网页和Android代码

1. Figma MCP 有什么用？

Figma MCP ，让大模型可以调用Figma来生成UI稿，也可以获取Figma中的UI稿信息来生成代码。

市面上比较好的Figma MCP有这些 :

• cursor-talk-to-figma-mcp : 通过获取Figma API Key来实现Cursor和Figma的连接，更侧重精准控制，因为大多数Figma文件都会非常大，如果你想让Cursor精准链接到文件中的特定元素，选择这个MCP会更合适。 (选择某个元素后，鼠标右键或快捷键CMD+L复制元素的链接，就可以发给Cursor进行操作)
• Figma-Context-MCP : 通过Figma插件形式通过channel实现与Cursor的连接，更侧重从0到1的设计元素的生成，比较适合没有太多设计基础的用户。
• Figma官方MCP (Beta) : 还是Beta版本，但是幻觉现象有大幅度的改善，大家可以期待一波

2. 环境配置

安装必备工具

• Node.js ≥ v18

• Cursor IDE

• 包管理工具：npm/pnpm/yarn/bun

2.1 安装Node.js

Node.Js下载地址 : https://nodejs.org/zh-cn/download

2.2 安装Figma

这里不能使用网页版Figma，要安装电脑版Figma

2.3 下载 cursor-talk-to-figma-mcp

下载 cursor-talk-to-figma-mcp，并解压

2.4 Windows + WSL 指南

通过 powershell 安装 bun

powershell -c "irm bun.sh/install.ps1|iex"

取消注释 src/socket.ts 中的主机名 0.0.0.0

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

启动 websocket

bun socket

2.5 在Cursor中配置talk-to-figma-mcp

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

2.6 打开电脑版Figma

这里不能使用网页版Figma，如果没安装需要安装电脑版Figma

Figma官方下载地址

2.7 新建一个Figma空项目

新建一个Figma空项目，然后打开Figma插件配置

2.8 导入manifest文件

对应的是cursor-talk-to-figma-mcp-main/\src\cursor_mcp_plugin/manifest.json

2.9 TalkToFigma连接服务

点击Connect按钮

连接成功后，会显示端口号和channel ID

2. 生成figma UI稿

然后就可以和Cursor对话了
指明使用talk to figma，以及channel，这样Cursor会自动去连接Figma

talk to figma，Connected to server on port 3055 in channel: 8zwse639。帮我在figma画布中创建一个待办事项App的首页，极简风。

3. 根据Figma UI稿 生成代码

3.1 生成HTML页面

提示词，这里的端口号和Channel Id都需要改成你自己的

Connected to server on port 3055 in channel: f7y64bwy  查看选中的设计稿信息

根据选中的设计稿，生成HTML页面

效果如下

3.2 生成Android页面

Connected to server on port 3055 in channel: f7y64bwy  查看选中的设计稿信息

根据选中的设计稿，生成Android Compose页面

效果如下

4. AI编程系列

使用AI编程，让AI成为你的打工人
使用AI大模型+高德MCP规划旅游行程并生成网页
使用Cursor+Figma MCP生成UI搞，并根据UI稿生成网页和Android代码