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

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

更多AI編程干貨：

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

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

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

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

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

這里有三個關鍵點

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

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

步驟二：讓 Cursor 根據原型圖創建 App

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

在 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 基于原型圖多步驟完成任務能力驚人

下面是其他原型圖：