用 Claude Code 開發 iPhone App 教學
作者:Mehdi Azizi
更新於 ,15 分鐘
安裝 Claude Code、建立 Expo 專案、撰寫 CLAUDE.md、逐個畫面下提示,再用 EAS 上傳 TestFlight:完整教學。
用 Claude Code 開發 App:簡短回答
要用 Claude Code 開發 App,你需要付費的 Claude Code 使用權(相容的訂閱方案,或按用量計費的 Console)、Node.js、一支裝了 Expo Go 的 iPhone,以及一個 Expo 專案。你寫一個 CLAUDE.md 檔案描述技術堆疊和規則,一次只要求一個畫面,每個畫面都在 iPhone 上測試,最後用 EAS 把 App 送上 TestFlight。
這篇教學是我另一篇指南用 AI 開發 iOS App 的補充,那篇說明 AI 擅長什麼、又會搞砸什麼。這裡直接實作:指令、檔案、提示詞。
我每天都用 Claude Code 和 Cursor 寫 iOS App。我的技術堆疊:React Native、Expo、EAS、RevenueCat 和 Supabase。Solys(一款搭配小遊戲的鬧鐘)和 TradaZen(一款交易練習 App)都已經在 App Store 上架。Nolera 和 Clic 曾被 Apple 退件,後來修正了。以下內容全部來自這些實戰經驗。
想看這套方法套用在一款已上架的 App 上,我記錄了 TradaZen 的歷程,從第一個 commit 到 Apple 退件和轉向。這份經驗分享可以補充本教學的步驟。
步驟 1:準備好前置條件
在輸入第一個指令之前,先確認你都具備這些。
付費的 Claude 帳號
claude.ai 的免費方案不包含 Claude Code。根據 Anthropic 的文件,你需要 Pro、Max、Team、Enterprise 或 Console 帳號。Pro 方案就能開始,但有使用量限制。
Node.js 和終端機
Expo 需要 Node.js LTS 版本,macOS、Windows 或 Linux 都可以。Claude Code 可在 macOS 13 以上、Windows 10 以上及主要 Linux 發行版上執行。
一支 iPhone 和 Expo Go
在 iPhone 上從 App Store 安裝 Expo Go,就能試跑你的第一批畫面,不必編譯自己的 App。建立專案前,先到 Expo Go 頁面確認與你的安裝相容的 SDK 版本。最新的 SDK 和 App Store 上發布的版本不一定同時推出:Expo 就曾記錄過2026 年 5 月的這種落差。所以不要照抄舊教學裡的版本號。如果要用自己的原生模組,就要準備 development build。
一定要有 Mac 嗎?不用
iOS 的 build 是用 EAS Build 在 Expo 的伺服器上編譯,使用你的 Expo SDK 所選定的 Xcode 版本(ITMS-90725),而且 EAS Submit 在 macOS、Linux 和 Windows 上都能用。所以你用 PC 也能一路走到 TestFlight。沒有 Mac 也能上架 iOS App 這篇指南詳細說明了整個流程。
Apple Developer 帳號,之後再說
在 App Store 版的 Expo Go 裡寫程式和測試時不需要它。等到要把 App 送上 TestFlight 時才必須有。我們會在步驟 7 再談。
步驟 2:安裝 Claude Code
在 macOS、Linux 或 WSL 上,Anthropic 建議使用原生安裝程式:
curl -fsSL https://claude.ai/install.sh | bash
在 Windows 上,於 PowerShell 執行:
irm https://claude.ai/install.ps1 | iex
接著確認安裝成功:
claude --version
如果你偏好 npm,指令是 npm install -g @anthropic-ai/claude-code。不要在前面加 sudo,文件明確不建議這麼做。
第一次執行 claude 時,會開啟瀏覽器讓你登入帳號。之後你直接用中文下指示就好:Claude 會讀你的檔案、提出修改並執行指令,前提是你同意。
步驟 3:建立 Expo 專案
切換到你存放專案的資料夾,執行:
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 才會開啟你的專案。在電腦上執行 npx expo login,並在 App 裡登入同一個帳號。
為什麼選 Expo 而不是 Swift?Claude 非常熟悉 React Native,而且你不用 Mac 就能測試。我在 用 React Native 和 Expo 開發行動 App 這頁解釋了這個選擇。
記住 Expo Go 的一個限制:它只包含本身已內建的原生模組。一旦你加入它不認得的原生套件,例如 App 內購買,就需要 development build。對最初幾個畫面來說這不是問題。
選對測試環境
Expo Go、development build 和 TestFlight 證明的東西不一樣。Expo 將 development build 描述為你自己的測試版 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。根據文件,Claude 會分析專案,並依它找到的指令和慣例產生第一版 CLAUDE.md。之後你再補上自己的規則。Anthropic 建議控制在 200 行以內:檔案越長,指示越不容易被遵守。
以下是一個簡短範例,接近我實際使用的版本:
# 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。在這個模式下,Claude 會讀檔案並提出計畫,但在你同意前不會修改任何東西。你審閱、修正,然後核准。
第一個定調用的提示詞長這樣:
我想做一個習慣追蹤 App。第 1 版:只有一個功能,
勾選今天的習慣。請列出畫面清單和資料夾結構。
現在先不要寫任何程式碼。
描述畫面、它的狀態和邊界情況
接著,一個畫面一個提示詞。你點名的邊界情況越多,Claude 越不會漏掉:
建立 app/index.tsx 畫面,列出今天的習慣。
- 每一列:習慣名稱、勾選框、目前連續天數。
- 空白狀態:一段文字和一個「新增習慣」按鈕。
- 載入狀態,以及帶有「重試」按鈕的錯誤狀態。
- 資料暫時來自本地陣列。
- 必須在 iPhone SE 和最大的 iPhone 上都能正常顯示:
不用固定高度,清單可以捲動。
最後執行測試和型別檢查。
修正時別讓它全部重寫
某個細節不對時,要講精確並限縮範圍:
在我的 iPhone 上,清單很長時「新增習慣」按鈕會跑到底部列
下面。只修正 app/index.tsx 裡的這個問題,不要動到其他檔案。
解釋原因。
你也可以直接把截圖貼進終端機:Claude 看得懂。
練習:重新啟動後仍保持勾選的習慣
這是一個要在你自己專案裡完成的教學練習,不是某個已上線功能的截圖。目的是從「產生出來的畫面」走到「可驗證的行為」。不需要使用者帳號,也不需要 App 內購買。
- 只保留一個名為「閱讀 10 分鐘」的本地習慣。
- 要求一個勾選框,以及與你的 Expo 專案相容的本地儲存。
- 要求 agent 說明修改了哪些檔案、可能新增的相依套件,以及實際執行過的指令。
- 在 iPhone 上安裝或開啟你的 App,然後完成下面的驗證。
從現有畫面出發,讓「閱讀 10 分鐘」這個習慣可以勾選,
並在關閉後重新開啟 App 時保留它的狀態。
使用與專案相依套件相容的本地儲存。
不要建立帳號、伺服器、訂閱,也不要新增統計功能。
寫程式前,先說明你會如何處理載入,以及讀取或儲存
失敗的情況。然後做有限度的修改。
最後列出:修改的檔案、執行的指令、未測試的限制,
以及在 iPhone 上驗證結果的確切步驟。
| 在 iPhone 上的操作 | 預期結果 | 失敗時怎麼辦 |
|---|---|---|
| 第一次開啟 App | 看得到習慣和勾選框,沒有錯誤 | 檢查初始狀態和儲存的載入 |
| 勾選後關閉再重新開啟 App | 習慣仍保持勾選 | 檢查同一個 key 的寫入和讀取 |
| 取消勾選後重新啟動 | 習慣仍保持未勾選 | 確認 false 值也有被儲存 |
| 在飛航模式下重跑一次流程 | 本地功能依然可用 | 找出無故加入的網路相依 |
| 放大文字大小 | 名稱和控制項仍可操作 | 移除會截斷或遮住操作的限制 |
如果某一列失敗,不要要求「全部重寫」。描述操作、預期結果和實際觀察到的結果。例如:「重新啟動後,我明明勾選過,勾選框卻變回空白。解釋原因,並在不改動設計的前提下修正持久化。」
下載 CLAUDE.md 範本和驗證清單(.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 的文件說明,在登入你的 Apple Developer 帳號後,EAS CLI 可以幫你產生並保存這些檔案。
App Store Connect
商品頁、隱私權聲明、截圖和法律連結,都是要在 App Store Connect 中確認的資料。現在 Claude Code 可以透過它的 Chrome 整合功能,在已登入的瀏覽器中操作,前提是具備必要的存取權限。但這不保證欄位內容正確:請自己重讀資訊、確認使用的帳號,並親自確認各項承諾和送審。
訂閱
寫一個付費牆只要十分鐘。要讓 App Store Connect 的商品、RevenueCat 裡的設定和程式碼三者對得上,又是另一回事。識別碼差一個字元,審核人員看到的付費牆就是空的。最常見的陷阱都列在新手常犯的 iOS 付費牆錯誤裡。
邊界情況
沒有指示時,Claude 只處理正常情況。沒有網路、清單是空的、購買中斷:這些要由你點名。
Supabase 的安全性
Claude 在 Supabase 建立資料表時,要確認列層級安全性(RLS)已啟用,並有政策限制每位使用者只能存取自己的資料。也要確認 App 的程式碼裡沒有任何密鑰。一接上資料庫,就把這兩條禁令寫進你的 CLAUDE.md。
步驟 7:用 EAS 送上 TestFlight
你的畫面已經在 Expo Go 或 development build 中驗證過,視使用的模組而定。現在進入要發給測試者的 build。
準備 EAS
現在你需要一個付費的 Apple Developer 帳號:Expo 也提醒,要把 App 送到 App Store 就必須有。接著安裝 Expo 的工具並設定專案:
npm install --global eas-cli
eas login
eas build:configure
在 app.json 的 ios.bundleIdentifier 底下加入一個唯一的 bundle identifier,例如 com.yourname.myapp。
編譯與上傳
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 中都有說明。
在這個 build 上重做一次步驟 6 的檢查。在 Expo Go 裡正常的 App,到了正式環境還是可能當掉,例如缺少某個原生模組時。
實際要花多少錢
以下是各服務公布、並於 2026 年 9 月 27 日核對過的價格,以美元計。實際收費也取決於你的地區、稅金和用量:訂閱前請先確認方案。
- Claude 訂閱:Pro 方案每月 20 美元,年繳則每月 17 美元。Max 方案每月 100 美元起,提供更多用量。
- Apple Developer 帳號:每年 99 美元,使用 TestFlight 和 App Store 的必要條件。
- EAS:Expo 免費方案每月包含 15 次 iOS build,排在低優先順序的佇列。Starter 方案每月 19 美元,外加超額用量。
做個小型原型的話,Pro 加上 EAS 免費方案可以當作起點,只要你不超出配額。上 TestFlight 前再加上 Apple 帳號,然後另外估算真正需要的服務:資料庫、儲存空間或付費 API。第一款 App 的預算範本可以幫你列出這些項目。你花在設定和驗證上的時間也要算進去。
誠實說說限制,以及最常卡在哪裡
Claude Code 改變了誰能開發 iPhone App。但它沒有改變 Apple 對上架的要求。退件來得很快:Solys 被退過,Nolera 和 Clic 也是。最常見的原因寫在Apple 為什麼退件你的 App 裡。
靠這篇教學,你可以自己一路走到 TestFlight。最常卡住的是之後的事:接上訂閱、準備給審核人員的資料、看懂退件原因。想看整個流程的全貌,請讀 開發 iPhone App 這頁。
這部分,iOS Kit 集結了我 App 的起始程式碼(含訂閱)、每個步驟的 Claude Code skills,以及 Apple Review Kit。完整課程在 用 Claude Code 開發 iOS App 的課程 頁面。
你已經卡住了,卻不知道卡在哪裡?免費診斷會告訴你真正拖住你的是什麼,並寄給你我的 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 付費牆的常見錯誤列出了需要檢查的項目。