这个 @framelink/figma-mcp-server 是一个非常棒的社区开源项目，它的核心优势在于**“描述性输出”**而非“指令性输出”。

简单来说，官方 Figma MCP 可能会直接给你一段写死的 React 代码，而 Framelink 会把设计稿“翻译”成 AI 能听懂的布局描述（如：这是一个水平排列、间距 16px、圆角 12px 的容器），让 AI 结合你项目的代码规范（比如你是用 Tailwind 还是 Styled-components）来生成代码。

以下是基于 @framelink/figma-mcp-server 的完整配置和使用流程：

🚀 第一步：准备工作（获取钥匙）

在使用之前，你需要从 Figma 获取“通行证”。

1. 登录 Figma：打开浏览器登录你的 Figma 账号。
2. 进入设置：点击左上角头像 -> Settings。
3. 生成令牌：
   • 找到 Security 选项卡。
   • 滚动到 Personal access tokens 部分。
   • 点击 Create new token。
   • 命名：填 Framelink MCP。
   • 权限：勾选 File content (读取文件) 和 Development resources (开发资源)。
   • 复制令牌：生成后立即复制这个字符串（figd-xxxx...），它只显示一次，丢了得重来。

⚙️ 第二步：配置 MCP 服务器（安装桥梁）

你需要把这个服务器配置到你的 IDE（VS Code / Cursor / Trae 等）中。

找到你的 MCP 配置文件（通常是 mcp.json），添加以下配置：

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=你的_FIGMA_令牌_粘贴在这里",
        "--stdio"
      ]
    }
  }
}

• 注意：
  • 如果是 Windows 系统，command 可能需要改成 cmd，args 改为 ["/c", "npx", ...]。
  • 配置保存后，重启你的 IDE 或重新加载窗口，确保服务器状态变绿（Connected）。

🎨 第三步：如何使用（从设计到代码）

配置好后，AI 就拥有了“眼睛”。操作流程如下：

1. 获取设计链接

1. 打开 Figma，选中你想要转换的 Frame（画板）或 Group（组件组）。
2. 右键点击 -> Copy/Paste as -> Copy link to selection（复制链接）。
   • 注意：一定要复制“选中项”的链接，而不是整个文件的链接。

2. 向 AI 发送指令

在 IDE 的 AI 对话框中，粘贴链接并输入指令。

• 指令示例：

  “请帮我实现这个 Figma 组件：[粘贴你的链接]。请使用 React + Tailwind CSS，保持响应式布局。”

3. AI 的处理过程（幕后发生了什么）

1. 调用工具：AI 识别链接，自动调用 Framelink 的 get_figma_data 工具。
2. 数据压缩：Framelink 服务器通过 Figma API 获取原始数据，并将其压缩和简化（去除噪点，只保留布局、样式、层级信息）。
3. 代码生成：AI 接收到结构化的描述（例如：“这是一个 Flex 容器，背景白色，内含一个按钮”），然后根据你的要求生成代码。
4. 写入文件：你可以直接让 AI “把代码写到 src/components/LoginForm.tsx”，它会利用文件系统权限直接创建或修改文件。

💡 为什么选 Framelink 而不是官方 MCP？

🛠️ 进阶技巧

• 处理复杂页面：不要试图一次性转换整个页面。Framelink 的最佳实践是**“原子化”**操作——一次选中一个组件（如导航栏、卡片、按钮组）进行转换，然后组合起来。
• 结合上下文：如果你的项目有特定的 UI 库（比如 Shadcn UI），你可以在 Prompt 里加一句：“请使用 Shadcn UI 的 Card 和 Button 组件来还原这个设计”，AI 结合 Framelink 提供的布局数据，生成的代码还原度会非常高。