30 個可直接複製的 Vibe Coding 提示（速查表）

最好的 Vibe Coding 提示既簡短、具體，又聚焦在行為上：誰會使用這個應用程式、他們能做什麼、它保存什麼，以及它看起來如何。以下是 30 個可以直接複製貼上的提示，依你所處的階段分組，從首次建置到發布都有。把 [方括號] 中的部分換成你自己的細節即可。

它們適用於任何 AI 應用程式建置工具或程式代理。如果你想了解背後的原理，我們較長篇的指南如何為 AI 應用程式建置工具撰寫提示會解釋這些原則。本頁則是速查表。

如何使用這份速查表

• 從一個首次建置的提示開始，然後一次使用一個其他提示。
• 每個提示之後都要測試。 在送出下一個提示之前，先實際操作一次這個修改。
• 保留有效的部分。 這裡大部分後續提示都以「其他部分保持不變」結尾，是有原因的。
• 貼上確切的文字。 錯誤訊息、按鈕標籤與畫面上的文字，永遠比描述更有用。

首次建置的提示

這些提示決定應用程式的基本形態。每一個都會指出使用者、動作、資料與外觀。

1. 一個簡單的追蹤器

幫我建置一個[習慣]追蹤器。我可以新增一個[習慣]，包含名稱與顏色，每天打一次勾，並看到 30 天的格狀圖與目前的連續天數。所有資料都要保存，重新整理後仍然存在。設計乾淨簡約，在手機上也能正常使用。

2. 小型商家的預約頁面

幫我的[髮廊]建置一個預約頁面。客人選擇服務（[剪髮 30 分鐘、染髮 90 分鐘]）、日期，以及在[9:00 到 18:00]之間的空閒時段，然後輸入姓名、電話與電子郵件。兩個人不能預約同一個時段。我需要一個私人的管理頁面，放在登入之後，依日期列出即將到來的預約。

3. 內部工具

幫我的團隊建置一個追蹤[器材借用]的內部工具。每個項目都有名稱、代碼與狀態（可用、借出中、故障）。員工登入後，可以把項目借給自己，也可以歸還。顯示一張表格，可依狀態篩選，並有每個項目曾經由誰持有的紀錄。

4. 附候補名單的登陸頁

幫[我的產品：給忙碌父母使用的餐點規劃應用程式]建置一個單頁網站。首屏有標題、一句話的副標題，以及電子郵件註冊。接著是三項優點、一段簡短的運作說明，以及常見問題。把註冊的電子郵件存入資料庫，並在一個私人管理頁面上顯示清單給我看。

5. 客戶入口網站

幫我的[設計工作室]建置一個客戶入口網站。每位客戶登入後，只能看到自己的專案，包括狀態、我上傳的檔案，以及一個留言串。我以管理員身分登入，可以看到所有客戶。客戶絕對不能看到彼此的資料。

6. 計算機或報價工具

幫我的[清潔公司]建置一個報價計算機。輸入項目包括：臥室數量、浴室數量、額外服務（烤箱、窗戶、冰箱）與頻率（單次、每週、每月）。選項變動時即時顯示價格，並附明細。價格：[貼上你的價目表]。加入一個按鈕，可以透過電子郵件把報價需求寄給我。

規劃的提示

在進行大型功能之前，或不確定如何描述某件事時使用。

7. 建置前先規劃

在你寫任何程式碼之前，請用白話文說明你會建置哪些畫面、會儲存哪些資料，以及有哪些需要我決定的事。等待我的同意。

8. 把混亂的點子變成第一個版本

這是我的點子：[貼上筆記]。請建議一個仍然有用的最小第一版，用 5 到 8 個重點列出。並列出你會留到以後再做的部分，以及原因。

9. 詢問缺少什麼

在建置這個東西之前，開發人員會問我哪些問題？請一個一個地問我，然後把我的回答整理成一份簡短的規格。

10. 先檢查大型變更

我想加入[團隊帳號，讓多人共用同一個工作區]。請說明資料、畫面與權限中必須改變哪些部分，以及可能會壞掉的地方。先不要改任何東西。

設計的提示

11. 設定清楚的風格

重新設計應用程式的風格：溫暖的米白色背景、深色文字、一個強調色[#1F6F50]、圓角、寬裕的間距，以及現代的無襯線字型。版面與每個功能都保持完全不變。

12. 仿照參考作品的感覺

讓儀表板看起來像一個沉穩的理財應用程式：大量留白、數字大而粗體、標籤小而灰，頂部放一張簡單的圖表。不要複製任何品牌的標誌或文字。

13. 修正手機版面

在 375 像素寬的手機上，[訂單頁面]的表格會左右捲動，而且按鈕會重疊。請讓小螢幕上的每一列變成堆疊的卡片。不要改變桌面版的版面。

14. 空狀態、載入中與錯誤狀態

為[專案列表]加入完善的狀態：友善的空狀態，附一個新增第一個專案的按鈕；資料載入時顯示載入中的骨架畫面；如果載入失敗，顯示清楚的訊息與重試按鈕。

15. 支援由右至左排版

加入完整由右至左排版的阿拉伯文介面版本。帶有方向的圖示應該翻轉；數字與日期應使用該語系的格式。預設維持英文。

資料與功能的提示

16. 讓資料持續保存

目前我一重新整理，資料就消失了。請改為存入真正的資料庫，並讓目前的畫面維持原本的運作方式。

17. 加入登入

加入以電子郵件與密碼註冊與登入的功能。每位使用者只能看到與編輯自己的[紀錄]。在頂端列顯示使用者的電子郵件，並附登出按鈕。

18. 加入角色

加入兩種角色：管理員與一般成員。管理員可以新增、編輯與刪除[產品]；一般成員只能檢視。這項限制要在伺服器端強制執行，而不是只靠隱藏按鈕。

19. 加入搜尋與篩選

在[聯絡人列表]上方加入搜尋框，在我輸入時依姓名、公司或電子郵件比對，並加入[狀態]篩選。保留目前的排序方式。

20. 加入檔案上傳

讓使用者為每個[刊登項目]附上最多 [5] 張圖片，每張最大 [5 MB]。在刊登項目上顯示縮圖，點擊後可看到較大的預覽。只有擁有者可以刪除自己的圖片。

21. 從試算表匯入

加入一個匯入按鈕，接受欄位為[姓名、電子郵件、電話、備註]的 CSV，先顯示前 10 列的預覽，讓我確認後再儲存。略過沒有電子郵件的列，並告訴我略過了幾列。

修正錯誤的提示

22. 清楚地回報錯誤

當我[在編輯表單上按下儲存]時，畫面顯示「[確切的錯誤文字]」，而且變更沒有被儲存。預期結果：變更會儲存，並回到列表。請找出原因，用一到兩句話說明，然後修正。

23. 停止反覆修正的循環

我們已經試了三次修正，但問題仍然存在。請停止修改程式碼。列出三個最可能的原因、如何檢查每一個，以及你認為是哪一個。

24. 復原附帶的副作用

你上一次的修改修好了日期選擇器，但[側邊欄]消失了。請把側邊欄完全恢復成原樣，並保留日期選擇器的修正。

25. 先解釋再修改

請一步一步解釋目前[結帳總額]是如何計算的，並指出相關的檔案。先不要改任何東西。

測試與審查的提示

26. 邊界情況

列出真實使用者可能破壞[預約表單]的 10 種方式：欄位留空、超長文字、連按兩下、兩個人同時操作、錯誤的時區。逐一測試，並修正失敗的部分。回報你改了什麼。

27. 總結近期的變更

用白話文總結你在最近[五]個步驟中做過的每一項變更，並標出任何可能影響既有資料的部分。

安全性的提示

可以搭配我們的Vibe Coding 是否安全一起使用。

28. 檢查資料存取權限

檢查伺服器端的程式碼：已登入的使用者能否透過更改請求中的 ID，讀取或修改其他使用者的[紀錄]？請指出權限檢查在哪裡進行，並修正任何漏洞。

29. 檢查是否有機密外洩

列出這個應用程式使用的每一個 API 金鑰、密碼或權杖，以及每一個儲存的位置。確認它們都不在會在瀏覽器中執行的程式碼中，也沒有被提交到檔案裡。如果有，請把它們移到機密設定中。

發布的提示

30. 上線前檢查

我即將把這個應用程式正式發布給真實使用者。請以審查者的角度逐項檢查：失效的連結、缺少的頁面標題與描述、沒有驗證的表單、速度慢的頁面、主控台錯誤，以及手機上看起來未完成的地方。依重要性排出清單，然後修正前五項。

應避免的提示

有些提示會穩定地產生較差的結果：

• 「把它做得更好。」 要更好？請指出是哪個畫面、哪個修改。
• 「修好所有東西。」 AI 會改很多地方，你也不知道哪些東西被動過。
• 「使用[函式庫]與[框架]以及[模式]。」 除非你有特定理由，否則請描述行為，讓工具去選擇技術棧。
• 「這是我的 API 金鑰：……」 永遠不要把機密資訊貼到聊天中。請使用工具的機密設定。
• 一則訊息中塞十個功能。 請把它們拆開。

把提示變成習慣

經過幾個專案之後，你會發展出屬於自己的版本。把它們記在筆記中，並重複使用有效的那些。Mythex 也會跨專案記住你是誰，以及你的工作方式，因此你重複設定的偏好，例如慣用的風格或技術棧，都會自動延續，不必再次輸入。

如果你卡在第一個提示上，免費的應用程式提示產生器能把一句話的點子，擴充成較完整的起始提示。想看看這些提示在實際中會產生什麼結果，請閱讀我們的 Vibe Coding 範例，或把第 1 個提示貼到 AI 應用程式建置工具中，並把方括號換成你自己的點子。

常見問題