Vibe Coding 例子：10 種真實應用程式類型、提示同出錯位

最常見嘅 vibe coding 例子都係細型而實用嘅網頁應用程式：追蹤器、預約頁面、內部工具、客戶入口網站、著陸頁、測驗、儀表板同簡單嘅 AI 工具。下面有十個例子。每個例子都會列出由誰建構、首個提示、通常出現嘅問題，以及修正問題嘅跟進提示。

呢啲係人哋最常帶去 AI 應用程式建構工具嘅專案所綜合而成，並非某一人嘅個案研究。提示可以直接複製。失敗情況則係一再出現嘅問題，所以呢部分最有用。如果 vibe coding 本身對你嚟講係新嘢，可以先睇 什麼是 vibe coding。

1. 個人預算追蹤器

由誰建構： 試過試算表但放棄咗嘅個人。

首個提示：

建構一個每月預算追蹤器。我可以輸入開支，包括金額、類別（飲食、租金、交通、娛樂、其他）、日期同備註。按類別以長條圖顯示本月總額，並列出最近嘅開支。我可以為每個類別設定預算，並查看剩餘金額。

出錯嘅地方： 圖表計算咗所有已輸入嘅開支，而唔係只計本月，所以到第二個月，每個類別都似乎超支。另外，用逗號輸入嘅金額（「1,200」）只被儲存成 1。

修正提示：

圖表同總額應該只包括所選月份嘅開支。喺頂部加入月份選擇器，預設為本月。另外，接受用逗號或空格輸入嘅金額，並將其儲存為數字。

教訓：「本月」係一條規則。要將規則講出嚟。

2. 小型髮廊嘅預約頁面

由誰建構： 厭倦咗經電話同 DM 預約嘅小型商店老闆。

首個提示：

為我嘅髮廊建構一個預約頁面。客人選擇服務、日期同空閒時段，然後輸入姓名同電話。我有一個私人管理頁面，需要登入先可以進入，可以按日顯示預約。

出錯嘅地方： 兩位客人喺一分鐘內預約咗同一個 10:00 時段，因為頁面只喺首次載入時檢查空位。另外，一個 90 分鐘嘅染髮預約冇封鎖之後嘅時段。

修正提示：

當客人提交預約時，喺伺服器上檢查佢涵蓋嘅每個時段是否仍然空閒，如果唔係就拒絕，並顯示「該時段剛剛已被預約」。服務會封鎖其全部時長，所以 10:00 嘅 90 分鐘預約會封鎖 10:00、10:30 同 11:00。

教訓： 任何兩人可以同時進行嘅操作，都需要伺服器端檢查。完整版本請睇 如何建構預約應用程式。

3. 附有 QR code 嘅餐廳餐牌

由誰建構： 經常要重印餐牌嘅咖啡店同餐廳老闆。

首個提示：

為我嘅咖啡店建構一個手機餐牌網站。分為早餐、午餐、飲品同甜品，每項都有名稱、價錢、簡短描述同飲食標籤（純素、無麩質）。我需要一個管理頁面，用嚟編輯項目同標示售罄。顯示一個可以列印嘅 QR code，連結到餐牌。

出錯嘅地方： 冇嘢壞咗，但喺咖啡店嘅 Wi-Fi 上餐牌好慢，因為每個項目都載入咗全尺寸嘅手機相片。

修正提示：

餐牌相片太大。將上載嘅圖片縮放至最闊 800px、壓縮，並在訪客滾動時延遲載入。

教訓： 要喺慢速網絡上測試，唔好只係喺辦公室測試。

4. 團隊嘅器材或庫存追蹤器

由誰建構： 以取代共用試算表嘅營運人員。

首個提示：

為我哋嘅倉庫團隊建構一個庫存工具。每件物品有名稱、SKU、數量、位置同最低存量。職員登入後可以新增庫存、附上原因移除庫存，並查看低於最低存量嘅物品列表，以紅色標示。保留每次更改嘅歷史紀錄，以及由邊個作出更改。

出錯嘅地方： 歷史紀錄顯示「用戶 3」而唔係名字，而且移除超過現有數量嘅庫存令數量變成負數。

修正提示：

歷史紀錄要顯示人員嘅姓名，而唔係佢哋嘅 ID。唔允許移除後令數量低於零嘅操作；改為顯示「只剩 4 件庫存」。

教訓： 要描述咩嘢應該不可能發生，唔止係咩嘢應該可以發生。我哋嘅 建構庫存應用程式指南 會講解其餘部分。

5. 為自由工作者或工作室而設嘅客戶入口網站

由誰建構： 設計師、會計師、顧問同代理商。

首個提示：

建構一個客戶入口網站。我會用電郵邀請客戶。每位客戶登入後，只可以睇到自己嘅專案、檔案同發票，並可以留言。我以管理員身份登入，可以睇到所有嘢。

出錯嘅地方： 呢個係列表中最重要嘅失敗。頁面只向每位客戶顯示佢自己嘅專案，但只要喺網址列更改數字，伺服器就會返回任何專案。只係以一位客戶身份四圍點擊，永遠唔會發現呢個問題。

修正提示：

檢查每個返回專案、檔案、留言或發票嘅伺服器路由。每個路由都必須確認已登入嘅客戶擁有該紀錄，否則返回「找不到」。然後測試：以客戶 A 身份登入，並嘗試用 ID 打開客戶 B 嘅專案。

教訓： 喺畫面上隱藏某樣嘢，並唔等於保護咗佢。更多內容請睇 vibe coding 安全嗎？。

6. 附候補名單嘅推廣頁面

由誰建構： 喺正式建構之前測試想法嘅創辦人。

首個提示：

為一個幫補習老師安排課堂同收取款項嘅應用程式建構著陸頁。包括主標題、副標題、電郵登記、三項優點、運作方式部分同常見問題。將登記資料連同日期儲存到資料庫，並讓我可以喺一個私人頁面下載 CSV。

出錯嘅地方： 幾日之內，名單充斥住機械人造成嘅垃圾登記，而且頁面冇標題同描述，所以分享連結時預覽一片空白。

修正提示：

喺登記表單加入基本防機械人措施（一個隱藏嘅蜜罐欄位，以及每個 IP 每小時最多 5 次登記）。加入頁面標題、meta 描述同社交分享圖片。

教訓： 公開表單一定會被人發現。請睇 如何建構候補名單頁面。

7. 老師用嘅測驗應用程式

由誰建構： 想要比 LMS 更輕量方案嘅老師同培訓員。

首個提示：

為我嘅班級建構一個測驗應用程式。我建立選擇題測驗，每題只有一個正確答案。學生輸入代碼同名字即可加入，回答問題，最後查看分數。我可以按測驗查看結果表。

出錯嘅地方： 正確答案同題目一齊被傳送到瀏覽器，所以好奇嘅學生可以喺頁面原始碼入面睇到答案。學生亦可以不斷重新提交，直到取得 100%。

修正提示：

唔好將正確答案傳送到瀏覽器。提交之後喺伺服器上檢查答案。每位學生每個測驗只可以提交一次，如果有人再次嘗試，要向老師顯示。

教訓： 瀏覽器屬於用戶。放喺瀏覽器入面嘅嘢都可以被讀取。

8. 細型 AI 工具

由誰建構： 想要一個專注型 AI 助手嘅市場推廣人員、寫作者同創辦人。

首個提示：

建構一個工具，將產品描述轉換成五則唔同語氣（親切、專業、俏皮、簡短、詳盡）嘅社交媒體帖文。使用 AI API。我貼上描述、選擇平台，然後取得附有複製按鈕嘅帖文。

出錯嘅地方： 第一版直接由瀏覽器調用 AI 服務，API 金鑰就放喺頁面入面，任何人都可以複製佢並令賬單大增。

修正提示：

將 AI 調用移到伺服器。將 API 金鑰儲存為 secret，絕不放喺前端程式碼入面。限制每位訪客每日最多生成 20 次。

教訓： 金鑰應該放喺伺服器端嘅 secrets 內。請睇 如何保護 API 金鑰 同 如何為應用程式加入 AI 功能。

9. 阿拉伯文同英文嘅商業網站

由誰建構： 服務兩種語言嘅海灣地區同更廣闊阿拉伯世界嘅商戶。

首個提示：

為我嘅室內設計公司建構一個中英雙語（阿拉伯文同英文）網站，附語言切換。頁面包括：首頁、服務、作品集、關於我哋同聯絡我哋。阿拉伯文版要完全由右至左。

出錯嘅地方： 阿拉伯文文字係右對齊，但版面冇鏡像：箭咀仍然指錯方向，選單亦放錯咗位置。電話號碼有啲地方亦顯示反咗。

修正提示：

喺阿拉伯文版中將整個版面鏡像：設定頁面方向為由右至左，將選單放喺右邊，翻轉有方向性嘅圖示，並令電話號碼同電郵喺阿拉伯文文字內保持由左至右。

教訓： 由右至左係版面，唔單止係對齊方式。Mythex 支援阿拉伯文同其他由右至左嘅版面，你亦可以直接用阿拉伯文下指令。

10. 變成手機應用程式嘅追蹤器

由誰建構： 用戶主要喺手機上使用嘅教練、健身室同社群團體。

首個提示：

為我嘅私人教練客戶建構一個運動紀錄應用程式。每位客戶登入後，可以查看我為本週指定嘅計劃，劃掉已完成嘅動作並記錄重量。我可以用圖表查看每位客戶嘅進度。

出錯嘅地方： 網頁應用程式運作正常，但喺手機上，按鈕細到喺運動途中難以點擊，圖表亦難以閱讀。

修正提示：

為單手操作而設計手機版面：喺螢幕底部放大點擊區域，每個畫面一個動作，配上大大個「下一個」同「完成」按鈕，以及一個簡單嘅每週進度圖表。

教訓： 如果人哋會喺手機上使用，就要先為手機設計。喺 Mythex Pro 方案，已發布嘅應用程式之後可以變成可上傳到 Google Play 嘅 Android 應用程式，以及送到 TestFlight 嘅 iPhone 應用程式；手機應用程式會打開你已發布嘅應用程式，所以每次發布都會更新佢。請睇 手機應用程式建構工具 頁面。

呢啲例子背後嘅模式

十個例子中，失敗大致可以分為以下幾類：

呢啲情況都唔需要你閱讀程式碼。你需要嘅係像一位好奇而略帶敵意嘅用戶咁測試，並且準確描述你見到嘅嘢。

親自試一個

揀一個最接近你構思嘅例子，複製佢嘅首個提示，然後更改細節。之後喺分享之前，將修正提示當作檢查清單。我哋嘅 vibe coding 提示速查表 仲有 30 個提示，而 如何用 vibe coding 建構應用程式 會帶你由構思走到發布一個專案。準備好之後，可以喺 AI 應用程式建構工具 開始，或者瀏覽 範本 作為起點。

常見問題