最近在 X 上看到了一些人在用 Claude 3.7 Sonnet 生成 App 原型圖的嘗試，受到啟發(fā)，發(fā)現(xiàn)這么生成不同界面的原型圖再讓 Cursor 基于原型圖開發(fā) App 會是很好的嘗試。尤其是，你也可以不兩步直接生成，而是在過程中更可視化地思考你要生成的原型，這對于非專業(yè)的產(chǎn)品經(jīng)理來說，會是好得多的方式。

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

更多AI編程干貨：

步驟一：新建項目文件生成 HTML 原型圖

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

[我想開發(fā)一個 AI 自動記賬 App，現(xiàn)在需要輸出原型圖，請通過以下方式幫我完成 App 所有原型圖片的設(shè)計。1、思考用戶需要 AI 記賬 App 實現(xiàn)哪些功能 2、作為產(chǎn)品經(jīng)理規(guī)劃這些界面 3、作為設(shè)計師思考這些原型界面的設(shè)計 4、使用 Html 在一個界面上生成所有的原型界面，可以使用 FontAwesome 等開源圖標庫，讓原型顯得更精美和接近真實我希望這些界面是需要能直接拿去進行開發(fā)的]

我想開發(fā)一個 AI 自動記賬 App，現(xiàn)在需要輸出原型圖，請通過以下方式幫我完成 App 所有原型圖片的設(shè)計。1、思考用戶需要 AI 記賬 App 實現(xiàn)哪些功能 2、作為產(chǎn)品經(jīng)理規(guī)劃這些界面 3、作為設(shè)計師思考這些原型界面的設(shè)計 4、使用 Html 在一個界面上生成所有的原型界面，可以使用 FontAwesome 等開源圖標庫，讓原型顯得更精美和接近真實我希望這些界面是需要能直接拿去進行開發(fā)的

我想開發(fā)一個 AI 自動記賬 App，現(xiàn)在需要輸出原型圖，請通過以下方式幫我完成 App 所有原型圖片的設(shè)計。1、思考用戶需要 AI 記賬 App 實現(xiàn)哪些功能 2、作為產(chǎn)品經(jīng)理規(guī)劃這些界面 3、作為設(shè)計師思考這些原型界面的設(shè)計 4、使用 Html 在一個界面上生成所有的原型界面，可以使用 FontAwesome 等開源圖標庫，讓原型顯得更精美和接近真實我希望這些界面是需要能直接拿去進行開發(fā)的

這里有三個關(guān)鍵點

1. 選擇 Claude 3.7 Sonnet 模型，不建議 thinking
2. 選擇 composer normal 模式，或者說 0.46 版本中 editor 模式，不要選擇 agent，不要選擇 agent！
3. 由于一次性生成的 Html 代碼文件會太長，中間可能會截斷或創(chuàng)建失敗，你可以點擊生成失敗的代碼文件，cursor 會提醒你是否創(chuàng)建文件，然后把已經(jīng)生成的一部分代碼復制到新創(chuàng)建的文件中；接著，@對應(yīng)代碼文件，要求 cursor 繼續(xù)補全文件。

然后，打開補全完成的 Html，你就獲得了類似下面的整個 App 所有主要界面的原型圖

步驟二：讓 Cursor 根據(jù)原型圖創(chuàng)建 App

用 Xcode 創(chuàng)建一個新項目，然后在 Cursor 中打開項目的根目錄。

在 Cursor 打開的 iOS App 開發(fā)項目根目錄中發(fā)送上面得到的 App 原型圖，然后要求：

請根據(jù)我提供的原型圖完成這個 App 的設(shè)計

這一步依然有三個關(guān)鍵點：

1. 選擇 Claude 3.7 Sonnet 模型，thinking 或非 thinking 都可以試試
2. 選擇 agent 模式，必須選擇 agent！
3. 這個過程中不斷 accept 生成的代碼文件就好了，創(chuàng)建完成后如果在 Xcode 調(diào)試出現(xiàn) bug，可以把 xcode 的報錯提示復制回 cursor，修 bug 場景建議使用 thinking 模型。

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

甚至，這個 App 大部分功能都已經(jīng)是可以正常操作的。

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

1. Claude 3.7 生成原型的能力驚人
2. Cursor agent 模式+Claude 3.7 基于原型圖多步驟完成任務(wù)能力驚人

下面是其他原型圖：