用 ChatGPT 做 Vibe Coding：Canvas、Codex 同由 ChatGPT 建構應用程式

你可以用三種方式用 ChatGPT 做 vibe coding。喺對話中要求佢做一個細型應用程式，並喺 canvas 入面預覽；將真實程式碼庫嘅任務交俾 OpenAI 嘅程式編寫代理 Codex；或者連接一個 AI 應用程式建構工具，例如 Mythex，令 ChatGPT 可以建構、託管並發布一個有資料庫嘅完整應用程式。第一種對單頁工具最快，第二種適合開發人員，第三種則可以令你喺唔離開 ChatGPT 嘅情況下，得到一個有登入同資料嘅即時應用程式。

以下係每種方法嘅運作方式、一個例子提示，以及佢嘅限制。如果你想了解呢個詞嘅背景，可以閱讀 什麼是 vibe coding。

方法一：ChatGPT 對話同 canvas

如果只係要一個快速工具，直接問就得。ChatGPT 會寫程式碼，而喺 canvas 入面，佢可以顯示簡單嘅 HTML 同 React 頁面，令你點擊測試，並要求更改。

寫一個單頁小費計算機，輸入項目包括：帳單金額、小費百分比（10、15、20 嘅按鈕，以及自訂欄位），以及人數。隨住我輸入即時顯示小費同每人應付金額。喺手機上要睇落乾淨。

適合： 計算機、簡單遊戲、著陸頁草稿同學習。問「用新手聽得明嘅方式解釋呢個檔案」，你會學得好快。

限制所在： 冇後端。你輸入嘅嘢唔會為其他用戶儲存，亦冇登入功能；如果要分享，就要將程式碼複製到某處，並自行託管。當你講出「同埋儲存落嚟，等我個團隊可以睇到」，你就已經超出對話嘅能力範圍。

複製貼上式 vibe coding

好多人一開始就係向 ChatGPT 要程式碼，然後貼到電腦上嘅檔案或者託管服務入面。咁樣對細型靜態網站有效，但好快就會失效。每次更改都要搵返正確嘅檔案、貼返正確嘅部分，然後希望冇其他嘢依賴你取代咗嘅內容。如果你發覺自己做咗多過幾次，就應該轉用下面兩種方法之一。

方法二：用 Codex 處理真實程式碼庫

Codex 係 OpenAI 嘅軟件工作代理。你用日常語言俾佢一個任務，佢就會喺一個儲存庫上工作：閱讀程式碼、跨檔案作出更改、運行指令同測試，並將結果交俾你審閱。OpenAI 提供喺 ChatGPT 入面、作為指令列工具，以及作為編輯器擴充功能嘅版本；請到 OpenAI 網站查看邊啲方案包括佢，以及目前嘅限制。

一個以任務形式寫嘅提示最適合佢：

喺呢個 repo 嘅訂單頁面加入一個 CSV 匯出按鈕。佢應該匯出目前已篩選嘅訂單，欄位包括日期、客戶、總額同狀態。為匯出功能加入一個測試，並運行測試套件。

適合： 已經有現成專案、希望有代理接手整個任務嘅開發人員同技術背景嘅創辦人。佢會配合你嘅技術棧同慣例。

你仍然要處理嘅嘢： 應用程式喺邊度運行、資料庫、secrets、部署同網域。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 credits 支付。你喺 ChatGPT 嘅使用量仍然由你嘅 OpenAI 方案計算。

一個可以試試嘅首個提示

使用 Mythex 幫我建構一個求職申請追蹤器。我可以加入申請，包括公司、職位、連結、申請日期、狀態（已申請、面試、取得 offer、被拒）同備註。按狀態顯示一個可以拖曳卡片嘅看板，以及一個每週申請數目嘅簡單圖表。將所有嘢儲存到資料庫，並以登入功能保護。啟動預覽，然後俾我連結。

然後，每則訊息只改一樣嘢：

喺 Mythex 專案入面，為每個申請加入一個提醒日期，並將提醒日期為今日或已逾期嘅卡片標示出嚟。

發布佢，並將即時網址傳俾我。

適合： 習慣喺 ChatGPT 中計劃同思考，並希望結果即時上線、資料可以持久保存，而又唔想學習託管嘅人。由於佢係一個普通嘅 Mythex 專案，你任何時候都可以喺 Mythex 對話中繼續。

邊種方法適合你要建構嘅嘢

喺 ChatGPT 入面有效嘅提示習慣

• 想佢用某個工具時就指明。 「使用 Mythex 來……」令人清楚知道個要求係針對你嘅專案，而唔係一般性嘅答案。
• 每則訊息只改一樣嘢。 一長串編輯會產生一長串附帶影響。
• 大步驟之前要求先規劃。 「喺改動任何嘢之前，先列出你會改咩，並等我同意。」
• 貼上確切錯誤。 完整錯誤文字比任何描述都更有價值。
• 問清楚改咗咩。 「用平白語言總結你最後三項更改」，即使你唔睇程式碼，都可以令你保持清楚狀況。

更多提示可以喺我哋嘅 vibe coding 提示速查表 中找到。

保持安全

• 永遠唔好喺 ChatGPT 對話中貼上真實密碼或 API 金鑰。如果你嘅應用程式需要金鑰，請將其儲存喺專案嘅 secrets 中。Mythex 嘅工具只會回報 secret 名稱，永不回報其值。
• 發布之前，檢查用戶睇唔睇到彼此嘅資料，以及有冇金鑰被放入喺瀏覽器運行嘅程式碼中。我哋嘅指南 vibe coding 安全嗎？ 會列出檢查項目，並附有可以直接貼上嘅提示。

如果你亦有使用 Claude，配套指南講解 用 Claude 同 Claude Code 做 vibe coding。如果想睇各模型之間嘅比較，請參閱 ChatGPT 對比 Claude 對比 Gemini 建構應用程式。

常見問題