Cursor+Claude3.7的絕殺：從原型到app，兩步完成app開發

最近在X上看到了一些人在用Claude 3.7 Sonnet生成 app原型圖的嘗試，受到啟發，發現這麼先生成不同介面的原型圖再讓Cursor基於原型圖開發app會是很好的嘗試。尤其是，你也可以不兩步直接生成，而是在過程中更視覺化地思考你要生產的原型，這對於非專業的產品經理來說，會是好得多的方式。

我今天做了些嘗試後，效果讓我感到驚豔。這裡給大家介紹下具體的操作方式。

步驟一：新開專案檔案生成HTML原型圖

可以參考我的提示詞，修改其中的要求。

我想开发一个ai自动记账app，现在需要输出原型图，请通过以下方式帮我完成app所有原型图片的设计。

这里有三个关键点：

1、選擇Claude 3.7 Sonnet模型，不建議thinking

2、選擇composer normal模式，或者說0.46版本中editor模式，不要選擇agent，不要選擇agent！

3、由於一次性生成的html程式碼檔案會太長，中間可能會截斷或建立失敗，你可以點選生成失敗的程式碼檔案，cursor會提醒你是否建立檔案，然後把已經生成的一部分程式碼複製到新建立的檔案中；接著，@對應程式碼檔案，要求cursor繼續補全檔案。

然後，開啟補全完成的html，你就獲得了類似下面的整個app所有主要介面的原型圖👇

步驟二：讓Cursor根據原型圖建立app

用Xcode建立一個新專案，然後在Cursor中開啟專案的根目錄（如果從來沒開發過iOS專案，不知道這一步如何操作的，可以先去看我之前的iOS app開發影片）

在Cursor開啟的iOS app開發專案根目錄中傳送上面得到的app原型圖，然後要求：

请根据我提供的原型图完成这个app的设计

这一步依然有三个关键点：

1、選擇Claude 3.7 Sonnet模型，thinking或非thinking都可以試試

2、選擇agent模式，必須選擇agent！

3、這個過程中不斷accept生成的程式碼檔案就好了，建立完成後如果在Xcode除錯出現bug，可以把xcode的報錯提示覆制回cursor，修bug場景建議使用thinking模型。

我這次測試過程中，兩個步驟分別出現了一次cursor生成出錯和一次Xcode報錯，其他都一切順利，得到的結果遠超我的預期了。

甚至，這個app大部分功能都已經是可以正常操作，邏輯正常的。

這個兩步生成app的策略其實都離不開Claude 3.7的能力，核心用到了兩點：

1、Claude 3.7生成原型的能力驚人

2、Cursor agent模式+Claude 3.7基於原型圖多步驟完成任務能力驚人

下面是其他一些原型圖

本文首發於我的知識星球「AI程式設計：從入門到精通」：https://t.zsxq.com/K3vsN （🎁 限量30元優惠券）