如何用 Vibe Coding 建立 App：由構思到發佈

要用 vibe coding 建立 App，你要先用一頁文字描述第一版，再將它當作第一條提示詞交畀 AI App 生成工具，然後以小步、經過測試嘅方式逐步擴展 App：資料、登入、主要工作流程、細節修飾、安全審查，最後發佈。本指南跟隨一個例子專案：一間小型瑜伽室嘅堂期預約 App，逐個階段講解，並列出每一步用到嘅提示詞。

如果你從未以呢種方式建立過嘢，我哋嘅 vibe coding 初學者教學 會由較細嘅規模開始。如果想了解更全面、唔局限於 vibe coding 嘅概覽，請參閱 如何用 AI 建立 App。

例子專案

設想一位瑜伽室負責人 Sara，每星期開 8 堂課。學員透過 WhatsApp 預約，她用紙本名單為每堂課記錄，而且經常出現超額預約。她希望：

• 學員可以睇到本星期嘅時間表，並預約一個名額。
• 每堂課有人數上限。
• 每堂課有一份名單，她可以喺門口核對。
• 學員可以喺開課前兩小時取消預約。

咁就係整個第一版。冇付款、冇會員計劃、冇應用程式商店。呢啲之後再加，或者永遠唔加。

第一步：寫一頁規格

喺打開任何工具之前，先用平實嘅文字寫下第一版嘅內容。花十分鐘喺呢度，可以省下好多來回修改嘅時間。一個有用嘅格式如下：

• **邊個會用：**學員（預約同取消）、Sara（管理堂期，查看名單）。
• **畫面：**時間表、堂期詳情、我嘅預約、管理堂期、管理名單。
• **資料：**堂期（名稱、導師、開始時間、時長、人數上限）、預約（學員、堂期、狀態）、學員（姓名、電郵、電話）。
• **規則：**堂期已滿就唔可以預約；每位學員每堂只可以預約一次；開課前兩小時可以取消；只有 Sara 可以睇管理頁面。
• **第一版唔包括：**付款、堂數套票、候補名單、提醒。

「第一版唔包括」呢份清單最重要。佢可以確保你嘅建立工作做得完。如果想要更完整嘅規格，我哋嘅 如何用 AI 撰寫產品需求文件 指南會講得更詳細。

第二步：選擇一個涵蓋整個流程嘅工具

對於一個需要資料庫、登入同公開網址嘅 App，應該用一個會運行程式碼、附加資料庫並發佈嘅 AI App 生成工具，而唔係一個只會交畀你檔案嘅聊天助手。我哋嘅 vibe coding 工具比較 列出咗各個選擇。呢度我哋會用 Mythex，因為佢喺同一處涵蓋每個步驟：對話、即時預覽、真正嘅資料庫同檔案儲存，以及一鍵發佈。

第三步：第一條提示詞

將規格寫成一段文字。唔好一次過貼上整份文件，所有細節都放入；先提供核心內容，其餘嘅再分步加入。

為我嘅瑜伽室建立一個堂期預約 App。學員用姓名、電郵同電話註冊，查看本星期嘅時間表，然後預約堂期中嘅一個名額。每堂課有名稱、導師、開始時間、時長同人數上限；已滿嘅堂期要顯示「已滿」，並且唔可以預約。學員可以查看自己嘅預約，並可以喺開課前兩小時取消。我係管理員：我可以新增同編輯堂期，並查看每堂嘅預約名單。設計要平靜簡潔，並且喺手機上運作良好。

如果你唔確定工具有冇明白你嘅意思，可以要求佢先提交計劃。喺 Mythex 入面，計劃模式會先寫出畫面同資料，然後先寫程式碼，由你批准。

第四步：令核心流程運作

核心流程係 App 存在嘅唯一理由：學員預約一堂，然後 Sara 睇到該預約。只測試呢部分：

1. 以學員身份註冊，預約一堂。
2. 打開管理頁面。預約有冇喺入面？
3. 再預約同一堂。系統應該拒絕。
4. 將堂期人數上限設為 2，用兩個學員帳戶預約，然後嘗試第三次預約。

呢個階段通常會出現兩個問題。時間表顯示嘅時間用嘅係伺服器時區，而唔係瑜伽室嘅時區。另外，「已滿」嘅檢查只喺頁面入面進行，所以快速連按兩下就可能建立兩個預約。

所有堂期時間都以瑜伽室嘅時區顯示，即 [Asia/Dubai]，而唔係跟隨訪客裝置嘅設定。

建立預約時，喺伺服器上檢查人數上限同重複預約，而唔只係喺頁面入面檢查。如果兩個請求同時爭奪最後一個名額，只可以有一個成功。

加入任何嘢之前，先修好核心流程。其他一切都依賴佢。

第五步：逐條加入其餘規則

而家逐一處理規格中嘅規則：

學員可以喺堂期開始前兩小時取消預約。之後就隱藏取消按鈕，並由伺服器拒絕取消要求，同時顯示清晰訊息。

只有我嘅帳戶可以打開管理頁面。每一項管理操作都要喺伺服器上檢查，唔可以只係隱藏選單。

每條規則加入後都要測試，確認可以運作才繼續下一條。如果某項改動令其他嘢壞咗，就還原到最後一個正常嘅檢查點，並用更清楚嘅要求再試，而唔係喺上面不斷堆疊修正。

第六步：打磨真正用戶會留意嘅細節

真正嘅用戶會留意到一些細節。以下係 Sara 嘅 App 嘅一個簡短清單：

• 空白狀態：「本星期仍未有堂期」，而唔係一個空白頁面。
• **確認訊息：**預約後顯示「你已預約 Vinyasa，星期二 18:00」。
• **手機版面：**大按鈕，並確保時間表喺 375 像素嘅螢幕上都容易閱讀。
• **剩餘名額：**每張堂期卡片都顯示「剩餘 3 個名額」，令學員更快預約。

喺每張堂期卡片上顯示剩餘名額，例如「12 個名額剩 3 個」。預約後，顯示確認訊息，包括堂期名稱、日期同時間，並附一個前往我嘅預約嘅按鈕。

第七步：以陌生人身份測試

畀其他人使用之前，花半個小時嘗試搞壞佢：

你亦可以要求 AI 逐一測試邊緣情況：

列出十件真實學員可能會做、而又可能令預約或取消功能出錯嘅事情，逐一測試，並修正失敗嘅部分。告訴我你改咗乜。

第八步：安全審查

呢個 App 會儲存姓名、電郵同電話號碼，所以值得做一次簡短嘅安全審查。主要問題包括：

• 一位學員可唔可以睇到另一位學員嘅預約或聯絡資料？
• 有冇金鑰或密碼放喺喺瀏覽器上運行嘅程式碼入面？
• 註冊表格有冇防禦機械人？
• 數據有冇備份？

我哋嘅 vibe coding 是否安全 頁面解釋咗每項檢查，並提供相應嘅提示詞；而 AI 生成 App 安全檢查清單 則係較完整嘅版本。

第九步：發佈

當核心流程、規則同檢查全部通過，就可以發佈。喺 Mythex 入面只需按一下，App 就會獲得一個公開網址，而資料庫同託管亦已經設定好。喺 Pro 方案下，你可以連接自己嘅網域，例如 book.sarasyoga.com；請參閱 如何連接自訂網域。

發送連結之前，再檢查一次已發佈嘅版本。用手機預約一堂。正式環境同預覽版本應該運作一致，但仍然要確認。

第十步：第一批用戶同下一版本

唔好一次過派畀所有學員，先將連結交畀五位常客。請佢哋透過連結預約下一堂，並告訴你邊個地方令佢哋覺得困惑。然後修正佢哋提到最多嘅三件事。

用咗幾個星期之後，呢類 App 嘅第二版清單通常會自然浮現：為已滿堂期設候補名單、開課前一晚發送電郵提醒，以及網上付費購買堂數套票。每一項都採用同樣嘅方式處理：用幾行文字寫規格，寫提示詞，測試，然後發佈。如要加入付款功能，請參閱 如何為 App 加入付款功能。如要宣傳，請參閱 如何推出 App 並獲取首批用戶。

轉為手機 App

好多瑜伽室都希望學員手機上有一個圖示。喺 Mythex Pro 方案下，已發佈嘅 App 可以變成 Android App（一個可以上載到 Google Play 嘅檔案），並且 iPhone App 可以用你自己嘅 App Store Connect 金鑰傳送到 TestFlight，毋須使用 Mac。手機 App 會開啟已發佈嘅網頁 App，所以每次你發佈更新，手機 App 都會同步獲得更新。

總結

真正花時間嘅部分其實並唔係建立本身。令 App 可以真正使用嘅，係規格中「第一版唔包括」嘅清單、先測試核心流程、喺伺服器上處理人數上限同存取權限，以及先有五位真實用戶，然後先諗五十位。咁樣先係 vibe coding 喺 App 必須為其他人服務時應有嘅樣子。

準備好試試自己嘅想法未？先寫好你嘅一頁規格，然後將第一段貼入 AI App 生成工具。如果想睇更多應用類型同背後嘅提示詞，可以閱讀我哋嘅 vibe coding 例子。

常見問題