操作步骤

第一步：获取 Figma 的 Access Token

配置 Figma AI Bridge 时，需要填入你的 Figma Personal Acccess Token。你可以在 Figma 安全设置中心获取它。步骤如下：

1. 登录 Figma。
2. 点击页面左上角的用户头像，然后在菜单中选择 Settings。

界面上显示设置窗口。

1. 在窗口的顶部菜单中，选择 Security。

你已进入安全设置面板。

1. 移动至 Personal access tokens 部分，然后点击 Generate new token 按钮。

界面上显示 Generate new token 弹窗。

1. 配置你的 Figma Personal Access Token：

1. 1. 输入 Token 的名称。
   2. 设置 Token 的有效期。
   3. 配置 Token 的权限。调至最高权限即可；

1. 点击窗口底部的 Generate token 按钮。

Figma Personal Access Token 已生成，你会在后续配置 MCP Server - Figma AI Bridge 时用到它。

第二步：在cursor中创建MCP实例

1. 点击创建会进入一个编辑页面
2. 输入你的token，填充在figma-api-key后：

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

第三步：开启对话，完成设计需求

与cursor智能体对话，输入 Figma 设计稿的地址，然后描述你的需求，让智能体创建相应的前端页面

1. 在 AI 对话输入框下方，选择你想使用的模型（本教程使用 Claude-4-Sonnet）。

1. 前往 Figma 设计稿页面，选中设计稿并右击，然后在菜单中选择 Copy/Paste as > Copy link to selection。

已复制该设计稿的链接。

1. 在 AI 对话输入框中，粘贴所复制的设计稿的链接。
2. 在设计稿链接的标签后输入你的需求并发送。例如：“请严格按照我提供的 Figma 链接内容生成 HTML 前端页面。UI 要严格还原设计稿，需要实现响应式设计”。
3. 持续与智能体对话，优化前端页面，直至达到让你满意的效果。