前言
大家平常在寫程式或用電腦時，應該常有這種想法：「要是手邊剛好有個小工具，能順手把 Base64 解碼成 JSON 就好了」，或是「好想要一個介面乾淨、沒有一堆廣告的 QR Code 產生器」。

但通常只要一想到要從頭開專案、裝套件、切 CSS 版面，光是把環境弄好就耗掉大半精力，最後往往就懶得做了。

所以這次我想嘗試用不一樣的方式：全程用「Vibe Coding」的模式來做。我不打算自己一行一行手敲程式碼，而是扮演發需求的角色，負責出嘴指揮 AI 工具，把平常實用的小工具一個個做出來，最後組合成一個專屬的 Web 工具箱。

什麼是 Vibe Coding？
這個詞最近在社群上很紅，說穿了概念很簡單：你只要出想法、掌握好大方向（也就是所謂的 Vibe），把寫語法、對齊版面這種雜事全部丟給 AI 處理。

以前開發像是自己在工地上磚，現在更像是在當產品經理。整個協作流程長這樣：

程式碼片段:
flowchart LR
A[1. 提出需求與想法] --> B[2. 寫下清晰 Prompt]
B --> C[3. AI 即時寫 code 與出畫面]
C --> D[4. 動手測試]
D -- 發現問題或想微調 --> B
D -- 測試沒問題 --> E[完成收工]
傳統寫程式和 Vibe Coding 的差別，主要在於心力花在哪裡：

這個工具箱要做些什麼？
這次做的小工具都會遵循幾個原則：純前端跑、不需要後端伺服器、資料只留在自己的瀏覽器裡。

接下來預計會陸續做出這些功能：

• 文字與開發輔助：Markdown 即時轉投影片、字數與閱讀時間計算。
• 資安與常用轉換：Base64 / URL 編解碼、Hash 計算、密碼強度即時檢測、JSON 格式化樹狀圖。
• 日常實用工具：客製化 QR Code 產製與圖片解析、白噪音番茄鐘、文字差異（Diff）比對。
• 視覺小工具：CSS 漸層調色盤、瀏覽器本地圖片壓縮與裁剪。

功能做完後，會把這些模組全部收進一個主頁面，加上即時搜尋功能，最後直接丟上網頁伺服器，變成一個隨時能開來用的網站。

小結
今天先把基本概念和接下來要做的東西整理好。不用自己寫程式碼，不代表隨便說兩句 AI 就會做對；關鍵還是在於怎麼把規格講清楚，以及當 AI 產生 Bug 時要怎麼把它導回正軌。

下一篇我們直接進入實作，聊聊怎麼寫出成功率高的 Prompt，並讓 AI 幫我們把工具箱的主頁骨架生出來。