與其忍受功能不全的免費工具，不如花一個下午，打造一個完全符合自己需求的版本。
這，是程式碼、開發工具的民主、個人化時代！
🛠️ 先說成果：這工具網站能做什麼：tool.lifehacker.tw
| 工具 | 說明 |
| 抽獎工具集 | 輪盤＆數字抽獎、配對分組，支援多名單組、抽獎歷史 |
| 空白換行轉換器 | 解決 FB/IG 行距太窄的問題 + 中英文自動加空格 |
| 影音創作助手 | SRT 字幕轉純文字、AI 時間軸生成 |
| 倒數計時器 | 課程休息、開場、練習三種模式，可嵌入 Notion 或 OBS |
| AI 流程圖 | 結合 AI 對話生成可編輯流程圖，可匯出多種格式 |
這些工具在直播、實體或線上課程、社群活動，還是內容創作時常用到。
這也是我在練習 Vibe Coding 第一個階段的小嘗試。
所以今天讓我用一篇文章，快速整理這個故事以及我開發過程中學到的事情，希望給任何想要加入這個行列的人一點點畫面，或者說是信心。
為什麼要「重複造輪子」？
你可能會想：「網路上不是一堆類似的工具嗎？」
沒錯，Google 搜尋「線上抽獎」，你也能找到幾十個。
但我實際上遇到的問題：
- 第一個抽獎網站，功能夠用，但滿版廣告，視覺上很雜亂。
- 好，往下找到第二個，介面乾淨，但不能儲存名單，每次都要重新輸入。
- 可惡再來，好不容易找到第三個可以存名單，結果沒有抽獎歷史紀錄，不知道剛剛抽過誰。
這種情況你應該也遇過：
A 工具少了你需要的功能，B 工具有這功能但少了另一個，C 工具什麼都有但介面醜到不行。
每次都在不同工具間切換、妥協，久了其實很煩。
既然花時間找工具、學習新介面也是成本，不如把這個時間拿來打造一個自己的版本。
更重要的是，這是一個很好的練習 AI 工具，簡單開發小工具的機會。
透過練習，擴展自己的想像力
這是我學 Vibe Coding（與 AI 協作寫程式）以來的第一個完整專案。
坦白說，我不是工程師，也沒學過程式碼，以前看到 VSCode 這種滿滿都是字的介面（如上圖）也會害怕。但現在的 AI 工具（像 Claude Code、Cursor）強大到，你只要能清楚描述需求，它就能幫你把程式寫出來。
從單一工具到工具集的演進
一開始，我只是想做一個抽獎輪盤。
用的是 Manus，它可以幫你快速生成網頁應用，甚至可以做到後端（有資料庫），還能一鍵部署發佈，是一個最適合大眾上手的 AI Agent，沒有疑慮。
第一版就是這樣做出來的，單一功能的抽獎工具。
後來我開始用 Antigravity（Google 的 AI IDE），把專案搬過去繼續開發。
這時候我發現：既然抽獎工具做出來了，那其他小工具也可以用同樣的方式做啊。
於是換行轉換器、字幕工具、AI 流程圖工具⋯⋯一個一個冒出來。
做到第三個的時候，我開始覺得：這些工具散落在不同地方有點亂。不如整合成一個「工具集網頁」，讓自己和社群夥伴都能方便使用。
這就是 tool.lifehacker.tw 的誕生過程。
開發這專案的過程跟人生很像，完全沒有一開始就規劃好的，只有做著做著，自然長出來的。
這個專案讓我學到的東西遠比「做出一個抽獎工具」更多。
以前覺得「做一個網站」是很遙遠、耗時的事，現在發現：
- 1 個小時可以做出基礎、能跑得版本
- 再花 2 小時優化細節，符合自己的使用體驗、視覺設計，就能部署上線發佈
- 遇到 bug，再直接丟給 AI 幫忙分析，給我優化建議
從 0 到部署上線，總共大概就花了一天的零碎時間。
「原來，我也能做到」這給我帶來的啟發
當你知道「這個我也做得到」的時候，想法會變多。
看到別人的工具覺得不錯，會開始想「這個功能我可以怎麼做」。
遇到重複性的工作，會開始想「這個可以自動化嗎」。
這就是練習最大的價值：不求做出完美的成品，是去擴展你對「可能性」的認知。
Vibe Coding 的真正價值＆學習心得
Andrej Karpathy（OpenAI 共同創辦人，曾在 Tesla 主導 AI 業務）在 2025 年初提出了「Vibe Coding」這個概念：
完全沉浸在氛圍中，接受指數級增長的趨勢，忘掉程式碼的存在。
這不是說程式碼不重要，我想是一種鼓勵、呼籲說：你不需要成為工程師，也能做出自己需要的工具。
這就是「程式開發民主化」的真正意義。
我的 Vibe Coding 學習心得
這個月我用 AI 寫了不少程式，也整理了不少工作流。如果你對我怎麼打造「個人 AI 代理人系統」有興趣，可以參考這篇 雷蒙週報 #171，裡面有更完整的分享。
今天這篇文章，我特別挑了一個最簡單、大家最能理解的案例——網頁小工具集，來分享 Vibe Coding 的實戰經驗。
以下是我這個月踩過的坑，希望對你有幫助：
與其學怎麼寫 code，不如學怎麼把需求講清楚（如同 TRIRO 框架，別被提示詞所說）。
❌「幫我做一個抽獎功能」（太模糊）
✅「幫我做一個幸運輪盤，需要：
- 可以自訂名單
- 輪盤轉動時有動畫
- 抽中後顯示 confetti 特效
- 可以選擇是否自動移除得獎者」
描述越具體，AI 給你的結果越接近你要的。
第一版一定不完美，不用糾結。
先讓它能動，然後再一點一點調整。我的專案從 v1.0 到 v2.2 改了二十幾個小版本，每次都是修一個小問題、加一個小功能。
學會基本的 Git 操作（commit、push、pull），讓你的版本被記錄，也能看到自己和這個專案的成長歷程，久而久之好像在打養成遊戲一樣快樂 XD，但之所以要「版本控制」，目的是讓你隨時回到之前的版本。
我有一次改壞了整個專案，幸好有 Git，直接回滾到上一版就解決了。
開發過程中的幾個「原來可以這樣」時刻
分享幾個讓我印象深刻的開發經歷，給想嘗試的人參考：
🎯 故事一：輪盤指針指向 A，結果卻顯示 B
第一版做出來後，我興奮地點了「開始抽獎」，輪盤轉啊轉，停下來的時候指針明明指向「雷蒙」，結果卻跳出「柚子」。
這是什麼巫術？
我把問題丟給 AI：「輪盤動畫結束時，指針指向的位置跟顯示的結果不一致。」
AI 解釋說：問題出在「動畫計算」和「結果計算」是兩套獨立的邏輯。
我先隨機選出結果，再讓輪盤轉動，但轉動的角度沒有對準結果的位置。
修正方法是：先隨機出最終結果，再反推輪盤應該轉到什麼角度。
原本：隨機結果 → 隨機轉動 → 顯示結果（動畫和結果各轉各的）
修正：隨機結果 → 計算目標角度 → 轉動到目標 → 顯示結果
這種「看起來簡單，其實要想清楚因果關係」，生活中也常常遇到，有趣。
📝 故事二：同一個來源，不同的用途
這是個老問題了。Facebook、Instagram 等幾乎所有的社群媒體平台，對於中文都沒這麼友善，會自動壓縮連續的空白行，讓長文變得很難閱讀。
大家的通用解法是：在每一行結尾插入一個「零寬度空白字元1」，騙過平台的壓縮機制。
但工具邦的那個，我用起來真的「不太快樂」—— 因為介面不好看 XDD
那就自己做一個吧。
但做著做著，我發現另一個更常困擾我的問題：中英文混排時沒有空格，讀起來很擠。
例如「我用Notion管理專案」，如果改成「我用 Notion 管理專案」，閱讀體驗會好很多。
這個排版規則叫「盤古之白」 👾。
既然都在處理「文字排版」，不如把兩個功能整合在同一個工具裡，因為輸入來源都是「一大段文字」。
後來做影音創作助手時，也是同樣的邏輯：
當我有了 SRT 字幕檔後，當我只想要純的逐字稿文字，怎麼辦？最早得手動刪掉那些時間戳記錄…會累死，這時代別想了。所以得要再跟 AI 下命令，來回複製貼上，很簡單，但很煩。
同時，當我有了 SRT 字幕檔，通常也會需要生成 YouTube 影片章節標記。
這兩個需求的原料是一樣的，底層都是「處理 SRT 字幕內容」。與其做兩個工具，不如整合成一個「影音創作助手」，讓使用者在同一個地方完成兩種操作。
當同一個來源有多種用途時，整合在同一個工具裡，才是最省事的做法。因為每切換一次視窗，就是一次專注打斷。
🔧 故事三：先做核心功能，其他以後再說
前面有說到，這專案一開始是從 Manus AI 製作的，當時專案內容裡有：
- Google 登入功能
- 雲端資料庫同步
- 分析追蹤腳本
一開始我也想說：「既然有了，就留著吧，說不定以後用得到。」
但跟 AI 討論後，它問我：「你現在真的需要這些功能嗎？」
我想了想，其實不需要。我只需要本地暫存就好。
問題來了：這些功能是深度整合在程式碼裡的，不是刪掉一個檔案就解決的事。我花了整整一個下午，跟 AI 來回對話，一層一層把這些依賴移除。
過程中踩了很多坑：刪掉 A 會讓 B 壞掉，修好 B 又會讓 C 出問題。
但最後成功了。專案從複雜變得很單純，部署也變得更穩定。
這讓我學到：先做核心功能就好，其他的等真正需要時再加。
少即是多，功能少，維護起來反而更輕鬆。
🎨 故事四：拿開源專案來客製化
工具集裡的「AI 流程圖」（draw.lifehacker.tw）是另一個有趣的案例。
這個工具不是從零開始做的，而是 fork 一個開源專案「Next AI Drawio」：
結果一打開，發現幾個問題：
- 介面預設是簡體中文 + 英文：對台灣用戶來說，閱讀體驗不太好，居然還是混合語言？
- 預設開啟的功能太少：許多實用功能找不到，不如一開始就打開，讓使用體驗更好
怎麼辦？
我跟 AI 說：「幫我把介面改成繁體中文，然後把…（開始聊上一個多小時）」
這個過程讓我學到一件事：
開源世界大神真的多，其實我們能想像到的絕大多數需求，都有人在前方鋪路。
但這不代表我們就不用走了，畢竟你又不是他，不可能習慣、需求一模一樣，但我們可以感謝這些人，讓我們蓋自己理想的房子時，可以有個很好的起步點。
但其實，開源的精神就是讓你可以自由修改，彼此截長補短，越來越好。
開源精神（來自 g0v）：透過 「分享、參與、行動」，人們將自己的創作、專案分享出來，透過分享尋找因為共同的信念、喜好聚集的同好；透過參與專案，去產生理念與技術的激盪，甚至從中尋求新的刺激與討論；藉由行動去改變現況、推廣你想分享給其他人的事物或理念。而且在合力工作的過程中，我們的能力會愈來愈好，能做的事也愈來愈多，因為每個人擁有不同的能力、不同的專長，彼此截長補短，就能達成一個人時做不到的事情。
你不需要看懂所有程式碼，只要能描述「我想改什麼」，AI 就能幫你找到對應的位置、幫你改。
改完之後，這個工具就變成完全符合我需求的版本 —— 繁體中文介面、精簡的功能選項、我習慣的操作流程。
這就是 Vibe Coding 的另一個應用場景：不只是從零開始做，還可以把現有的東西改成你要的樣子。
小工具網頁｜完整開發時間軸
| 時間 | 版本 | 內容 |
| 2025-12-08 | v1.0 | 用 Manus 做出抽獎工具初版（輪盤、數字、分組） |
| 2025-12-09 | v1.1~v1.2 | 遷移到 Antigravity，修復動畫 bug、移除資料庫依賴 |
| 2026-01-24 | v2.0 | 🚀 新增空白換行轉換器 + 盤古之白 |
| 2026-01-25 | v2.1 | 首頁改版、整合成工具集網頁 |
| 2026-02-01 | v2.2 | 🚀 新增影音創作助手 + AI 流程圖（fork 開源專案並客製化） |
結語：粗糙的開始，就是最好的行動
你可能會想：「雷蒙本來就很會用數位工具，所以做這個對你來說很簡單吧？」
坦白說，沒有。
當時輪盤動畫對不上結果，我 debug 了一整個晚上；一開始把多個工具做整合呈現，也是很頭疼，就是硬著頭皮繼續弄，一個問題一個問題解決，最後才做出來的。
這是 Vibe Coding 時代給我們的禮物：
你不需要等別人做出你需要的工具，你可以自己動手做。
欸？是不是很熟悉的一句話～ 😎
對，我當初會想要教學 Notion & n8n，也是因為 Notion 和 n8n 都有這個特性和哲學感 —— 把主動權拉回來。
所以這也是為什麼我最近愛上 AI IDE 的原因，甚至連燕雲十六聲都好久沒打開了。
如果你也有一個小痛點想解決，不用想太多，直接開始吧。
不用怕做出一個很廢的東西。
粗糙的開始，就是最好的行動。
工具連結：tool.lifehacker.tw
最後，還是得推一下 Zeabur，依然是目前最好用的部署平台。
簡單說，就是把你用 AI 開發的程式碼直接部署、公開到網路上，讓你其他的朋友可以使用。
然後不管是在費用、介面、API 連結方便度（讓你的 AI IDE 直接控制），還是客服社群都特別好。
我目前這個小工具網站，一個月大概要花我 100~200 塊台幣的伺服器費用。
如果你也想要部署、開發自己的小工具，可以使用我的 Zeabur 推薦連結，這樣你會獲得 5 美金的折扣，我也會得到一些回饋。
文章註腳
- 其實幾年前，我也有用 PopClip 做出一個更快速加入換行空白的方式。所以這個工具主要是做給需要的人，但沒有 Mac 或沒用 Popclip 的人。 ↩︎
