Day 15｜同一區域怎麼切換內容？Tabs、Accordion、Disclosure 與 Segmented Control
2026 iThome 鐵人賽 Vibe Coding UI Day 15：安安～我是ChiYu～ 昨天，我把帳號申請頁上的 Breadcrumb、Stepper、Pagination 和進度資訊分開後，總算不會再用一條藍線回答所有問題。結果文章才剛收尾，工作區設定又送來一排看起來很整齊的 Tabs。 先把…
Vibe Coding
UX/UI
Frontend
Archive
全部文章
這裡收斂所有已發布的技術文章。可以從最新內容往下讀，也可以先進系列或主題索引找脈絡。
143 篇已發布文章
最新更新 2026-09-23
適合想把一條學習線補完整的時候。
Topics 依主題探索從 AI 協作、後端、前端或工作流切入。
Projects 依專案閱讀從公開作品反查代表文章、技術棧與主題脈絡。
Pinned, then latest
全部文章
一般更新
前端開發
2026-08-15
4 分鐘閱讀
點閱 0
Day 13｜第一次用 Inspector 測 Agent，先遇到 Gemini API 額度不足
2026 iThome 鐵人賽 WebMCP Day 13：安安～我是ChiYu～ 前天讓 HTML 表單透過 Declarative API 描述自己，昨天再用 Imperative API 管理動態 Tool 的註冊與解除。Chrome 已經看得到 Tool，網站端的生命週期也補好了。準備這麼久，今天總…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-15
11 分鐘閱讀
點閱 0
Day 14｜使用者走到哪裡了？Breadcrumb、Pagination、Stepper、Progress 與頁內導覽
2026 iThome 鐵人賽 Vibe Coding UI Day 14：安安～我是ChiYu～ 昨天把桌面和手機的導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五類「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少…
Vibe Coding
UX/UI
Frontend
一般更新
前端開發
2026-08-14
13 分鐘閱讀
點閱 0
Day 13｜手機版不是把 Sidebar 縮小：Header、Navbar、Sidebar 與 Bottom Navigation 怎麼分工
2026 iThome 鐵人賽 Vibe Coding UI Day 13：安安～我是ChiYu～ 昨天，我把邀請成員和建立活動的流程接了起來。想說順手切到手機尺寸看一下，瀏覽器才剛縮到 360px，桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫面。 內容區已經快被擠成收據了，它還站得筆直。 …
Vibe Coding
UX/UI
Frontend
一般更新
前端開發
2026-08-14
6 分鐘閱讀
點閱 0
Day 12｜什麼是 Imperative API？用 JavaScript 控制 Tool 的註冊與解除
2026 iThome 鐵人賽 WebMCP Day 12：安安～我是ChiYu～ 昨天介紹的 Declarative API 很適合表單：只要替既有 HTML 補上標註，瀏覽器就能整理出 Tool 契約。表單待在頁面上，Tool 也跟著待在頁面上，兩邊的生命週期幾乎黏在一起。 但活動詳情不是一張等著送出的…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-13
7 分鐘閱讀
點閱 0
Day 11｜什麼是 Declarative API？讓 HTML 表單成為 WebMCP Tool
2026 iThome 鐵人賽 WebMCP Day 11：安安～我是ChiYu～ 昨天打開 Inspector 後，Chrome 終於把目前頁面的 Tool 列了出來。面板裡有名稱、 description，還有一大段 input schema。 看到 catalog 當然很開心，但我很快又卡在下一個問題…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-12
5 分鐘閱讀
點閱 0
Day 10｜什麼是 WebMCP Inspector？從安裝、設定到看見網站 Tool
2026 iThome 鐵人賽 WebMCP Day 10：安安～我是ChiYu～ 昨天才把五支 Tool 的名單定下來，今天要把紙上的 catalog 搬進真實 Chrome。不過在打開 面板以前，得先回答一個最基本的問題：WebMCP Inspector 到底是什麼？ WebMCP Inspector …
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-12
10 分鐘閱讀
點閱 0
Day 11｜表單錯了，怎麼帶人修回來？從 Label 到 Validation Summary 的修正路徑
2026 iThome 鐵人賽 Vibe Coding UI Day 11：安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。可是我把活動名稱留空、Email 填錯，再按下「發布」，整份表單只亮起幾個紅框。為了排除活動頁自己的問題，我又把前幾天完成的「新增成員」表單抓回來重測，原始需求同樣…
Vibe Coding
UX/UI
Frontend
一般更新
前端開發
2026-08-11
5 分鐘閱讀
點閱 0
Day 09｜網站該公開哪些 WebMCP Tool？從操作盤點到五支正式能力
2026 iThome 鐵人賽 WebMCP Day 9：安安～我是ChiYu～ 昨天才把 click_blue_search_button 請出 catalog，我差點又用同一套方法，把剩下的按鈕 全部包成 Tool。 我先把網站上看得到的操作列出來：展開篩選器、切換頁籤、查看詳情、收藏、關閉 dialo…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-11
10 分鐘閱讀
點閱 0
Day 10｜檔案不是選完就好：上傳流程的完整狀態
2026 iThome 鐵人賽 Vibe Coding UI Day 10：安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工。 幫我做一個漂亮的檔案上傳區，要能拖進去。 昨天結尾留下的，就是這個版…
Vibe Coding
UX/UI
Frontend