· AI 與工具
溝通的渠道
跨工具、跨協定、跨團隊的溝通一直是難題。我在 Side Project 裡改用自然語言文件當通訊協定，讓 AI Agent 交管 Product 到 QA 的整條溝通橋樑。
#工具
共 25 篇
· AI 與工具
AI 選擇性閱讀
AI Agent 不會乖乖把你餵的 1000 行讀完，它讀個 200 行就說讀完了。這篇講怎麼用「條件引導 Submodule」把 Prompt 拆細，既省 Token 又避免漏讀。
· AI 與工具
關於 AI 幫我做了什麼
上了 Claude Max 之後最有感的不是寫程式，是把 AI 接進生活。這篇講三個實際用法：把十年份的 iOS 備忘錄搬進 Obsidian、對龐大筆記做語意搜尋、用 MCP 把工具交給 AI 管。
· AI 與工具
Vibe Drawing
寫程式可以完全靠嘴砲了，那設計稿呢？為了讓 AI 能順利產出 Figma 設計稿，我洋洋灑灑寫了很多 Skill Rule 來解決它產不順的問題。
· AI 與工具
Claude Channel 很酷，但也就這樣
透過 Telegram 隨時跟 Claude 對話聽起來很棒，實際用起來電腦睡眠就斷、閒置太久就斷、訊息漏掉沒有補救。說白了，這是一個沒有 uptime 保證的本地服務。
· 短文與心得
疑問
要投入原生應用開發，而且想對 UI Style 與 UI Flow 做最大化調整，你會選哪條技術線？原生 Swift/Kotlin、Flutter、React Native，還是 WebView 方案？
· 工程實務
Shadcn UI
Shadcn UI 現在幾乎成了前端的優先選型，老實說有點疲乏。Headless 帶來極強的可修改性，但也帶來閱讀負擔——工程師永遠在彈性和效率之間取捨。
· AI 與工具
AI 的嘗試
幾個月下來我逐漸摸清 AI 的套路。腳本最優秀、單元測試成效不錯、文件產出太多廢話；分析複雜程式常常錯、切版則是明顯會歪掉。
· AI 與工具
Figma MCP
每個工程師都在精心規劃自己的 project contexts。但 AI 不會幫你規劃複雜的系統架構，你要什麼都得講清楚說明白。
· AI 與工具
Vibe Coding 的感覺
用 Claude Code 建一個後端專案，含微調不到三十分鐘，自己寫大概要兩三小時。0 到 70 的階段真的很有效率，對前端教學來說尤其方便。
· AI 與工具
新技術
每一次新技術流行都會帶來一波革命，也帶來保守派與改革派的拉扯。沒有工具能長長久久，迭代與升級的痛苦一定會來，你會怎麼選？
· 工程實務
Service Worker
Service Worker 就像一台開在瀏覽器裡的伺服器：長期快取、Web Push、攔截請求、背景長連接，還能不卡主線程做運算。PWA 就是基於它。
· AI 與工具
分享我使用 AI 的方法
從 user story、架構文件、架構程式碼、單元測試到頁面文件，一層層讓 AI 產出並回寫成 Context。這篇拆解整套流程，也講為什麼架構階段最關鍵。
· 工程實務
你真的驗證過 Tree Shaking 嗎？
在現在 極端 內捲的 前端 生態裡面 ， 每個 都計較 怎麼 打包 ， 要多小， 要 多 快 。 B un dl e Siz e 可以說是 非常 有價值 的 優化 項目 ， 但 你 真的 有 驗證過 ， 你 自己的 專案 T re e S
· 短文與心得
Tanstack Query：近年最超乎預期的套件
Tanstack Query 大概是我近年用過最超乎預期的套件了。（這篇是當時隨手記下的一句話，完整的心得寫在工程實務分類那篇。）
· 工程實務
React Router
用過 vue-router 之後，其他路由系統我都覺得難用。這篇列出 react-router-dom v6 讓我卡住的地方：不建議操作 Router 實體、沒有導航攔截、無法針對 route id 導向。
· 工程實務
Mock Server
後端還沒好、外部資源掛掉都會卡住前端開發，Mock Server 可以用 Node.js 或 Service Worker 模擬一個伺服器環境。但也有人認為這只是拉高成本。
· 工程實務
為什麼前端這麼需要 Project Builder？
為什麼只有前端要又轉譯又打包？從一支破萬行的 HTML、破萬行的 CSS、上百張圖片講起，也講為什麼後端能拆微服務而前端拆不了。
· 工程實務
用我用什麼角度去看套件？
「套件幫我解決了，不用管細節」這種態度我不太認同。我的實力是靠大量閱讀原始碼建立的，知道它的實作原理，就能預先知道坑在哪。
· 設計與設計系統
UI 框架的選用
前些陣子在社群上討論了一個話題，「哪一個 UI 框架好用？」這件事。 基本上在 React 的生態系中，毫無疑問的是對應 Material Design 的 mui，和對應 Ant Design 的 antd。有 Google 和螞蟻金服兩
· AI 與工具
和 ChatGPT 當好朋友
我實際會找 AI 幫忙的六件事：資料搜集與技術評估、簡報文案、潤飾程式碼、先寫測試再讓它實作、文字微調，還有那些不想花時間回答的問題。
· AI 與工具
我也來蹭一下 ChatGPT
在 code review 時看到一段命名邏輯都很眼熟的程式，一查發現八成是 ChatGPT 產的。我不覺得那位工程師偷懶，反而覺得他很懂得善用工具。
· 工程實務
Webpack升版（二）
要關閉 Vue cli 的 TS，方法就是去修改 ts loader 的設定，從頭到尾不是 ESLint 做的祟。到這裡總算是可以把專案暫時動起來了，但接著還要各種問題⋯⋯最要命的是 typescript 的各種運行規則，不要去挑戰非常冷門
· 工程實務
Webpack升版（一）
把一個龐大的 Vue-cli 專案從 webpack 4 升到 5。這篇記下升級介面的選擇、Node 版本與 polyfill 的坑，以及 TS 錯誤噴到崩潰時關不掉檢查的怪事。
· 工程實務
圖表系統開發經驗
為了做一個高度客製化的 Event Time Line Chart，只好跳下去跟 Canvas 搏鬥。到了 Canvas 沒有 CSS，碰撞、渲染、組件化全部要用數學算出來。