GitHub Copilot 配合 Figma MCP 还原设计稿生成前端代码

Step 1：配置 MCP

在 VSCode 中打开项目，呼出 GitHub Copilot 对话框，模式选择 Agent，模型建议 Claude 3.7 Sonnet，提问：

https://github.com/GLips/Figma-Context-MCP 如何配置能让你在 VSCode 里使用这个 mcp

之后跟着提示操作即可完成配置。如果有什么需要安装的 VSCode 插件它会自动帮你装，甚至自动生成了配置说明文档。

由于 AI 生成的答案可能不一致，以下是参考的运行结果。它在项目文件夹最外层建了一个.vscode 文件夹，在 settings.json 文件里加上了配置。

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=这里稍后替换成你自己的密钥",
        "--stdio"
      ]
    }
  }
}

Step 2：获取 Figma 密钥

打开 Figma 网页，点击左上角头像 -> Settings -> Security -> Generate new token。 设置路径可能会有变化，找到 Generate new token 即可。 点击后会出现弹窗，随便起个名字比如 mcp，然后把下面的权限列表一个个打开选择读或写，默认是全部 No access。 注意默认是 30 天过期，30 天后需要建一个新的才能继续用。