新手的 Vibe Coding 教學：一步一步開始

新手的 Vibe Coding 歸結為五個步驟：選擇一個會替你執行應用程式的工具、用白話文描述一個小型應用程式、像使用者一樣試用、一次只要求一個修正，並在完成運作時發布。你不需要懂程式。本教學會帶你用一個真實的第一個專案走過每一個步驟，提供你要輸入的確切提示，並說明幾乎每個新手在第一週都會犯的錯誤。

如果你想先了解背景，包括這個名詞從哪裡來，以及為什麼大家對它有爭論，請閱讀什麼是 Vibe Coding。本頁則是實作的部分。

開始之前你需要什麼

比你想像的少：

• 一個瀏覽器，以及一個 Vibe Coding 工具的帳號。 新手應該選擇 AI 應用程式建置工具，它會寫程式、執行並託管，而不是要求你自己管理檔案與伺服器的程式助手。
• 一個小點子。 不是你的新創公司，而是一個只給你自己用、只有一到兩個畫面的工具。
• 一到兩個小時，不受干擾。 第一次的過程會讓你熟悉節奏。

就這樣。不需要安裝、不需要程式設計課程，也不需要終端機。

新手該選哪個工具

工具本身比習慣來得次要，但它應該做到三件事：在建置時顯示即時預覽、讓你可以復原錯誤的修改，並發布到一個可以分享的連結。我們的最佳 Vibe Coding 工具比較，誠實地介紹了主要的選項。Mythex 是其中之一：你在聊天中描述應用程式，它會建置一個真正的全端應用程式、提供即時預覽，當應用程式需要記住資料時加入資料庫，並一鍵發布。免費方案不需要信用卡。

步驟一：選擇一個你能完成的第一個專案

新手通常會因為目標太大而失敗。好的第一個專案應該：

• 對你個人有用，這樣你才會認真測試。
• 只要一到兩個畫面就能完成。
• 儲存少量你自己的資料。
• 沒有付款、沒有團隊，也沒有敏感的個人資料。

好的第一個專案：

在本教學的其餘部分，我們會使用閱讀清單。

步驟二：寫出你的第一個提示

你的第一則訊息會決定之後的一切。說明它是給誰用的、它要做什麼，以及它應該長什麼樣子。請控制在一小段話內。

一個較弱的第一個提示：

幫我做一個書籍應用程式。

一個好的第一個提示：

幫我建置一個閱讀清單應用程式。我可以新增一本書，包含書名、作者與狀態（想讀、閱讀中、已讀完）。書籍以卡片形式顯示，依狀態分組，最新的排在前面。我可以更改一本書的狀態或刪除它。設計保持乾淨簡單：白色背景、一個強調色，而且在我的手機上也能正常使用。書籍要保存下來，這樣重新整理之後仍然存在。

注意第二段提示做了什麼。它列出欄位、動作、版面，以及一條新手常常忘記的規則：保存資料，讓它在重新整理後仍然存在。 如果沒有這一行，許多工具會做出看起來已完成、但一重新載入就忘記所有東西的頁面。

更多起點請參閱我們的 Vibe Coding 提示速查表。

不確定時，請 AI 先做計畫

如果你不確定怎麼描述某件事，請 AI 在建置前先規劃：

在建置任何東西之前，請用白話文告訴我你會做哪些畫面、會儲存哪些資料，以及有哪些需要我決定的事。

在 Mythex 中，這就是計畫模式的用途：代理先列出做法，你核准之後才會修改任何檔案。

步驟三：像使用者一樣測試，而不是像做出它的人一樣測試

預覽出現時，不要只是欣賞它，而要實際使用：

1. 新增三本書，其中一本書名非常長。
2. 更改一本書的狀態。卡片有移到正確的分組嗎？
3. 重新整理頁面。書還在嗎？
4. 試著新增一本書名為空的書。會發生什麼事？
5. 在手機上打開預覽，或把瀏覽器視窗縮小。

用白話文寫下哪裡不對。「很長的書名會撐破卡片版面」是一份完美的錯誤回報。「它壞了」則不是。

步驟四：每則訊息只修正一件事

這個習慣會區分完成專案的人與半途而廢的人。送出一個修改，檢查它，再送出下一個。

「The Hitchhiker's Guide to the Galaxy: The Complete Trilogy」這個很長的書名撐破了卡片。請讓長書名換行成兩行，超出的部分用「…」截掉。

然後：

如果我送出一個空書名的表單，什麼都不會發生，也沒有任何訊息。請在欄位下方顯示「請輸入書名」，並且不要儲存這本書。

為什麼一次只做一件事？如果你在一則訊息中要求五個修改，AI 可能會把其中四個做好，卻悄悄弄壞其他東西，而你不會知道是哪個修改造成的。小步驟也讓復原變得有用：如果某個修改出錯，就回復到它之前的版本，然後用更清楚的請求再試一次。

出錯的時候

一定會出錯。每個建置工具都會遇到錯誤。複製確切的錯誤文字，或描述你點了什麼、看到了什麼，然後貼回去：

我在卡片上按「刪除」時，畫面顯示「發生錯誤」，而書還是留在那裡。請找出原因並修正，並告訴我原因是什麼。

要求說明原因很重要。它能讓你學會應用程式是怎麼運作的，也能避免 AI 亂猜。我們關於如何除錯 AI 建置的應用程式的指南會講得更深入。

步驟五：讓它變成你的

一旦它能運作，就用同樣小步驟的方式來改進它：

• 「在已讀完的書上顯示 1 到 5 星的評分。」
• 「在卡片上方加入搜尋框，依書名或作者篩選。」
• 「使用溫暖的米白色背景與深綠色強調色。」
• 「在頂端加入一個計數器：今年已讀完的書籍數。」

每一項都是單一、可以測試的修改。

步驟六：發布並分享

當它做到你需要的功能時，就發布它。在 Mythex 上只需按一下，你會得到一個公開網址，可以在任何裝置上打開，或傳給朋友。如果之後你想使用自己的網域，那是 Pro 的功能，而我們關於連接自訂網域的指南會說明做法。

在分享給幾位朋友以外的人之前，請先閱讀Vibe Coding 安全嗎？。對於一個個人的閱讀清單，風險很低；但對於讓陌生人註冊並儲存資料的應用程式，你需要先做一些檢查。

新手要避免的錯誤

• 一次要求所有東西。「幫我做一個 Goodreads」會做出看起來很厲害、但運作很差的東西。請從最小的有用版本開始。
• 沒有測試重新整理。 重新載入後資料消失，是新手最常遇到的意外。
• 每次都從頭重寫你的請求。 請說明要改什麼、要保留什麼：「保留版面，只改顏色。」
• 相信「已經修好了」。 AI 經常會說某個錯誤已修好。每次都要自己確認。
• 把密碼或 API 金鑰貼到聊天中。 如果你的應用程式需要某個外部服務的金鑰，請放在工具的機密設定中，絕不要放在訊息或程式碼裡。請參閱如何保護 API 金鑰。
• 第一個錯誤就放棄。 出錯是正常的。把錯誤貼回去，並要求說明原因。

邊做邊學的概念

你不需要上課，但有幾個概念能讓每個請求更精確。請 AI 結合你自己的應用程式來解釋它們：

• 前端與後端： 哪些東西在訪客的瀏覽器中執行，哪些在伺服器上執行。（前端 vs 後端）
• 資料庫： 你的應用程式把資料存在哪裡。（什麼是資料庫？）
• 驗證： 應用程式如何知道某人是誰。
• 機密資訊： 應用程式使用、絕不能讓訪客看到的私密金鑰。

一個適合的提示：「請解釋我的閱讀清單從我點擊新增到資料被儲存的整個過程。請用白話文說明，並引用實際的檔案。」

你的第二個與第三個專案

完成第一個應用程式之後，挑選一個難度提高一級的專案：一個附每週圖表的習慣追蹤器、一個會寄信給你的預約表單，或一個從 Google 試算表讀取資料的小型儀表板。我們的Vibe Coding 範例展示了真實的應用程式類型、背後的提示，以及哪裡出了問題；而如何用 Vibe Coding 建置應用程式則會帶你把一個較大的專案，從點子一路做到有使用者的已發布應用程式。

準備好開始時，請打開 AI 應用程式建置工具，貼上上面的閱讀清單提示，並把它換成你自己的點子。

常見問題