如何用 Vibe Coding 打造應用程式：從構想到發布

要用 vibe coding 打造應用程式，請先寫一頁關於第一版的描述，把它當作第一個提示詞交給 AI 應用程式建構工具，然後以小步、經過測試的方式逐步擴充應用程式：資料、登入、主要流程、細節打磨、安全審查，最後發布。本指南以一個實際專案為例，一個為小型瑜伽教室打造的課程預約應用程式，逐一說明每個階段以及每個階段使用的提示詞。

如果你從來沒有用這種方式做過東西，請先閱讀我們的vibe coding 新手教學，它從更小的範圍開始。若想要不限於 vibe coding 的廣泛概覽，請參閱如何用 AI 打造應用程式。

本專案

想像一位瑜伽教室的老闆 Sara，她每週開設八堂課。學員透過 WhatsApp 預約，她用紙本名單記錄每堂課的報名情況，經常超收。她希望：

• 學員能看到本週的課表並預約名額。
• 每堂課都有人數上限。
• 她能在門口查看每堂課的名單。
• 學員能在上課前兩小時取消預約。

這就是第一版的全部內容。沒有付款、沒有會員方案、沒有應用程式商店。這些功能之後再加，或許永遠不加。

第一步：寫一頁規格

在打開任何工具之前，先用白話文寫下第一版的內容。花十分鐘在這裡，可以省下數小時的來回溝通。一個實用的架構如下：

• **誰會使用：**學員（預約與取消）、Sara（管理課程、查看名單）。
• **畫面：**課表、課程詳情、我的預約、管理課程、管理課程名單。
• **資料：**課程（名稱、老師、開始時間、長度、人數上限）、預約（學員、課程、狀態）、學員（姓名、電子郵件、電話）。
• **規則：**已額滿的課程不能預約；每位學員每堂課只能預約一次；上課前兩小時前可取消；只有 Sara 能進入管理頁面。
• **不在第一版中：**付款、課程套票、候補名單、提醒通知。

「不在第一版中」這份清單最重要。它能讓這個專案保持在做得完的範圍內。如果你想要更完整的規格，我們的指南用 AI 撰寫產品需求文件會有更詳細的說明。

第二步：選擇能處理整個流程的工具

對於需要資料庫、登入與公開網址的應用程式，請使用能夠執行程式碼、附加資料庫並直接發布的 AI 應用程式建構工具，而不是只會給你檔案的聊天助理。我們的vibe coding 工具比較列出了各種選項。這裡我們以 Mythex 為例，因為它能在同一個地方完成每個步驟：聊天、即時預覽、真正的資料庫與檔案儲存，以及一鍵發布。

第三步：第一個提示詞

把規格轉換成一段話。不要一次把整份文件的每個細節都貼上去；先給出核心，之後再分步補充其他內容。

為我的瑜伽教室打造一個課程預約應用程式。學員以姓名、電子郵件與電話註冊，查看本週課表，並預約課程中的一個名額。每堂課都有名稱、老師、開始時間、長度與人數上限；額滿的課程顯示「已額滿」且無法預約。學員可以查看自己的預約，並可在上課前兩小時取消。我是管理員：我可以新增與編輯課程，並查看每堂課的預約名單。設計要平靜、簡單，並且在手機上順暢運作。

如果你不確定工具是否理解了你的需求，可以先要求它提出計畫。在 Mythex 中，計畫模式會在撰寫程式碼之前列出畫面與資料，等你核准後才會開始。

第四步：讓核心流程運作

核心流程是這個應用程式存在的唯一理由：學員預約課程，Sara 能看到預約。只測試這一點：

1. 以學員身分註冊，預約一堂課。
2. 打開管理介面，確認預約出現在那裡。
3. 再次預約同一堂課，系統應該拒絕。
4. 將某堂課的人數上限設為 2，用兩個學員帳號預約，然後嘗試第三次。

此時通常會出現兩個問題。課表顯示的是伺服器時區的時間，而不是教室所在的時區。而且「已額滿」的檢查只發生在頁面上，因此快速連按兩下就會建立兩筆預約。

所有課程時間都以教室所在時區（Asia/Dubai）顯示，無論訪客裝置的時區設定為何。

在建立預約時，於伺服器上檢查人數上限與重複預約，而不只是在頁面上檢查。如果兩個請求同時搶最後一個名額，只能有一個成功。

在加入任何其他功能之前，先把核心流程修好。其他所有功能都依賴它。

第五步：一次加入一條剩餘規則

現在逐一處理規格中的規則：

學員可以在課程開始前兩小時取消預約。之後隱藏取消按鈕，並在伺服器上拒絕取消，同時顯示清楚的訊息。

只有我的帳號可以打開管理頁面。請確認伺服器對每一項管理操作都做了檢查，而不只是隱藏選單。

每加入一條規則後就測試，確認可以運作後再進行下一條。如果某項修改破壞了原有功能，就回滾到最後一個正常的檢查點，並改用更清楚的請求，而不是在問題上繼續疊加修正。

第六步：打磨真實使用者會注意到的細節

真實使用者會注意到一些小地方。以下是 Sara 的應用程式的簡短清單：

• **空白狀態：**顯示「本週尚無課程」，而不是一片空白。
• **確認：**預約後顯示「你已預約 Vinyasa，週二 18:00」。
• **手機版面：**大按鈕，課表在 375 像素寬的螢幕上清楚可讀。
• **剩餘名額：**每張課程卡片顯示「剩餘 3 個名額」，促使學員儘快預約。

在每張課程卡片上顯示剩餘名額，例如「12 個名額中剩 3 個」。預約後顯示確認訊息，包含課程名稱、日期與時間，以及一個前往我的預約的按鈕。

第七步：像陌生人一樣測試

在其他人開始使用之前，花半小時嘗試把它搞壞：

你也可以請 AI 逐一測試邊緣情況：

列出十種真實學員可能會做、而可能破壞預約或取消功能的操作，逐一測試，並修正失敗的部分。告訴我你改了什麼。

第八步：安全審查

這個應用程式會儲存姓名、電子郵件與電話號碼，因此值得做一次簡短的安全審查。主要問題包括：

• 一位學員能否看到另一位學員的預約或聯絡資料？
• 是否有任何金鑰或密碼出現在會在瀏覽器中執行的程式碼裡？
• 註冊表單是否有防機器人保護？
• 資料是否有備份？

我們的vibe coding 是否安全頁面說明了每一項檢查，並提供相應的提示詞，而AI 打造應用程式安全檢查清單則是完整版本。

第九步：發布

當核心流程、規則與檢查都通過後，就可以發布。在 Mythex 中，只需一鍵即可完成，應用程式會取得一個公開網址，資料庫與主機環境也都已就緒。在 Pro 方案中，你可以連結自己的網域，例如 book.sarasyoga.com；請參閱如何連結自訂網域。

在發送連結之前，再檢查一次已發布的版本。用手機預約一堂課。正式版與預覽版的行為應該相同，但請親自確認。

第十步：首批使用者與下一版

先把連結交給五位固定的學員，而不是全部學員。請他們透過連結預約下一堂課，並告訴你哪裡令人困惑。接著修正他們提到的前三個問題。

在真實使用數週之後，像這樣的應用程式的 v2 清單通常會自然浮現：為已額滿的課程提供候補名單、在課前一晚發送電子郵件提醒，以及線上購買的課程套票。每一項都採取相同的步驟：用幾行字寫下規格、下提示詞、測試、發布。若要加入付款功能，請參閱如何為應用程式加入付款。若要推廣，請參閱如何推出應用程式並獲得首批使用者。

轉為手機應用程式

許多教室的老闆希望學員的手機上有一個圖示。在 Mythex Pro 上，已發布的應用程式可以轉為 Android 應用程式（一個可上傳到 Google Play 的檔案），以及透過你自己的 App Store Connect 金鑰送到 TestFlight 的 iPhone 應用程式，無需 Mac。手機應用程式會開啟已發布的網頁應用程式，因此每次你發布更新，手機應用程式也會同步更新。

結語

建構本身只是簡短的一部分。讓這個應用程式真正好用的，是規格中「不在第一版中」的清單、在加入任何東西之前先測試核心流程、在伺服器端檢查人數與存取權限，以及先找五位真實使用者，再考慮五十位。這就是當應用程式必須為其他人運作時，vibe coding 應有的樣子。

準備好嘗試你自己的專案了嗎？寫下你的一頁式規格，然後把第一段貼進 AI 應用程式建構工具。如果你想看更多應用程式類型以及背後的提示詞，請閱讀我們的 vibe coding 範例。

常見問題