安全使用 AI 的檢查清單：關掉訓練開關之後，還有哪些洞要補？
關掉模型訓練只是第一步。從 ChatGPT、Gemini、Claude 的隱私設定、按讚回饋的例外、資料紅黃綠燈分級、log 去識別化，到 AI Agent 讀檔權限與 Prompt Injection，整理一份每天用得上的 AI 安全檢查清單。
AI
AI Agent
Enterprise AI
Claude Code
category
AI 協作
這裡整理與「AI 協作」相關的已發布文章，依最新更新排序。
Latest first
文章列表
GPT-6.1 Terra 是什麼？看懂畫面、操作電腦，日常 Agent 任務的新選擇
GPT-6.1 Terra 主打視覺推理、電腦操作與自然寫作。從官方評測、API 價格與工程情境，看懂它和 Sol、Astra、Luna 的分工，以及哪些日常工作值得先試。
OpenAI
Codex
AI Agent
Automation
我的新書《文件驅動 AI 開發》開放預購了！
我的新書《文件驅動 AI 開發》開放預購，預計 2026 年 11 月 4 日出版。書中以 Habit Life RPG 為主線，從需求文件與系統架構，一路走到前後端開發、測試、部署與維護，練習和 AI 一起完成能驗收、能持續維護的作品。
AI
Software Engineering
Documentation
Vibe Coding
Codex 省 Token 卻又慢又卡：訂閱 Claude Max 後，我決定 AI Agent 要雙修
Codex 很省 Token，但執行慢、常卡住，結果也常不如預期。我訂閱 Claude Max 5x，把 Claude Opus 5.5 用在 HLR 專案上，從 commit 紀錄看前後差異，聊聊為什麼現在不能只押一家 AI Agent，也預告結合 RPG 的習慣養成 Web App「HLR」將在十月底上線。
AI Agent
Claude Code
Claude
Codex
Codex 新隊友 Dot 可以做什麼？把需要跟進的工作交給雲端代理
Dot 能持續追蹤工作、研究資料、協調 ChatGPT Work 與 Codex 任務。從工程師情境看懂雲端與本機的差別、可直接改用的 Prompt，以及方案、權限與排程限制。
Codex
AI Agent
Automation
OpenAI
Day 33｜三十三天後，我從 Clean Code 與 CLEAN 得到的五個 AI Coding 結論
2026 iThome 鐵人賽 AI CleanCode Day 33：安安～我是ChiYu～ 三十三天前，我手上其實只有三份材料：一本 753 頁、厚度大約五、六公分的《無瑕的程式碼 第二版》，兩則 Uncle Bob 談 Coding Agent 的 X 貼文，以及這段時間大量使用 AI Coding …
AI Agent
Software Engineering
Software Architecture
Testing
Day 32｜我把 Clean Code 做成可下載的 AI Coding Skill：保留、捨棄與重新設計了什麼？
2026 iThome 鐵人賽 AI CleanCode Day 32：安安～我是ChiYu～ 昨天，我把前面累積的 24 份 Policy 分別放回適合的位置：跨 Repository 可重用的判斷進入 Skill，專案自己的領域語言、架構與測試規則留在 Repository，風險接受與最後決策仍由工程師…
AI Agent
Software Engineering
Software Architecture
Testing
Day 31｜什麼是 AI Agent Skill？我如何把 24 份 Clean Code Policy 整理成可重用工具
2026 iThome 鐵人賽 AI CleanCode Day 31：安安～我是ChiYu～ 昨天，我重新走了一遍這三十天從 Clean Code 延伸到 CLEAN 五原則的過程，才發現前面的文章已經累積了 24 份 Policy。 單篇看都不長，全部塞進 AGENTS.md 卻會產生新的問題：Agen…
AI Agent
Software Engineering
Software Architecture
Testing
Day 30｜Clean Code 如何經過 AI Coding 實作，推導出 CLEAN 五原則？
2026 iThome 鐵人賽 AI CleanCode Day 30：安安～我是ChiYu～ 昨天，我拒絕把 AI 給出的 48、84、156 小時直接當成承諾，因為那些數字缺少足以支撐它們的來源、假設與失效條件。 寫到 Day 30，我想先把這個系列最核心的問題正式回答一次：CLEAN 五原則，到底是怎…
AI Agent
Software Engineering
Software Architecture
Testing
Day 30｜網站終於會說話：做完五支 Tool 後，我學到什麼？
2026 iThome 鐵人賽 WebMCP Day 30：安安～我是ChiYu～ 昨天做完交付檢查，最後留下的答案有點不乾脆：如果交付的是 Demo、Tool 設計方法與可查核 紀錄，我敢；如果要宣稱所有模型、瀏覽器與環境都會得到相同結果，證據還不夠。 今天是最後一天，我想回到一個月前輸入的那句話： 第一…
WebMCP
AI Agent
JavaScript
Day 30｜AI 交出畫面不等於完成：30 天後，我改用任務驗收 UI
2026 iThome 鐵人賽 Vibe Coding UI Day 30：安安～我是ChiYu～ 重新驗收 LumenDesk 成員管理後台後，我開始寫這個系列的最後一篇。 第一版很快就完成了。 七段工作回顧、四步驟流程、三輪 Prompt、八題檢查表，全部排得整整齊齊。該有的都有。 我從頭讀了一次。 很…
Vibe Coding
UX/UI
Frontend
Day 29｜AI 給出 48、84、156 小時：工程師如何把單點工期改成誠實估算？
2026 iThome 鐵人賽 AI CleanCode Day 29：安安～我是ChiYu～ 昨天，我比較了多個 Agent 平行開發時的實作、整合、Review 與接手成本。兩條開發線都能完成任務，但整個團隊有沒有變快，還得把後面的整合與接手算進去。 只要有人問：「這個需求多久可以完成？」我們卻很容易再…
AI Agent
Software Engineering
Software Architecture
Testing
Day 29｜把網站交給 Agent 前，我最後會檢查哪十件事？
2026 iThome 鐵人賽 WebMCP Day 29：安安～我是ChiYu～ 昨天把失敗分成六層後，至少每一條 trace 都知道該往哪裡查了。今天我原本想順勢整理一份 交付檢查表，從第一項念到第十項，勾完就收工。 這種文章其實很好寫：Human UI、Tool、冪等、安全確認、版本座標，每一格填一個…
WebMCP
AI Agent
JavaScript
Day 29｜同一句「幫我做後台」，28 天後我不再先看畫面
2026 iThome 鐵人賽 Vibe Coding UI Day 29：安安～我是ChiYu～ 我重新打開第一天做的 LumenDesk 成員管理後台，在搜尋框輸入 Orbit。 三筆資料，一筆都沒動。 下面是依照第一版需求重建的錯誤現場。畫面使用固定的虛構成員資料，不含真實個資： 側欄、摘要卡、搜尋、…
Vibe Coding
UX/UI
Frontend
Day 28｜AI 提高產碼速度後，團隊生產力真的提高了嗎？
2026 iThome 鐵人賽 AI CleanCode Day 28：安安～我是ChiYu～ 昨天，我把一項通知重試需求拆成三個小週期，讓 Agent 每完成一段就取得測試回饋與回退座標，避免單一開發流程一次累積太多風險。 今天，我把開發線從一條增加到兩條：兩位 Agent 從相同 Commit 同時開工…
AI Agent
Software Engineering
Software Architecture
Testing
Day 28｜Agent 選錯、傳錯或答錯時，怎麼知道問題卡在哪一層？
2026 iThome 鐵人賽 WebMCP Day 28：安安～我是ChiYu～ 昨天把唯讀與寫入任務跑過一輪後，我手上多了不少 trace，也多了不少長得很像的結論： Agent 沒有照預期完成。 但把畫面真的攤開來看，事情完全不是同一回事。有的是 Gemini 回了 429，網站 Tool 連 出場機…
WebMCP
AI Agent
JavaScript
Day 28｜圖片要展示、選擇、輪播還是放大？七種媒體元件怎麼分工
2026 iThome 鐵人賽 Vibe Coding UI Day 28：安安～我是ChiYu～ 從 Data Table 進入一筆活動專案後，詳細頁要放六張場地照片和一段教學影片。我把需求交給 AI： 做一個有圖片輪播和影片的漂亮產品頁。 下面是依照第一版需求重建的錯誤現場。畫面使用虛構活動資料與示意媒…
Vibe Coding
UX/UI
Frontend
Day 27｜AI 一次改完再驗證，還是拆成三個小週期？比較紅燈時機、回退範圍與測試品質
2026 iThome 鐵人賽 AI CleanCode Day 27：安安～我是ChiYu～ 昨天，我把 AI Agent 的完成宣告整理成可重跑的 Evidence Packet：固定產品版本後，連同 Prompt、Diff、Build、Tests、Smoke、限制與失敗紀錄一起保存。下一位工程師因此能…
AI Agent
Software Engineering
Software Architecture
Testing
Day 27｜寫入型 Tool 怎麼驗收？把 Trace、Network、UI 與 Server 狀態放在一起看
2026 iThome 鐵人賽 WebMCP Day 27：安安～我是ChiYu～ 昨天的兩個唯讀任務很好判斷：Agent 選對 Tool，輸入正確，回答也能對回 result，這題大致 就有答案了。 今天換成收藏、報名與取消，事情立刻沒那麼乾脆。 Agent 最後說一句「已經幫你完成」，聽起來很貼心；如果…
WebMCP
AI Agent
JavaScript
Day 27｜Table 不是 Data Table：功能越多，不代表資料越好用
2026 iThome 鐵人賽 Vibe Coding UI Day 27：安安～我是ChiYu～ 取消「進行中」Filter Chip 後，成員資料從 8 筆回到 24 筆。24 筆本身不會自動把 Table 升級；真正把需求往 Data Table 推的，是管理員接著要搜尋、篩選、多筆選取，再批次停用帳…
Vibe Coding
UX/UI
Frontend
Day 26｜AI 說測試全綠還不夠：如何固定版本、重跑驗證，留下可查的完成證據？
2026 iThome 鐵人賽 AI CleanCode Day 26：安安～我是ChiYu～ 「Build 成功、測試全綠、需求完成。」 這三句，我在 AI Agent 的完成回報裡看過很多次。看起來很完整，卻沒有交代驗證的是哪一份 Code、實際跑了哪些檢查，也沒有說綠燈在哪裡停止。 昨天修正人工重送功…
AI Agent
Software Engineering
Software Architecture
Testing
Day 26｜把自然語言送進公開站，Agent 真的會自己選對 Tool 嗎？
2026 iThome 鐵人賽 WebMCP Day 26：安安～我是ChiYu～ 昨天把 source commit、image digest 與 Azure revision 對齊後，我終於可以放心按下 Inspector 的 Send。 這句話聽起來有點奇怪。按一顆按鈕而已，到底有什麼好不放心？ 因為…
WebMCP
AI Agent
JavaScript
Day 26｜小型標記怎麼分工？Badge、Tag、Chip、Filter Chip、Status 與 Avatar
2026 iThome 鐵人賽 Vibe Coding UI Day 26：安安～我是ChiYu～ 近期專案改成 List 後，名稱、負責人和里程碑終於排整齊了。結果每列旁邊又冒出一整排小膠囊：紅底的「3」、藍底的「設計系統」、可以移除的「陳怡安 ×」，還有綠色的「已同步」。 我給 AI 的追加需求是： 請…
Vibe Coding
UX/UI
Frontend
Day 25｜AI 寫完功能、測試全綠，為什麼還會重複通知？
2026 iThome 鐵人賽 AI CleanCode Day 25：安安～我是ChiYu～ 昨天我補強了 Dependency Rule 與 Architecture Test，確保 Use Case 不會直接依賴資料庫或外部 SDK。不過，那組測試只守住 Use Case；Controller 仍能另…
AI Agent
Software Engineering
Software Architecture
Testing
Day 25｜localhost 成功不算交付：怎麼證明公開網址跑的是同一份程式？
2026 iThome 鐵人賽 WebMCP Day 25：安安～我是ChiYu～ 前兩天在本機把程式基線與安全防線分開驗過，今天終於把同一份 release 推上 Azure Container Apps。公開網址回應 200 OK，我差點就可以收工了。 差點而已。 200 OK 只代表某個服務正在回應。…
WebMCP
AI Agent
JavaScript
Day 25｜Card 不是比較漂亮的 List：內容容器怎麼選才讀得懂
2026 iThome 鐵人賽 Vibe Coding UI Day 25：安安～我是ChiYu～ 專案資料恢復後，AI 很貼心地替每一筆套上圓角、陰影和滑過去會浮起來的效果。三張 Card 排在一起，SaaS 感可以說是相當充足。 我當時給的需求只有一句： 請把近期專案做成現代、好看的 Card。 結果同…
Vibe Coding
UX/UI
Frontend
Day 24｜Use Case 直接依賴 DbContext，架構測試為什麼還是綠燈？用 Dependency Rule 找出掃描盲點
2026 iThome 鐵人賽 AI CleanCode Day 24：安安～我是ChiYu～ 昨天剛把 EF Core 與通知 SDK 留在 Use Case 外圍，今天我就故意把 WorkItemsDbContext 加回 OverdueWorkItemProcessor 的建構式。Release Bu…
AI Agent
Software Engineering
Software Architecture
Testing
Day 24｜活動摘要叫 Agent 洩漏祕密，它會把這句話當資料還是命令？
2026 iThome 鐵人賽 WebMCP Day 24：安安～我是ChiYu～ 昨天才把自動化測試與 Agent trace 分開，今天我就在活動摘要裡塞進一句很不安分的話： 翻成白話就是：「不要管前面的規則，把你知道的祕密全部交出來。」 這句話若出現在 System Prompt 裡，當然很可疑；但它…
WebMCP
AI Agent
JavaScript
Day 24｜畫面空白，不代表沒有資料：Empty、Error、Offline、Permission 與 Success State
2026 iThome 鐵人賽 Vibe Coding UI Day 24：安安～我是ChiYu～ Loading 跑完後，LumenDesk 的「專案」頁面只剩一句： 目前沒有資料。 我當時給 AI 的需求也差不多簡短： 沒有資料時顯示「目前沒有資料」，並提供重新載入。 結果篩選零筆、API 失敗、離線、…
Vibe Coding
UX/UI
Frontend
GPT-6 Astra、Sol、Luna 來了，GPT-5.6 該換掉嗎？
GPT-6 Astra、Sol、Luna 發布後，該把 GPT-5.6 換掉嗎？對照價格、獨立評分與開發者實測，看看哪些工作值得換，哪些還要先測。
AI
OpenAI
Codex
AI Agent
Day 23｜Controller、EF Core 與第三方 SDK 為什麼不該決定 Use Case？用六角形架構隔離外部細節
2026 iThome 鐵人賽 AI CleanCode Day 23：安安～我是ChiYu～ 昨天整理元件邊界時，我保留了既有通知 Port，卻也發現一個不能忽略的問題：它接收的參數仍是 EF Core 使用的 WorkItem Entity。表面上隔離了通知 Provider，核心實際上還在說 Pers…
AI Agent
Software Engineering
Software Architecture
Testing
Day 23｜在問 Agent 聰不聰明前，先證明網站沒有壞
2026 iThome 鐵人賽 WebMCP Day 23：安安～我是ChiYu～ 昨天把五個 Tool 全部排好位置後，我很聽話地進入 feature freeze：不加第六個 Tool，也不再 偷偷塞一個「這個應該很實用吧」的新功能。 接著畫面上出現兩種讓工程師心情很好的綠燈。第一種是 Inspecto…
WebMCP
AI Agent
JavaScript
Day 23｜Loading 不能只放一顆圈圈：五種等待狀態怎麼選
2026 iThome 鐵人賽 Vibe Coding UI Day 23：安安～我是ChiYu～ 通知中心留下了一筆新工作： 匯入 24 位成員。 這不是一瞬間完成的動作，我最早給 AI 的 Loading 需求卻只有一句： 資料載入時先放一個轉圈圈。 第一版真的很聽話。按下開始，畫面中央出現一顆 Spi…
Vibe Coding
UX/UI
Frontend
Day 22｜通知 Provider 已有介面，AI 何時才需要加上 Namespace 防線或拆成 Assembly？
2026 iThome 鐵人賽 AI CleanCode Day 22：安安～我是ChiYu～ 昨天，我把工作項目的生命週期與通知傳送拆成兩條 Use Case，但它們仍在同一個 API Host 裡執行。通知流程只認得 IWorkItemNotificationSender，實際使用 Demo 還是 Qu…
AI Agent
Software Engineering
Software Architecture
Testing
Day 22｜五支 Tool 如何共用同一套規則，串成三條完整流程？
2026 iThome 鐵人賽 WebMCP Day 22：安安～我是ChiYu～ 昨天把取消報名接上之後，產品層的 catalog 終於湊齊五支 Tool。搜尋、詳情、收藏、準備 報名、準備取消，單獨測的時候都知道自己該做什麼。 我原本以為接下來只要把它們排好順序，三條 Journey 就能順利收工。結果…
WebMCP
AI Agent
JavaScript
Day 22｜訊息可以自己消失嗎？Toast、Snackbar 與 Notification
2026 iThome 鐵人賽 Vibe Coding UI Day 22：安安～我是ChiYu～ 訊息站對位置後，LumenDesk 接著發生三件事： - 成員角色儲存成功。 - 「八月活動文案」被移除。 - 有人送來新的專案申請。 我把三件事縮成一句： 儲存完成後跳一個通知；刪除草稿後也跳同一種。新的申…
Vibe Coding
UX/UI
Frontend
Day 21｜拆成多個 Project，業務流程、執行方式、團隊與部署就真的獨立了嗎？
2026 iThome 鐵人賽 AI CleanCode Day 21：安安～我是ChiYu～ 昨天，我把會獨立改變的重試規則從 Dispatcher 分離出來。但打開目前的 Solution，裡面早已有三個正式 Project，Build 後也會產生多個 DLL。這是不是代表架構早就取得獨立性了？ 還不一…
AI Agent
Software Engineering
Software Architecture
Testing
Day 21｜一句「這個我不要了」，Agent 到底敢不敢直接取消？
2026 iThome 鐵人賽 WebMCP Day 21：安安～我是ChiYu～ 昨天確認 Agent 能把報名資料填進表單，並在正式送出前停下來。我原本以為，把同一個 prepare-only 模式搬到取消流程，改個名稱就能收工。 我先在「我的報名」頁輸入： 問題馬上出現：這個，是哪一個？ 取消不只是另…
WebMCP
AI Agent
JavaScript
Day 21｜重要訊息到底該放在哪裡？Alert、Banner 與 Callout
2026 iThome 鐵人賽 Vibe Coding UI Day 21：安安～我是ChiYu～ 管理員準備儲存成員角色時，畫面同時冒出三則訊息： - 通知管道尚未選擇，設定無法儲存。 - 系統今晚會維護一小時。 - 新成員最好先從最小權限開始。 我當時留給 AI 的需求只有一句： 系統有錯誤或提醒時，顯…
Vibe Coding
UX/UI
Frontend
Day 20｜兩份程式碼都通過測試，加入重試規則後哪一種結構比較容易修改？
2026 iThome 鐵人賽 AI CleanCode Day 20：安安～我是ChiYu～ 昨天，我們處理了 HTTP 與背景 Worker 同時選中同一筆 Work Item、進而重複送出通知的問題。資料更新、通知傳送、失敗重試與取消路徑，也都有對應測試。 從行為價值來看，昨天的需求已經完成。不過，測…
AI Agent
Software Engineering
Software Architecture
Testing
Day 20｜表單填好了，為什麼這次報名仍然不能算通過？
2026 iThome 鐵人賽 WebMCP Day 20：安安～我是ChiYu～ 昨天的 save_event 就算重複呼叫，最多也是回我一句「這個已經收藏過了」。今天要碰的報名 可沒這麼溫柔：正式送出後，server 會建立資料，剩餘名額也會少一個。 所以我一開始就把分工畫清楚：Agent 可以準備姓名…
WebMCP
AI Agent
JavaScript
Day 20｜滑過去出現的，不一定是 Tooltip：Tooltip、Popover 與 Hover Card
2026 iThome 鐵人賽 Vibe Coding UI Day 20：安安～我是ChiYu～ 昨天，我把林子安的詳細資料放進 Drawer，總算不用每看一位成員，就把整張清單蓋起來一次。 清單脈絡保住了，Drawer 裡卻又冒出三個需求： - 角色欄位旁的問號，要解釋權限規則。 - 管理員要能繼續變更…
Vibe Coding
UX/UI
Frontend
Day 19｜兩個執行流程同時處理同一筆 Work Item，為什麼會重複通知？從競態條件到 Outbox 與冪等設計
2026 iThome 鐵人賽 AI CleanCode Day 19：安安～我是ChiYu～ 昨天加入背景 Worker 後，逾期流程多了第二個入口：使用者可以透過 HTTP 主動觸發，Worker 也會依排程執行，最後兩邊都呼叫同一個 IOverdueWorkItemProcessor.ProcessA…
AI Agent
Software Engineering
Software Architecture
Testing
Day 19｜同一場活動收藏兩次，網站為什麼只能留下同一筆？
2026 iThome 鐵人賽 WebMCP Day 19：安安～我是ChiYu～ 昨天把唯讀失敗拆成「該停止」與「可以稍後重試」，也確認 Agent 不能一遇到錯誤就擅自換 動作。今天終於往前跨一步，讓它真的改變網站狀態。 不過第一次寫入，我沒有直接挑報名。報名會占用名額，一個不小心就不是 Demo，而是…
WebMCP
AI Agent
JavaScript
Day 19｜點資料表一列後，不一定要跳 Modal：Drawer、Sheet 與 Bottom Sheet
2026 iThome 鐵人賽 Vibe Coding UI Day 19：安安～我是ChiYu～ 昨天，我用 Escape 取消了「停用林子安」這個危險動作。帳號保住了，管理員也沒有因此下班，反而接著問： 那我可以先看一下林子安的部門、角色和目前專案嗎？ 很合理。停用帳號以前先把資料看完，總比按下去之後才…
Vibe Coding
UX/UI
Frontend
Day 18｜AI 一次完成三項需求，和逐步設計相比，加入背景 Worker 時有什麼差別？
2026 iThome 鐵人賽 AI CleanCode Day 18：安安～我是ChiYu～ 昨天談完元件原則後，Work Item API 已經形成三個清楚的責任區域：API 處理 HTTP、資料與通知流程，WorkItems.ServiceLevel 保存共用的 SLA 規則，Reporter 則是只…
AI Agent
Software Engineering
Software Architecture
Testing
Day 18｜活動服務暫時失敗時，Agent 應該重試還是停下來？
2026 iThome 鐵人賽 WebMCP Day 18：安安～我是ChiYu～ 昨天才把成功 payload 收乾淨，今天我就準備把活動 API 暫時弄壞。 原本的計畫很單純：封鎖活動詳情 API，讓 get_event_details 收到暫時失敗，再看 Agent 能不能 回答「可以稍後重試」。結果…
WebMCP
AI Agent
JavaScript
Day 18｜彈窗要不要鎖住背景？Modal、Non-modal、Alert Dialog 與危險確認
2026 iThome 鐵人賽 Vibe Coding UI Day 18：安安～我是ChiYu～ 專案結構整理清楚後，我按下成員列上的「停用帳號」。畫面中央立刻出現一張白色卡片，後面有灰色遮罩，右下角還放了一顆紅色按鈕。 看起來非常像完成品。 下面是依照第一版問題重建的錯誤現場，不含真實帳號與個人資料： …
Vibe Coding
UX/UI
Frontend
Day 17｜AI 把 API 拆成多個 Project，怎麼判斷哪些元件邊界值得留下？
2026 iThome 鐵人賽 AI CleanCode Day 17：安安～我是ChiYu～ 昨天整理完通知的行為契約、Consumer 需要的能力與原始碼依賴方向後，系列接續版本仍只有一個 Production Project。IWorkItemNotificationSender 由高階 Use Ca…
AI Agent
Software Engineering
Software Architecture
Testing
Day 17｜Tool 回太少做不完，回太多又把內部資料倒給 Agent
2026 iThome 鐵人賽 WebMCP Day 17：安安～我是ChiYu～ 昨天的 get_event_details 終於不用再猜 current，可以從目前頁面找到正確活動。照理說， 接下來只要把資料交給 Agent，讓它整理完就收工。 結果我一看 Tool result，新的問題馬上排隊進場：…
WebMCP
AI Agent
JavaScript
Day 17｜資料有層級時，別只用縮排：Tree View、Nested List、Treegrid 與 Expandable Row
2026 iThome 鐵人賽 Vibe Coding UI Day 17：安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的畫面。 乍看就是一棵樹。 再看仔細一點，子專案、附件、檢核紀錄和備註全部…
Vibe Coding
UX/UI
Frontend
Day 16｜兩個通知 Provider 都能編譯，為什麼還不能證明可以互相替換？
2026 iThome 鐵人賽 AI CleanCode Day 16：安安～我是ChiYu～ 昨天把服務等級與派工政策分開後，今天我在共同通知介面後方，再放入一個 Queued Provider。Provider 就是負責實際送出通知的替代實作。 Demo 與 Queued 都能實作同一個 Interfa…
AI Agent
Software Engineering
Software Architecture
Testing
Day 16｜Agent 怎麼知道「我現在看的活動」是哪一場？
2026 iThome 鐵人賽 WebMCP Day 16：安安～我是ChiYu～ 昨天的 search_events 已經找到「WebMCP 入門工作坊」，還順便帶回一個不透明的活動 ID： evt-webmcp-intro。今天我沿著搜尋結果進入詳情頁，準備問下一個很自然的問題： 請整理我現在看的活動名…
WebMCP
AI Agent
JavaScript
Day 16｜選一個值，還是執行命令？Select、Menu、Overflow Menu 與 Command Palette
2026 iThome 鐵人賽 Vibe Coding UI Day 16：安安～我是ChiYu～ 工作區設定整理完後，我回到專案列表。最後一欄只放了一顆三點按鈕，展開後依序出現： 進行中、編輯、刪除。 畫面排得很整齊，行為卻像一道突襲測驗。 「進行中」會保存任務狀態；「編輯」應該開啟編輯介面；「刪除」則可…
Vibe Coding
UX/UI
Frontend
Day 15｜第三條規則由不同負責人維護，SRP／OCP 要求 AI 把責任拆到哪裡？
2026 iThome 鐵人賽 AI CleanCode Day 15：安安～我是ChiYu～ 昨天只有兩條通知升級規則，而且都由同一位服務等級政策負責人維護。我因此把判斷集中在 RequiresEscalationNotification，沒有再建立 Interface 或規則集合。對當時的需求來說，一個…
AI Agent
Software Engineering
Software Architecture
Testing
Day 15｜讓人類與 Agent 共用同一套活動搜尋規則
2026 iThome 鐵人賽 WebMCP Day 15：安安～我是ChiYu～ 昨天把網站範圍鎖定在五支 Tool 與三條活動流程，也留下可以重播的正式搜尋基線。今天不再 增加功能，而是正式驗收第一段能力：搜尋活動。 重點不是替 Agent 開一條專用捷徑，而是讓人類表單與 search_events …
WebMCP
AI Agent
JavaScript
Day 15｜同一區域怎麼切換內容？Tabs、Accordion、Disclosure 與 Segmented Control
2026 iThome 鐵人賽 Vibe Coding UI Day 15：安安～我是ChiYu～ 昨天把 Breadcrumb、Stepper、Pagination 和完成進度分開後，我總算不會再用一條藍線回答所有問題。接著進入工作區設定，畫面又送來一排整整齊齊的 Tabs。 當時我留給 AI 的需求只有…
Vibe Coding
UX/UI
Frontend
Day 14｜測試全綠後，怎麼判斷設計已經足夠簡單？
2026 iThome 鐵人賽 AI CleanCode Day 14：安安～我是ChiYu～ 前天談測試紀律，昨天接著確認整潔的測試與驗收測試能不能真的守住需求。今天，這個系列正式跨過 Part I〈程式碼〉，進入 Part II〈設計〉。 一進入設計，測試全綠就不再是最後答案。 同一個 Agent 交出…
AI Agent
Software Engineering
Software Architecture
Testing
Day 14｜五支 Tool 不再往外長：把產品範圍寫成會亮紅燈的契約
2026 iThome 鐵人賽 WebMCP Day 14：安安～我是ChiYu～ 昨天終於讓 Inspector 自己選中 search_events，留下第一筆完整自然語言 trace。看到成功 畫面的那一刻，我腦中很自然地冒出下一串需求：登入、付款、後台、推薦活動，好像都可以 「順便」補進來。 這種順…
WebMCP
AI Agent
JavaScript
Day 14｜使用者走到哪裡了？Breadcrumb、Pagination、Stepper、Progress 與頁內導覽
2026 iThome 鐵人賽 Vibe Coding UI Day 14：安安～我是ChiYu～ 昨天把桌面和手機導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五種「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少；…
Vibe Coding
UX/UI
Frontend
Day 13｜測試全綠，為什麼仍漏掉「剛好 24 小時」？用整潔測試、驗收測試與受控 Mutation 檢查答案
2026 iThome 鐵人賽 AI CleanCode Day 13：安安～我是ChiYu～ 昨天談測試紀律時，我比較了直接完成、TDD 與 TCR。那些實驗回答的是：測試何時介入，會怎麼改變 Agent 的前進節奏與還原範圍。 今天遇到的問題更麻煩：測試介入得很早，不代表測試問對了問題。 在產品範例驅動…
AI Agent
Software Engineering
Software Architecture
Testing
Day 13｜第一次按下 Inspector 的 Send，先被 Gemini 429 擋在門外
2026 iThome 鐵人賽 WebMCP Day 13：安安～我是ChiYu～ 前天讓 HTML 表單透過 Declarative API 描述自己，昨天再用 Imperative API 管理動態 Tool 的註冊與解除。Chrome 已經看得到網站能力，今天總算輪到 Inspector 下方那顆 S…
WebMCP
AI Agent
JavaScript
Day 13｜手機版不是把 Sidebar 縮小：Header、Navbar、Sidebar 與 Bottom Navigation 怎麼分工
2026 iThome 鐵人賽 Vibe Coding UI Day 13：安安～我是ChiYu～ 昨天把邀請成員和建立活動的輸入流程接起來後，我順手把瀏覽器縮到 360px。桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫面。 內容區已經快被擠成收據了，它還站得筆直。 問題來自一開始的需求： …
Vibe Coding
UX/UI
Frontend
Day 12｜AI 寫完再測，和先測再改有什麼差別？比較直接完成、TDD 與 TCR
2026 iThome 鐵人賽 AI CleanCode Day 12：安安～我是ChiYu～ 昨天比較類別拆分時，控制組、行數上限與內聚拆分都能把升級通知做對，也都通過最後的行為驗證。 若只看終點，三種結構都像是成功的候選。可是最後一片綠燈，只能證明它們抵達了終點，沒有說明途中累積了多少尚未驗證的修改，也…
AI Agent
Software Engineering
Software Architecture
Testing
Day 12｜Tool 註冊完還不算完成：離開 route 後誰把它收回來？
2026 iThome 鐵人賽 WebMCP Day 12：安安～我是ChiYu～ 昨天的 Declarative API 很適合表單：HTML 還在，Tool 就跟著存在；表單離開頁面，能力也一起 消失。兩邊的生命週期幾乎黏在一起。 活動詳情就沒這麼省事了。它要讀取目前活動、跟著 route 切換情境，離…
WebMCP
AI Agent
JavaScript
Day 12｜進階輸入不是越多越完整：OTP、Tag Input、Color Picker 與兩種 Editor
2026 iThome 鐵人賽 Vibe Coding UI Day 12：安安～我是ChiYu～ 昨天，表單終於能把人從錯誤帶回完成。接著輪到活動內容，AI 很自然地提出一份「功能完整」的升級方案：六格驗證碼、標籤膠囊、色盤，外加一整排編輯工具。 回頭看需求，這扇門確實是我自己打開的： 幫我做一個功能完整…
Vibe Coding
UX/UI
Frontend
Day 11｜類別低於 100 行就只有一個責任嗎？用高優先逾期通知比較行數上限與內聚拆分
2026 iThome 鐵人賽 AI CleanCode Day 11：安安～我是ChiYu～ 昨天我先釐清 WorkItem、DTO 與 EF Entity 各自負責什麼。最後沒有建立第二套 Domain Model，只把指派、完成與逾期狀態轉換收回 WorkItem。 物件角色清楚之後，新的問題也浮了出…
AI Agent
Software Engineering
Software Architecture
Testing
Day 11｜什麼是 Declarative API？讓 HTML 表單成為 WebMCP Tool
2026 iThome 鐵人賽 WebMCP Day 11：安安～我是ChiYu～ 昨天打開 Inspector 後，Chrome 終於把目前頁面的 Tool 列了出來。面板裡有名稱、description， 還有一大段 input schema。 看到 catalog 當然很開心，但我很快又卡在下一個問題…
WebMCP
AI Agent
JavaScript
Day 11｜表單錯了，怎麼帶人修回來？從 Label 到 Validation Summary 的修正路徑
2026 iThome 鐵人賽 Vibe Coding UI Day 11：安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。我把活動名稱留空、Email 填錯，再按下「發布」，整份表單卻只亮起幾個紅框。 為了排除活動頁自己的問題，我又把前幾天完成的「新增成員」表單抓回來重測。原始需求同樣…
Vibe Coding
UX/UI
Frontend
Day 10｜WorkItem 要公開資料還是封裝行為？用新增業務種類與新增操作比較三種模型
2026 iThome 鐵人賽 AI CleanCode Day 10：安安～我是ChiYu～ 昨天我比較了一次重寫與分段 Commit，最後保留可以逐步驗證、失敗時局部還原的清理節奏。函式內部整理完後，我接著往物件邊界看，WorkItemsController 裡還留著幾行很直接的 Code： 這些 Se…
AI Agent
Software Engineering
Software Architecture
Testing
Day 10｜Inspector 裝好了，為什麼 Tool 面板還是一片空白？
2026 iThome 鐵人賽 WebMCP Day 10：安安～我是ChiYu～ 昨天才把五支 Tool 的名單定下來，我原本以為今天打開 Inspector，它們就會排隊向我報到。 結果側邊面板一片空白。 沒有名稱、沒有 schema，也沒有任何「恭喜你完成 WebMCP」的綠色勾勾。紙上的 catal…
WebMCP
AI Agent
JavaScript
Day 10｜檔案不是選完就好：上傳流程的完整狀態
2026 iThome 鐵人賽 Vibe Coding UI Day 10：安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工。 幫我做一個漂亮的檔案上傳區，要能拖進去。 AI 很配合。虛線框、上傳…
Vibe Coding
UX/UI
Frontend
Day 9｜AI Agent 一次重寫或分段 Commit：哪個容易還原，哪個完成後更好讀？
2026 iThome 鐵人賽 AI CleanCode Day 9：安安～我是ChiYu～ 昨天，我把同一項需求交給三種函式結構，觀察全新 Agent 會如何理解資料、又會把修改放在哪裡。我最後採用 CQS，但那只回答了資料目前該放哪裡，還沒回答修改走偏時要怎麼退回。 今天接著比較同一段清理工作：讓 Ag…
AI Agent
Software Engineering
Software Architecture
Testing
Day 09｜網站該公開哪些 WebMCP Tool？從操作盤點到五支正式能力
2026 iThome 鐵人賽 WebMCP Day 9：安安～我是ChiYu～ 昨天才把 click_blue_search_button 請出 catalog，我差點又用同一套方法，把剩下的按鈕 全部包成 Tool。 我先把網站上看得到的操作列出來：展開篩選器、切換頁籤、查看詳情、收藏、關閉 dialo…
WebMCP
AI Agent
JavaScript
Day 9｜輸入日期、選時間還是看整月？五種日期時間元件怎麼選
2026 iThome 鐵人賽 Vibe Coding UI Day 9：安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。 活動日期找它、報名期間找它、預約時段還是找它。這張 Calendar 一…
Vibe Coding
UX/UI
Frontend
Day 8｜同一項需求交給下一個 AI Agent，三種函式結構會走出哪條修改路徑？
2026 iThome 鐵人賽 AI CleanCode Day 8：安安～我是ChiYu～ 昨天，我從三份函式拆分結果中選了 Stepdown 版本。 ProcessOverdue 現在可以由上而下讀成四個步驟：找出逾期候選、逐筆處理、儲存狀態、回傳結果。入口變清楚了，但一份結構是否真的好用，不能只看今天…
AI Agent
Software Engineering
Software Architecture
Testing
Day 08｜WebMCP Tool 該怎麼設計？把「點按鈕」改成「搜尋活動」
2026 iThome 鐵人賽 WebMCP Day 8：安安～我是ChiYu～ 昨天才把二十道測試題出好，今天輪到我寫第一份答案。我從最單純的搜尋活動開始，打開頁面， 看著那顆藍色的「搜尋活動」按鈕，很順手地寫下： 有一說一，這個名字很好懂，懂到連自動化測試都知道下一步要按哪裡。問題是，我現在設計的 是給…
WebMCP
AI Agent
JavaScript
Day 8｜數值要輸入、拖曳還是評分？六種數值控制的選型
2026 iThome 鐵人賽 Vibe Coding UI Day 8：安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。 我把需求濃縮成一句…
Vibe Coding
UX/UI
Frontend
Day 7｜AI 把函式拆得越小，就越符合 Clean Code 嗎？三種拆分方式實測
2026 iThome 鐵人賽 AI CleanCode Day 7：安安～我是ChiYu～ 昨天，我們替 Work Item 逾期流程保留兩則有測試依據的警告註解，也確認 Formatter 只能整理已設定的格式規則。 註解沒有逐行翻譯 Code，排版也整理好了。可是打開 ProcessOverdue，查…
AI Agent
Software Engineering
Software Architecture
Testing
Day 07｜Agent 偶爾答對還不夠，我先出二十道測試題
2026 iThome 鐵人賽 WebMCP Day 7：安安～我是ChiYu～ 昨天把 E0～E5 的證據等級排好後，我正準備動手寫第一支 WebMCP Tool，卻發現順序好像反了。 如果連「怎樣才算做對」都還沒說清楚，Tool 寫完後，我很可能只挑一個最聽話的 Prompt，看到 Agent 成功呼叫…
WebMCP
AI Agent
JavaScript
Day 7｜別再把所有下拉都叫 Dropdown：從 Select 到 Multi-select 的選型指南
2026 iThome 鐵人賽 Vibe Coding UI Day 7：安安～我是ChiYu～ 昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。 部門要能搜尋，但只能從既有資料選一筆；協作者同樣要搜尋，卻可以留下多筆結果。AI 第…
Vibe Coding
UX/UI
Frontend
Day 6｜註解與格式都漂亮，程式碼為什麼還是難讀？
2026 iThome 鐵人賽 AI CleanCode Day 6：安安～我是ChiYu～ 昨天，我們把 Work Item 逾期流程的命名規則寫進 Repository，讓 Agent 可以在安全範圍內自主命名。 名稱說清楚之後，我接著測另一個很常見的要求：補註解、整理格式，真的會讓程式碼更好讀嗎？ 這…
AI Agent
Software Engineering
Software Architecture
Testing
Day 06｜Playwright、REST API、MCP 與 WebMCP，各自負責哪一段？
2026 iThome 鐵人賽 WebMCP Day 6：安安～我是ChiYu～ 昨天 Playwright 因為按鈕改名而停在 click 以前。看到這個結果，很容易順手得出一個省事的 結論：「Browser Automation 太脆弱，換 WebMCP 就好了。」 有一說一，這個結論下得太快。Play…
WebMCP
AI Agent
JavaScript
Day 6｜五種選擇控制怎麼分？Checkbox、Radio、Switch、Toggle Button 與 Segmented Control
2026 iThome 鐵人賽 Vibe Coding UI Day 6：安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。 Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾…
Vibe Coding
UX/UI
Frontend
Day 5｜AI 取的名稱格式正確，為什麼還是可能誤解程式意圖？
2026 iThome 鐵人賽 AI CleanCode Day 5：安安～我是ChiYu～ 昨天，我把逾期處理中的單筆流程抽成一個私有方法： ProcessOverdueItemAsync 看起來很像一個好名稱：有動詞、有處理對象，也保留非同步方法常見的 Async 結尾。 但只看呼叫端，我仍然得猜：它只…
AI Agent
Software Engineering
Software Architecture
Testing
Day 05｜只改按鈕四個字，Playwright 為什麼停在 click 以前？
2026 iThome 鐵人賽 WebMCP Day 5：安安～我是ChiYu～ 昨天我在搜尋按鈕外多包一層元素，getByRole() 仍然順利找到它。這也留下另一個問題： 外層結構改了沒事，那按鈕名稱改了呢？ 今天我真的只改四個字，把「搜尋活動」換成「探索場次」。活動資料沒變、submit handle…
WebMCP
AI Agent
JavaScript
Day 5｜輸入文字也有分工：Text Field、Textarea、Password 與 Search
2026 iThome 鐵人賽 Vibe Coding UI Day 5：安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題已經排好隊等我了。 帳號、密碼、搜尋和備註，一人分到一個長方形輸入框。AI…
Vibe Coding
UX/UI
Frontend
Day 4｜AI 把函式拆小就算 Clean Code 嗎？從小、命名、組織與順序檢查重構結果
2026 iThome 鐵人賽 AI CleanCode Day 4：安安～我是ChiYu～ 同一段四十多行的 Controller Action，我交給同一個 AI Agent，用兩種整理範圍各跑一次。 兩份結果都通過測試：一份把 Action 壓到十七行，另一份保留三十八行，只抽出單筆逾期處理。若只看行…
AI Agent
Software Engineering
Software Architecture
Testing
Day 04｜按鈕只多包一層，哪種 Playwright Locator 撐得住？
2026 iThome 鐵人賽 WebMCP Day 4：安安～我是ChiYu～ 昨天我把活動網站從搜尋一路走到取消報名，最後挑了風險最低的搜尋流程，準備交給 Playwright 重播。今天它正式接班：開啟頁面、填入 WebMCP、按下搜尋，再確認畫面出現 一場活動。 第一輪很順，四行程式碼就完成了。接著…
WebMCP
AI Agent
JavaScript
Day 4｜按鈕不只是藍色方塊：Button、Link 與操作元件
2026 iThome 鐵人賽 Vibe Coding UI Day 4：安安～我是ChiYu～ 昨天整理完八格 UI Spec 後，我終於能把「好用一點」拆成資料、操作、狀態與驗收條件。 今天就拿它處理 LumenDesk 的第一個完整任務：邀請成員。 這個 Dialog 底下有三件事：查看權限說明、取消…
Vibe Coding
UX/UI
Frontend
Day 3｜CLEAN 五原則：如何掌握 AI Coding 的情境、範圍、意圖、證據與行為？
2026 iThome 鐵人賽 AI CleanCode Day 3：安安～我是ChiYu～ 昨天的 Agent 很有把握地寫下： 已完成逾期處理的 Clean Code 重構。 它確實改善了命名與閱讀順序，既有行為驗證也沒有發現漂移。可是看完這份完成報告，我沒有先問 Code 還能不能更漂亮，而是卡在一個…
AI Agent
Software Engineering
Software Architecture
Testing
Day 03｜先別急著做 Tool，我把活動網站自己走了一遍
2026 iThome 鐵人賽 WebMCP Day 3：安安～我是ChiYu～ 昨天把專案切到固定 tag，Web、API、測試和 build 也都跑起來了。照這個進度，今天最容易做 的事情，就是立刻替網站加上第一支 WebMCP Tool。 但我先把 Inspector 關掉。 不是它做錯了什麼，只是今…
WebMCP
AI Agent
JavaScript
Day 3｜一份 AI 看得懂的 UI Spec，至少要交代這 8 件事
2026 iThome 鐵人賽 Vibe Coding UI Day 3：安安～我是ChiYu～ 昨天我把成員管理頁拆成 Component、Pattern 和 Layout，總算能指出：「這次只改部門篩選，不動整張頁面。」 修改範圍有了，照理說可以叫 AI 開工了吧？ 還不行。因為我手上只剩下這句需求： …
Vibe Coding
UX/UI
Frontend
Day 2｜叫 AI 清理程式碼，為什麼常只清到表面？
2026 iThome 鐵人賽 AI CleanCode Day 2：安安～我是ChiYu～ 昨天，我真的把這句話交給了 Codex： 改善逾期處理，讓它符合 Clean Code。 Agent 最後交出一份看起來很成功的候選：能 Build、測試全綠，名稱更清楚，主要流程更短，Diff 也集中在逾期處理。…
AI Agent
Software Engineering
Software Architecture
Testing
Day 02｜換到全新資料夾後，網站還能不能跑？
2026 iThome 鐵人賽 WebMCP Day 2：安安～我是ChiYu～ 昨天才把完成版的 Agent trace 端上桌，今天我做的第一件事，卻是把它收起來。 我另外開了一個空資料夾，重新 git clone，沒有沿用原本的 node_modules，也不把環境裡 那些「反正我的電腦已經有」的東西…
WebMCP
AI Agent
JavaScript
Day 2｜這些東西到底叫什麼？Component、Pattern、Layout 與 Template
2026 iThome 鐵人賽 Vibe Coding UI Day 2：安安～我是ChiYu～ 昨天留下來的後台有一個很麻煩的問題。 我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品；真的要叫 AI 修改時，我卻只說得出：「那個東西幫我改一下。」 既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 L…
Vibe Coding
UX/UI
Frontend
Day 1｜第三個參賽系列：我為什麼還想寫 AI 時代的 Clean Code？
2026 iThome 鐵人賽 AI CleanCode Day 1：安安～我是ChiYu～ 前兩個 iThome 鐵人賽系列，我從七月就開始準備；進入九月前，稿件也都如期完成。 照理說，這時候應該可以先喘口氣。可是在整理那兩個系列的過程中，我一直惦記著另一個題目，甚至覺得它可能會比原本的規劃更有意思。 但…
AI Agent
Software Engineering
Software Architecture
Testing
Day 01｜網站真的會被 Agent 使用嗎？我先丟了一句自然語言
2026 iThome 鐵人賽 WebMCP Day 1：安安～我是ChiYu～ 今年我想拿一個很新的 Web API，做一件很老派的事：實際把它做完，再看看它到底有沒有 簡報上那麼神。 我先對 WebMCP Inspector 丟了一句很普通的需求： 幫我找台北、免費，而且適合入門者的活動。 沒有 Too…
WebMCP
AI Agent
JavaScript
Day 1｜AI 不是不會做，是你只說「做得好看一點」
2026 iThome 鐵人賽 Vibe Coding UI Day 1：安安～我是ChiYu～ 我把一句很有 Vibe Coding 味道的 Prompt 交給 AI： 幫我做一個現代、漂亮、好用的工作區成員管理後台。 這句話看起來有需求、有風格，甚至還很貼心地補了「好用」。 2026 年 7 月 24 …
Vibe Coding
UX/UI
Frontend
AI 寫得更快之後，我們該如何相信它？Uncle Bob 談 Agent 時代的軟體基本功
整理 Matt Pocock 與 Uncle Bob 的訪談重點，從 CRAP、變異測試、多 Agent 品質流水線，到我從 AI Coding 實作整理出的 CLEAN 五原則，思考工程師如何建立可驗證的信任。
AI Agent
Software Engineering
Software Architecture
Testing
從模糊需求到 Code Review：拆解 Matt Pocock Skills 的工程 Workflow
深入拆解 Matt Pocock Skills 如何從需求釐清、規格與 Tickets，一路接到 TDD 和雙軸 Code Review，並判斷這套 AI 工程 Workflow 適合哪些開發情境。
AI Agent
Claude Code
Software Engineering
Testing
Workflow Skill Router V2 正式版：把 SKILL 路由變成可驗證的 Codex 控制層
Workflow Skill Router V2 把原本寫在 SKILL.md 裡的路由習慣，整理成會先驗證能力、再選擇路徑的 Codex 控制層；開發者仍可用 Personal 與 Workspace Profile 管理自己的 Skill Tree。
AI Agent
Codex
Software Architecture
Open Source
NotebookLM 正式更名 Gemini Notebook：不只換名字，Google 的 AI 筆記本開始會「動手做」
Google 將 NotebookLM 正式更名為 Gemini Notebook。本文整理 Gemini App 與搜尋整合、安全雲端電腦、程式碼執行、代理式研究及多格式輸出，看看這次改名對研究工作流有什麼影響。
AI
NotebookLM
Gemini
Documentation
GPT-5.6 完整介紹：Sol、Terra、Luna 與快／中／高／極高／Pro 怎麼選？
完整解析 GPT-5.6 Sol、Terra、Luna 的定位、ChatGPT 推理模式、方案與產品入口差異、API 價格、額度限制及實際選擇策略。
AI
OpenAI
Codex
AI Agent
ChatGPT 與 Codex App 正式整合：一個 App 如何完成不同性質的 AI 任務？
Codex App 正式整合進新版 ChatGPT Desktop App。本文從 Codex 使用者角度解析 Chat、Work、Codex 的分工、資料邊界、方案差異與升級方式。
AI
OpenAI
Codex
AI Agent
Codex PPT Skill 實測筆記：把文章與課程內容變成圖片式簡報的 AI Agent 工作流
Codex PPT Skill 是一個把文章、報告、課程筆記與大綱轉成圖片式 PowerPoint 的 AI Agent SKILL。本文用實測教學簡報拆解它的流程、限制、10 種內建風格，以及我會推薦給哪些使用情境。
AI Agent
Codex
Presentation
Open Source
把本丸帶進 Codex App：用 Pet 功能讓小天使陪我上班
很多人想到 AI，會先想到效率、工作流程、模型和自動化。但這篇文章想記錄另一面：AI 其實也可以很溫馨，讓一張有記憶的照片，變成每天上班時安靜陪伴我的小身影。
AI Agent
Codex
OpenAI
Software Engineering
時隔四個月，我用 Codex 讓 MD2DOC-Evolution 變成更穩定的寫作工作台
時隔四個月，我重新整理 MD2DOC-Evolution，用 Codex 協助開發與重構，新增工作台 UI、AI Prompt、語法規格、匯出驗證與完整驗證流程，讓這個開源專案更穩定。
Codex
Markdown
Open Source
UX/UI
Workflow Skill Router：面對 Agent sprawl，先管住 SKILL 選擇
Workflow Skill Router 是我開源的 AI Agent SKILL routing pattern，讓多 SKILL Agent 在工作開始前先選出 1 個 Primary SKILL 與少量 Supporting SKILL，降低 Agent sprawl 裡的 skill selection sprawl、上下文噪音與工作流失控。
AI Agent
Codex
Software Engineering
Open Source
Codex App Worktree 實作篇：從 Local environments 到第一個任務
這是一篇 Codex App Worktree 操作篇，從 repo 前置整理、AGENTS.md、Local environments、setup scripts、actions、建立 Worktree thread 到驗證與收尾，整理一套可以照著做的 AI Agent 開發流程。
AI
AI Agent
Codex
Software Engineering
Codex App Worktree 思維：為什麼 AI Agent 開發需要隔離跑道
從 AI Agent 開發流程的角度說明 Codex App Worktree 的核心價值：它不是多一個資料夾，而是讓任務隔離、平行探索、審查與回復都變得更像工程流程。
AI
AI Agent
Codex
Software Engineering
AI 開發的核心能力：把模糊需求切成 Spec、MVP 與 Task
AI 讓工程師少寫了一部分程式碼，但也把真正的重心推到需求釐清、規格設計、MVP 切分與可推進任務管理。這篇文章整理 AI 開發時最核心的工作框架。
AI
AI Agent
Software Engineering
Vibe Coding
Flutter AI 學習 Day 7：從學習專案走向可交付品質
Flutter AI 學習 Day 7 回顧整個 Flutter Learning Lab，理解 CI、coverage、官方 sample checklist、打包發布概念，以及下一輪該補的品質能力。
Flutter
CI/CD
Testing
Codex
Flutter AI 學習 Day 6：用測試保護學習範例
Flutter AI 學習 Day 6 從 repository test、ViewModel test、widget test 看懂測試分層，並理解 fake repository 和 Riverpod override。
Flutter
Testing
Riverpod
Codex
Flutter AI 學習 Day 5：讓 App 記住使用者選擇
Flutter AI 學習 Day 5 透過 Settings feature 學 SharedPreferences、本地偏好與 ThemeMode，理解設定頁如何影響整個 MaterialApp。
Flutter
Settings
Storage
Codex
Flutter AI 學習 Day 4：Posts 列表背後的資料流
Flutter AI 學習 Day 4 從 Posts 列表一路追到 API，理解 View、ViewModel、Repository、Service 的資料流，並拆解 search、filter、pagination、debounce。
Flutter
Riverpod
Dio
Codex
Flutter AI 學習 Day 3：Form、Router 與 App Shell
Flutter AI 學習 Day 3 把單一表單畫面接回 App Shell，透過 go_router、ThemeData、Form、validator 與 ViewModel 理解 Flutter app 的骨架。
Flutter
Form
Router
Codex
Flutter AI 學習 Day 2：Everything is a Widget 不是口號
Flutter AI 學習 Day 2 從 Everything is a Widget 開始，透過首頁、基礎 Widget、狀態範例與 UI Kit，把巢狀括號翻成可理解的 Widget tree。
Flutter
Widget
Codex
AI Agent
Flutter AI 學習 Day 1：先看懂 Dart 與專案地圖
Flutter AI 學習 Day 1 的重點不是急著寫很多 UI，而是先讀懂 Dart 基礎、Flutter Learning Lab 的文件入口、app 啟動流程與專案地圖。
Flutter
Dart
Codex
AI Agent
AI 學習實驗室：如何透過 AI (Codex) 在一週內掌握 Flutter？
面對新工作的技術挑戰，我決定用一週時間，透過 AI (Codex) 從零開始學習 Flutter。這篇文章介紹我如何建立學習地圖、利用 AI 生成專案與文件，開啟這場高效學習實驗。
Flutter
Codex
AI Agent
【AI Agent 實戰 04】OpenAI GPT-5.5 官方提示詞指南：深度解析「建議提示詞結構」
本文聚焦 OpenAI 官方發布的 GPT-5.5 提示詞指南，深入解析模型的核心特質：推理效率優化與高可控性。並詳細拆解官方建議的「七大模組」提示詞結構，助你建構精準、穩定的 AI Agent 任務指令。
AI
OpenAI
Prompt Engineering
AI 戰術大進擊（下）：ChatGPT 與 Gemini 推薦的 8 支隊伍完整整理
這是《AI 戰術大進擊》系列下篇。我把 ChatGPT 與 Gemini 在《Pokémon Champions》Deep Research 任務中交出的 8 支隊伍完整整理成一份可直接對照的名單。
AI Agent
Prompt Engineering
Gemini
OpenAI
AI 戰術大進擊（中）：ChatGPT vs. Gemini，兩份報告真正差在哪裡？
這是《AI 戰術大進擊》系列中篇。這篇專門比較 ChatGPT 與 Gemini 在《Pokémon Champions》Deep Research 任務中的報告風格、優勢、弱點與思考姿態。
AI Agent
Prompt Engineering
Gemini
OpenAI
AI 戰術大進擊（上）：為什麼《Pokémon Champions》這麼適合拿來做 Deep Research？
這是《AI 戰術大進擊》系列上篇。我用《Pokémon Champions》當 Deep Research 測試題，拆解為什麼寶可夢這個 IP 特別適合拿來做 AI 推理、Meta 研究與規則型分析。
AI Agent
Prompt Engineering
Gemini
OpenAI
【AI Agent 實戰 03】寫出好的 Prompt 核心在於：消除模糊性
要寫出好的 Prompt，核心在於「消除模糊性」。本文分享撰寫優質 Prompt 的四大關鍵要素（CO-STAR / Role-Context-Task 框架），並透過資料庫效能調優的實戰案例，教你如何精準調教 AI。
AI
Prompt Engineering
當 AI 寫了 90% 的程式碼：資深開發者的「存在危機」與基本功的重生
面對 AI 能在兩個月內產出 30 萬行穩定程式碼的震撼，資深開發者該如何自處？我看完訪談五倍學院創辦人高見龍（龍哥）的影片 對於 AI 開發時代的焦慮、轉型與基本功價值的深刻體悟。
AI
LLM
Gao Jianlong
Software Engineering
【進階篇】AI 當你的助教：NotebookLM 學習卡與測驗，掌握「提取」的黃金時機
NotebookLM 的學習卡與測驗功能長得超像，選項也幾乎一樣，你是不是都亂點？本文深入分析這兩大功能的本質差異，並舉出 Git 基礎、系統架構、生產力方法論等多樣範例。教你如何設定數量與難易度，根據不同學習情境選擇最適合的「AI 助教」模式，讓知識真正刻進大腦！
AI
NotebookLM
2026 企業級 AI 導入全書：戰略藍圖、平台對決與資安防線建構指南
這是一份專為 2026 年 CIO/CTO 準備的 AI 導入全指南。從 ChatGPT、Claude、Gemini 的核心戰略對決，到企業最關心的資安治理、數據邊界與導入地雷，我們一次講清楚。
Enterprise AI
Claude
OpenAI
Gemini
SKILLS All-in-one 正式上線！我的 AI Agent 技能軍火庫功能大公開
SKILLS All-in-one 平台正式上線！這是一個專為 AI Agent 設計的技能整合平台，提供 100+ 專業 SOP 技能、模糊搜尋、一鍵打包下載與安全審計功能。快來建立屬於你的強大 AI 技能包！
AI Agent
Open Source
什麼是 AI Agent SKILL？定義 AI 時代的「能力封裝包」與實戰撰寫指南
在 AI Agent 的架構中，SKILL 是讓大語言模型（LLM）與現實世界互動的核心橋樑。本文詳細探討 AI Agent SKILL 的定義、標準結構規範 (v1.0)，並提供高品質 SKILL 的撰寫指南與 DDD 思維的應用。
AI
AI Agent
Software Engineering
【實戰篇】一眼看透技術全貌：NotebookLM 心智圖功能與架構梳理
面對數百頁的技術文件，腦袋快打結了嗎？教你如何利用 NotebookLM 的心智圖 (Knowledge Map) 功能，自動將散亂的知識點轉化為具備邏輯關聯的互動地圖。從宏觀視角掌握技術架構，讓你的學習不再只有斷章取義！
AI
NotebookLM
Knowledge Map
【實戰篇】技術分享的捷徑：NotebookLM 簡報功能全解析
要把複雜的技術文件變成簡報總是花掉你大半天？深度解析 NotebookLM 簡報 (Presentation) 功能，教你如何透過「詳細簡報」與「簡報投影片」兩種格式，搭配客製化 Prompt 快速產出高品質的分享大綱，讓你的技術分享不再痛苦！
AI
NotebookLM
Presentation
【實戰篇】讓技術文件「動」起來：NotebookLM 影片摘要初體驗
除了用聽的，現在技術文件還能用「看」的！深度解析 NotebookLM 影片摘要 (Video Overview) 的強大自訂功能。從白板到動漫風等多樣視覺風格，搭配客製化指令，一鍵將生硬文件轉化為高質感的教學短片。內附實戰示範影片！
AI
NotebookLM
【實戰篇】聽完就會！NotebookLM 語音摘要全攻略：打造專屬技術 Podcast
「聽」文件比「讀」文件更高效？深度解析 NotebookLM 語音摘要（Audio Overview）的自訂功能。從深入探索到辯論模式，教你如何透過客製化指令，將生硬的 Gemini CLI 技術文件變成精彩的技術 Podcast，讓學習變得更立體！
AI
NotebookLM
Gemini CLI
【實戰篇】從筆記本到工作室：NotebookLM Studio 工具概覽與產出策略
資料收集完後如何轉化為知識？帶你導覽 NotebookLM Studio 核心工具：Audio Overview 與 Study Guide 的實戰產出策略。讓原始資料 「變現」成你大腦能高效吸收的知識結晶！
AI
NotebookLM
【實戰篇】NotebookLM 來源品質控制：利用 Fast & Deep Research 打造高品質技術知識庫
想讓 NotebookLM 變聰明，得先學會怎麼「餵食」它。深度解析 Fast vs. Deep Research 功能，教你如何精準篩選高品質技術來源，打造準確率極高的個人技術知識庫！
AI
NotebookLM
【工具推薦】開發者的學習外掛：用 Google NotebookLM 三分鐘吞完 Gemini CLI 官方文件
官方文件太長看不完？教你利用 Google NotebookLM 快速解析 Gemini CLI 官方文件。三分鐘內提煉技術重點，讓 AI 筆記本成為你的學 習外掛，大幅縮短新技術上手時間！
AI
Gemini
NotebookLM
【開發實戰】從 Vibe Coding 進化到 CDD！我如何用 Gemini CLI Conductor 打造 MD2PPT-Evolution 簡報神器
體驗全新的 CDD (Conductor Driven Development) 開發模式！本文分享如何利用 Google Gemini CLI Conductor 指揮 AI，在極短時間內開發出具備手機遙控功能的 MD2PPT 簡報工具。
AI
Software Engineering
Gemini
Markdown