使用Clauder 3.7与Figma MCP生成Flutter界面代码

figma-mcp-clauder-3-7-flutter

原文如何通过Clauder 3.7与Figma MCP高效生成Flutter代码

上篇文章讨论了 Cursor 0.46，但未提及 Model Context Protocol (MCP) 协议。这是一个重要的特性，使 Cursor 能够访问外部资料。今天，我将举例说明如何通过 Figma MCP 来生成界面代码。

参考

步骤

第一步：获取 figma token

figma-generate-new-token

第二步：配置 cursor mcp

https://github.com/GLips/Figma-Context-MCP

cursor-mcp-add

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "figd_cZZ0Jb1ZuDYrYZZJtI2tAuI4YktGof5PrHo8N_W5"
      }
    }
  }
}

我目前是最新的 cursor ，变成了手动输入 json 配置，之前还是有界面的。
mcp 有两种模式：
command 命令行模式
sse 在线服务调用（这种方式由于采用请求中转转发，可能有丢包问题。）

第三步：复制 figma 组件链接

选中组件后，右键选择 copy link to selection 。

第四步：输入提示词

提示词，我加入了 figma 链接和代码参考要求。

请参考 @https://www.figma.com/design/RPc6qZ3UUymiEIwt3m6fqN/Altegic---Online-Learning-Mobile-App-UI?node-id=0-1327&t=Xcb9LnHfFIQMxDXH-4 设计搞，编写一个消息页面。

代码风格参考 lib/pages/goods/product_list/view.dart

Cursor 自动会识别 mcp 请求，全自动。
记得打开 Yolo 模式。

Agent 自动读取了 figma mcp 服务返回资料。

get-figma-data

返回的是一个 json ，描述了 figma 设计稿的布局结构、样式、内容。

代码生成还是不错的，目录结构复合我的规范，视图view代码也是采用我的 build 构件法来写的，结构没问题细化就自己调几下好了。

cursor-generater-flutter-code

最后：运行

消息通知页

小结

在本篇文章中，我们探讨了如何使用Clauder 3.7与Figma MCP工具高效生成Flutter界面代码。通过结合这两款强大的工具，开发者能够显著提升代码生成效率和设计一致性。无论是新手还是经验丰富的开发者，了解这些工具的应用将助力您的Flutter开发之旅。希望本文能为您提供有价值的参考，帮助您在Flutter界面设计中取得更好的成果。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

猫哥 APP

flutter 学习路径

end