之前的雜談中有提到目前的一些主流AI編程工具，比如Cursor，Copilot，Trea等。因為我是Android 開發，日常使用Android Studio，所以日常使用最多的還是Copilot，畢竟Github月月送我會員，白嫖還是挺香的。

但是用過Cursor的也都知道它的強大，但是做Android開發還是不方便，需要兩個工具來回切換使用。所以就在想寫flutter應該不錯，所以在早些時間就試了試，整體來說還是不錯的。但是剛開始還是有些不習慣，整體效率沒有明顯提升，就擱置了。

后來受到啟發，在想能否上傳設計圖給Cursor，讓它幫我寫UI。畢竟在我的經驗里，UI的耗時基本占一個需求的60%左右，畢竟要還原設計稿，細節還是不少的，也需要不斷適配調式。于是測試了一番，最近有了一些階段性成果，整理分享一下，拋磚引玉。

測試頁面

選了一個很簡單的頁面，試試水。公平起見，以下效果均是第一次生成的結果，不會嘗試多次，挑選效果好的或是差的對比。

測試方案

Codia

figma插件，可以在figma上將設計稿轉換為代碼并導出。使用方法不做過多介紹，見官網。

測試效果：

優點：

• 使用方便，直接導出flutter項目，圖片資源等都打包好。
• 還原度高。頁面大小，間距，顏色等信息都是正確的。

缺點：

• 寬高和位置都是寫死的（用的Stack + Positioned），導致代碼幾乎不可用。
• 頁面中的狀態欄，底部的黑色小條當做頁面內容生成了，比較傻瓜。
• 不靈活，不能交互。例如圖中的底部進度條都是圖片。banner的部分也是圖片一張，不能滑動。

Cursor + Claude 3.5

在Cursor中上傳UI頁面的圖片，提示詞：根據圖片，生成Flutter代碼。

測試效果：

優點：

• 生成的代碼中各個控件位置不會寫死。

缺點：

• 還原度差的遠，或許多次嘗試會有好的。
• 也無法獲取頁面中的切圖，上面的人物圖片是我自己替換的。

原因：figma插件掌握的信息更多，上傳圖片的方式只能靠ai識別圖中信息，在間距，大小，顏色上都做不到不準確。

Cursor + Claude 3.7

后面更新了Claude 3.7，編程能力有所提升，所以我又試了一次。

效果：下圖中最后一張是Claude 3.7生成的效果。

還原度有提升，但問題還是一樣，顏色，圓角，大小，間距都是不對的。同時截止目前沒有一個方案可以識別圖中的輪播效果并實現。

---

以上是第一階段測試，基于當時（25年2月20日）的工具和AI能力實現的。兩種方案各有千秋，如果可以綜合到一起那效果可以更好。

CodeParrot

地址：https://codeparrot.ai
VSCode插件，將figma頁面地址粘貼進去，可以基于當前項目的主題，組件庫去生成代碼。

效果：

優點：

• 可以獲取頁面信息，寬高大小等信息比較準確，自動切圖。
• 有一定還原度，代碼靈活。例如這里的輪播效果實現了。

缺點：

• 頁面理解能力不強，比如狀態欄和底部小條的處理。
• 切圖不準確（這個例子中是將圖片和指示器一塊切出，同時上傳圖片到它們的服務器上，這里用的圖片是鏈接地址。。。）

但整體來說，又進步了一些。

Cursor + MCP + Claude 3.7

到這里就來到了本篇的重點。

前一陣Cursor支持了MCP，同時也有了大量的MCP工具出現。這次我使用到的是Figma-Context-MCP。

配置好后如下圖，它提供兩個工具，一個是獲取figma頁面信息，一個是下載切圖。這正是我們需要的。

使用方法也很簡單，Cursor選Agent模式，填入figma地址，加上提示詞。

第一輪測試

使用Cursor的好處是，可以幫我們將圖片下載到對應的文件夾內并引用，包括輪播依賴的引用等。

左邊這個是我第一次嘗試時的效果，右邊是第二次。差距這么大的一個原因是figma給到的信息是json，里面包含頁面的層級，控件大小，顏色這些。一開始figma上頁面的層級是不標準的，例如：按鈕的文字和按鈕不在一個組里面，指示器也一樣。所以布局也就有概率混亂。

第二輪測試

后面調整了一下figma上的層級，每個組的命名也規范了。這樣等于是給到了AI更多的信息。

重新生成了一下，效果：

左邊是生成的效果，右邊是我改了一下輪播區域比例后的效果。看的仔細的話，你會發現字體也是對的，之前其實都是默認字體。同時不知道是不是命名的關系，iOS底部的黑條（Home Indicator）也沒有了。

其實上面的CodeParrot就是用調整后的設計稿生成的，所以輪播效果大概率也是因為這點才實現了。

第三輪測試

后面我看了一下代碼，發現文字顏色，大小，字體，字重都是對的，但是間距，寬高這些還是有問題。看了一下figma給到的信息中是有寬高的，間距沒有（其實也可以理解，畢竟間距是給相對概念，不太好給到）。但是這個mcp在簡化json信息的時候去掉了寬高。所以我修改了源碼，將控件寬高信息保留。測試效果如下：

我本身以為給到AI寬度會讓它寫死寬高，但實際上它自己會做識別（不穩定），在合適的地方使用。比如指示器就使用寬高，底部按鈕就只使用高度。這個效果基本上改改已經可以用了。

不過這次頂部的漸變背景不見，字體也不對了。看來這塊還是不穩定。

優點：

• 可以獲取頁面信息，自動下載切圖。
• 還原度較高，代碼靈活。
• 自由組合，后面可以使用更優秀的模型或是MCP來提升效果。

缺點：

• 要求設計對頁面進行標準命名，分組。
• 需要更多的配置（MCP，rules）

---

以上是第二階段測試，基于當時（25年4月1日）的工具和AI能力實現的。目前來說Cursor + MCP是目前最理想的方案。同時以目前的情況看，大多數AI生成代碼只能用figma，藍湖目前沒有接口，這方面差的遠。

到此本篇結束，下一篇我會介紹進一步優化的方案及效果。很快，敬請期待~