這是一個我多年前在職訓局上課時寫的番茄鐘小專案。檔案裡藏著許多現在看來有些「青澀」、甚至讓人想扶額的程式碼。這幾年來，我心裡一直有個聲音想把它徹底重構，但每次打開專案、評估完那龐大的時間成本後，就又默默地把它埋回 GitHub 的角落。

大約半年前重構的念頭又冒了出來，起因是我常常收到 GitHub 的信，通知我這個專案的依賴太舊了要處理，這讓我覺得很煩。但說實話，半年前的 AI 工具（像是 Claude Code）對我來說比較像是在「輔助開發」，我還是需要掌握很多框架與配置的知識。

那時我評估，即便有 AI 幫忙，我也沒心力把 Vue 2 升級到 Vue 3。即便我具備一些 Vue 3 的知識，但不見得 AI 寫出來的東西不需要我 debug。我預期自己還是得進到程式碼裡去看他寫得如何，改完可能也要花上一整週，所以當時就作罷了。

直到最近，我換了 Codex 的 gpt-5.3 模型來嘗試重構看看，發現感覺完全不一樣。現在的 AI 不只是理解力變好了，連做事的準確度也提升許多。更重要的是， Skills 的設計真的解決了以前 LLM 常亂猜 Best Practice 的問題。

這一次，我幾乎沒碰到程式碼，只測試 AI 改完的東西，花了幾個小時就把整個專案遷移完了。因為這次重構的體驗太好了，想特地記錄下來我怎麼做到「一行程式碼都沒碰，就完成了 Vue2 升級 Vue3 的重構」。

最近與主管進行面談時，聊到了團隊成員的技術成長與 AI 協作的現況。這引發了我的一連串思考：當 AI 已經能代勞大部分的實作時，開發者的核心價值究竟剩什麼？

📌 本文為系列文「從觀望 Claude Code 到一頭栽進去」的第一篇。
系列將分享我從觀望到愛不釋手的 Claude Code 使用心得，包括省 token、優化流程、寫 MR、產出技術文件與工具比較。
👉 完整系列文章列表請點這裡

原本買了保哥的課程：AI 程式設計代理人開發全攻略：從入門到實戰，跟完課程的 Claude Code 直播後，我其實還是有點猶豫要不要再多花一筆錢訂閱 Claude Pro。不過觀察到身邊的免費仔們紛紛開始課金，我就想：「嗯，好吧，那我也刷看看一個月 20 鎂的訂閱費。」

帶新人的幾個收穫

去年底帶兩個新鮮的前端工程師，看著他們逐漸上手而感到欣慰。

第一次帶新人的我，得到了寶貴的經驗：

去年針對購物車做了重構，主要是每次開發都覺得很挫折

因為我看程式碼的感覺就像：

早上準備上班的時候，你走到陽台的洗衣機前開水龍頭洗臉刷牙，再到從床底下找到今天要穿的衣服穿上之後，從冰箱拿出鞋子穿好出門。

你不能說這個流程有問題，因為你還是完成了準備上班(It does works.)
只是什麼東西在什麼地方、在什麼地方做什麼事情，都不對勁…

去年在工作上接觸了 cypress, docker, webpack, vue composition api 等前端技術，並且還有成功應用的經驗，我認為有三個訣竅幫助我有效的上手：

今年無論是個人成長或是身體健康，可以說是滿滿收穫的一年

趁著時間要來到 2023 年之前，留下個紀錄，並且許願明年會更好。

最近在優化公司專案用的 webpack，查資料查到這篇文章，

一看到 webpack 可以使用 esbuild 來提升速度，很興奮地跳下去實驗了

最近在逐步把開發環境移到本機上，原本在 Linux 運行好好的程式，到 Windows 上都出錯了

使用時機

• 如果需要放純圖片，用 img 標籤
• 如果在圖片前面還可以有其他的元素，用 background 屬性