2-2 ChatGPT 實戰：五分鐘做一個小工具

開始 Vibe Coding 的第一步，我們將使用 ChatGPT 製作一個最簡單的小工具。因為 ChatGPT 最容易上手，所以選擇它作為我們的第一個體驗，來感受 AI 開發的威力。

先來看看這次的成品大概會是什麼樣子。當然，AI 每次生成的結果可能會有些微差異，不過大致上會是這樣：

我們要做一個番茄鐘計時器：

25 分鐘專注時間
5 分鐘休息時間
開始/暫停功能

步驟一：開啟 ChatGPT

前往 chat.openai.com
登入你的帳號（免費版即可）
開始新對話

步驟二：輸入 Prompt

複製以下 Prompt 到 ChatGPT：


幫我做一個番茄鐘網頁

對，就是這麼簡單的 prompt！

我們可以先從最簡單的 prompt 開始，看看 AI 能寫出什麼樣的程式。

步驟三：測試執行

大約等幾分鐘後，ChatGPT 就會把完整的程式寫出來。如果你仔細看這個程式，它使用的語法是 HTML、CSS 和 JavaScript，這也是之後我們會詳細說明的部分。

這時候，你可以按右上角的「執行程式」按鈕，來執行 ChatGPT 生成的程式碼，看看你的成果：

你就可以在右邊的視窗看到 ChatGPT 幫你寫出的完整網頁。點擊按鈕後，你可以嘗試各種互動效果，看看你的番茄鐘運作得如何。

太棒了！你已經成功 Vibe Coding 出第一個作品，就是這麼簡單！

步驟四：優化與調整

接下來可以針對這個初步完成的番茄鐘進行優化與調整。

這時候你可能會發現：

某些功能跟想像中不太一樣
風格或排版還可以更好
需要增加一些額外的功能

你可以繼續跟 ChatGPT 對話，例如：

「新增一個設定按鈕，讓我可以調整工作時間和休息時間」

這時候你可能會遇到一個常見的問題：ChatGPT 很容易「改 A 壞 B」。雖然它新增了設定功能，可以調整工作時間和休息時間，但前面做好的番茄鐘全部消失，被換成一個完全不同的介面了。

當你請它把進度圓圈加回來時，你會發現它做得很歪，視覺效果相當糟糕。

繼續對話之後，你可能會發現作品越來越糟。這時候你可以使用「回溯」功能，返回到之前的版本：

或者你也可以先點擊舊版本的檔案，再回溯到指定版本：

為了避免「改 A 壞 B」，你可以在 Prompt 中明確指出：

「在原本的番茄鐘上，新增一個設定按鈕，讓我可以調整工作時間和休息時間，不要改動到其他地方，設定按鈕點開後會跳出一個視窗來讓我調整，並且可以儲存和關閉」

雖然成功新增了設定按鈕，沒有改動到原本的功能，但介面變得非常醜陋：

經過一番調整與優化後，終於成功完成了這個功能。

現在設定按鈕可以正常運作，點擊後會彈出設定視窗，風格也和原本的介面一致。但這個過程需要：測試、反饋、回溯、優化 Prompt，重複好幾次才能完成。

為什麼 ChatGPT 開發效率低？

從剛才的過程可以看出，用 ChatGPT 開發的體驗並不理想：

很容易「改 A 壞 B」
經常無法理解你的需求
生成的程式碼品質不穩定

事實上，ChatGPT 原本並不是專門為程式開發設計的，這也是為什麼我們推薦使用 Claude Code 或其他專業的 AI 工具。

不過，如果要讓 ChatGPT 稍微做得更好，也不是完全沒有辦法。觀察剛才的開發過程，大部分時間都花在後續的修改與優化。第一個 Prompt 是最重要的，如果第一次就做對，就能節省大量時間。

如何讓 GPT 做得更好？

讓 ChatGPT 做得更好的關鍵，就是提供清晰的需求描述。下面是一個更詳細的範例，可以讓大家參考。

關於 Prompt 的技巧，之後的章節會更詳細地說明，這裡先簡單了解即可。


請幫我創建一個番茄鐘網頁應用，要求如下：

1. 使用單一 HTML 檔案（包含內嵌的 CSS 和 JavaScript）
2. 功能需求：
   - 預設 25 分鐘工作時間
   - 5 分鐘休息時間
   - 顯示剩餘時間（分:秒格式）
   - 開始/暫停按鈕
   - 重置按鈕
   - 工作/休息模式切換按鈕
   - 有一個設定按鈕
      - 可以跳出個 Dialog 來設定工作時間和休息時間
3. 設計需求：
   - 簡潔現代的介面，類似 Radix UI 風格
   - 深色背景、暗色模式
   - 使用漸層背景
   - 圓形進度環顯示剩餘時間
   - 工作模式用暖色系，休息模式用冷色系
   - 按鈕要有 hover 效果
   - Mobile First Design
4. 額外功能：
   - 顯示已完成的番茄數
   - 瀏覽器標籤顯示剩餘時間

不過仔細看這個範例，你可能會看到一些不熟悉的術語：

「單一 HTML 檔案」、「內嵌 CSS/JavaScript」
「Radix UI 風格」
「hover 效果」
「Mobile First Design」

沒關係！這些術語會在後續章節一一說明。這也是本系列文章的重點：掌握技術背景知識，才能寫出更好的 Prompt。

發布你的專案

雖然關於如何部署和發布專案，後面的章節會有更詳細的說明，但這裡提供一個輕量級的解決方案。

我特別為這系列文章 Vibe Coding 了一個網站：VibeWeb.me 。你可以把 HTML 程式碼上傳到這個平台，它會快速幫你把網站發布上線，並產生一個連結讓你分享給朋友。

首先，從 ChatGPT 複製生成的程式碼：

然後前往 VibeWeb.me ，並貼上程式碼並點擊發布

最後，分享給朋友！就這麼簡單！

別忘了將你的作品分享給我！

歡迎來信 xx0932399@gmail.com 或是我的 Threads / IG dada._.878！

[!提示] 如果你的程式碼包涵 import、react、export、useState、useEffect 等語法，代表它是使用 React 等前端框架開發的，這種程式碼無法直接貼到 VibeWeb.me 上發布。請叫 ChatGPT 幫你把程式碼轉換成純 HTML、CSS、JavaScript 的版本。關於 React 等前端框架的介紹和使用，會在後續章節詳細說明。

開發技巧重點整理

從這個練習中，我們成功用 ChatGPT 開發出第一個小工具並發佈到網路上。來回顧一下剛剛學到的各種重點：

Prompt 撰寫技巧：

第一個 Prompt 最重要，寫得越詳細越好
明確指定「不要改動其他部分」避免改 A 壞 B
提供具體的功能需求和設計要求

ChatGPT 操作技巧：

善用「回溯」功能返回之前的版本
測試功能後再進行下一步調整

小工具 Prompt 模板：


請幫我創建一個 [工具名稱] 網頁應用：
1. 使用單一 HTML 檔案
2. 功能：[列出功能]
3. 設計：[描述外觀]
4. 請提供完整程式碼

這個模板對於開發小工具已經足夠。如果之後要開發更複雜的專案，你將需要更進階的技巧。

玩玩看這些 idea 吧！

現在你已經學會了如何用 ChatGPT 做出一個簡單的工具，試試看用同樣的方法做出更多有趣的小工具吧！

待辦清單
擲骰子遊戲
密碼產生器
簡單記帳本
習慣追蹤器
文字編輯器
心情日記

下一步

恭喜你完成了第一個工具！下一篇我們將介紹 Cursor，看看專業的 AI 編輯器能帶來什麼不同的體驗。