# 用 Claude Code 開發 iPhone App 教學

> 安裝 Claude Code、建立 Expo 專案、撰寫 CLAUDE.md、逐個畫面下提示，再用 EAS 上傳 TestFlight：完整教學。

原始頁面：[用 Claude Code 開發 iPhone App 教學](https://devoria.fr/zh-hant/blog/claude-code-iphone-app-tutorial)
作者：[Mehdi Azizi](https://devoria.fr/zh-hant/mehdi-azizi)
發布日期：2026-09-23
內容最後修訂：2026-10-09


## 用 Claude Code 開發 App：簡短回答

要用 Claude Code 開發 App，你需要付費的 Claude Code 使用權（相容的訂閱方案，或按用量計費的 Console）、Node.js、一支裝了 Expo Go 的 iPhone，以及一個 Expo 專案。你寫一個 `CLAUDE.md` 檔案描述技術堆疊和規則，一次只要求一個畫面，每個畫面都在 iPhone 上測試，最後用 EAS 把 App 送上 TestFlight。

這篇教學是我另一篇指南[用 AI 開發 iOS App](https://devoria.fr/zh-hant/blog/ai-ios-app-pitfalls-checks) 的補充，那篇說明 AI 擅長什麼、又會搞砸什麼。這裡直接實作：指令、檔案、提示詞。

我每天都用 Claude Code 和 Cursor 寫 iOS App。我的技術堆疊：React Native、Expo、EAS、RevenueCat 和 Supabase。Solys（一款搭配小遊戲的鬧鐘）和 TradaZen（一款交易練習 App）都已經在 App Store 上架。Nolera 和 Clic 曾被 Apple 退件，後來修正了。以下內容全部來自這些實戰經驗。

想看這套方法套用在一款已上架的 App 上，我記錄了 [TradaZen 的歷程，從第一個 commit 到 Apple 退件和轉向](https://devoria.fr/zh-hant/blog/tradazen-case-study-launch-iphone-app)。這份經驗分享可以補充本教學的步驟。

## 步驟 1：準備好前置條件

在輸入第一個指令之前，先確認你都具備這些。

### 付費的 Claude 帳號

claude.ai 的免費方案不包含 Claude Code。[根據 Anthropic 的文件](https://code.claude.com/docs/en/setup)，你需要 Pro、Max、Team、Enterprise 或 Console 帳號。Pro 方案就能開始，但有使用量限制。

### Node.js 和終端機

Expo 需要 [Node.js LTS 版本](https://docs.expo.dev/get-started/create-a-project/)，macOS、Windows 或 Linux 都可以。Claude Code 可在 macOS 13 以上、Windows 10 以上及主要 Linux 發行版上執行。

### 一支 iPhone 和 Expo Go

在 iPhone 上從 App Store 安裝 Expo Go，就能試跑你的第一批畫面，不必編譯自己的 App。建立專案前，[先到 Expo Go 頁面確認與你的安裝相容的 SDK 版本](https://expo.dev/go)。最新的 SDK 和 App Store 上發布的版本不一定同時推出：Expo 就曾記錄過[2026 年 5 月的這種落差](https://expo.dev/changelog/expo-go-and-app-store-may-2026)。所以不要照抄舊教學裡的版本號。如果要用自己的原生模組，就要準備 development build。

### 一定要有 Mac 嗎？不用

iOS 的 build 是用 EAS Build 在 Expo 的伺服器上編譯，使用你的 Expo SDK 所選定的 Xcode 版本（ITMS-90725），而且 [EAS Submit 在 macOS、Linux 和 Windows 上都能用](https://docs.expo.dev/submit/ios/)。所以你用 PC 也能一路走到 TestFlight。[沒有 Mac 也能上架 iOS App](https://devoria.fr/zh-hant/blog/publish-ios-app-without-mac-expo-eas) 這篇指南詳細說明了整個流程。

### Apple Developer 帳號，之後再說

在 App Store 版的 Expo Go 裡寫程式和測試時不需要它。等到要把 App 送上 TestFlight 時才必須有。我們會在步驟 7 再談。

## 步驟 2：安裝 Claude Code

在 macOS、Linux 或 WSL 上，Anthropic 建議使用原生安裝程式：

```bash
curl -fsSL https://claude.ai/install.sh | bash
```

在 Windows 上，於 PowerShell 執行：

```powershell
irm https://claude.ai/install.ps1 | iex
```

接著確認安裝成功：

```bash
claude --version
```

如果你偏好 npm，指令是 `npm install -g @anthropic-ai/claude-code`。不要在前面加 `sudo`，文件明確不建議這麼做。

第一次執行 `claude` 時，會開啟瀏覽器讓你登入帳號。之後你直接用中文下指示就好：Claude 會讀你的檔案、提出修改並執行指令，前提是你同意。

## 步驟 3：建立 Expo 專案

切換到你存放專案的資料夾，執行：

```bash
npx create-expo-app@latest my-app
cd my-app
npx expo start
```

如果工具讓你在「相容 App Store 版 Expo Go」和「最新 SDK」之間選擇，這次練習請選相容性。無論如何，繼續之前都要確認建立的版本有被你 iPhone 上的 Expo Go 支援。等專案需要時，再準備 development build。

終端機會出現一個 QR code。用 iPhone 的相機掃描：App 就會在 Expo Go 中開啟。第一次常卡在一個細節：[只有當 Expo CLI 和 Expo Go 登入同一個 Expo 帳號時，Expo Go 才會開啟你的專案](https://docs.expo.dev/get-started/start-developing/)。在電腦上執行 `npx expo login`，並在 App 裡登入同一個帳號。

為什麼選 Expo 而不是 Swift？Claude 非常熟悉 React Native，而且你不用 Mac 就能測試。我在 [用 React Native 和 Expo 開發行動 App](https://devoria.fr/zh-hant/expertise/react-native-expo-mobile-app) 這頁解釋了這個選擇。

記住 Expo Go 的一個限制：它只包含本身已內建的原生模組。一旦你加入它不認得的原生套件，例如 App 內購買，就需要 development build。對最初幾個畫面來說這不是問題。

### 選對測試環境

Expo Go、development build 和 TestFlight 證明的東西不一樣。[Expo 將 development build 描述為](https://docs.expo.dev/develop/development-builds/introduction/)你自己的測試版 App，包含專案所需的原生模組。

| 你想確認什麼                         | 在哪裡測試                                   | 這項測試無法證明的事                |
| ------------------------------------ | -------------------------------------------- | ----------------------------------- |
| 顯示第一個畫面並試用導覽             | Expo Go，搭配相容的 SDK                      | Expo Go 沒有內建的原生模組的行為    |
| 使用加入專案的原生套件               | 包含該套件的 development build               | 正式發布版本，以及 Apple 是否會核准 |
| 瀏覽給測試者的 App，再測試其中的購買 | 送上 TestFlight 的 build，加上正確設定的商品 | 真實顧客付款，或上架銷售的審核結果  |

加入相依套件之前，先問 Claude：「它跟我目前的 SDK 和測試環境相容嗎？需要重新編譯 App 嗎？請根據文件回答。」這樣就不會花一整晚修一個 Expo Go 根本無法載入的模組，或一個因為非公開 API 而在上傳時被拒的 SDK。

## 步驟 4：撰寫專案的 CLAUDE.md 檔案

這是 CP 值最高的一步。Claude Code 可以保留專案記憶，但規則要由你明確寫出來。放在專案根目錄的 `CLAUDE.md` 檔案，會為每次工作階段提供共同的指示。你要在這裡寫下 Claude 猜不到的事。

在專案資料夾執行 `claude`，然後輸入 `/init`。[根據文件](https://code.claude.com/docs/en/memory)，Claude 會分析專案，並依它找到的指令和慣例產生第一版 `CLAUDE.md`。之後你再補上自己的規則。Anthropic 建議控制在 200 行以內：檔案越長，指示越不容易被遵守。

以下是一個簡短範例，接近我實際使用的版本：

```markdown
# My app

## 技術堆疊

- Expo（create-expo-app 的 SDK）、React Native、TypeScript strict
- 導覽：Expo Router，app/ 裡一個畫面一個檔案
- 資料：Supabase（之後再加），App 裡絕不放密鑰

## 規則

- 一次一個畫面。不要動到需求範圍外的檔案。
- 不使用以點為單位的固定高度：尺寸相對於螢幕，
  內容可能超出時使用 ScrollView。
- 每個畫面處理 3 種狀態：載入中、空白、錯誤。
- 介面文字使用繁體中文。
- 修改超過 2 個檔案前：先提出計畫並等我同意。

## 指令

- 啟動：npx expo start
- 測試：使用 package.json 中實際存在的 script。
  若尚未存在就告訴我；不要宣稱測試通過。
- 型別：npx tsc --noEmit
- 每次修改後：執行測試和型別檢查，然後告訴我
  改了什麼，以及如何在 iPhone 上驗證。
```

關於固定高度的規則不是隨便加的。我們會在步驟 6 再談。

## 步驟 5：一次只提示一個畫面

「幫我做一個有訂閱功能的習慣追蹤 App」會產出一個龐大、脆弱、根本沒辦法審閱的專案。有效的方法正好相反：一個要求、一個畫面、一個你五分鐘內就能測試的結果。

### 先從計畫開始

凡是會動到多個檔案的事，都切換到 plan mode。按 `Shift+Tab`，直到狀態列出現 `plan mode on`。[在這個模式下](https://code.claude.com/docs/en/common-workflows)，Claude 會讀檔案並提出計畫，但在你同意前不會修改任何東西。你審閱、修正，然後核准。

第一個定調用的提示詞長這樣：

```text
我想做一個習慣追蹤 App。第 1 版：只有一個功能，
勾選今天的習慣。請列出畫面清單和資料夾結構。
現在先不要寫任何程式碼。
```

### 描述畫面、它的狀態和邊界情況

接著，一個畫面一個提示詞。你點名的邊界情況越多，Claude 越不會漏掉：

```text
建立 app/index.tsx 畫面，列出今天的習慣。
- 每一列：習慣名稱、勾選框、目前連續天數。
- 空白狀態：一段文字和一個「新增習慣」按鈕。
- 載入狀態，以及帶有「重試」按鈕的錯誤狀態。
- 資料暫時來自本地陣列。
- 必須在 iPhone SE 和最大的 iPhone 上都能正常顯示：
  不用固定高度，清單可以捲動。
最後執行測試和型別檢查。
```

### 修正時別讓它全部重寫

某個細節不對時，要講精確並限縮範圍：

```text
在我的 iPhone 上，清單很長時「新增習慣」按鈕會跑到底部列
下面。只修正 app/index.tsx 裡的這個問題，不要動到其他檔案。
解釋原因。
```

你也可以直接把截圖貼進終端機：Claude 看得懂。

## 練習：重新啟動後仍保持勾選的習慣

這是一個要在你自己專案裡完成的教學練習，不是某個已上線功能的截圖。目的是從「產生出來的畫面」走到「可驗證的行為」。不需要使用者帳號，也不需要 App 內購買。

1. 只保留一個名為「閱讀 10 分鐘」的本地習慣。
2. 要求一個勾選框，以及與你的 Expo 專案相容的本地儲存。
3. 要求 agent 說明修改了哪些檔案、可能新增的相依套件，以及實際執行過的指令。
4. 在 iPhone 上安裝或開啟你的 App，然後完成下面的驗證。

```text
從現有畫面出發，讓「閱讀 10 分鐘」這個習慣可以勾選，
並在關閉後重新開啟 App 時保留它的狀態。
使用與專案相依套件相容的本地儲存。
不要建立帳號、伺服器、訂閱，也不要新增統計功能。
寫程式前，先說明你會如何處理載入，以及讀取或儲存
失敗的情況。然後做有限度的修改。
最後列出：修改的檔案、執行的指令、未測試的限制，
以及在 iPhone 上驗證結果的確切步驟。
```

| 在 iPhone 上的操作       | 預期結果                     | 失敗時怎麼辦                |
| ------------------------ | ---------------------------- | --------------------------- |
| 第一次開啟 App           | 看得到習慣和勾選框，沒有錯誤 | 檢查初始狀態和儲存的載入    |
| 勾選後關閉再重新開啟 App | 習慣仍保持勾選               | 檢查同一個 key 的寫入和讀取 |
| 取消勾選後重新啟動       | 習慣仍保持未勾選             | 確認 `false` 值也有被儲存   |
| 在飛航模式下重跑一次流程 | 本地功能依然可用             | 找出無故加入的網路相依      |
| 放大文字大小             | 名稱和控制項仍可操作         | 移除會截斷或遮住操作的限制  |

如果某一列失敗，不要要求「全部重寫」。描述操作、預期結果和實際觀察到的結果。例如：「重新啟動後，我明明勾選過，勾選框卻變回空白。解釋原因，並在不改動設計的前提下修正持久化。」

[下載 CLAUDE.md 範本和驗證清單（.md）](https://devoria.fr/ressources/claude-md-premiere-app-ios.md)。用你的編輯器或筆記 App 開啟。交給 agent 之前，先把指令調整成符合你的專案。

## 步驟 6：審閱與測試

Claude Code 寫的程式碼看起來都是對的。只有你的測試和 iPhone 能告訴你它是不是真的對。

### 用測試避免弄壞原本正常的功能

App 越大，每次要求就越可能弄壞一個已經驗收過的畫面。Expo 建立的專案沒有測試：先請 Claude 安裝 Jest 搭配 `jest-expo`，這是 Expo 文件的建議做法。接著要求為重要邏輯寫測試（連續天數的計算、表單驗證），並在每次修改後執行。這就是為什麼測試指令要寫在 `CLAUDE.md` 裡：Claude 會自動執行，不用你每次提醒。有了規則檔和測試，AI 弄壞原本正常功能的情況會少很多。

### 審閱每一次修改

你不需要看懂每一行。但你必須知道哪些檔案被改了，以及為什麼。如果 Claude 動到不相關的檔案，接受之前先問它原因。然後再問一句：「這裡有什麼可能會壞掉？」

### 在小 iPhone 和大 iPhone 上都檢查

這是讓我付出最大代價的一課。Solys 曾因規範 2.1 被 Apple 退件：在 iPad Air 上，App 以 iPhone 相容模式執行，引導流程裡的示範遊戲根本不可能贏。原因：高度寫死成固定的點數，而不是相對於螢幕尺寸。在我的 iPhone 上一切正常。程式碼審閱過，測試也全綠。但沒有任何工具在其他尺寸下看過這個畫面。

從那之後，每個畫面我至少會在最小和最大的 iPhone 上檢查。如果你只有一支手機，用 Mac 上的 Xcode 模擬器，或找有其他機型的朋友幫忙就行。特別注意長文字、表單開啟鍵盤時的狀況，以及固定在底部的按鈕。

## Claude Code 做不好的事

Claude Code 在畫面和邏輯上表現出色。但離開你的專案資料夾，它就可靠得多。

### 簽署與憑證

沒有經授權連線到你的 Apple 帳號，Claude 就不知道帳號的狀態。它可能會編出一套混用 Xcode 和 Expo 的憑證流程。讓 EAS 處理簽署：[Expo 的文件](https://docs.expo.dev/build/setup/)說明，在登入你的 Apple Developer 帳號後，EAS CLI 可以幫你產生並保存這些檔案。

### App Store Connect

商品頁、隱私權聲明、[截圖](https://devoria.fr/zh-hant/kits/captures-app-store)和法律連結，都是要在 App Store Connect 中確認的資料。現在 Claude Code 可以透過[它的 Chrome 整合功能](https://code.claude.com/docs/en/chrome)，在已登入的瀏覽器中操作，前提是具備必要的存取權限。但這不保證欄位內容正確：請自己重讀資訊、確認使用的帳號，並親自確認各項承諾和送審。

### 訂閱

寫一個付費牆只要十分鐘。要讓 App Store Connect 的商品、RevenueCat 裡的設定和程式碼三者對得上，又是另一回事。識別碼差一個字元，審核人員看到的付費牆就是空的。最常見的陷阱都列在[新手常犯的 iOS 付費牆錯誤](https://devoria.fr/zh-hant/blog/ios-paywall-beginner-mistakes)裡。

### 邊界情況

沒有指示時，Claude 只處理正常情況。沒有網路、清單是空的、購買中斷：這些要由你點名。

### Supabase 的安全性

Claude 在 Supabase 建立資料表時，要確認列層級安全性（RLS）已啟用，並有政策限制每位使用者只能存取自己的資料。也要確認 App 的程式碼裡沒有任何密鑰。一接上資料庫，就把這兩條禁令寫進你的 `CLAUDE.md`。

## 步驟 7：用 EAS 送上 TestFlight

你的畫面已經在 Expo Go 或 development build 中驗證過，視使用的模組而定。現在進入要發給測試者的 build。

### 準備 EAS

現在你需要一個[付費的 Apple Developer 帳號](https://devoria.fr/zh-hant/blog/apple-developer-account-price-free-or-99)：[Expo 也提醒](https://docs.expo.dev/submit/ios/)，要把 App 送到 App Store 就必須有。接著安裝 Expo 的工具並設定專案：

```bash
npm install --global eas-cli
eas login
eas build:configure
```

在 `app.json` 的 `ios.bundleIdentifier` 底下加入一個唯一的 bundle identifier，例如 `com.yourname.myapp`。

### 編譯與上傳

```bash
eas build --platform ios --profile production
eas submit --platform ios
```

第一個指令在 Expo 的伺服器上編譯 App。第一次執行時，EAS 會提議連線到你的 Apple 帳號來建立憑證。第二個指令把 build 上傳到 App Store Connect。你也可以用 `eas build --platform ios --auto-submit` 一次完成。

build 必須經過 Apple 處理才會出現在 TestFlight，而這個處理過程可能會拒絕它，例如圖示透明時會出現 ITMS-90717。所以上傳成功不代表已經可以安裝：到 App Store Connect 確認它的狀態。內部測試者、外部測試者和 Beta 審查，在我的指南 [用 TestFlight 測試 iPhone App](https://devoria.fr/zh-hant/blog/testflight-test-iphone-app-before-review) 中都有說明。

在這個 build 上重做一次步驟 6 的檢查。在 Expo Go 裡正常的 App，到了正式環境還是可能當掉，例如缺少某個原生模組時。

## 實際要花多少錢

以下是各服務公布、並於 2026 年 9 月 27 日核對過的價格，以美元計。實際收費也取決於你的地區、稅金和用量：訂閱前請先確認方案。

- **Claude 訂閱**：[Pro 方案每月 20 美元](https://claude.com/pricing)，年繳則每月 17 美元。Max 方案每月 100 美元起，提供更多用量。
- **Apple Developer 帳號**：[每年 99 美元](https://developer.apple.com/programs/)，使用 TestFlight 和 App Store 的必要條件。
- **EAS**：[Expo 免費方案](https://expo.dev/pricing)每月包含 15 次 iOS build，排在低優先順序的佇列。Starter 方案每月 19 美元，外加超額用量。

做個小型原型的話，Pro 加上 EAS 免費方案可以當作起點，只要你不超出配額。上 TestFlight 前再加上 Apple 帳號，然後另外估算真正需要的服務：資料庫、儲存空間或付費 API。[第一款 App 的預算範本](https://devoria.fr/ressources/budget-premiere-app-ios.csv)可以幫你列出這些項目。你花在設定和驗證上的時間也要算進去。

## 誠實說說限制，以及最常卡在哪裡

Claude Code 改變了誰能開發 iPhone App。但它沒有改變 Apple 對上架的要求。退件來得很快：Solys 被退過，Nolera 和 Clic 也是。最常見的原因寫在[Apple 為什麼退件你的 App](https://devoria.fr/zh-hant/blog/apple-app-rejection-reasons-real-cases) 裡。

靠這篇教學，你可以自己一路走到 TestFlight。最常卡住的是之後的事：接上訂閱、準備給審核人員的資料、看懂退件原因。想看整個流程的全貌，請讀 [開發 iPhone App](https://devoria.fr/zh-hant/expertise/build-an-iphone-app) 這頁。

這部分，[iOS Kit](https://devoria.fr/zh-hant/kits/ios) 集結了我 App 的起始程式碼（含訂閱）、每個步驟的 Claude Code skills，以及 [Apple Review Kit](https://devoria.fr/zh-hant/kits/review-apple)。完整課程在 [用 Claude Code 開發 iOS App 的課程](https://devoria.fr/zh-hant/expertise/claude-code-course-ios-app) 頁面。

你已經卡住了，卻不知道卡在哪裡？[免費診斷](https://devoria.fr/zh-hant/diagnostic)會告訴你真正拖住你的是什麼，並寄給你我的 Apple 防退件檢查清單。

## 常見問題

### 不會寫程式能用 Claude Code 開發 iPhone App 嗎？

畫面和簡單邏輯可以，只要你每一步都審閱並測試。但如果你希望完全不用懂，那就不行。你得會看錯誤訊息、執行指令，並確認 Claude 改了什麼。這些邊做邊學很快就會。

### Claude Code 是免費的嗎？

不是。Claude Code 需要 Pro、Max、Team、Enterprise 或 Console 帳號。claude.ai 的免費方案不包含它。Pro 方案就能入門，但要留意使用量限制。

### 用 Claude Code 開發 iOS App 需要 Mac 嗎？

不需要。你在任何電腦上寫程式，在 iPhone 的 Expo Go 裡測試，再由 EAS 在 Expo 的伺服器上編譯並上傳 App。Mac 用來跑模擬器還是很方便，但不是必要的。

### React Native App 該用 Claude Code 還是 Cursor？

兩個我每天都在用。Claude Code 在終端機裡運作，能自己接連完成修改和測試。Cursor 是一個編輯器。方法比工具重要：規則、一次一個畫面、測試。

### 用 Claude Code 上架第一款 App 要多久？

取決於 App 的規模和你的時間。只有一個功能的 App 會快很多。最難預測的部分還是 Apple 審查。

### Claude Code 能設定 App 內訂閱嗎？

它可以寫付費牆和 RevenueCat 的程式碼。有了連接的工具和必要授權，它也能在各個後台操作。但絕對不要因為有程式碼，就認定商品已經設定好：確認識別碼、價格和購買後的權限，然後在 TestFlight 上測試購買和恢復購買。[iOS 付費牆的常見錯誤](https://devoria.fr/zh-hant/blog/ios-paywall-beginner-mistakes)列出了需要檢查的項目。


## 你的專案

[iOS Kit](https://devoria.fr/zh-hant/kits/ios)：用 Claude Code 打造你的 iPhone App：我的 App 所用的 Starter Code、檢查成果的 skills，以及 Apple Review Kit、App Store Screenshots Kit 與 ASO Kit。129.99 €。