還記得 Day 1 的時候，我們還在介紹很基本的 Claude 介面而已

中間經過了提示詞方法、網路搜尋、Artifacts、MCP…等主題，再到這幾天的 Claude Code

三十天聽起來很長，但實際上我們只是剛好把 Claude 的核心功能大致走過一遍而已（還有很多東西沒篇幅分享🤣🤣🤣

既然是最後一天，那就來做點不一樣的

授人以魚，不如授人以漁

今天來聊聊 Vibe Coding，以及分享幾個我自己實際寫出來的小工具

什麼是 Vibe Coding？

這個詞最近很紅，但其實就只是

用說的描述你想要的東西，讓 AI 幫你寫

聽起來很理想對吧？但為何最近這麼紅呢？除了因為本身 AI 這一兩年的能力提升真的很快以外，也因為這種方式的用戶只需要

• 知道想要什麼
• 清楚描述需求和期望的樣子
• 驗證和調整

剩下的實作細節，都可以交給 AI 來操作，不用再像傳統開發一樣那麼高的門檻：

• 需要知道「怎麼做」
• 要懂語法、框架、套件
• 從零開始建構每一行程式碼
• 要處理各種技術細節和 debug 地獄

但切記，這不代表傳統開發不重要，尤其是和資安有關的議題（不然你就會把自己的API key放在網路上，給別人刷了一萬多之後開始發文抱怨Google了🤣

Vibe Coding 的實作流程與心法

好，理論說完了，來快速聊聊實際怎麼做

先說，這是我自己摸索出來的流程，不一定是最好的（反過來說，它一定還有很多值得優化的地方，也歡迎大家留言交流

第一階段：前置思考

在跟 Claude Code 對話之前，先問自己三個問題：

1. 我現在遇到什麼麻煩？

不要想著「做個工具」，而是從真實的痛點出發，例如：

• 每次講課都要開計時器，但常常要臨時調整時間 ➡️ 麻煩
• 常用的提示詞模板要一直複製貼上，想分享給別人 ➡️ 麻煩
• Notion 頁面想用自訂圖示，但每次都要開 Canva ➡️ 麻煩

看到了嗎？每個工具的背後都有一個很麻煩的地方

2. 理想的解決方案長什麼樣子？

閉上眼睛想像一下：

• 如果這個工具存在，我會怎麼用它？
• 打開之後第一眼會看到什麼？
• 我會點擊什麼？輸入什麼？
• 最後會得到什麼結果？

越具體越好

• ❌我想要一個好看的工具
• ⭕️我想要有大大的數字顯示剩餘時間，然後有幾個快速按鈕可以加減時間

3. 哪些是必要的，哪些是加分項？

分享一下軟體開發的重要心法

Make it work
Make it right
Make it fast
——Kent Beck

不要還沒學會走路就想要飛，先讓它跑起來，然後能正確運作就行
真的有那個深度的優化需求的時候，記得再去找專業的軟體工程師來協助就好

第二階段：與 Claude Code 對話的技巧

開始跟 Claude Code 對話之後，有幾個技巧可以讓過程更順利：

1. 具體勝於抽象

❌ 不好的說法：「做一個好看的倒計時工具」

✅ 好的說法：「做一個倒計時網頁，大字體顯示時間，要有 1分鐘、5分鐘、10分鐘的快速按鈕」

2. 分段實作，逐步迭代

不要期待第一次就完美
先求有，再求好：

• 第一版：基本功能能跑就好
• 第二版：加入使用體驗的細節
• 第三版：美化和錦上添花的功能

3. 善用範例和參考

如果看過類似的東西，直接說出來會剩下很多描述時間

• 「像是 Pomodoro Timer 那樣的介面」
• 「參考 Notion 的卡片設計」
• 「Google Keep 那種簡潔的風格」

第三階段：迭代優化的節奏

如同上面說的，切記不要一開始就過度追求完美和細節（真的追求完美，請學會 Coding 自己來

第一版：能用就好

• 不用在意美觀
• 不用追求完美
• 只要核心功能能跑起來就行

第二版：好用一點

• 加入一些使用體驗的細節
• 比如鍵盤快捷鍵、自動儲存、錯誤提示
• 讓工具用起來更順手

第三版：用起來舒服

• 現在才開始考慮美化
• 調整顏色、間距、動畫
• 加入一些「沒有也可以，但有了更好」的功能

很多人會在第一版就想做到第三版的程度，結果搞得很累，最後什麼都做不出來

記住：先做出來，再慢慢改

三個實戰案例分享

好了，理論講完了（其實也沒講多少），我們來看實際的案例

這邊分享三個我之前使用 Claude Code 開發，用來解決一些小問題的實際案例

案例一：可以微調的倒計時器

背景需求

這個工具的誕生很簡單：上課常常需要幫學員計時

而市面上的計時器大多：

• 太複雜，有一堆不需要的功能
• 太簡單，想臨時調整時間很麻煩

標記一下靈感來源於之前去上龍哥的工作坊的時候，看他做的可以用鍵盤調整時間的計時器，因此在這個基礎加上一些我自己的客製化需求

• 打開就能用
• 有快速按鈕（1分鐘、5分鐘、10分鐘）
• 可以邊計時邊調整時間
• 最好有點背景音樂

核心功能

最後做出來的功能包括：

• ⏱ 預設時間快速按鈕：常用的時間一鍵設定
• ⏯ 彈性調整：計時中也能加減時間
• 🎵 背景音樂：營造專注的氛圍
• 📊 進度條：視覺化顯示剩餘時間
• 🔔 提示音：時間到時的明確提醒

案例二：Prompt 模板填入於分享工具

背景需求

如果你常用 AI，應該會有一些「常用的提示詞模板」

比如我自己常用的：

請扮演【角色】，協助我【任務】
請使用【方法】來達成目標
並以【輸出格式】的形式呈現結果

每次都要複製貼上，然後手動修改，很麻煩

更麻煩的是：如果要分享給同事或朋友，還要教他們怎麼填，超累

我想要的是：

• 可以預設模板，然後填空就好
• 可以自訂模板變數
• 最好能用連結分享，別人打開就能用

核心功能

• 📝 模板變數填入：自動辨識參數產生填入欄位
• 🔗 URL 參數載入：透過連結分享不同的模板
• 📋 一鍵複製結果：不用手動選取文字

案例三：Text2icon - 文字圖標產生器

背景需求

想要幫 Notion 頁面加個自訂圖示，但 emoji 的選擇很有限，我希望

• 輸入文字就能產生圖片
• 可以自訂尺寸、字型、顏色
• 即時預覽效果
• 一鍵下載

核心功能

• ✏️ 文字轉圖標：輸入文字自動產生圖片
• 🎨 完整客製化：尺寸、字型、文字顏色、背景顏色
• 👁 即時預覽：所見即所得
• 💾 多格式匯出：PNG（透明背景）和 JPG

從這三個案例我們學到什麼？

做完這三個工具之後，我發現了一些共同的模式

好工具的共同特徵

1. 單一目的明確

每個工具都只解決一個問題：

• 倒計時器 = 計時
• Prompt 工具 = 管理提示詞模板
• Text2icon = 產生文字圖標

不要貪心想做「瑞士刀」，那樣反而什麼都做不好

2. 操作簡單直覺

打開工具之後，不用看說明書就知道怎麼用：

• 要填的欄位很明顯
• 按鈕的功能一看就懂
• 不會有「這個要怎麼用」的疑問

3. 即開即用

這三個工具都是單一 HTML 檔案：

• 雙擊就能在瀏覽器打開
• 不用安裝任何東西
• 不用連網路也能用

4. 離線可用，資料不外流

所有的處理都在本地端：

• 不會上傳任何資料到網路
• 隱私有保障
• 速度也更快

當然有把握的話，你也可以把它部署到網路上，但這就不是我們這次的主題範圍了

Vibe Coding 的成功關鍵

1. 需求來自真實痛點

不是為了做而做，而是真的遇到問題才做

我不會做「隨機密碼產生器」，因為我沒有這個需求(icloud 鑰匙圈已經夠用了，我沒有把握自己寫跨裝置雲端同比可以做的比較好
但我會做「倒計時器」，因為我每週都會用到好幾次

2. 不追求完美

這三個工具都不完美：

• 倒計時器的背景音樂是固定的，不能換
• Prompt 工具的介面還有點陽春
• Text2icon 的字體選項不多

但這不影響使用
能用就好，需要再改

3. 持續迭代

這些工具不是一次就做好的

都是用了一陣子，發現「欸這裡可以改一下」，就跟 Claude Code 說一聲，改個兩三分鐘就好

4. 保持簡單

我刻意不加太多功能

比如倒計時器，我可以加上：

• 多個計時器同時運作
• 計時歷史記錄
• 自訂背景音樂
• 雲端同步

但我沒加，因為加了之後就不簡單了，維護起來也麻煩

記住一個原則：功能越多，越容易壞

🎨 冷知識：為什麼 vibe coding 一堆都是藍紫色介面？

看完這三個工具的截圖，你可能會發現：怎麼都是藍紫色的漸層背景？

這不是我的喜好，而是有個超有趣的歷史原因

Tailwind CSS 的「歷史遺產」

五年前，Tailwind CSS 的創辦人 Adam Wathan 在設計範例時，把所有按鈕的預設顏色設為 bg-indigo-500（藍紫色）

這個選擇本來只是為了方便示範，結果：

1. Tailwind CSS 變超紅 → 大量網站開始用
2. 這些網站成為 AI 訓練資料 → AI 看到超多藍紫色範例
3. AI 學會了「規則」 → 「藍紫色 = 網頁設計的最佳預設值」

Adam Wathan 的「道歉」

Adam 最近在推特上開玩笑說：

"I'd like to formally apologize for making every button in Tailwind UI 'bg-indigo-500' five years ago, leading to every AI generated UI on earth also being indigo"

（我想正式道歉，因為我在 5 年前把 Tailwind UI 的每個按鈕都設為 bg-indigo-500，導致現在地球上每個 AI 生成的界面都是 indigo 色）

更可怕的「循環效應」

現在的狀況是：

• AI 生成藍紫色網站
• 這些網站變成新的訓練資料
• 下一代 AI 看到更多藍紫色
• 生成更多藍紫色網站...

這就是所謂的「訓練資料偏差循環」

如何打破這個「魔咒」？

其實很簡單，在跟 Claude Code 對話時明確說明就好：

請避免使用 indigo 或藍紫色系，除非我特別要求
使用溫暖的橘紅色系作為主色調

或是：

用 Notion 那種簡潔的黑白灰色系
不要用漸層背景

只要你說清楚，AI 就會照做
但如果你沒說，它就會預設用藍紫色

所以這些藍紫色不是 AI 的審美，而是它從資料中學到的「常識」

你也可以開始的三個建議

看到這裡，你可能會想：「聽起來不錯，我也想試試看」

很好！這裡有三個建議給你

1. 從小處著手

不要一開始就想做「專案管理系統」或「客戶關係管理工具」

從一個小小的困擾開始：

• 每次都要計算某個數值很麻煩？→ 做個計算機
• 常常要轉換檔案格式很麻煩？→ 做個轉換器
• 整理資料很麻煩？→ 做個整理工具

小工具的好處是：做壞了也不會太痛，做好了成就感很大

2. 保持對話

Claude Code 不會一次就做到完美

這很正常，不要氣餒，多講幾次就對了：

• 「這個按鈕太小了」
• 「字體改大一點」
• 「可以加個確認視窗嗎」
• 「這個顏色太亮了，柔和一點」

就像在跟設計師溝通一樣，慢慢調整到滿意為止

結語 murmur

三十天過去了，我們一起走過了 Claude 的各種功能

但更重要的是：我們學會了如何「讓 AI 幫我們工作」的思維方式

這個思維包括：

• 清楚表達需求
• 善用工具的特性
• 保持彈性和耐心
• 持續迭代優化

未來的工作不是「會不會寫程式」，而是「會不會描述需求」

會寫程式當然很好，但如果不會，也不代表你做不出東西

就像會開車很好，但不會開車也能叫 Uber 到達目的地

重點是：知道自己要去哪裡

不會做菜，也可以從 Uber eats 叫外送
但你的披薩可能會被吃掉一半就是了

今天分享這三個小工具只是一個開始，提供一些靈感給你（畢竟你的場景可能也和我不同

接下來就看你的創意了

想做什麼？缺什麼？需要什麼？

打開 Claude Code，開始你的旅程吧

最後，再次謝謝你陪我走完這三十天 🙏