1. 初衷：為了解決一個無聊又重複的流程
這工具（SN‑Scan）的誕生，起因其實非常單純。
我遇到一批需要報廢的舊電腦，每台設備都要拍照備存並記錄序號。你可以想像那是什麼樣的流程嗎？——每拍一張照，就手動輸入一次序號，然後再貼圖、整理，一台一台來。
這樣做太痛苦了。我當下就想到能不能做個小工具，直接用手機掃條碼，再順手拍張照，全部自動幫我記下來。
目標明確：夠簡單、跑得起來、能自用就好。
於是開啟了這次的 vibe coding 之旅。
—
2. Vibe Coding 流程：從聊天生成計劃，到 Roo Code 實作主體
整個開發流程走得非常 vibe：
- 先跟 ChatGPT brainstorm： 告訴它我的需求，由它幫我拆解步驟，整理出一個開發計劃。
- 丟到 Roo Code（Claude Sonnet-4）實作： 直接貼上計劃，請 Roo 一步一步幫我寫出 camera 功能、條碼掃描邏輯、資料列表渲染等。
- 自己補強細節： 像是黑暗模式切換、分頁等 UI 微調，則用手動或 Copilot 幫忙補齊。
過程中幾乎沒什麼阻力，就像寫一封 email 一樣，把想要的畫面慢慢組裝起來。這種「直接做、不多想、先上線」的節奏，正是 vibe coding 的爽快之處。
—
3. 陷阱與鬼打牆：模型記憶有時反而變成阻礙
不過 vibe coding 並不總是順風順水，這次我也遇到了一些特有的坑，特別是當 AI 模型「記錯東西」時：
幻覺型套件使用
有時它會告訴你「這個插件可以這樣用」，但實際一查，根本沒有那個參數或方法，甚至該 plugin 根本不是為你這個框架寫的。
這時會陷入 AI 建議 → 測試失敗 → 修正 → AI 又重複錯誤建議的迴圈鬼打牆。
—
4. 解法與推薦：人類該介入的時候就介入
這時候我們自己就要懂得「叫停」，而不是一味相信 AI 的產出。
我的做法是：
- 遇到問題馬上去 npm 或 GitHub 查實際用法與最新版本；
- 主動指定 library 與版本，而不是任它亂引；
- 對「看起來可疑的 plugin」直接實測後篩掉。
另外，推薦使用 Content7 這類 MCP 工具，能結合 AI 的生成力與真實世界的 code context，一方面能快速產出，一方面減少幻覺發生的機會。
AI 可以寫 code，但你得自己選對武器。
—
5. 結語：Vibe Coding 是爽，但不能盲目
這次 vibe coding 的體驗整體是正向的：我從「有一個明確問題」到「做出能跑的工具」，幾乎就是在一個下午之內完成的。完全不用寫後端、不用設計資料庫，東西就能立刻跑起來給人用。
但也因此學到一件事：
AI 模型再強，也不該代替我們判斷 library 的適用性。
該你出手的時候，不要迷信它。你是工程師，不是咒語翻譯員。
—
附加資訊
- 🔗 Demo 網址： sn-scan.vercel.app / sn-scan.windo.me
- 🧩 原始碼： https://github.com/WindoC/sn-scan
- 🛠 工具推薦：
- ChatGPT（構思）
- Claude Sonnet-4（開發）
- Roo Code（AI 協作開發環境）
- Content7（library 支援與上下文一致性做得非常好）
發佈留言