AI产品经理学习 DAY4 · Cursor 生成figma 原型

2套方案

方案1和方案2 核心区别

对比维度	方案 1：Gemini → JSON → 工具	方案 2：cursor-talk-to-figma-mcp
技术难度	⭐⭐ 低	⭐⭐⭐⭐ 高
实施周期	30 分钟	1-2 小时
效果质量	🌟🌟🌟 不错	🌟🌟🌟🌟🌟 顶级
可编辑性	⭐⭐ 生成后可编辑	⭐⭐⭐⭐⭐ 实时可编辑
迭代速度	🐢 慢（每次重新生成）	⚡⚡⚡ 快（实时修改）
依赖复杂度	简单（Node.js）	复杂（MCP + Bun + WebSocket）
长期维护	⭐⭐⭐ 中等	⭐⭐⭐⭐ 相对轻松

方案1:

像"照相"：

• 拍一张照片（生成 JSON）

• 打印出来（转成 Figma 文件）

• 你看着照片改邮件本

• 改完了要重新拍一张照

• 效率低下 ❌

方案2:

像"视频通话"：

• Cursor 和 Figma 实时连接

• Cursor 说"改成红色"，Figma 立刻变红

• Figma 中改了什么，Cursor 实时看到

• 无缝协作 ✅

【方案1】Gemini 在 Cursor 中的 Figma 生成能力

Gemini 能做什么？

✅ Gemini 可以生成 Figma REST API 调用代码

✅ Gemini 可以生成可在 Figma 中打开的文件链接

✅ Gemini 的"理解能力"确实比 Sonnet 强（多模态）

问题：Cursor 中能否用 Gemini 达到同样效果？

答案是：理论上能，但需要满足 3 个条件

🔧 实现原理（重要）

Gemini 生成 Figma 文件的原理不是"凭空生成"，而是：

Gemini 理解需求
    ↓
Gemini 调用 Figma REST API
    ↓
API 在 Figma 云端生成设计文件
    ↓
返回文件链接
    ↓
用户点击链接在 Figma 中打开并编辑

关键：这需要 API Token 认证

操作步骤

Cursor (Gemini) → 生成 JSON 配置
        ↓
你手工复制/粘贴
        ↓
用 Figma Plugin 或工具导入
        ↓
Figma 中自动生成设计

步骤 1：切换到 Gemini 3.1

在 Cursor 中，点击模型下拉框，选择 Gemini 3.1 Pro

步骤 2：用这个提示词

将需求文档内容转化为json格式：

根据这份产品需求文档（@v2.0_prd.md），生成一份"Figma 设计配置"（JSON 格式）。

这个 JSON 应该包括：
1. 所有的页面（pages）
2. 每个页面的框架结构（frames）
3. 每个框架内的组件（components）
4. 样式配置（colors, typography, shadows）
5. 布局信息（width, height, constraints）

JSON 结构示例：
{
  "projectName": "xxxx",
  "pages": [
    {
      "pageName": "Dashboard",
      "frames": [
        {
          "frameId": "pc_dashboard",
          "name": "PC - Dashboard",
          "width": 1440,
          "height": 900,
          "children": [
            {
              "type": "group",
              "name": "Header",
              "children": [...]
            }
          ]
        }
      ]
    }
  ],
  "designTokens": {
    "colors": {...},
    "typography": {...}
  }
}

请输出完整的、可被 Figma 导入的 JSON 配置。

步骤 3：获取 Figma API Token

• 打开 Figma →"Help and account" →Settings / 或 "Account settings"→ Personal access tokens
• 复制 token
  • 点 Generate a new token
  • 复制这个 token（格式：figd_xxx...）
  • 保存到一个安全的地方（后面要用）

步骤 4：创建脚本

创建文件 json_to_figma_auto.js

const fs = require('fs');
const path = require('path');

// 读取 JSON 配置
const jsonConfig = JSON.parse(
  fs.readFileSync('v2.0_figma_config.json', 'utf-8')
);

// 你的 Figma API Token
const FIGMA_TOKEN = process.env.FIGMA_TOKEN || 'your_token_here';

if (FIGMA_TOKEN === 'your_token_here') {
  console.error('❌ 错误：请先设置 FIGMA_TOKEN 环境变量');
  console.log('运行命令：export FIGMA_TOKEN=你的token');
  process.exit(1);
}

// 步骤 1：创建文件
async function createFile() {
  console.log('📝 创建 Figma 文件...');
  
  const response = await fetch('https://api.figma.com/v1/files', {
    method: 'POST',
    headers: {
      'X-FIGMA-TOKEN': FIGMA_TOKEN,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: jsonConfig.name || '伴学营 v2.0'
    })
  });

  const data = await response.json();
  
  if (!response.ok) {
    throw new Error(`创建文件失败: ${data.message}`);
  }

  return data.id;
}

// 步骤 2：添加页面和内容
async function addContent(fileId) {
  console.log('📐 添加设计内容...');

  const response = await fetch(
    `https://api.figma.com/v1/files/${fileId}`,
    {
      method: 'PUT',
      headers: {
        'X-FIGMA-TOKEN': FIGMA_TOKEN,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: jsonConfig.name,
        // 简单示例：添加一个文本框
        children: [
          {
            name: 'Page 1',
            type: 'CANVAS',
            children: [
              {
                name: '标题',
                type: 'TEXT',
                characters: jsonConfig.name || 'v2.0',
                x: 0,
                y: 0,
                width: 200,
                height: 50
              }
            ]
          }
        ]
      })
    }
  );

  if (!response.ok) {
    const data = await response.json();
    throw new Error(`添加内容失败: ${data.message}`);
  }
}

// 主函数
async function main() {
  try {
    const fileId = await createFile();
    console.log('✅ 文件创建成功！');
    
    await addContent(fileId);
    console.log('✅ 内容添加成功！');
    
    const figmaUrl = `https://www.figma.com/file/${fileId}`;
    console.log('\n🎉 完成！打开链接查看：');
    console.log(figmaUrl);
    
  } catch (error) {
    console.error('❌ 错误:', error.message);
  }
}

main();

步骤 5：执行脚本

export FIGMA_TOKEN='figd_你的token'

node json_to_figma_auto.js

【方案2】Cursor 和 Figma 实时同步

Cursor (AI) ←→ MCP 服务器 ←→ WebSocket ←→ Figma 插件 ←→ Figma 设计
                                              ↑
                                    实时双向通信！

参考视频：https://www.bilibili.com/video/BV1RrZHYqEvm/?vd_source=9863e18e0291e2803945c0f188c308d4

git项目地址：https://github.com/grab/cursor-talk-to-figma-mcp

操作步骤

第一步：安装 Bun（运行时）
    ↓
第二步：克隆 cursor-talk-to-figma-mcp 项目
    ↓
第三步：安装依赖
    ↓
第四步：启动 MCP WebSocket 服务器
    ↓
第五步：在 Cursor 中配置 MCP
    ↓
第六步：在 Figma 中安装并连接插件
    ↓
第七步：测试连接

现在开始

第一步：安装 Bun（运行时）

在终端运行：

bash

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

验证安装成功：

bash

bun --version

应该输出类似：1.0.x 的版本号

第二步：克隆项目

bash

cd /Users/tal/Documents/AI_group/AITutor
# 克隆项目git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
# 进入项目目录cd cursor-talk-to-figma-mcp
# 查看项目结构ls -la

第三步：安装依赖

bash

# 在 cursor-talk-to-figma-mcp 目录下bun install

这会安装所有需要的 Node 包。耗时可能 1-2 分钟。

第四步：启动 MCP 服务器

bash

# 仍在 cursor-talk-to-figma-mcp 目录下bun run dev

这会启动一个 WebSocket 服务器，应该看到类似的输出：

✅ MCP Server running at ws://localhost:3001

不要关闭这个终端！它需要一直运行。

打开一个新的终端窗口，继续后面的步骤。

第五步：在 Cursor 中配置 MCP

现在要在 Cursor 中注册这个 MCP 服务器。

1️⃣ 打开 Cursor 的配置文件

bash

# Mac/Linuxnano ~/.cursor/settings.json
# 或用 VS Code 打开code ~/.cursor/settings.json

2️⃣ 在配置文件中找到（或新增）mcpServers 部分

如果找不到，则：

1️⃣ 打开 Cursor

2️⃣ 按 Cmd+, (逗号) 打开设置

3️⃣ 搜索 "MCP"

4️⃣ 应该会看到 "MCP Configuration" 或类似的选项

5️⃣ 点击 "Add MCP Server" 或 "Configure MCP"

找到 "Installed MCP Servers" 或类似的选项

添加这段配置：

json

cat > ~/.cursor/mcp.json << 'EOF'
{
  "mcpServers": {
    "figma": {
      "command": "bun",
      "args": ["run", "/Users/../cursor-talk-to-figma-mcp/dist/index.js"],
      "env": {
        "FIGMA_TOKEN": "figd_你的token"
      }
    }
  }
}
EOF

替换你的 Figma Token

把 figd_你的token 替换成你的实际 token

保存文件

然后验证：

bash

cat ~/.cursor/mcp.json

---

⚠️ 确保 MCP 服务器仍在运行

检查第四步启动的 WebSocket 服务器

cd /Users/../cursor-talk-to-figma-mcp
bun run dev

ps:需进入到 /cursor-talk-to-figma-mcp 所在目录下

第六步 运行 build 命令编译项目

cd /Users/../cursor-talk-to-figma-mcp
bun run build

ps:需自行补全路径

重启 Cursor

关闭并重新打开 Cursor，让它重新加载 MCP 服务器：

bash

killall Cursorsleep 2open /Applications/Cursor.app

重启后检查

1️⃣ 打开 Cursor 的 MCP 界面

• 按 Cmd+Shift+P（打开命令面板）
• 搜索 "MCP" 或点击左侧的 MCP 图标

2️⃣ 查看 "Installed MCP Servers"

• 应该看到 "figma" 服务器出现
• 状态应该是 ✅ "Connected" 或类似的

如不行，则：

启动 WebSocket relay，保持运行

cd /Users/../cursor-talk-to-figma-mcp
bun socket

第七步：在 Figma 中安装并连接插件

在 Figma 里的操作步骤：

1. 加载插件

• 打开 Figma Desktop（必须是桌面版，不是网页版）

• 顶部菜单：Plugins → Development → Import plugin from manifest...

• 选择文件：src/cursor_mcp_plugin/manifest.json

2. 运行插件

• 顶部菜单：Plugins → Development → Cursor MCP Plugin（点击运行）

• 插件面板会弹出

3. 加入 Channel

• 插件面板里有一个输入框，填入 channel 名称（例如 default或任意字符串）

• 点击 Join 按钮连接到 ws://localhost:3055

连接成功后插件状态会变绿，MCP server 和 Figma 就打通了，可以从 Claude/Cursor

发指令操作 Figma 了。

▎ 注意：Figma 必须和 relay server (bun socket) 在同一台机器上，否则

▎ localhost:3001 无法访问。

---

第七步：测试连接

1️⃣ 重启 Cursor

关闭并重新打开 Cursor，让它加载 MCP 配置

2️⃣ 在 Cursor 中打开一个对话（Ctrl+L）

3️⃣ 尝试用自然语言指令 Figma

例如：

在 Figma 中创建一个新的页面，叫"Test Page"

4️⃣ 看看 Figma 中是否出现了对应的变化

⚠️ 在运行过程中，插件窗口不能关闭。关闭窗口会断开 WebSocket 连接，Cursor 就无法与 Figma 通信了。保持它在后台打开即可，可以把它拖小一点不影响操作。