Vibe Coding 範例：10 種真實應用程式、提示與出錯的地方

最常見的 Vibe Coding 範例，都是小型而實用的網頁應用程式：追蹤器、預約頁面、內部工具、客戶入口網站、登陸頁、測驗、儀表板與簡單的 AI 工具。以下列出十個範例。每一個都會說明是誰在建置它、第一個提示、通常會出什麼問題，以及修正它的後續提示。

這些是人們最常帶到 AI 應用程式建置工具上的專案的綜合範例，而不是某一個人的個案研究。提示是可以直接複製的，而失敗的情況則是反覆出現的，這也是它們最有用的部分。如果你對 Vibe Coding 本身還不熟悉，請先閱讀什麼是 Vibe Coding。

1. 個人預算追蹤器

誰會建置它： 試過試算表卻放棄的個人。

第一個提示：

幫我建置一個每月預算追蹤器。我可以新增支出，包含金額、類別（食物、房租、交通、娛樂、其他）、日期與備註。以長條圖顯示本月各類別的總額，並列出最近的支出。我可以為每個類別設定預算，並看到剩餘金額。

出了什麼問題： 圖表計算的是所有曾經輸入的支出，而不只是本月的，所以到第二個月時，每個類別看起來都超支了。另外，用逗號輸入的金額（「1,200」）被存成了 1。

修正提示：

圖表與總額只應包含所選月份的支出。請在頂端加入月份選擇器，預設為目前的月份。另外，也要接受包含逗號或空格的金額，並將它們存成數字。

教訓：「本月」是一條規則。要把規則說出口。

2. 小型髮廊的預約頁面

誰會建置它： 厭倦了用電話與私訊接受預約的小型商家老闆。

第一個提示：

幫我的髮廊建置一個預約頁面。客人選擇服務、日期與空閒的時段，然後輸入姓名與電話。我有一個私人的管理頁面，放在登入之後，依日期顯示預約。

出了什麼問題： 兩位客人在一分鐘內預約了同一個 10:00 的時段，因為頁面只在一開始載入時檢查空閒狀況。另外，一個 90 分鐘的染髮預約，也沒有封鎖它後面的時段。

修正提示：

當客人送出預約時，請在伺服器端確認該預約涵蓋的每一個時段仍然空閒；若不空閒，就拒絕並顯示「該時段剛剛被預約了」。服務會封鎖它的完整時長，因此 10:00 的 90 分鐘預約會封鎖 10:00、10:30 與 11:00。

教訓： 任何兩個人可能同時進行的操作，都需要伺服器端的檢查。完整版本請參閱如何建置預約應用程式。

3. 附 QR 碼的餐廳菜單

誰會建置它： 重新印製菜單太頻繁的咖啡館與餐廳老闆。

第一個提示：

幫我的咖啡館建置一個行動版菜單網站。分為早餐、午餐、飲料與甜點等區塊，每個品項都有名稱、價格、簡短說明，以及飲食標籤（素食、無麩質）。我需要一個管理頁面來編輯品項，並可將品項標示為售完。顯示一個可以列印的 QR 碼，連結到菜單。

出了什麼問題： 沒有東西壞掉，但在咖啡館的 Wi-Fi 上菜單很慢，因為每個品項都載入了全尺寸的手機照片。

修正提示：

菜單照片太大了。請把上傳的圖片縮放到寬度最多 800 像素、壓縮，並在訪客捲動時才延遲載入。

教訓： 要在慢速的網路上測試，而不只是在辦公室的網路上。

4. 團隊的設備或庫存追蹤器

誰會建置它： 正在取代共用試算表的營運人員。

第一個提示：

幫我們的倉儲團隊建置一個庫存工具。每個品項都有名稱、SKU、數量、位置與最低庫存量。員工登入後，可以新增庫存、以原因取出庫存，並看到低於最低庫存的品項以紅色標示。保留每一次變更的歷史紀錄，以及是誰做的變更。

出了什麼問題： 歷史紀錄顯示的是「使用者 3」，而不是名字；而且取出的數量超過現有庫存時，數量變成了負數。

修正提示：

歷史紀錄中要顯示人員的姓名，而不是 ID。不允許任何會讓數量低於零的取出；改為顯示「目前只有 4 件庫存」。

教訓： 要描述什麼事情應該是不可能發生的，而不只是描述什麼事情可以發生。我們關於建置庫存應用程式的指南涵蓋了其餘的部分。

5. 給自由工作者或工作室的客戶入口網站

誰會建置它： 設計師、會計師、顧問與代理商。

第一個提示：

幫我建置一個客戶入口網站。我透過電子郵件邀請客戶。每位客戶登入後，只會看到自己的專案、檔案與帳單，並且可以留言。我以管理員身分登入，可以看到全部。

出了什麼問題： 這是清單上最重要的失敗。頁面只會向每位客戶顯示他們自己的專案，但只要在網址列中改掉數字，伺服器就會回傳任何一個專案。以單一客戶的身分點來點去，永遠不會發現這個問題。

修正提示：

檢查每一個會回傳專案、檔案、留言或帳單的伺服器路由。每一個都必須確認已登入的客戶擁有該紀錄，否則回傳「找不到」。然後進行測試：以客戶 A 登入，並嘗試用 ID 打開客戶 B 的專案。

教訓： 在畫面上隱藏某些東西，並不等於保護它。更多相關內容請參閱Vibe Coding 是否安全？。

6. 附候補名單的上線前頁面

誰會建置它： 在真正動手建置之前，先測試想法的創辦人。

第一個提示：

幫一個讓家教安排課程並收取費用的應用程式建置登陸頁。包含首屏標題、副標題、電子郵件註冊、三項優點、運作說明與常見問題。把註冊紀錄連同日期存入資料庫，並讓我可以在私人頁面中下載 CSV。

出了什麼問題： 幾天之內，清單就被機器人的垃圾註冊填滿了；而且頁面沒有標題與描述，所以分享的連結只會顯示空白的預覽。

修正提示：

為註冊表單加入基本的機器人防護（一個隱藏的蜜罐欄位，以及每個 IP 每小時最多 5 次註冊的限制）。加入頁面標題、meta 描述與社群分享圖片。

教訓： 公開的表單一定會被找到。請參閱如何建置候補名單頁面。

7. 老師的測驗應用程式

誰會建置它： 想要比學習管理系統更輕量工具的老師與講師。

第一個提示：

幫我的班級建置一個測驗應用程式。我建立包含單選題的測驗，每題只有一個正確答案。學生輸入代碼與名字後作答，最後看到自己的分數。我可以看到每份測驗的成績表。

出了什麼問題： 正確答案與題目一起被送到瀏覽器中，因此好奇的學生可以在網頁原始碼中讀到答案。學生也可以一直重新提交，直到拿到 100 分。

修正提示：

不要把正確答案送到瀏覽器。提交後在伺服器端檢查答案。每位學生姓名在每份測驗中只能提交一次，如果有人再次嘗試，要讓老師知道。

教訓： 瀏覽器屬於使用者。任何放在那裡的東西都可以被讀取。

8. 小型 AI 工具

誰會建置它： 想要專注型 AI 助手的行銷人員、寫作者與創辦人。

第一個提示：

建置一個工具，把產品描述轉換成五則不同語氣（親切、專業、俏皮、簡短、詳細）的社群媒體貼文。使用 AI API。我貼上描述、選擇平台，並取得附有複製按鈕的貼文。

出了什麼問題： 第一個版本直接從瀏覽器呼叫 AI 服務，而且 API 金鑰就放在頁面中，任何人都可以複製它並讓帳單暴增。

修正提示：

把 AI 呼叫移到伺服器端。把 API 金鑰存成機密，絕不放在前端程式碼中。限制每位訪客每天最多 20 次生成。

教訓： 金鑰應該放在伺服器端的機密中。請參閱如何保護 API 金鑰與如何為你的應用程式加入 AI 功能。

9. 阿拉伯文與英文的商業網站

誰會建置它： 服務雙語客群的海灣地區及更廣泛阿拉伯世界的企業。

第一個提示：

幫我的室內設計公司建置一個阿拉伯文與英文的網站，並提供語言切換。頁面包括：首頁、服務、作品集、關於我們與聯絡我們。阿拉伯文要完整採用由右至左的排版。

出了什麼問題： 阿拉伯文文字是靠右對齊的，但版面沒有鏡像：箭頭仍然指向錯誤的方向，選單也放在錯誤的一側。電話號碼在部分地方也顯示得反過來。

修正提示：

在阿拉伯文版本中，把整個版面鏡像：將頁面方向設為由右至左，把選單放在右側，翻轉有方向性的圖示，並在阿拉伯文文字中讓電話號碼與電子郵件保持由左至右。

教訓： 由右至左是版面問題，而不只是對齊問題。Mythex 支援阿拉伯文及其他由右至左的版面，你也可以直接用阿拉伯文下提示。

10. 變成手機 App 的追蹤器

誰會建置它： 使用者都在手機上的教練、健身房與社群團體。

第一個提示：

幫我的私人教練客戶建置一個訓練紀錄工具。每位客戶登入後，可以看到我為他們指派的本週計畫，勾選完成的動作，並記錄重量。我可以在圖表上看到每位客戶的進度。

出了什麼問題： 網頁版運作正常，但在手機上，按鈕小到在訓練中很難點擊，而圖表也看不清楚。

修正提示：

為單手操作的手機使用情境設計：螢幕底部放大型的點擊區域，每個畫面只顯示一個動作，並有大大的「下一步」與「完成」按鈕，另外加入簡單的每週進度圖表。

教訓： 如果人們會在手機上使用，就要優先為手機設計。在 Mythex Pro 中，已發布的應用程式接著可以變成 Google Play 上的 Android App，以及送到 TestFlight 的 iPhone App；手機 App 會開啟你已發布的應用程式，因此每次發布都會更新它。請參閱行動應用程式建置工具頁面。

這些範例背後的模式

在這十個範例中，失敗可以歸納成幾類：

這些都不需要你讀程式碼。你需要的是像一位好奇又有點挑剔的使用者那樣測試，並精確地描述你看到的東西。

自己試試看

挑選最接近你點子的範例，複製它的第一個提示，然後換成你自己的細節。分享之前，把修正提示當作檢查清單使用。我們的Vibe Coding 提示速查表還有 30 個提示，而如何用 Vibe Coding 建置應用程式則會帶你完成一個從點子到已發布應用程式的專案。準備好時，請在 AI 應用程式建置工具中開始，或瀏覽範本來取得快速起點。

常見問題