用 Claude 進行 Vibe Coding：Claude 對話、Claude Code 與透過 Claude 製作 App

用 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 不會替你託管任何東西。資料庫、機密資訊、部署與網域都要由你自行安排。若想比較其他開發者工具，請參閱 Cursor vs Windsurf vs Claude Code。

搭配 Claude Code 的好習慣

• 在大規模修改前先要求計畫。「先列出你會修改的步驟與檔案，然後等我確認。」
• 保留一份專案備忘檔。 Claude Code 會讀取專案記憶檔（CLAUDE.md）中的慣例，這樣你就不必重複說明。
• 檢查差異（diff）。 即使你在做 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 點數支付。完整的操作步驟請參閱從 Claude、Cursor 或 Codex 建置 Mythex 應用程式。

可以試試的第一個提示

使用 Mythex 建立一個新專案：為我的小型設計工作室做一個簡單的客戶關係管理（CRM）工具。聯絡人包含姓名、公司、電子郵件、電話、階段（潛在、進行中、過去）與備註。提供依階段分類的看板檢視，讓我可以在欄位之間拖曳聯絡人，並附一個搜尋框。加入資料庫讓資料能持續保存，並加入登入，讓只有我能看到內容。啟動預覽，並在執行中時把連結傳給我。

然後在同一段對話中反覆修改，一次只改一個地方：

在 Mythex 專案中，為聯絡人新增「下次跟進」日期，並在首頁加入一份本週到期的跟進清單。在預覽中確認效果。

發布這個 CRM，並給我公開網址。

它的優點： 適合那些最擅長在 Claude 中思考、而且希望成果有託管與資料庫、又不想自己架設伺服器的人。你也可以來回切換：先在 Claude 中開始，然後在 Mythex 聊天中繼續，反之亦然，因為它們是同一個專案。

該用哪一種？

在 Claude 中更重要的提示技巧

Claude 會緊密遵循詳細的指示，這一點有利也有弊。

• 說明不要改什麼。「保留版面與顏色，只修改表單驗證。」
• 給它一個完成的定義。「完成的標準是：新增的聯絡人能成功儲存、出現在看板上，而且重新整理後仍然存在。」
• 請它檢查自己的成果。 在 Claude Code 中，這代表執行測試；使用 Mythex 時，代表檢查即時預覽或執行瀏覽器測試。
• 當你看不懂某個修改時，請它用白話文解釋。 這是了解你的應用程式在做什麼最快的方法。

我們的 Vibe Coding 提示速查表 收錄了 30 個提示，可以在這三種方式中使用。

三種方式都適用的安全注意事項

• 不要把真正的 API 金鑰或密碼貼到 Claude 對話中。使用 Mythex 時，機密資訊應放在專案的機密設定中，Claude 只能看到名稱，看不到實際的值。
• 發布前先確認誰能看到什麼。「已登入的使用者能否打開其他使用者的紀錄？」是第一個要問的問題。
• 檢查敏感的程式碼。Claude 是能力很強的程式設計師，但 Vibe Coding 意味著你不會讀每一行程式碼，因此要挑出真正重要的部分來看。請參閱Vibe Coding 安全嗎？。

如果你也使用 ChatGPT，配套指南涵蓋了用 ChatGPT 與 Codex 進行 Vibe Coding。如果你想完全跳過設定，請直接打開 AI 應用程式建置工具，在那裡描述你的應用程式。

常見問題