# 從原型到 App: Cursor + Claude

最近在 X（Twitter）上看到一些開發者使用 Claude 3.7 Sonnet 來生成 App 的原型圖，這讓我產生了一個新的想法：

> 先用 Claude 3.7 生成不同界面的原型圖，再讓 Cursor 根據這些原型圖開發 App。

這種方式不僅效率很高，特別適合沒有設計經驗的PM需要產出一些想法的基本操作介面。這個過程還能讓你邊思考邊調整設計，參考了網路上別人的一些內容之後，這裡紀錄和分享具體的操作方式。

---

## 步驟一：建立新專案並生成 HTML 原型圖

我們可以透過 Claude 3.7 來生成 App 的所有原型畫面。以下是我使用的提示詞（Prompt），你可以根據需求自行調整：

我想開發一款 AI 自動記帳 App，請幫我設計所有的原型畫面。
請按照以下步驟來生成：
1. 思考使用者需要 AI 記帳 App 具備哪些功能。
2. 以產品經理的角度規劃這些界面。
3. 以設計師的視角思考這些原型界面的設計。
4. 使用 HTML 生成所有的原型畫面，並放在同一個頁面上。
   - 可使用 FontAwesome 或其他開源圖標庫，讓畫面更精美且接近實際 UI。

這些畫面應該能夠直接交給開發人員進行實作。

這裡有三個關鍵點：

1. **選擇 Claude 3.7 Sonnet 模型，不建議使用 Thinking 模式。**
2. **選擇 Composer Normal 模式（或 0.46 版本中的 Editor 模式）。**
- **不要使用 Agent 模式！不要使用 Agent 模式！**
3. **注意 HTML 原型圖的長度限制。**
- 由於一次性生成的 HTML 代碼可能會過長，導致 Claude 生成失敗或截斷。
- 如果發生這種情況，Cursor 會提醒你是否要建立新文件。
- 你可以把 Claude 已經生成的部分代碼複製到新文件中，然後在 Cursor 裡 @對應的文件，讓 Claude 繼續補全剩下的內容。

當你成功補全並打開這個 HTML 文件後，就會得到類似以下的完整 App 原型界面：

---

步驟二：讓 Cursor 根據原型圖開發 App

現在，我們可以開始將這些原型轉換成真正的 App！

首先，使用 Xcode 建立一個新專案，然後在 Cursor 中打開這個專案的根目錄。
在 Cursor 中打開 iOS App 開發專案後，將我們剛剛獲得的 App 原型圖發送到 Cursor，並輸入以下指令：

請根據我提供的原型圖完成這個 App 的設計。


這一步依然有三個關鍵點：

1. **選擇 Claude 3.7 Sonnet 模型，Thinking 模式或非 Thinking 模式都可以試試。**
2. **這次請選擇 Agent 模式，這一步驟一定要用 Agent！**
3. **開發過程中持續接受 Cursor 生成的代碼即可。**
- 當程式碼完成後，如果在 Xcode 調試時遇到錯誤，將 Xcode 的錯誤訊息複製回 Cursor，並請 Claude 3.7 幫助修復 Bug。
- **除錯過程建議使用 Thinking 模型，以獲得更精確的建議。**
在這次測試過程中，我遇到了兩個小問題：

1. Cursor 在某個步驟生成錯誤。
2. Xcode 編譯時出現報錯。

但整體過程依然順利，最終結果遠超我的預期！

這個方法讓 App 開發變得更高效、直觀，而且即使沒有完整的開發經驗，也能快速構建出乍看之下好像還可以看的 App！

這款乍看用的 App 的大部分功能已經可以正常運作。

<iframe title="vimeo-player" src="https://player.vimeo.com/video/1066171828?h=c2e9cf3c77" width="640" height="360" frameborder="0" allowfullscreen></iframe>
---

## Claude 讓兩步驟 App 開發成為可能

這種兩步驟開發策略的核心，離不開 Claude 3.7 強大的能力，主要體現在兩個關鍵點：

1. **Claude 3.7 生成原型的能力驚人**
2. **Cursor Agent 模式 + Claude 3.7 的多步驟執行能力，讓基於原型圖開發變得效率更高且更方便**


參考內容:
https://www.youtube.com/watch?v=P8uT6McIaZc