前面两篇介绍了AI生成Flutter UI代码的探索过程和使用技巧及问题。本篇来补充一些问题进展和使用细节。

1. 问题进展

上一篇提到的已知问题有：

• 个别颜色的引用没有遵循规则创建并引用，尤其是一些渐变用到的颜色。
• 有时命名没有遵循规则。
• Figma MCP工具下载图片时需要模型给到下载的路径和下载的节点。试了几个模型，这块存在不稳定的情况，比如有时没有给到节点，有时给的相对路径，Windows下给的路径有转义等。
• 对于间距和控件的排列位置，目前还是需要手动去调整。
• figma相较蓝湖使用起来还是不方便，查看属性不直观。

目前在使用了Claude 4 sonnet后，模型能力的提升解决了前三点问题，一次性生成的效果更好。对于另外两个问题，目前还是老样子。不过已经瑕不掩瑜了，我实际在项目中使用下来，感觉还是不错的。效率有了不小的提升。

如果间距的问题有一天可以得到解决，那figma用的方不方便都不是很重要了。

2. 本地配置

本地运行。也可以使用下面的配置：

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "url": "http://localhost:3333/sse"
    }
  }
}

项目根目录执行命令启动服务：

npm run start -- --figma-api-key="figd_xxx"

也可以将apikey，端口号写入项目根目录下的env文件。我们公司是将整个项目和node环境打成可执行文件，方便每个人使用。避免环境配置，也避免apikey泄露。

为什么没有部署远程服务呢，因为涉及到下载图片。如果部署到服务器上，图片都会下载到机器上，我们如果做这块处理，终归会多一道工序，反而还搞复杂了。

3. 探索进展

Figma官方MCP

Figma官方也推出了MCP，我在一个月前也体验了一下。尝试下来（Cursor + Figma官方MCP + Claude 4.0）和现在用的效果差不多。但这个目前不支持下载里面的指定切图，所以效果还是差点。毕竟我是在开源的基础上做了修改，更适合我目前的工作流。

也期待后续的不断优化完善。

cursor-talk-to-figma-mcp

另外最近我也尝试了cursor-talk-to-figma-mcp，通过描述需求，帮我生成figma的设计稿。

整体生成速度比较慢，也没有Google Stitch 来的简单完善。测试下来感觉对我一个不会设计的人来说还是不错的，可以做个简单的原型。

但是对于设计来说，这就是个玩具，还达不到提效的作用。也是期待后续的进化，看能否通过模型的审美提升及结合其他mcp工具，生成更完美的设计效果。

---

另外也不局限Flutter UI的代码生成，我也在尝试原生Android UI代码的生成，比如xml和Compose。思路都是类似的，最好是添加项目介绍和规范，目前试下来效果也还不错。