你是否也有這樣的經驗，會議一開始說好 30 分鐘，結果一轉眼就變成 1 小時，大家都很努力，但時間卻總是不受控制。
問題真的出在自制力不足嗎？其實更多時候，只是少了一個好用、看得見的時間工具。
這篇文章，小編要用一個實際的小專案，帶你認識現在越來越多人討論的 Vibe Coding !
👉 用 AI 幫你寫程式，就算是零基礎，也能做出真的能用的作品。
而這個作品，就是一個「會議專用倒數計時器」，你的第一位時間守門員。
什麼是 Vibe Coding？為什麼完全新手也能開始？
Vibe Coding 是一種新的程式開發方式：不需要先背語法，而是用「自然語言描述需求」，由 AI 協助生成程式碼。
換句話說，你專心想清楚「我要什麼功能」，剩下的「怎麼寫程式」，交給 AI 一起完成。
Vibe Coding 和傳統寫程式有什麼不同？
傳統學寫程式，通常是這樣開始的：
- 學語法
- 記指令
- 開始手動寫程式，遇到錯誤訊息再寫程式修正
而 Vibe Coding 則是：
- 先有想法
- 用文字描述功能
- AI 產出第一版程式
- 你再慢慢調整、測試、優化
這讓「寫程式」從一件高門檻的事，變成一場與 AI 的對話過程，也因此，它特別適合完全新手。
這個倒數計時器可以做什麼？
這個倒數計時器，設計目標很單純：幫助會議準時開始、準時結束。
完成後，會得到一個：
- 可以設定會議時間的倒數計時器
- 清楚顯示剩餘分鐘與秒數、可放大展示
- 時間到有明確提醒、可以自訂提醒鈴聲
- 可部署成網頁，任何裝置都能開啟使用
從 0 到上線 ! Vibe Coding 完整實作流程
本次開發，小編使用 ChatGPT 作為主要的 Vibe Coding 協作夥伴，再運用 VS code 開發環境來執行程式碼，並於期間透過 Git 控制版本，這樣就不用擔心修改後上一個版本會不見啦 !
Step 1｜準備開發環境：安裝 VS Code
VS Code 是什麼？你可以把它想成「寫程式的工作桌面」，AI 產出的程式碼會在這裡修改與測試。並且 VS Code 也有提供 AI 代理工作區，可以支援與串接多個 AI 工具，包含 Claude、Codex、Gemini CLI、GitHub Copilot 等，非常便利好用！
下載 VS Code 👉 https://vscode.com.tw/
Step 2｜建立專案資料夾，開始第一個 Vibe Coding 專案
根據不同的 Vibe Coding 專案，AI 生成的程式碼可能會需要存放成好幾個檔案，所以事先建立一個專屬資料夾，會更方便檔案的存取。接著開啟 VS Code，點選剛剛建立好的資料夾，就可以新增檔案了，接著只要將下一步所產出的程式碼複製貼上，就可以進行測試了。
Step 3｜用 ChatGPT 生成倒數計時器程式碼
這一步，就是 Vibe Coding 的核心，小編先是這樣描述：
「 我想做一個工具是會議時間提醒器，可以設定會議時間，時間倒數到了會自動撥放音樂提醒，音樂要讓使用者可以自訂，如果可以我希望這是一個大家都能使用的工具，並且要有足夠的便利性，你會建議我怎麼做 」
接著 AI 就開始協助思考架構，給了我 MVP 版本的建議：
1 ）最小可用版本（ MVP ）功能
- 時間設定
- 模式 A：設定「會議結束時間」（例如 15:30）
- 模式 B：設定「倒數 X 分鐘」（例如 45 分鐘）
- 可選一個「提前幾分鐘提醒」（例如結束前 10 分鐘）
- 倒數顯示
- 大大的倒數計時（ 讓人一眼看到還剩多久 ）
- 顯示：現在時間、預計結束時間、距離提醒還有多久
- 音樂自訂
- 預設提供幾個內建鈴聲（ 短音效、柔和、急促都有 ）
- 提供「上傳 mp3 檔」做為自訂提醒音樂
- 設定預設鈴聲，下次進來自動帶入
- 提醒控制
- 時間到 → 自動播放音樂（ 可選「重複播放」或播一次 ）
- 有「暫停」「延後 5 分鐘」「結束」按鈕
- 使用者可以先按「試聽」鈕確認音量
- 記住使用者偏好
- 用 localStorage 記住：
- 上一次使用的提醒時間（ 例如：會議前 10 分鐘 ）
- 上一次選的音樂
- 常用倒數模板（ 例如 15、30、45、60 分鐘 ）
- 用 localStorage 記住：
小編再根據 AI 提供的建議，延伸討論加上自己的想法，並請它產出完整的程式碼。
過程中我再與 AI 多次來回確認、調整、迭代。
Step 4｜啟動 Git 版本控制，修改也不怕出錯
對新手來說，Git 的功能就是存檔，每次修改的版本都會被完整的紀錄，讓小編不用每次調整都要複製資料夾。
- 改壞了，可以回到上一版
- 嘗試新功能，也不怕全毀
點擊下方圖片的按鈕，就可以開啟 Git 版本控制。不過首次使用的話，會顯示 “下載適用於 Windows 的 Git”，只需點擊再跟著其步驟安裝即可。
Step 5｜持續修改、測試，讓 AI 陪你一起 debug
真正的 Vibe Coding 不會生成一次就結束，像小編就在過程中持續的增加功能與優化介面，透過不斷與 AI 對話調整，逐步產出期望的成果！並且身為新手一定要請 AI 提供完整的程式碼，這樣就只需要再次複製貼上就可以輕鬆測試。
Step 6｜部署到 GitHub，讓倒數計時器正式上線
最後一步，就是把專案部署到 GitHub Pages，這也是很多新手最有成就感的一刻。打開網址，就能使用倒數計時器，也能分享給朋友使用。因為小編在過程中也讓 AI 加上了 PWA 的功能，可以將網頁加入手機主畫面或桌面，就可以創造手機 App 的效果！
1 ) 先註冊 Github 帳號（ 全球最大專門用來存放程式碼雲端平台 ）你可以把它想像成程式碼界的 Google Drive。
2 ) 接著到 VS code 登入 Github 帳號（ 可以參考 VS Code 的官方說明 ）。
3 ) 點擊左下角有個上傳雲端的符號，接著點選 Publish to Github public / private repository，就可以將程式存放到 Github 了。
4 ) 回到 Github，找到剛剛上傳的專案，點擊右上方 Settings，再跟著圖片步驟就能的得到一組公開網址了。
5 ) 打開網址大功告成，也能分享給朋友使用。透過 Github 串接，若未來有更新程式碼，只要在 VS Code 提交變更，網頁也會自動更新，非常便利！
沒有程式背景也能開發了！
這就是現代 AI 時代的程式開發方式，如果你看到這裡，也想嘗試開發屬於自己的小工具，現在就開始吧！
如果你想更系統地學會 Vibe Coding，歡迎跟著緯育 TibaMe 一起 !
當然，自學一定會遇到卡關的時候，例如：
- 不知道下一個專案該做什麼
- 不確定自己的做法對不對
- 想更有效率地和 AI 協作
希望有人幫你 整理學習路線、實作技巧與觀念重點，
TibaMe 也規劃了一門 AI 協作開發工作流：SDD 規格驅動開發 x Gemini CLI，
讓你用更短的時間，掌握 AI 程式開發的核心方法 !
在 AI 時代，寫程式不再只是工程師的專利，
而是每個願意動手嘗試的人，都能掌握的工具。
最後，也歡迎你一起加入挑戰，把 AI 真正用進你的工作裡 🚀