用 ChatGPT 進行 Vibe Coding：Canvas、Codex 與在 ChatGPT 中建置 App

用 ChatGPT 進行 Vibe Coding 有三種方式。在聊天中請它製作一個小型應用程式，並在 Canvas 中預覽；把真正程式碼庫上的任務交給 Codex，也就是 OpenAI 的程式代理；或連接 AI 應用程式建置工具，例如 Mythex，讓 ChatGPT 能建置、託管並發布附有資料庫的完整應用程式。第一種對單頁工具最快；第二種適合開發人員；第三種則能讓你在不離開 ChatGPT 的情況下，得到一個具有登入與資料的即時應用程式。

以下說明每種方式如何運作、各自的提示範例，以及各自的限制。如果你想了解這個名詞的背景，請閱讀什麼是 Vibe Coding。

方式一：ChatGPT 對話與 Canvas

如果只是一個小工具，直接問就好。ChatGPT 會寫出程式碼，而在 Canvas 中它可以顯示簡單的 HTML 與 React 頁面，讓你點選操作並要求修改。

寫一個單頁的小費計算機，輸入項目包括帳單金額、小費百分比（提供 10%、15%、20% 按鈕與自訂欄位），以及用餐人數。輸入時即時顯示小費與每人應付金額。在手機上也要看起來乾淨清楚。

適合： 計算機、簡單遊戲、登陸頁草稿與學習。問「請用新手能懂的方式解釋這個檔案」，你會很快學會東西。

它的限制： 沒有後端。你輸入的內容不會為其他使用者保存，沒有登入功能，要分享的話，你必須把程式碼複製到某個地方，自己託管。一旦你說「還要把它存起來，讓我的團隊可以看到」，你就已經超出聊天的能力範圍了。

複製貼上式的 Vibe Coding

許多人一開始會請 ChatGPT 寫程式碼，然後把它貼到電腦上的檔案或託管服務中。這對小型靜態網站還可以，但很快就會崩潰。每次修改都要找到正確的檔案、貼上正確的部分，並祈禱你替換掉的內容沒有被其他地方依賴。如果你發現自己這樣做超過幾次，就該改用接下來兩種方式之一。

方式二：Codex 處理真正的程式碼庫

Codex 是 OpenAI 用於軟體工作的代理。你用白話文交付任務，它會在程式碼庫上工作：閱讀程式碼、跨檔案進行修改、執行指令與測試，並把結果交給你審查。OpenAI 提供它在 ChatGPT 中的版本、命令列工具，以及編輯器擴充功能；哪些方案包含它，以及目前的用量限制，請以 OpenAI 的網站為準。

以任務為導向的提示最適合它：

在這個儲存庫中，為訂單頁面新增一個 CSV 匯出按鈕。它應該匯出目前篩選後的訂單，欄位包括日期、客戶、總額與狀態。為匯出函式新增一個測試，並執行測試套件。

適合： 已經有專案、希望由代理接手整個任務清單的開發人員與技術創辦人。它會配合你的技術棧與慣例運作。

你仍然要負責的部分： 應用程式在哪裡執行、資料庫、機密資訊、部署與網域。Codex 負責修改程式碼，它不是託管服務。

Codex 與 Mythex 一起使用

Codex 也可以連接 MCP 伺服器，包括 Mythex 的。在 Codex 中把 https://mcp.mythex.ai/mcp 新增為自訂 MCP 伺服器，在 Mythex 上核准存取權限，Codex 就可以在 Mythex 專案的雲端沙盒中工作，而預覽、資料庫與發布都由 Mythex 處理。我們的文章從 Claude、Cursor 或 Codex 建置 Mythex 應用程式有完整的操作說明。

方式三：用 Mythex 從 ChatGPT 建置完整應用程式

如果你想留在 ChatGPT 的對話中，最後得到一個真正託管的應用程式，就連接 Mythex。Mythex 以應用程式的形式在 ChatGPT 中運作：ChatGPT 透過 MCP 與 Mythex 的工具溝通，MCP 是讓助手使用其他地方所託管工具的開放協定（什麼是 MCP）。

連接之後，ChatGPT 可以建立 Mythex 專案、在私人的雲端沙盒中撰寫程式、啟動即時預覽、加入資料庫與檔案儲存，並把應用程式發布到公開網址。結果會附上一個連結，讓你可以打開 Mythex 中的專案並觀看預覽。

如何連接

1. 在 Mythex 中開啟帳號設定，複製 MCP 位址。
2. 在 ChatGPT 中，從應用程式或連接器設定，使用該位址加入 Mythex。ChatGPT 的選單偶爾會改變，如果名稱不同，請依照 OpenAI 關於新增應用程式的說明頁面操作。
3. 會開啟一個 Mythex 頁面：登入，然後選擇允許存取。不需要貼上任何金鑰。
4. 開始一段對話，並在請求中提到 Mythex。

任何 Mythex 方案都可以連接。沙盒工具（建置、預覽、發布）需要 Mythex Pro（每月 25 美元），沙盒時間與託管則由你的 Mythex 點數支付。你的 ChatGPT 用量仍然計入你的 OpenAI 方案。

可以試試的第一個提示

請使用 Mythex 幫我建置一個求職追蹤工具。我可以新增申請紀錄，包括公司、職位、連結、申請日期、狀態（已申請、面試、錄取、未錄取）與備註。提供依狀態分類的看板，讓我可以拖曳卡片；並附一張簡單的圖表，顯示每週的申請數量。所有資料都存在資料庫中，並以登入保護。啟動預覽，並把連結給我。

然後每則訊息只改一個地方：

在 Mythex 專案中，為每筆申請新增提醒日期，並讓提醒日期為今天或已逾期的卡片醒目標示。

發布它，並把公開網址傳給我。

適合： 那些本來就在 ChatGPT 中規劃與思考，又希望成果能即時上線、資料能持續保存，而且不想學習託管的人。因為它是一般的 Mythex 專案，你隨時都可以改在 Mythex 聊天中繼續。

哪種方式適合你要建置的東西

在 ChatGPT 中有用的提示習慣

• 想讓它使用某個工具時，直接點名。 「使用 Mythex 來……」能清楚表示這個請求是針對你的專案，而不是一般性的回答。
• 每則訊息只做一個修改。 一長串編輯要求會產生一長串的副作用。
• 在大步驟前先要求計畫。「在改任何東西之前，先列出你會改什麼，並等我同意。」
• 貼上確切的錯誤訊息。 完整的錯誤文字，比任何描述都更有價值。
• 詢問改了什麼。「用白話文總結你最近三次的修改」，當你不讀程式碼時，能讓你保持方向感。

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

保持安全

• 絕對不要把真正的密碼或 API 金鑰貼到 ChatGPT 對話中。如果你的應用程式需要金鑰，請把它存放在專案的機密設定中。Mythex 的工具只會回報機密的名稱，絕不會回報其值。
• 發布前，確認使用者無法看到彼此的資料，並確認沒有任何金鑰進入會在瀏覽器中執行的程式碼。我們的指南Vibe Coding 安全嗎？列出了這些檢查，並附上可直接貼上的提示。

你也在使用 Claude 嗎？配套指南涵蓋了用 Claude 與 Claude Code 進行 Vibe Coding。如果想要以模型為單位的比較，請參閱 ChatGPT vs Claude vs Gemini 建置應用程式。

常見問題