Day 04｜按鈕只多包一層，哪種 Playwright Locator 撐得住？
2026 iThome 鐵人賽 WebMCP Day 4：安安～我是ChiYu～ 昨天我把活動網站從搜尋一路走到取消報名，最後挑了風險最低的搜尋流程，準備交給 Playwright 重播。今天它正式接班：開啟頁面、填入 WebMCP、按下搜尋，再確認畫面出現 一場活動。 第一輪很順，四行程式碼就完成了。接著…
WebMCP
AI Agent
JavaScript
Archive
全部文章
這裡收斂所有已發布的技術文章。可以從最新內容往下讀，也可以先進系列或主題索引找脈絡。
143 篇已發布文章
最新更新 2026-09-23
適合想把一條學習線補完整的時候。
Topics 依主題探索從 AI 協作、後端、前端或工作流切入。
Projects 依專案閱讀從公開作品反查代表文章、技術棧與主題脈絡。
Pinned, then latest
全部文章
一般更新
前端開發
2026-08-05
6 分鐘閱讀
點閱 3
Day 03｜先別急著做 Tool，我把活動網站自己走了一遍
2026 iThome 鐵人賽 WebMCP Day 3：安安～我是ChiYu～ 昨天把專案切到固定 tag，Web、API、測試和 build 也都跑起來了。照這個進度，今天最容易 做的事情，就是立刻替網站加上第一支 WebMCP Tool。 但我先把 Inspector 關掉。 不是它做錯了什麼，只是今…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-05
9 分鐘閱讀
點閱 1
Day 4｜按鈕不只是藍色方塊：Button、Link 與操作元件
2026 iThome 鐵人賽 Vibe Coding UI Day 4：安安～我是ChiYu～ 昨天，我們整理出一張八格 UI Spec，終於可以把「好用一點」拆成資料、操作、狀態與驗收條件。今天準備拿它處理 LumenDesk 的第一個完整任務：邀請成員。 不過在正式拆 Button 與 Link 之前…
Vibe Coding
UX/UI
Frontend
一般更新
前端開發
2026-08-04
6 分鐘閱讀
點閱 0
Day 02｜換到全新資料夾後，網站還能不能跑？
2026 iThome 鐵人賽 WebMCP Day 2：安安～我是ChiYu～ 昨天才把完成版的 Agent trace 端上桌，今天我做的第一件事，卻是把它收起來。 我另外開了一個空資料夾，重新 git clone，沒有沿用原本的 node_modules，也沒有順手把 環境裡那些「反正我的電腦已經有」…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-04
6 分鐘閱讀
點閱 0
Day 3｜一份 AI 看得懂的 UI Spec，至少要交代這 8 件事
2026 iThome 鐵人賽 Vibe Coding UI Day 3：安安～我是ChiYu～ 昨天，我把成員管理頁拆成 Component、Pattern 和 Layout，總算能指出：「這次只改部門篩選，不動整張頁面。」 修改範圍有了，照理說可以叫 AI 開工了吧？ 還不行。因為我手上只剩下這句需求：…
Vibe Coding
UX/UI
Frontend
一般更新
前端開發
2026-08-03
12 分鐘閱讀
點閱 2
Day 01｜網站真的會被 Agent 使用嗎？我先丟了一句自然語言
2026 iThome 鐵人賽 WebMCP Day 1：安安～我是ChiYu～ 今年我想拿一個很新的 Web API，做一件很老派的事：實際把它做完，再看看它到底有沒有 簡報上那麼神。 我先對 WebMCP Inspector 丟了一句很普通的需求： 幫我找台北、免費，而且適合入門者的活動。 沒有 Too…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-03
8 分鐘閱讀
點閱 0
Day 2｜這些東西到底叫什麼？Component、Pattern、Layout 與 Template
2026 iThome 鐵人賽 Vibe Coding UI Day 2：安安～我是祈豫～ 昨天留下來的後台有一個很麻煩的問題。 我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品，但真的要叫 AI 修改時，我只說得出：「那個東西幫我改一下。」 既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 Lume…
Vibe Coding
UX/UI
Frontend
一般更新
前端開發
2026-08-02
10 分鐘閱讀
點閱 1
Day 1｜AI 不是不會做，是你只說「做得好看一點」
2026 iThome 鐵人賽 Vibe Coding UI Day 1：安安，我是 ChiYu！ 今年的第一篇，我想先從一句非常有 Vibe Coding 味道的 Prompt 開始。 這句話看起來有講需求、有講風格，甚至還很貼心地補了「好用」： 幫我做一個現代、漂亮、好用的工作區成員管理後台。 我在 2…
Vibe Coding
UX/UI
Frontend
一般更新
AI 協作
2026-07-22
7 分鐘閱讀
點閱 6
NotebookLM 正式更名 Gemini Notebook：不只換名字，Google 的 AI 筆記本開始會「動手做」
Google 將 NotebookLM 正式更名為 Gemini Notebook。本文整理 Gemini App 與搜尋整合、安全雲端電腦、程式碼執行、代理式研究及多格式輸出，看看這次改名對研究工作流有什麼影響。
AI
NotebookLM
Gemini
Documentation
一般更新
AI 協作
2026-07-10
13 分鐘閱讀
點閱 130
GPT-5.6 完整介紹：Sol、Terra、Luna 與快／中／高／極高／Pro 怎麼選？
完整解析 GPT-5.6 Sol、Terra、Luna 的定位、ChatGPT 推理模式、方案與產品入口差異、API 價格、額度限制及實際選擇策略。
AI
OpenAI
Codex
AI Agent