Day 19｜點資料表一列後，不一定要跳 Modal：Drawer、Sheet 與 Bottom Sheet
2026 iThome 鐵人賽 Vibe Coding UI Day 19：安安～我是ChiYu～ 昨天，我用 Escape 取消了「停用林子安」這個危險動作。帳號保住了，管理員也沒有因此下班，反而接著問： 那我可以先看一下林子安的部門、角色和目前專案嗎？ 很合理。停用帳號以前先把資料看完，總比按下去之後才…
Vibe Coding
UX/UI
Frontend
Archive
全部文章
這裡收斂所有已發布的技術文章。可以從最新內容往下讀、切換成依點閱數排序，也可以先進系列或主題索引找脈絡。
213 篇已發布文章
最新更新 2026-11-03
適合想把一條學習線補完整的時候。
Topics 依主題探索從 AI 協作、後端、前端或工作流切入。
Projects 依專案閱讀從公開作品反查代表文章、技術棧與主題脈絡。
Pinned, then latest
全部文章
一般更新
AI 協作
2026-09-18
17 分鐘閱讀
點閱 0
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
一般更新
前端開發
2026-09-18
6 分鐘閱讀
點閱 0
Day 18｜活動服務暫時失敗時，Agent 應該重試還是停下來？
2026 iThome 鐵人賽 WebMCP Day 18：安安～我是ChiYu～ 昨天才把成功 payload 收乾淨，今天我就準備把活動 API 暫時弄壞。 原本的計畫很單純：封鎖活動詳情 API，讓 get_event_details 收到暫時失敗，再看 Agent 能不能 回答「可以稍後重試」。結果…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-09-18
9 分鐘閱讀
點閱 0
Day 18｜彈窗要不要鎖住背景？Modal、Non-modal、Alert Dialog 與危險確認
2026 iThome 鐵人賽 Vibe Coding UI Day 18：安安～我是ChiYu～ 專案結構整理清楚後，我按下成員列上的「停用帳號」。畫面中央立刻出現一張白色卡片，後面有灰色遮罩，右下角還放了一顆紅色按鈕。 看起來非常像完成品。 下面是依照第一版問題重建的錯誤現場，不含真實帳號與個人資料： …
Vibe Coding
UX/UI
Frontend
一般更新
AI 協作
2026-09-17
20 分鐘閱讀
點閱 0
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
一般更新
前端開發
2026-09-17
5 分鐘閱讀
點閱 0
Day 17｜Tool 回太少做不完，回太多又把內部資料倒給 Agent
2026 iThome 鐵人賽 WebMCP Day 17：安安～我是ChiYu～ 昨天的 get_event_details 終於不用再猜 current，可以從目前頁面找到正確活動。照理說， 接下來只要把資料交給 Agent，讓它整理完就收工。 結果我一看 Tool result，新的問題馬上排隊進場：…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-09-17
10 分鐘閱讀
點閱 0
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
一般更新
AI 協作
2026-09-16
17 分鐘閱讀
點閱 0
Day 16｜兩個通知 Provider 都能編譯，為什麼還不能證明可以互相替換？
2026 iThome 鐵人賽 AI CleanCode Day 16：安安～我是ChiYu～ 昨天把服務等級與派工政策分開後，今天我在共同通知介面後方，再放入一個 Queued Provider。Provider 就是負責實際送出通知的替代實作。 Demo 與 Queued 都能實作同一個 Interfa…
AI Agent
Software Engineering
Software Architecture
Testing
一般更新
前端開發
2026-09-16
8 分鐘閱讀
點閱 4
Day 16｜Agent 怎麼知道「我現在看的活動」是哪一場？
2026 iThome 鐵人賽 WebMCP Day 16：安安～我是ChiYu～ 昨天的 search_events 已經找到「WebMCP 入門工作坊」，還順便帶回一個不透明的活動 ID： evt-webmcp-intro。今天我沿著搜尋結果進入詳情頁，準備問下一個很自然的問題： 請整理我現在看的活動名…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-09-16
11 分鐘閱讀
點閱 0
Day 16｜選一個值，還是執行命令？Select、Menu、Overflow Menu 與 Command Palette
2026 iThome 鐵人賽 Vibe Coding UI Day 16：安安～我是ChiYu～ 工作區設定整理完後，我回到專案列表。最後一欄只放了一顆三點按鈕，展開後依序出現： 進行中、編輯、刪除。 畫面排得很整齊，行為卻像一道突襲測驗。 「進行中」會保存任務狀態；「編輯」應該開啟編輯介面；「刪除」則可…
Vibe Coding
UX/UI
Frontend