cursor+MCP+figma实现从设计稿生成代码

今天分享一下使用AI编程工具cursor，来通过设计稿自动生成前端代码，高效实现开发。

模型上下文协议（Model Context Protocol，MCP），是由 Anthropic推出的开源协议 ，旨在实现大语言模型与外部数据源和工具的集成，用来在大模型和数据源之间建立安全双向的连接 。

一 配置MCPserver。打开cursor，点击设置，选择mcp，添加一个mcpserver

我们可以通过官方文档https://github.com/GLips/Figma-Context-MCP，找到MCP的配置。

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key='xxx'",
        "--stdio"
      ]
    }
  }
}

这里的figma-api-key需要替换成你实际的figma api key。

我们登陆figma.com. 在setting-->Security下，generat new token.把生成的这个key粘贴到刚才的配置。

到这里figma的MCPserver就配置好了。

下面我们开始根据figma设计稿生成代码。

先复制设计稿的链接，然后在cursor对话框输入提示词，就可以等待代码生成了

生成代码过程中会有一些交互式的确认，根据具体情况确认就好。

最后我们npm run dev 来看看效果：

这个是生成的效果

这个是原设计稿效果

可以看到相差很小，只需要做稍微的调整就可以了。