Vibe Coding 新手入門：點樣開始，一步一步來

新手嘅 vibe coding 可以歸納為五個步驟：揀一個替你運行應用程式嘅工具、用日常文字描述一個細型應用程式、以用戶身份試用、每次只要求一項修正，然後喺一切正常時發布。你唔需要識寫程式。本教學會用一個真正嘅首個專案，逐步講解每一步、要輸入嘅確切提示，以及幾乎所有新手喺第一個星期都會犯嘅錯誤。

如果你想先了解背景，即呢個詞係點嚟，以及點解人哋爭論不休，可以先睇 什麼是 vibe coding。本頁係實際操作嘅部分。

開始之前你需要咩

比你想像中少：

• 一個瀏覽器同一個 vibe coding 工具嘅帳戶。 新手應該揀 AI 應用程式建構工具，佢會寫程式、運行並託管，而唔係一個要求你自己管理檔案同伺服器嘅程式編寫助手。
• 一個細型構思。 唔係你嘅初創公司，而係一個只為一個人（你自己）而設、只有一兩個畫面嘅工具。
• 一兩個鐘頭冇人打擾。第一節課會教你節奏。

就係咁。唔使安裝、唔使修讀編程課程、唔使用終端機。

新手應該揀邊個工具

工具嘅重要性不及習慣，但佢應該做到三件事：建構時顯示即時預覽、令你可以還原錯誤嘅更改，並發布到一個你可以分享嘅連結。我哋嘅 最佳 vibe coding 工具 比較會誠實介紹主要選擇。Mythex 係其中一個：你喺對話中描述應用程式，佢會建構一個真正嘅全端應用程式，附即時預覽；當應用程式需要記住嘢時會加入資料庫，並可以一按就發布。Free 方案無須信用卡。

第一步：揀一個你做得完嘅首個專案

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

• 對你個人有用，令你會好好測試。
• 只需要一兩個畫面。
• 儲存少量屬於你自己嘅資料。
• 冇付款、冇團隊，亦冇敏感個人資料。

好嘅首個專案例子：

喺本教學剩下嘅部分，我哋會用閱讀清單做例子。

第二步：寫你嘅第一個提示

你嘅第一則訊息會決定之後所有嘢嘅形態。講清楚服務對象、功能同外觀。保持喺一段短文之內。

一個弱嘅第一個提示：

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

一個好嘅第一個提示：

為我建構一個閱讀清單應用程式。我可以加入一本書，包括書名、作者同狀態（想讀、閱讀中、已讀完）。按狀態分組，以卡片形式顯示書籍，最新嘅排喺前面。我可以更改一本書嘅狀態或刪除佢。保持簡潔：白色背景、一個強調色，並且喺我嘅手機上可以用。儲存書籍，令它們喺我重新整理頁面後仍然保留。

留意第二個提示做咗乜嘢。佢列出咗欄位、操作、版面，以及一條新手經常忘記嘅規則：儲存資料，令資料喺重新整理後仍然存在。如果冇呢一句，好多工具會建構一個睇落好似完成咗、但重新載入後就全部忘記嘅頁面。

更多起步提示，請睇我哋嘅 vibe coding 提示速查表。

唔肯定時，要求先規劃

如果你唔肯定點樣描述某樣嘢，可以要求 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 金鑰貼入對話。 如果你嘅應用程式需要外部服務嘅金鑰，請放喺工具嘅 secrets 設定入面，絕不要放喺訊息或程式碼中。請睇 如何保護 API 金鑰。
• 遇到第一個錯誤就放棄。 錯誤係正常嘅。將錯誤貼返上去，並要求找出原因。

邊做邊學嘅嘢

你唔需要報讀課程，但幾個概念可以令每個要求都更精準。叫 AI 用你自己嘅應用程式去解釋呢啲概念：

• 前端同後端： 邊啲嘢喺訪客嘅瀏覽器運行，邊啲喺伺服器運行。（前端與後端）
• 資料庫： 你嘅應用程式將資料儲存喺邊度。（什麼是資料庫？）
• 驗證： 應用程式如何知道某人係邊個。
• Secrets： 應用程式使用、但訪客絕不可以見到嘅私人金鑰。

一個好嘅提示：「請解釋我嘅閱讀清單點樣儲存一本書，由按下新增開始，直到資料被儲存為止。用平白語言講，並提及實際嘅檔案。」

你嘅第二同第三個專案

完成第一個應用程式之後，就揀一個難度高一級嘅嘢。一個有每週圖表嘅習慣追蹤器。一個會寄電郵俾你嘅預約表單。一個讀取 Google Sheet 嘅細型儀表板。我哋嘅 vibe coding 例子 會展示真實嘅應用程式類型、背後嘅提示，以及出錯嘅地方；如何用 vibe coding 建構應用程式 則會帶你由構思走到一個有用戶嘅已發布應用程式。

準備好開始嗰陣，打開 AI 應用程式建構工具，貼上上面嘅閱讀清單提示，然後將佢改成你自己嘅構思。

常見問題