用 Claude 做 Vibe Coding：Claude 對話、Claude Code 同由 Claude 建構

用 Claude 做 vibe coding 有三種方式。Claude 對話 可以直接喺對話中建構細型單頁應用程式。Claude Code 係一個代理，會編輯你電腦上或雲端中嘅真實專案，適合習慣程式碼庫嘅人。而 Claude 加應用程式建構工具（透過 MCP） 則讓你喺 Claude 對話中建構、預覽並發布一個有資料庫嘅完整應用程式，無須離開對話。邊種最適合，視乎你要建構咩，以及你想自己負責幾多設定。

本指南會逐一講解三種方法，附上提示同每種方法嘅限制。如需了解背後嘅概念，請睇 什麼是 vibe coding。

方法一：Claude 對話做細型工具

喺一般嘅 Claude 應用程式中，你可以要求一樣具互動性嘅嘢，Claude 會將其寫成程式碼，並直接喺對話旁邊運行：例如計算機、記憶卡練習、小遊戲，或者用你貼上嘅數據製作圖表。你回覆就可以改動佢。

呢度一個好嘅提示係自成一體嘅：

製作一個互動工具，我貼上一個開支清單（每行一項，格式為「金額, 類別」），它會按類別顯示圓餅圖同總額。包括一個範例清單，令佢即時可以運作。

最適合： 快速嘅單頁工具，供你自己使用或以連結分享；亦適合學習，因為你可以要求 Claude 解釋每個部分。

限制所在： 呢啲嘢喺 Claude 嘅環境中運行。冇屬於你自己嘅持久資料庫、冇用戶帳戶、冇自訂網域，亦冇地方運行伺服器。當一個構思超出單一頁面嘅範圍，你就需要下面兩種方法之一。

方法二：Claude Code 處理真實程式碼庫

Claude Code 係 Anthropic 嘅程式編寫代理。佢可以喺你嘅終端機、VS Code 同 JetBrains 等編輯器、桌面應用程式同網頁上使用。你用日常語言交俾佢一個任務，佢會閱讀你嘅專案、編輯檔案、運行指令同測試，並向你顯示改動了咩。截至撰寫本文時，佢已包括喺 Claude 嘅付費方案中，並可透過 API 使用；目前方案詳情請到 Anthropic 網站查看。

一個典型嘅 vibe coding 工作階段會係咁：

加入一個 /bookings 頁面，列出目前用戶嘅預約，最新嘅排喺前面，並提供取消按鈕。若距離課堂少於兩小時，取消按鈕要停用。使用現有嘅驗證輔助工具。完成後運行測試。

最適合： 已經有專案、想完全掌控技術棧，並樂意自行運行同部署嘅開發人員同技術背景嘅創辦人。佢擅長跨多個檔案嘅更改，亦擅長跟隨程式碼庫中已有嘅慣例。

需要更多工夫嘅地方： 你需要一個開發環境，而 Claude Code 唔會託管任何嘢。資料庫、secrets、部署同網域都要由你安排。如果想比較其他開發人員工具，可以睇 Cursor 對比 Windsurf 對比 Claude Code。

同 Claude Code 合拍嘅習慣

• 大型更改之前要求先規劃。 「列出你會逐步進行嘅步驟同會觸及嘅檔案，然後等我同意。」
• 保留專案筆記檔案。 Claude Code 會讀取一個專案記憶檔案（CLAUDE.md）入面嘅慣例，所以你唔需要重複講述。
• 審閱差異。 即使你做緊 vibe coding，都應該快速掃視敏感範圍嘅改動：驗證、付款，以及任何涉及用戶資料嘅嘢。
• 經常提交。 細嘅提交令撤銷錯誤步驟變得容易。

方法三：用 Mythex 由 Claude 建構並發布

如果你喜歡喺 Claude 中工作，但最後想要一個真正嘅應用程式（資料庫、登入、檔案儲存、公開網址），你可以透過 MCP 將 Claude 連接到 AI 應用程式建構工具。MCP 係一個讓 Claude 使用託管喺其他地方嘅工具嘅協議。（什麼是 MCP 會用平白語言解釋。）

Mythex 運行一個 MCP 伺服器。連接之後，Claude 可以建立 Mythex 專案、喺私人雲端沙盒中撰寫程式碼、啟動即時預覽、附加資料庫同檔案儲存，並發布應用程式。每個結果都會包括一個連結，方便你喺 Mythex 中即時觀看專案。

點樣連接

1. 喺 Mythex 中，打開 帳戶設定，複製 MCP 網址：https://mcp.mythex.ai/mcp。
2. 喺 Claude 中，前往 設定 → 連接器 → 新增自訂連接器，貼上網址並點擊 連接。
3. Mythex 頁面會開啟。如有需要請登入，然後選擇 允許存取。唔需要複製任何 API 金鑰。
4. 返回 Claude，然後提出你想要嘅嘢。

任何人在任何方案上都可以連接；沙盒工具需要 Mythex Pro（每月 $25）。Claude 嘅使用量留喺你嘅 Claude 方案中，而沙盒時間、預覽同託管則由你嘅 Mythex credits 支付。完整教學請睇 由 Claude、Cursor 或 Codex 建構 Mythex 應用程式。

一個可以試試嘅首個提示

使用 Mythex 建立一個新專案：為我嘅小型設計工作室而設嘅簡單 CRM。聯絡人包括姓名、公司、電郵、電話、階段（潛在客戶、進行中、已完成）同備註。按階段顯示一個看板，我可以喺欄與欄之間拖曳聯絡人，並附一個搜尋框。加入資料庫令資料持久保存，並加入登入功能，令只有我可以睇到。啟動預覽，運行後將連結傳俾我。

然後喺同一個對話中，每次只改一樣嘢：

喺 Mythex 專案中，為聯絡人加入「下次跟進」日期，並喺首頁加入一個列表，顯示本週到期嘅跟進。喺預覽中檢查。

發布呢個 CRM，並俾我公開網址。

最適合： 習慣喺 Claude 中思考，並希望結果有託管同資料庫、又唔使設定伺服器嘅人。你亦可以轉換：先喺 Claude 中開始，然後喺 Mythex 對話中繼續；或者反過來，因為佢哋係同一個專案。

應該用邊一個？

同 Claude 一齊使用時更重要嘅提示技巧

Claude 會緊貼詳細指示，呢點有好有壞。

• 講明唔好改咩。 「保持版面同顏色不變；只改表單驗證。」
• 俾佢一個完成嘅定義。 「完成嘅意思係新增聯絡人會成功儲存、出現喺看板上，並且重新整理後仍然保留。」
• 要求佢檢查自己嘅工作。 喺 Claude Code 入面即係運行測試；用 Mythex 就即係檢查即時預覽或運行瀏覽器測試。
• 當你唔明白某項更改時，要求用平白語言解釋。 呢個係了解你個應用程式運作方式最快嘅方法。

我哋嘅 vibe coding 提示速查表 有 30 個提示，適用於以上三種設定。

三種方法嘅安全提示

• 唔好喺 Claude 對話中貼上真實 API 金鑰或密碼。用 Mythex 嘅話，secrets 要放喺專案嘅 secrets 設定中，而 Claude 只可以睇到佢哋嘅名稱，睇唔到其值。
• 發布之前，檢查邊個可以睇到乜嘢。「已登入嘅用戶可唔可以打開另一位用戶嘅紀錄？」係首先要問嘅問題。
• 審閱敏感程式碼。Claude 係一個能幹嘅程式編寫者，但 vibe coding 意味住你唔會逐行閱讀，所以要揀選重要嘅行。請睇 vibe coding 安全嗎？。

如果你亦有用 ChatGPT，配套指南講解 用 ChatGPT 同 Codex 做 vibe coding。如果你寧願完全唔使設定，可以打開 AI 應用程式建構工具，直接喺度描述你嘅應用程式。

常見問題