從模糊需求到 Code Review：拆解 Matt Pocock Skills 的工程 Workflow
深入拆解 Matt Pocock Skills 如何從需求釐清、規格與 Tickets，一路接到 TDD 和雙軸 Code Review，並判斷這套 AI 工程 Workflow 適合哪些開發情境。
AI Agent
Claude Code
Software Engineering
Testing
Archive
全部文章
這裡收斂所有已發布的技術文章。可以從最新內容往下讀，也可以先進系列或主題索引找脈絡。
適合想把一條學習線補完整的時候。
Topics 依主題探索從 AI 協作、後端、前端或工作流切入。
Projects 依專案閱讀從公開作品反查代表文章、技術棧與主題脈絡。
Pinned, then latest
全部文章
Day 08｜WebMCP Tool 該怎麼設計？把「點按鈕」改成「搜尋活動」
2026 iThome 鐵人賽 WebMCP Day 8：安安～我是ChiYu～ 昨天才把二十道測試題出好，今天輪到我寫第一份答案。我從最單純的搜尋活動開始，打開 頁面，看著那顆藍色的「搜尋活動」按鈕，很順手地寫下： 有一說一，這個名字很好懂，懂到連自動化測試都知道下一步要按哪裡。問題是，我現在設計 的是給…
WebMCP
AI Agent
JavaScript
Day 9｜輸入日期、選時間還是看整月？五種日期時間元件怎麼選
2026 iThome 鐵人賽 Vibe Coding UI Day 9：安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。 昨天結尾留下的，就是這張同時身兼四職的 Calendar。 活動日期找它…
Vibe Coding
UX/UI
Frontend
Day 07｜Agent 偶爾答對還不夠，我先出二十道測試題
2026 iThome 鐵人賽 WebMCP Day 7：安安～我是ChiYu～ 昨天把 E0～E5 的證據等級排好後，我正準備動手寫第一支 WebMCP Tool，卻發現順序好像反了。 如果連「怎樣才算做對」都還沒說清楚，Tool 寫完之後，我很可能只挑一個最聽話的 Prompt， 看到 Agent 成功…
WebMCP
AI Agent
JavaScript
Day 8｜數值要輸入、拖曳還是評分？六種數值控制的選型
2026 iThome 鐵人賽 Vibe Coding UI Day 8：安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。 我把需求濃縮成一句…
Vibe Coding
UX/UI
Frontend
Day 06｜Playwright、REST API、MCP 與 WebMCP，各自負責哪一段？
2026 iThome 鐵人賽 WebMCP Day 6：安安～我是ChiYu～ 昨天 Playwright 因為按鈕改名而停在 click 以前。看到這個結果，很容易順手得出一個省事的 結論：「Browser Automation 太脆弱，換 WebMCP 就好了。」 有一說一，這個結論下得太快。Play…
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 05｜只改按鈕四個字，Playwright 為什麼停在 click 以前？
2026 iThome 鐵人賽 WebMCP Day 5：安安～我是ChiYu～ 昨天我在搜尋按鈕外面多包一層元素，getByRole() 仍然順利找到它。這讓我留下另一個問題： 外層結構改了沒事，那按鈕名稱改了呢？ 今天我真的只改四個字，把「搜尋活動」換成「探索場次」。活動資料沒變，submit hand…
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｜輸入文字也有分工：Text Field、Textarea、Password 與 Search
2026 iThome 鐵人賽 Vibe Coding UI Day 5：安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題已經排好隊等我了。 帳號、密碼、搜尋和備註，一人分到一個長方形輸入框。AI…
Vibe Coding
UX/UI
Frontend